up

Author: benjamincanac

Diff for: src/runtime/index.css

@@ -6,7 +6,7 @@
 
 @layer base {
   body {
-    @apply antialiased text-(--ui-text) bg-(--ui-bg) scheme-light dark:scheme-dark;
+    @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
   }
 
   :root, .light {
@@ -52,84 +52,3 @@
     --ui-border-inverted: var(--color-white);
   }
 }
-
-@utility text-dimmed {
-  @apply text-(--ui-text-dimmed);
-}
-@utility text-muted {
-  @apply text-(--ui-text-muted);
-}
-@utility text-toned {
-  @apply text-(--ui-text-toned);
-}
-@utility text-default {
-  @apply text-(--ui-text);
-}
-@utility text-highlighted {
-  @apply text-(--ui-text-highlighted);
-}
-@utility text-inverted {
-  @apply text-(--ui-text-inverted);
-}
-
-@utility bg-default {
-  @apply bg-(--ui-bg);
-}
-@utility bg-muted {
-  @apply bg-(--ui-bg-muted);
-}
-@utility bg-elevated {
-  @apply bg-(--ui-bg-elevated);
-}
-@utility bg-accented {
-  @apply bg-(--ui-bg-accented);
-}
-@utility bg-inverted {
-  @apply bg-(--ui-bg-inverted);
-}
-
-@utility border-default {
-  @apply border-(--ui-border);
-}
-@utility border-muted {
-  @apply border-(--ui-border-muted);
-}
-@utility border-accented {
-  @apply border-(--ui-border-accented);
-}
-@utility border-inverted {
-  @apply border-(--ui-border-inverted);
-}
-
-@utility ring-default {
-  @apply ring-(--ui-border);
-}
-@utility ring-muted {
-  @apply ring-(--ui-border-muted);
-}
-@utility ring-accented {
-  @apply ring-(--ui-border-accented);
-}
-@utility ring-inverted {
-  @apply ring-(--ui-border-inverted);
-}
-
-@utility divide-default {
-  @apply divide-(--ui-border);
-}
-@utility divide-muted {
-  @apply divide-(--ui-border-muted);
-}
-@utility divide-accented {
-  @apply divide-(--ui-border-accented);
-}
-@utility divide-inverted {
-  @apply divide-(--ui-border-inverted);
-}
-
-@utility outline-inverted {
-  @apply outline-(--ui-border-inverted);
-}
-@utility stroke-inverted {
-  @apply stroke-(--ui-border-inverted);
-}

Diff for: src/templates.ts

@@ -99,6 +99,30 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
   --radius-xl: calc(var(--ui-radius) * 3);
   --radius-2xl: calc(var(--ui-radius) * 4);
   --radius-3xl: calc(var(--ui-radius) * 6);
+  --text-color-dimmed: var(--ui-text-dimmed);
+  --text-color-muted: var(--ui-text-muted);
+  --text-color-toned: var(--ui-text-toned);
+  --text-color-default: var(--ui-text);
+  --text-color-highlighted: var(--ui-text-highlighted);
+  --text-color-inverted: var(--ui-text-inverted);
+  --background-color-default: var(--ui-bg);
+  --background-color-muted: var(--ui-bg-muted);
+  --background-color-elevated: var(--ui-bg-elevated);
+  --background-color-accented: var(--ui-bg-accented);
+  --background-color-inverted: var(--ui-bg-inverted);
+  --background-color-border: var(--ui-border);
+  --border-color-default: var(--ui-border);
+  --border-color-muted: var(--ui-border-muted);
+  --border-color-accented: var(--ui-border-accented);
+  --border-color-inverted: var(--ui-border-inverted);
+  --border-color-bg: var(--ui-bg);
+  --ring-color-default: var(--ui-border);
+  --ring-color-muted: var(--ui-border-muted);
+  --ring-color-accented: var(--ui-border-accented);
+  --ring-color-inverted: var(--ui-border-inverted);
+  --outline-color-inverted: var(--ui-border-inverted);
+  --stroke-color-inverted: var(--ui-border-inverted);
+  --fill-color-default: var(--ui-border);
 }
 `
   })