diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index a30a93953..ed393b203 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -150,8 +150,6 @@ jobs: version: ${{ needs.check-version.outputs.version }} steps: - uses: actions/checkout@v6 - with: - submodules: recursive - name: Setup NodeJS uses: actions/setup-node@v6 with: diff --git a/.github/workflows/regular-checks-docs.yml b/.github/workflows/regular-checks-docs.yml index d515abc65..8081cb5e6 100644 --- a/.github/workflows/regular-checks-docs.yml +++ b/.github/workflows/regular-checks-docs.yml @@ -14,8 +14,6 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v6 - with: - submodules: recursive - name: Setup NodeJS uses: actions/setup-node@v6 with: diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index 743d03ef3..000000000 --- a/.gitmodules +++ /dev/null @@ -1,3 +0,0 @@ -[submodule "docs/.theme/prebuild/.prebuild"] - path = docs/.theme/prebuild/.prebuild - url = https://github.com/mouseless/prebuild.git diff --git a/docs/.theme/app/assets/_default.scss b/docs/.theme/app/assets/_default.scss deleted file mode 100644 index 8b574c7d7..000000000 --- a/docs/.theme/app/assets/_default.scss +++ /dev/null @@ -1,154 +0,0 @@ -@use "mixins" as *; -@use "variables" as *; - -@import url("./primary.css") (prefers-color-scheme: dark); -@import url("./secondary.css") (prefers-color-scheme: light); - -html, body { - margin: 0; - padding: 0; - height: 100%; -} - -body { - font-size: calc($font-size * 1.2); - min-width: calc($width-page-min + $space-md); -} - -#__nuxt { - display: flex; - flex-direction: column; - height: 100%; -} - -img.baked { - &:is(.logo), - &:is(.logo:is(.full)) { - content: $url-logo-full; - - &:is(.mono) { - content: $url-logo-full-mono; - } - } - - &:is(.logo:is(.mark)) { - content: $url-logo-mark; - - &:is(.mono) { - content: $url-logo-mark-mono; - } - } -} - -.content { - nav { - h4 { - margin-top: 0; - margin-bottom: $space-xs; - text-transform: uppercase; - - a { - color: $color-fg-second; - text-decoration: none; - display: inline-block; - - &:hover { - color: $color-fg-second; - } - } - } - } - - h1, h2, h3, h4, h5, h6 { - & > code { - font-size: smaller; - } - } - - p { - &:has(.diagram) { - @include box; - border-color: $color-bg-second; - text-align: center; - padding: 30px $space-sm 18px $space-sm; - } - } - - code { - background-color: $color-bg-code; - border-radius: $space-xs; - padding: calc($space-xs/2) $space-xs; - color: $color-fg-code; - overflow-wrap: anywhere; - font-size: smaller; - } - - pre { - overflow: auto; - padding: $space-sm; - - code { - padding: 0; - background-color: transparent; - display: block; - max-width: 0; - - span { - line-height: 1.5em; - } - } - } - - ul, ol { - padding-inline-start: $space-sm; - list-style-position: inside; - - li { - margin-bottom: $space-xs; - - ul, ol { - margin-top: $space-xs; - } - } - } - - hr { - @include border(); - - margin: 2em 0; - } -} - -@media (max-width: $width-page-xl) { - body { - font-size: $font-size; - line-height: $line-height; - } - - .content { - pre code { - line-height: 1em; - } - } -} - -@media (max-width: $width-page-l) { - .content { - h2, h3 { - scroll-margin-top: $space-md; - } - } - - nav { - h4 { - a { - cursor: pointer; - padding: $space-sm; - - &:hover { - color: $color-brand; - } - } - } - } -} diff --git a/docs/.theme/app/assets/_mixins.scss b/docs/.theme/app/assets/_mixins.scss deleted file mode 100644 index 68b5a8737..000000000 --- a/docs/.theme/app/assets/_mixins.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use "sass:list" as *; -@use "variables" as *; - -@mixin border($properties...) { - @if length($properties) == 0 { - $properties: top, left, bottom, right; - } - - @each $property in $properties { - border-#{$property}: solid 2px $color-bg-second; - } -} - -@mixin radius($properties...) { - @if length($properties) == 0 { - $properties: top, bottom; - } - - @each $property in $properties { - border-#{$property}: { - left-radius: $border-radius; - right-radius: $border-radius; - } - } -} - -@mixin box { - background-color: $color-bg-box; - @include radius(); -} - -@mixin width { - max-width: calc($width-page - $width-tolerance); - box-sizing: border-box; - min-width: $width-page-min; - - @media (max-width: $width-page-xl) { - max-width: calc($width-page - $width-tolerance); - } - - @media (max-width: $width-page-l) { - max-width: calc($width-page - $width-side - $width-tolerance); - } - - @media (max-width: $width-page-m) { - max-width: calc($width-page - (2 * $width-side) - $width-content-margin - $width-tolerance); - } - - @media (max-width: $width-page-s) { - max-width: 82%; - } -} diff --git a/docs/.theme/app/assets/_variables.scss b/docs/.theme/app/assets/_variables.scss deleted file mode 100644 index f3d30c556..000000000 --- a/docs/.theme/app/assets/_variables.scss +++ /dev/null @@ -1,61 +0,0 @@ -:root { - --width-content: 100ch; - --font-size: 16px; - --border-radius: var(--space-xs); -} - -$border-radius: var(--border-radius); - -$color-brand: var(--color-logo-mark); - -$color-bg: var(--color-bg); -$color-bg-second: var(--color-bg-soft); -$color-bg-third: var(--color-bg-mute); -$color-bg-nav: var(--color-bg-soft); -$color-bg-nav-active: var(--color-bg-soft); -$color-bg-box: var(--color-bg-box); -$color-bg-code: var(--color-bg-soft); - -$color-bg-table-nth-child: var(--color-bg-soft); - -$color-box-danger: var(--color-red-600); -$color-box-default: var(--color-fg); -$color-box-info: var(--color-blue-0); -$color-box-tip: var(--color-green-n1); -$color-box-warning: var(--color-orange-n1); - -$color-fg: var(--color-fg); -$color-fg-heading: var(--color-logo-text); -$color-fg-second: var(--color-fg-soft); -$color-fg-third: var(--color-fg-mute); -$color-fg-code: var(--color-fg-soft); - -$space-xs: var(--space-xs); -$space-sm: var(--space-sm); -$space-md: var(--space-md); -$space-lg: var(--space-lg); -$space-xl: var(--space-xl); - -$font-default: var(--font-default); -$font-heading: var(--font-heading); -$font-size: var(--font-size); - -$height-logo: var(--height-logo); - -$line-height: var(--line-height); - -$url-logo-full: var(--url-logo-full); -$url-logo-full-mono: var(--url-logo-full-mono); -$url-logo-mark: var(--url-logo-mark); -$url-logo-mark-mono: var(--url-logo-mark-mono); - -$width-content: var(--width-content); -$width-content-margin: $space-md; -$width-side: 15em; -$width-tolerance: 50px; -$width-page: calc($width-content + (2 * $width-side) + $width-content-margin + $width-tolerance); -$width-page-xl: 1880px + $width-tolerance; -$width-page-l: 1480px + $width-tolerance; -$width-page-m: 1280px + $width-tolerance; -$width-page-s: 980px + $width-tolerance; -$width-page-min: 270px; diff --git a/docs/.theme/app/assets/components.css b/docs/.theme/app/assets/components.css new file mode 100644 index 000000000..36f5d38d7 --- /dev/null +++ b/docs/.theme/app/assets/components.css @@ -0,0 +1,213 @@ +@reference "./theme.css"; + +@layer utilities { + html, + body { + @apply m-0 p-0 h-full; + } + + body { + @apply + text-(length:--font-body) + min-w-(--min-width-body) + max-xl:text-(length:--font-size) max-xl:leading-(--line-height); + } + + #__nuxt { + @apply flex flex-col h-full; + } + + nav { + h4 a { + @apply max-lg:cursor-pointer max-lg:p-sm; + + &:hover { + @apply max-lg:text-brand; + } + } + + .matrix { + @apply inline; + } + } + + /* COLUMN */ + .c--column:has(img.prose:only-child) { + @apply max-md:hidden; + } + + /* FULL */ + .c--full .doc { + @apply justify-center max-lg:flex-row! max-lg:ml-0!; + + .c--inner-content { + @apply w-page mx-0 max-sm:w-full; + + h1+h2 { + @apply mt-[-0.5em]; + } + + h1, h2 { + @apply leading-[1.2em]; + } + + h1 { + @apply text-red-0; + } + + h2 { + @apply text-red-n3; + } + + h3 { + @apply text-red-n1; + } + + a:not(.external) { + @apply + bg-darkgreen-700 text-gray-200 hover:text-green-0 + inline-block px-sm py-xs rounded-xs no-underline; + + &:not(:first-child) { + @apply ml-xs; + } + } + } + } + + /* LOGO */ + img.baked:is(.logo), + img.baked:is(.logo:is(.full)) { + @apply content-(--url-logo-full); + } + + img.baked:is(.logo):is(.mono), + img.baked:is(.logo:is(.full)):is(.mono) { + @apply content-(--url-logo-full-mono); + } + + img.baked:is(.logo:is(.mark)) { + @apply content-(--url-logo-mark); + } + + img.baked:is(.logo:is(.mark)):is(.mono) { + @apply content-(--url-logo-mark-mono); + } + + /* INNER CONTENT */ + .c--inner-content { + h1, h2, h3, h4, h5, h6 { + > code { + @apply text-[smaller]; + } + } + + h2, h3 { + @apply max-lg:scroll-mt-md; + } + + code { + @apply bg-bg-code rounded-xs px-xs py-xs-half text-fg-code wrap-anywhere text-[smaller]; + + .line { + @apply block; + } + } + + pre { + @apply overflow-auto p-sm; + + code { + @apply p-0 bg-transparent block max-w-0 max-xl:leading-[1em]; + + span { + @apply leading-[1.5em]; + } + } + } + + ul, ol { + @apply ps-sm list-inside; + } + + ul { + @apply list-disc; + + ul { + @apply list-[circle]; + } + } + + ol { + @apply list-decimal; + } + + li { + @apply mb-xs; + + ul, ol { + @apply mt-xs; + } + } + + hr { + @apply border-2 border-solid border-bg-second my-[2em]; + } + } + + /* OUTER CONTENT */ + .c--outer-content { + @apply grid grid-rows-[65px_1fr] grid-cols-(--width-side); + grid-template-areas: + "side content" + "side content"; + + nav h4 { + @apply mt-0 mb-xs uppercase; + + a { + @apply text-fg-second no-underline inline-block; + + &:hover { + @apply text-fg-second; + } + } + } + + .side { + @apply max-md:col-end-[content]!; + grid-area: side; + } + + article { + @apply max-md:col-start-[side]!; + grid-area: content; + } + } + + /* PROSE TABLE */ + .c--prose-table { + * { + @apply text-left; + } + + tr { + td, th { + @apply p-sm; + } + + th { + @apply bg-(--color-bg-table-nth-child); + } + + &:nth-child(even) td { + @apply bg-(--color-bg-table-nth-child); + } + } + } + + /* SIDE */ + .c--side li:not(:first-child) a::before { + @apply content-[">\00A0"] text-brand font-bold; + } +} \ No newline at end of file diff --git a/docs/.theme/app/assets/styles.scss b/docs/.theme/app/assets/styles.scss deleted file mode 100644 index a6c1a2b04..000000000 --- a/docs/.theme/app/assets/styles.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use '_variables.scss'; -@use '_mixins.scss'; -@use '_default.scss'; diff --git a/docs/.theme/app/assets/theme.css b/docs/.theme/app/assets/theme.css new file mode 100644 index 000000000..8424301f7 --- /dev/null +++ b/docs/.theme/app/assets/theme.css @@ -0,0 +1,381 @@ +@import "https://brand.mouseless.codes/assets/css/default.css"; +@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" layer(theme); +@import "tailwindcss/preflight" layer(base); +@import "tailwindcss/theme" layer(theme); +@import "tailwindcss/utilities" layer(utilities); +@import "./primary.css" (prefers-color-scheme: dark); +@import "./secondary.css" (prefers-color-scheme: light); + +:root { + --width-content: 100ch; + --font-size: 16px; + --border-radius: var(--space-xs); + + --color-brand: var(--color-logo-mark); + + --color-bg-second: var(--color-bg-soft); + --color-bg-third: var(--color-bg-mute); + --color-bg-nav: var(--color-bg-soft); + --color-bg-nav-active: var(--color-bg-soft); + --color-bg-box: var(--color-darkgreen-800); + --color-bg-code: var(--color-bg-soft); + + --color-fg-heading: var(--color-logo-text); + --color-fg-second: var(--color-fg-soft); + --color-fg-third: var(--color-fg-mute); + --color-fg-code: var(--color-fg-soft); + + --color-bg-table-nth-child: var(--color-bg-soft); + + --color-box-danger: var(--color-red-600); + --color-box-default: var(--color-fg); + --color-box-info: var(--color-blue-0); + --color-box-tip: var(--color-green-n1); + --color-box-warning: var(--color-orange-n1); + + --color-dark-link: var(--color-darkgreen-900); + --color-dark-link-hover: var(--color-red-700); + --color-dark-box-bg: var(--color-darkgreen-800); + --color-dark-text-heading: var(--color-black); + --color-dark-text-normal: var(--color-darkgreen-900); + --color-dark-text-highlight: var(--color-red-700); + --color-dark-text-mute: var(--color-gray-300); + + --color-light-link: var(--color-gray-100); + --color-light-link-hover: var(--color-green-500); + --color-light-box-bg: var(--color-darkgreen-800); + --color-light-text-heading: var(--color-white); + --color-light-text-normal: var(--color-gray-400); + --color-light-text-highlight: var(--color-green-500); + --color-light-text-mute: var(--color-darkgreen-800); + + --color-mermaid-primary: var(--color-red-500); + --color-mermaid-primary-text: var(--color-gray-100); + --color-mermaid-primary-border: var(--color-red-600); + --color-mermaid-primary-line: var(--color-gray-300); + --color-mermaid-secondary: var(--color-darkgreen-900); + --color-mermaid-secondary-text: var(--color-gray-200); + --color-mermaid-secondary-border: var(--color-darkgreen-900); + --color-mermaid-tertiary: var(--color-darkgreen-700); + --color-mermaid-fill1: var(--color-darkgreen-600); + + --height-logo: 30px; + + --max-height-list: calc(100vh-10rem); + --min-width-body: calc(var(--width-page-min)+var(--space-md)); + + --page-xl: 1930px; + --page-l: 1530px; + --page-m: 1330px; + --page-s: 1030px; + --page-min: 270px; + --page: calc(100ch + 30em + var(--space-md) + 50px); + + --width-tolerance: 50px; + --width-side: 15em; + --width-content-margin: var(--space-md); + --width-page: calc(var(--width-content) + (2 * var(--width-side)) + var(--width-content-margin) + var(--width-tolerance)); + --width-page-xl: calc(var(--width-page) - var(--width-tolerance)); + --width-page-l: calc(var(--width-page) - var(--width-side) - var(--width-tolerance)); + --width-page-m: calc(var(--width-page) - (2 * var(--width-side)) - var(--width-content-margin) - var(--width-tolerance)); + --width-page-s: 82%; + --width-page-min: 270px; + --width-nav-side: calc(var(--width-page-min) - var(--space-md)); + + --link-active-pb-md: calc(var(--space-sm) + 2px); + --link-active-pb-xl: calc(var(--space-sm) + 1px); + --link-active-pl-max-md: calc(var(--space-sm) + 20px); + + --font-body: calc(var(--font-size)*1.2); + --font-h1: 3em; + --font-h2: 2em; + --font-h3: 1.75em; + --font-h4: 1.5em; + --font-h5: 1.25em; + --font-h6: 1.1em; +} + +@media (max-width: 1599px) { + :root { + --font-size: 16px; + --height-logo: 20px; + } +} + +@media (max-width: 904px) { + :root { + --font-xl: 1.125em; + --font-lg: 1.0675m; + --font-md: 1em; + --font-sm: 0.875em; + --font-xs: 0.75em; + + --font-h1: 2.5em; + --font-h2: 1.75em; + --font-h3: 1.5em; + --font-h4: 1.25em; + --font-h5: 1.1em; + --font-h6: 1em; + } +} + +@theme { + /* ----------- */ + /* breakpoints */ + /* ----------- */ + --breakpoint-*: initial; + --breakpoint-xl: 1930px; /* var(--page-xl); /* doesn't work */ + --breakpoint-lg: 1530px; /* var(--page-l); /* doesn't work */ + --breakpoint-md: 1330px; /* var(--page-m); /* doesn't work */ + --breakpoint-sm: 1030px; /* var(--page-s); /* doesn't work */ + + /* ----- */ + /* color */ + /* ----- */ + --color-*: initial; + + --color-white: var(--color-white); + --color-black: var(--color-black); + --color-brand: var(--color-brand); + --color-red-100: var(--color-red-100); + --color-red-200: var(--color-red-200); + --color-red-300: var(--color-red-300); + --color-red-400: var(--color-red-400); + --color-red-500: var(--color-red-500); + --color-red-600: var(--color-red-600); + --color-red-700: var(--color-red-700); + --color-red-800: var(--color-red-800); + --color-red-900: var(--color-red-900); + --color-darkgreen-100: var(--color-darkgreen-100); + --color-darkgreen-200: var(--color-darkgreen-200); + --color-darkgreen-300: var(--color-darkgreen-300); + --color-darkgreen-400: var(--color-darkgreen-400); + --color-darkgreen-500: var(--color-darkgreen-500); + --color-darkgreen-600: var(--color-darkgreen-600); + --color-darkgreen-700: var(--color-darkgreen-700); + --color-darkgreen-800: var(--color-darkgreen-800); + --color-darkgreen-900: var(--color-darkgreen-900); + --color-yellow-100: var(--color-yellow-100); + --color-yellow-200: var(--color-yellow-200); + --color-yellow-300: var(--color-yellow-300); + --color-yellow-400: var(--color-yellow-400); + --color-yellow-500: var(--color-yellow-500); + --color-yellow-600: var(--color-yellow-600); + --color-yellow-700: var(--color-yellow-700); + --color-yellow-800: var(--color-yellow-800); + --color-yellow-900: var(--color-yellow-900); + --color-orange-100: var(--color-orange-100); + --color-orange-200: var(--color-orange-200); + --color-orange-300: var(--color-orange-300); + --color-orange-400: var(--color-orange-400); + --color-orange-500: var(--color-orange-500); + --color-orange-600: var(--color-orange-600); + --color-orange-700: var(--color-orange-700); + --color-orange-800: var(--color-orange-800); + --color-orange-900: var(--color-orange-900); + --color-blue-100: var(--color-blue-100); + --color-blue-200: var(--color-blue-200); + --color-blue-300: var(--color-blue-300); + --color-blue-400: var(--color-blue-400); + --color-blue-500: var(--color-blue-500); + --color-blue-600: var(--color-blue-600); + --color-blue-700: var(--color-blue-700); + --color-blue-800: var(--color-blue-800); + --color-blue-900: var(--color-blue-900); + --color-green-100: var(--color-green-100); + --color-green-200: var(--color-green-200); + --color-green-300: var(--color-green-300); + --color-green-400: var(--color-green-400); + --color-green-500: var(--color-green-500); + --color-green-600: var(--color-green-600); + --color-green-700: var(--color-green-700); + --color-green-800: var(--color-green-800); + --color-green-900: var(--color-green-900); + --color-gray-100: var(--color-gray-100); + --color-gray-200: var(--color-gray-200); + --color-gray-300: var(--color-gray-300); + --color-gray-400: var(--color-gray-400); + --color-gray-500: var(--color-gray-500); + --color-gray-600: var(--color-gray-600); + --color-gray-700: var(--color-gray-700); + --color-gray-800: var(--color-gray-800); + --color-gray-900: var(--color-gray-900); + + --color-logo-mark: var(--color-logo-mark); + --color-logo-text: var(--color-logo-text); + + --color-bg-box: var(--color-bg-box); + --color-fg-box: var(--color-fg-box); + + --color-bg-second: var(--color-bg-second); + --color-bg-third: var(--color-bg-third); + + --color-bg-nav: var(--color-bg-nav); + --color-bg-nav-active: var(--color-bg-nav-active); + + --color-bg-code: var(--color-bg-code); + + --color-bg: var(--color-bg); + --color-bg-soft: var(--color-bg-soft); + --color-bg-mute: var(--color-bg-mute); + + --color-fg: var(--color-fg); + --color-fg-soft: var(--color-fg-soft); + --color-fg-mute: var(--color-fg-mute); + --color-fg-second: var(--color-fg-second); + --color-fg-third: var(--color-fg-third); + --color-fg-heading: var(--color-fg-heading); + --color-fg-code: var(--color-fg-code); + + --color-red-n4: var(--color-red-n4); + --color-red-n3: var(--color-red-n3); + --color-red-n2: var(--color-red-n2); + --color-red-n1: var(--color-red-n1); + --color-red-0: var(--color-red-0); + --color-red-p1: var(--color-red-p1); + --color-red-p2: var(--color-red-p2); + --color-red-p3: var(--color-red-p3); + --color-red-p4: var(--color-red-p4); + + --color-darkgreen-n4: var(--color-darkgreen-n4); + --color-darkgreen-n3: var(--color-darkgreen-n3); + --color-darkgreen-n2: var(--color-darkgreen-n2); + --color-darkgreen-n1: var(--color-darkgreen-n1); + --color-darkgreen-0: var(--color-darkgreen-0); + --color-darkgreen-p1: var(--color-darkgreen-p1); + --color-darkgreen-p2: var(--color-darkgreen-p2); + --color-darkgreen-p3: var(--color-darkgreen-p3); + --color-darkgreen-p4: var(--color-darkgreen-p4); + + --color-yellow-n4: var(--color-yellow-n4); + --color-yellow-n3: var(--color-yellow-n3); + --color-yellow-n2: var(--color-yellow-n2); + --color-yellow-n1: var(--color-yellow-n1); + --color-yellow-0: var(--color-yellow-0); + --color-yellow-p1: var(--color-yellow-p1); + --color-yellow-p2: var(--color-yellow-p2); + --color-yellow-p3: var(--color-yellow-p3); + --color-yellow-p4: var(--color-yellow-p4); + + --color-orange-n4: var(--color-orange-n4); + --color-orange-n3: var(--color-orange-n3); + --color-orange-n2: var(--color-orange-n2); + --color-orange-n1: var(--color-orange-n1); + --color-orange-0: var(--color-orange-0); + --color-orange-p1: var(--color-orange-p1); + --color-orange-p2: var(--color-orange-p2); + --color-orange-p3: var(--color-orange-p3); + --color-orange-p4: var(--color-orange-p4); + + --color-blue-n4: var(--color-blue-n4); + --color-blue-n3: var(--color-blue-n3); + --color-blue-n2: var(--color-blue-n2); + --color-blue-n1: var(--color-blue-n1); + --color-blue-0: var(--color-blue-0); + --color-blue-p1: var(--color-blue-p1); + --color-blue-p2: var(--color-blue-p2); + --color-blue-p3: var(--color-blue-p3); + --color-blue-p4: var(--color-blue-p4); + + --color-green-n4: var(--color-green-n4); + --color-green-n3: var(--color-green-n3); + --color-green-n2: var(--color-green-n2); + --color-green-n1: var(--color-green-n1); + --color-green-0: var(--color-green-0); + --color-green-p1: var(--color-green-p1); + --color-green-p2: var(--color-green-p2); + --color-green-p3: var(--color-green-p3); + --color-green-p4: var(--color-green-p4); + + --color-gray-n4: var(--color-gray-n4); + --color-gray-n3: var(--color-gray-n3); + --color-gray-n2: var(--color-gray-n2); + --color-gray-n1: var(--color-gray-n1); + --color-gray-0: var(--color-gray-0); + --color-gray-p1: var(--color-gray-p1); + --color-gray-p2: var(--color-gray-p2); + --color-gray-p3: var(--color-gray-p3); + --color-gray-p4: var(--color-gray-p4); + + --color-dark-link: var(--color-dark-link); + --color-dark-link-hover: var(--color-dark-link-hover); + --color-dark-box-bg: var(--color-dark-box-bg); + --color-dark-text-heading: var(--color-dark-text-heading); + --color-dark-text-normal: var(--color-dark-text-normal); + --color-dark-text-highlight: var(--color-dark-text-highlight); + --color-dark-text-mute: var(--color-dark-text-mute); + + --color-light-link: var(--color-light-link); + --color-light-link-hover: var(--color-light-link-hover); + --color-light-box-bg: var(--color-light-box-bg); + --color-light-text-heading: var(--color-light-text-heading); + --color-light-text-normal: var(--color-light-text-normal); + --color-light-text-highlight: var(--color-light-text-highlight); + --color-light-text-mute: var(--color-light-text-mute); + + /* ---- */ + /* font */ + /* ---- */ + --font-*: initial; + + --font-default: var(--font-default); + --font-heading: var(--font-heading); + + /* ---- */ + /* text */ + /* ---- */ + --text-*: initial; + + --text-xs: var(--font-xs); + --text-sm: var(--font-sm); + --text-md: var(--font-md); + --text-lg: var(--font-lg); + --text-xl: var(--font-xl); + + --text-h1: var(--font-h1); + --text-h2: var(--font-h2); + --text-h3: var(--font-h3); + --text-h4: var(--font-h4); + --text-h5: var(--font-h5); + --text-h6: var(--font-h6); + + /* ------- */ + /* spacing */ + /* ------- */ + --spacing-xs: var(--space-xs); + --spacing-xs-half: calc(var(--space-xs) / 2); + --spacing-sm: var(--space-sm); + --spacing-md: var(--space-md); + --spacing-lg: var(--space-lg); + --spacing-xl: var(--space-xl); + --spacing-content: var(--width-content); + --spacing-content-margin: var(--width-content-margin); + --spacing-tolerance: var(--width-tolerance); + --spacing-side: var(--width-side); + --spacing-page: var(--width-page); + --spacing-page-xl: var(--width-page-xl); + --spacing-page-l: var(--width-page-l); + --spacing-page-m: var(--width-page-m); + --spacing-page-s: var(--width-page-s); + --spacing-page-min: var(--width-page-min); + --spacing-nav-side: var(--width-nav-side); + + /* ------- */ + /* radius */ + /* ------- */ + --radius: var(--border-radius); + --radius-xs: var(--space-xs); + --radius-sm: var(--space-sm); + --radius-md: var(--space-md); + --radius-lg: var(--space-lg); + --radius-xl: var(--space-xl); + + /* ------- */ + /* shadow */ + /* ------- */ + --shadow-xs: var(--space-xs); + --shadow-sm: var(--space-sm); + --shadow-md: var(--space-md); + --shadow-lg: var(--space-lg); + --shadow-xl: var(--space-xl); +} diff --git a/docs/.theme/app/components/Banner.vue b/docs/.theme/app/components/Banner.vue index 099c333be..f4cbbbf21 100644 --- a/docs/.theme/app/components/Banner.vue +++ b/docs/.theme/app/components/Banner.vue @@ -1,5 +1,5 @@ diff --git a/docs/.theme/app/components/BottomNavigation.vue b/docs/.theme/app/components/BottomNavigation.vue index 0e994c76c..3684d4ce9 100644 --- a/docs/.theme/app/components/BottomNavigation.vue +++ b/docs/.theme/app/components/BottomNavigation.vue @@ -1,20 +1,30 @@ \ No newline at end of file diff --git a/docs/.theme/app/components/Side.vue b/docs/.theme/app/components/Side.vue index ba4d88d2a..bc97f4c84 100644 --- a/docs/.theme/app/components/Side.vue +++ b/docs/.theme/app/components/Side.vue @@ -1,14 +1,39 @@