chore[DST-127]: replace fill colors with text colors (#3261)

marigold-ui · Aug 10, 2023 · 9a19dba · 9a19dba · vercel · Aug 10, 2023
1 parent 52d08fd
commit 9a19dba
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/.changeset/cold-mayflies-dream.md b/.changeset/cold-mayflies-dream.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/theme-b2b": patch
+---
+
+chore[DST-131]: replace fill colors with text colors
diff --git a/docs/content/components/content/icon/icon-fill.demo.tsx b/docs/content/components/content/icon/icon-fill.demo.tsx
@@ -1,3 +1,3 @@
 import { DesignTicket } from '@marigold/icons';
 
-export default () => <DesignTicket className="fill-fill-info" />;
+export default () => <DesignTicket className="text-text-info" />;
diff --git a/docs/content/components/overlay/tooltip/tooltip-basic.demo.tsx b/docs/content/components/overlay/tooltip/tooltip-basic.demo.tsx
@@ -4,7 +4,7 @@ import { Info } from '@marigold/icons';
 export default () => (
   <Tooltip.Trigger>
     <Button>
-      <Info className="fill-fill-info" />
+      <Info className="text-text-info" />
     </Button>
     <Tooltip>Tooltip</Tooltip>
   </Tooltip.Trigger>

diff --git a/themes/theme-b2b/src/components/Label.styles.ts b/themes/theme-b2b/src/components/Label.styles.ts
@@ -3,6 +3,6 @@ import { ThemeComponent, cva } from '@marigold/system';
 export const Label: ThemeComponent<'Label'> = {
   container: cva('group-disabled/field:text-text-disabled text-sm '),
   indicator: cva(
-    'group-required/field:fill-fill-required group-required/field:block'
+    'group-required/field:text-text-required group-required/field:block'
   ),
 };
diff --git a/themes/theme-b2b/src/components/Message.styles.ts b/themes/theme-b2b/src/components/Message.styles.ts
@@ -21,9 +21,9 @@ export const Message: ThemeComponent<'Message'> = {
   icon: cva('h-4 w-4', {
     variants: {
       variant: {
-        warning: 'text-fill-warning',
-        info: 'text-fill-info',
-        error: 'text-fill-error',
+        warning: 'text-text-warning',
+        info: 'text-text-info',
+        error: 'text-text-error',
       },
     },
   }),

diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts
@@ -110,8 +110,13 @@ export const colors = {
 
     // State
     disabled: brand.secondary[400],
-    error: red[500],
     hover: brand.secondary[800],
+
+    // Status
+    error: red[500],
+    info: blue[500],
+    warning: yellow[500],
+    required: red[500],
   },
 
   // Background
@@ -209,14 +214,4 @@ export const colors = {
     // Status
     error: red[500],
   },
-
-  // Fill
-  // ---------------
-  fill: {
-    // Status
-    required: red[500],
-    error: red[500],
-    info: blue[500],
-    warning: yellow[500],
-  },
 };