cleanup color tokens; RTL support

nuxt-themes · Apr 17, 2023 · ad1e778 · ad1e778
1 parent 6db5dce
commit ad1e778
Show file tree

Hide file tree

Showing 21 changed files with 178 additions and 133 deletions.
diff --git a/.docs/content/0.index.md b/.docs/content/0.index.md
@@ -6,7 +6,7 @@ main:
   fluid: false
 ---
 
-:ellipsis{right=0px width=75% blur=150px}
+<!-- :ellipsis{right=0px width=75% blur=150px} -->
 
 ::block-hero
 ---
@@ -47,7 +47,7 @@ Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.o
   ::
 ::
 
-::card-grid
+::card-grid{cols=6 gap=1rem}
 #title
 What's included
 
@@ -56,43 +56,60 @@ What's included
 
 #default
   ::card{icon=logos:nuxt-icon}
+  ---
+  col: 3
+  row: 2
+  show: true
+  ---
   #title
   Nuxt Architecture
   #description
   Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem.
   ::
 
   ::card{icon=IconNuxtStudio}
+  ---
+  col: 3
+  ---
   #title
   Nuxt Studio ready
   #description
   Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
   ::
 
   ::card{icon=logos:vue}
+  ---
+  col: 2
+  ---
   #title
   Vue Components
   #description
   Use built-in components (or your own!) inside your content.
   ::
 
   ::card{icon=simple-icons:markdown}
+  ---
+  col: 2
+  ---
   #title
   Write Markdown
   #description
   Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
   ::
 
   ::card{icon=noto:rocket}
+  ---
+  col: 2
+  ---
   #title
   Deploy anywhere
   #description
   Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com).
   ::
 
-  ::card{icon=noto:puzzle-piece}
+  ::card
   #title
-  Extensible.
+  Extensible
   #description
   Customize the whole design, or add components using slots - you can make Docus your own.
   ::

diff --git a/.docs/content/2.api/1.components.md b/.docs/content/2.api/1.components.md
@@ -25,7 +25,7 @@ Discover every component you can use in your content.
     ::
   ::
 
-  ```md [Code]
+  ```md [MDC]
   ::alert{type="info"}
   Check out an **info** alert with `code` and a [link](/).
   ::

diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
@@ -115,7 +115,7 @@ css({
           width: '{space.4}',
           height: '{space.4}',
           fill: 'currentcolor',
-          marginRight: '{space.2}',
+          marginInlineEnd: '{space.2}',
         },
       },
 
