feat: add light color for text

jbaubree · Jul 28, 2023 · c31a2b6 · c31a2b6
1 parent e0202d9
commit c31a2b6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -17,9 +17,9 @@
     })()
   </script>
 </head>
-<body class="font-sans antialiased bg-white transition-colors dark:bg-dark-900 dark:text-light-500">
+<body class="font-sans antialiased bg-white text-dark-500 transition-colors dark:bg-black dark:text-light-500">
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
   <noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript>
 </body>
-</html>
+</html>
diff --git a/src/components/text/UText.vue b/src/components/text/UText.vue
@@ -20,9 +20,10 @@ const { primaryColor } = useAppTheme()
 
 const config = computed(() => merge({}, useAppUi().text, props.ui))
 const buttonClass = computed(() => {
-  const color = config.value.color?.[props.color] || config.value.color?.[primaryColor.value] || config.value.text
+  const color = config.value.color?.[props.color] || config.value.color?.[primaryColor.value] || config.value.color.default
   return classNames(
     color.replaceAll('{color}', props.color),
+    config.value.color.base,
     config.value.size,
     config.value.font,
   )

diff --git a/src/components/text/text.ts b/src/components/text/text.ts
@@ -1,15 +1,17 @@
 import type { Color } from '~/types'
 
 export const text = {
-  text: 'text-{color}-500 dark:text-{color}-400',
   font: 'font-400',
   size: 'text-13px',
   color: {
+    base: 'transition-colors',
+    default: 'text-{color}-500 dark:text-{color}-400',
     fluo: 'text-{color}-700 dark:text-{color}-400',
     cyan: 'text-{color}-700 dark:text-{color}-400',
     yellow: 'text-{color}-700 dark:text-{color}-400',
     silver: 'text-{color}-700 dark:text-{color}-400',
     dark: 'text-dark-500 dark:text-light-500',
+    light: 'text-dark-200 dark:text-light-700',
   },
   default: {
     color: 'dark' as Color,