@@ -145,11 +145,11 @@ css({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-end',
-        // marginLeft: 'calc(0px - {space.4})',
+        // marginInlineStart: 'calc(0px - {space.4})',
 
         '@sm': {
           gridColumn: 'span 3 / span 3',
-          marginRight: 'calc(0px - {space.4})',
+          marginInlineEnd: 'calc(0px - {space.4})',
         },
 
         '.icon-link': {

diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -25,6 +25,7 @@ defineProps({
 
       <div class="section right">
         <AppSearch v-if="hasDocSearch" />
+        <ToggleDirection />
         <ThemeSelect />
         <div class="social-icons">
           <AppSocialIcons />
@@ -82,7 +83,7 @@ css({
       '&.left': {
         gridColumn: 'span 4 / span 4',
         '@lg': {
-          marginLeft: 0
+          marginInlineStart: 0
         },
       },
       '&.center': {
@@ -97,7 +98,7 @@ css({
         justifyContent: 'flex-end',
         alignItems: 'center',
         flex: 'none',
-        marginRight: 'calc(0px - {space.4})',
+        marginInlineEnd: 'calc(0px - {space.4})',
         '.social-icons': {
           display: 'none',
           '@md': {

diff --git a/components/app/AppHeaderDialog.vue b/components/app/AppHeaderDialog.vue
@@ -47,7 +47,8 @@ css({
     position: 'relative',
     zIndex: '10',
     display: 'flex',
-    padding: '{space.4} {space.4} {space.4} 0',
+    padding: '{space.4}',
+    paddingInlineStart: '0px',
     '@lg': {
       display: 'none'
     },
@@ -69,10 +70,10 @@ css({
     display: 'flex',
     alignItems: 'flex-start',
     overflowY: 'auto',
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    backgroundColor: 'rgba({temp.color.white}, 0.5)',
     backdropFilter: '{elements.backdrop.filter}',
     '@dark': {
-      backgroundColor: 'rgba(0, 0, 0, 0.5)'
+      backgroundColor: 'rgba({temp.color.black}, 0.5)'
     },
     '@lg': {
       display: 'none'

diff --git a/components/app/AppHeaderNavigation.vue b/components/app/AppHeaderNavigation.vue
@@ -54,7 +54,7 @@ css({
       truncate: true,
 
       '& > * + *': {
-        marginLeft: '{space.2}'
+        marginInlineStart: '{space.2}'
       },
 
       li: {

diff --git a/components/app/AppLoadingBar.vue b/components/app/AppLoadingBar.vue
@@ -81,7 +81,7 @@ onBeforeUnmount(() => clear)
     }"
     :style="{
       width: `${data.percent}%`,
-      left: data.left,
+      insetInlineStart: data.left,
       opacity: data.show ? 1 : 0,
       backgroundSize: `${(100 / data.percent) * 100}% auto`,
     }"
@@ -94,8 +94,8 @@ css({
     height: '{docus.loadingBar.height}',
     position: 'fixed',
     top: '0px',
-    left: '0px',
-    right: '0px',
+    insetInlineStart: '0px',
+    insetInlineEnd: '0px',
     width: '0%',
     opacity: 1,
     transition: 'width 0.1s, height 0.4s, opacity 0.4s',

diff --git a/components/app/DocumentDrivenNotFound.vue b/components/app/DocumentDrivenNotFound.vue
@@ -68,8 +68,8 @@ css({
       '.content': {
         '.text-section': {
           borderColor: '{color.gray.200}',
-          borderLeftStyle: 'solid',
-          borderLeftWidth: '1px',
+          borderInlineStartStyle: 'solid',
+          borderInlineStartWidth: '1px',
           border: 'none',
 
           '@dark': {
@@ -78,9 +78,9 @@ css({
 
           '@sm': {
             borderColor: '{color.gray.200}',
-            borderLeftStyle: 'solid',
-            borderLeftWidth: '1px',
-            paddingLeft: '{space.6}'
+            borderInlineStartStyle: 'solid',
+            borderInlineStartWidth: '1px',
+            paddingInlineStart: '{space.6}'
           },
 
           h1: {

diff --git a/components/app/Ellipsis.vue b/components/app/Ellipsis.vue
@@ -12,7 +12,7 @@ defineProps({
   },
   zIndex: {
     type: String,
-    default: '10'
+    default: '0'
   },
   top: {
     type: String,

diff --git a/components/app/ThemeSelect.vue b/components/app/ThemeSelect.vue
@@ -12,9 +12,9 @@ const onClick = () => {
 <template>
   <button aria-label="Color Mode" @click="onClick">
     <ColorScheme placeholder="...">
-      <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />
-      <Icon v-else-if="colorMode.preference === 'light'" name="uil:sun" />
-      <Icon v-else name="uil:desktop" />
+      <Icon v-if="colorMode.preference === 'dark'" name="ph:moon-fill" />
+      <Icon v-else-if="colorMode.preference === 'light'" name="ph:sun-dim-fill" />
+      <Icon v-else name="ph:desktop-fill" />
     </ColorScheme>
   </button>
 </template>

diff --git a/components/app/ToggleDirection.vue b/components/app/ToggleDirection.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const direction = useTextDirection()
+const onClick = () => {
+  direction.value = direction.value === 'ltr' ? 'rtl' : 'ltr'
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <button aria-label="Text direction" @click="onClick">
+      <Icon v-if="direction === 'ltr'" name="fluent:text-direction-horizontal-right-24-regular" />
+      <Icon v-if="direction === 'rtl'" name="fluent:text-direction-horizontal-left-24-regular" />
+    </button>
+  </ClientOnly>
+</template>
+
+<style lang="ts" scoped>
+css({
+  button: {
+    display: 'flex',
+    padding: '{space.4}',
+    color: '{color.gray.500}',
+    '@dark': {
+      color: '{color.gray.400}'
+    },
+    '&:hover': {
+      color: '{color.gray.700}',
+      '@dark': {
+        color: '{color.gray.200}',
+      }
+    },
+  }
+})
+</style>
diff --git a/components/docs/DocsAside.vue b/components/docs/DocsAside.vue
@@ -29,7 +29,7 @@ css({
       height: '{space.4}'
     },
     '.text': {
-      marginLeft: '{space.2}'
+      marginInlineStart: '{space.2}'
     }
   }
 })

diff --git a/components/docs/DocsAsideTree.vue b/components/docs/DocsAsideTree.vue
@@ -126,7 +126,7 @@ css({
         margin: '{space.8} 0',
       },
       '&.bordered': {
-        borderLeft: '1px solid {elements.border.primary.static}',
+        borderInlineStart: '1px solid {elements.border.primary.static}',
         '&:hover': {
           borderColor: '{elements.border.primary.hover}'
         },
@@ -137,10 +137,10 @@ css({
           },
         },
         '.has-children &': {
-          paddingLeft: '{space.4}',
+          paddingInlineStart: '{space.4}',
         },
         '&.has-parent-icon': {
-          marginLeft: '{space.2}'
+          marginInlineStart: '{space.2}'
         }
       }
     },
@@ -149,8 +149,8 @@ css({
       li: {
         margin: '0',
         '&.has-children': {
-          borderLeft: '1px solid transparent',
-          marginLeft: '{space.4}',
+          borderInlineStart: '1px solid transparent',
+          marginInlineStart: '{space.4}',
         },
       },
     },
@@ -173,7 +173,7 @@ css({
         '.icon': {
           width: '{space.5}',
           height: '{space.5}',
-          marginRight: '{space.2}'
+          marginInlineEnd: '{space.2}'
         }
       },
       '.collapsible-icon': {
@@ -205,7 +205,7 @@ css({
         }
       },
       '&.padded': {
-        paddingLeft: '{space.4}'
+        paddingInlineStart: '{space.4}'
       },
       '&.active': {
         color: '{color.primary.500}',
@@ -218,7 +218,7 @@ css({
       '.icon': {
         width: '{space.4}',
         height: '{space.4}',
-        marginRight: '{space.1}'
+        marginInlineEnd: '{space.1}'
       }
     }
   }

diff --git a/components/docs/DocsPageBottom.vue b/components/docs/DocsPageBottom.vue
@@ -30,7 +30,8 @@ css({
     flexDirection: 'row',
     gap: '{space.4}',
     marginTop: '{space.8}',
-    fontSize: '{fontSize.sm}',
+    fontSize: '{text.sm.fontSize}',
+    lineHeight: '{text.sm.lineHeight}',
     color: '{color.gray.500}',
     '@dark': {
       color: '{color.gray.400}'

diff --git a/components/docs/DocsPageLayout.vue b/components/docs/DocsPageLayout.vue
@@ -135,9 +135,9 @@ css({
       alignSelf: 'flex-start',
       height: 'calc(100vh - {docus.header.height})',
       py: '{docus.docs.page.layout.spacing}',
-      paddingRight: '{docus.docs.page.layout.spacing}',
+      paddingInlineEnd: '{docus.docs.page.layout.spacing}',
       '.fluid &&': {
-        borderRight: '1px solid {elements.border.primary.static}',
+        borderInlineEnd: '1px solid {elements.border.primary.static}',
       }
     }
   },
@@ -214,12 +214,13 @@ css({
     '@lg': {
       mx: 0,
       alignSelf: 'flex-start',
-      padding: '{docus.docs.page.layout.spacing} 0 {docus.docs.page.layout.spacing} {docus.docs.page.layout.spacing}',
+      padding: '{docus.docs.page.layout.spacing}',
+      paddingInlineEnd: '0px',
       height: 'calc(100vh - {docus.header.height})',
       maxHeight: 'none',
       borderBottom: 'none',
       '.fluid &&': {
-        borderLeft: '1px solid {elements.border.primary.static}',
+        borderInlineStart: '1px solid {elements.border.primary.static}',
       }
     },
     '.toc-wrapper': {
@@ -248,7 +249,7 @@ css({
           fontSize: '{text.sm.fontSize}',
           lineHeight: '{text.sm.lineHeight}',
           fontWeight: '{fontWeight.semibold}',
-          marginRight: '{space.1}',
+          marginInlineEnd: '{space.1}',
         },
         '.icon': {
           width: '{space.4}',