work

atelier-saulx · Sep 6, 2024 · 1f3d912 · 1f3d912
1 parent dcf1e70
commit 1f3d912
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 70 deletions.
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -28,18 +28,18 @@
   --red-20: #ed313133;
   --red-10: #ed31311a;
   --red-5: #ed31310d;
-  --amber-100: #eb980a;
-  --amber-80: #eb980acc;
-  --amber-60: #eb980a99;
-  --amber-20: #eb980a33;
-  --amber-10: #eb980a1a;
-  --amber-5: #eb980a0d;
-  --indigo-100: #6366f1;
-  --indigo-80: #6366f1cc;
-  --indigo-60: #6366f199;
-  --indigo-20: #6366f133;
-  --indigo-10: #6366f11a;
-  --indigo-5: #6366f10d;
+  --orange-100: #eb980a;
+  --orange-80: #eb980acc;
+  --orange-60: #eb980a99;
+  --orange-20: #eb980a33;
+  --orange-10: #eb980a1a;
+  --orange-5: #eb980a0d;
+  --blue-100: #6366f1;
+  --blue-80: #6366f1cc;
+  --blue-60: #6366f199;
+  --blue-20: #6366f133;
+  --blue-10: #6366f11a;
+  --blue-5: #6366f10d;
   --green-100: #0fa976;
   --green-80: #0fa976cc;
   --green-60: #0fa97699;
@@ -82,18 +82,18 @@
   --red-20: #ef444433;
   --red-10: #ef44441a;
   --red-5: #ef44440d;
-  --amber-100: #f59e0b;
-  --amber-80: #f59e0bcc;
-  --amber-60: #f59e0b99;
-  --amber-20: #f59e0b33;
-  --amber-10: #f59e0b1a;
-  --amber-5: #f59e0b0d;
-  --indigo-100: #7c7ef4;
-  --indigo-80: #7c7ef4cc;
-  --indigo-60: #7c7ef499;
-  --indigo-20: #7c7ef433;
-  --indigo-10: #7c7ef41a;
-  --indigo-5: #7c7ef40d;
+  --orange-100: #f59e0b;
+  --orange-80: #f59e0bcc;
+  --orange-60: #f59e0b99;
+  --orange-20: #f59e0b33;
+  --orange-10: #f59e0b1a;
+  --orange-5: #f59e0b0d;
+  --blue-100: #7c7ef4;
+  --blue-80: #7c7ef4cc;
+  --blue-60: #7c7ef499;
+  --blue-20: #7c7ef433;
+  --blue-10: #7c7ef41a;
+  --blue-5: #7c7ef40d;
   --green-100: #10b981;
   --green-80: #10b981cc;
   --green-60: #10b98199;

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -20,9 +20,9 @@ export const Default = {
         'neutral',
         'inverted',
         'red',
-        'indigo',
+        'blue',
         'green',
-        'amber',
+        'orange',
       ].map((color) => (
         <Avatar
           src="https://public.linear.app/9fa6f7a2-5e7d-4fb8-af60-d35ba4592b2c/2bd65f8b-2f43-4b01-95fb-170bdd1a1280/368af3c7-dc76-4729-a5a6-3809399c312a"

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -3,7 +3,7 @@ import { radius } from '../../utils/radius.js'
 
 type AvatarProps = {
   src: string
-  color?: 'neutral' | 'inverted' | 'red' | 'amber' | 'indigo' | 'green'
+  color?: 'neutral' | 'inverted' | 'red' | 'orange' | 'blue' | 'green'
   size?: 'regular' | 'small'
 }
 
@@ -59,11 +59,11 @@ function Avatar({ src, color, size = 'regular' }: AvatarProps) {
         ...(color === 'red' && {
           border: `2px solid ${colors.red100}`,
         }),
-        ...(color === 'amber' && {
-          border: `2px solid ${colors.amber100}`,
+        ...(color === 'orange' && {
+          border: `2px solid ${colors.orange100}`,
         }),
-        ...(color === 'indigo' && {
-          border: `2px solid ${colors.indigo100}`,
+        ...(color === 'blue' && {
+          border: `2px solid ${colors.blue100}`,
         }),
         ...(color === 'green' && {
           border: `2px solid ${colors.green100}`,

diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -17,7 +17,7 @@ export const Default = {
       }}
     >
       {['subtle', 'fill'].map((variant) =>
-        ['neutral', 'red', 'indigo', 'green', 'amber', 'inverted', 'white'].map(
+        ['neutral', 'red', 'blue', 'green', 'orange', 'inverted', 'white'].map(
           (color) =>
             [{}, { leadIcon: 'arrow-up' }, { trailIcon: 'arrow-up' }].map(
               (icon) => (

diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
@@ -11,12 +11,12 @@ type BadgeProps = {
     | 'neutral-fill'
     | 'red-subtle'
     | 'red-fill'
-    | 'indigo-subtle'
-    | 'indigo-fill'
+    | 'blue-subtle'
+    | 'blue-fill'
     | 'green-subtle'
     | 'green-fill'
-    | 'amber-subtle'
-    | 'amber-fill'
+    | 'orange-subtle'
+    | 'orange-fill'
     | 'white-subtle'
     | 'white-fill'
     | 'inverted-subtle'
@@ -58,12 +58,12 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
             background: colors.green100,
             color: colors.white100,
           }),
-          ...(color === 'indigo-fill' && {
-            background: colors.indigo100,
+          ...(color === 'blue-fill' && {
+            background: colors.blue100,
             color: colors.white100,
           }),
-          ...(color === 'amber-fill' && {
-            background: colors.amber100,
+          ...(color === 'orange-fill' && {
+            background: colors.orange100,
             color: colors.white100,
           }),
           ...(color === 'neutral-subtle' && {
@@ -78,13 +78,13 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
             background: colors.green20,
             color: colors.green100,
           }),
-          ...(color === 'indigo-subtle' && {
-            background: colors.indigo20,
-            color: colors.indigo100,
+          ...(color === 'blue-subtle' && {
+            background: colors.blue20,
+            color: colors.blue100,
           }),
-          ...(color === 'amber-subtle' && {
-            background: colors.amber20,
-            color: colors.amber100,
+          ...(color === 'orange-subtle' && {
+            background: colors.orange20,
+            color: colors.orange100,
           }),
           ...(color === 'inverted-subtle' && {
             background: colors.neutralInverted20,

diff --git a/src/components/Counter/Counter.stories.tsx b/src/components/Counter/Counter.stories.tsx
@@ -21,8 +21,8 @@ export const Default = {
           'inverted',
           'red',
           'green',
-          'indigo',
-          'amber',
+          'blue',
+          'orange',
           'white',
         ].map((color) => (
           <Counter color={color as any}>0</Counter>
@@ -40,8 +40,8 @@ export const Default = {
           'inverted',
           'red',
           'green',
-          'indigo',
-          'amber',
+          'blue',
+          'orange',
           'white',
         ].map((color) => (
           <Counter color={color as any}>99+</Counter>

diff --git a/src/components/Counter/index.tsx b/src/components/Counter/index.tsx
@@ -10,8 +10,8 @@ type CounterProps = {
     | 'inverted'
     | 'red'
     | 'green'
-    | 'indigo'
-    | 'amber'
+    | 'blue'
+    | 'orange'
     | 'white'
 }
 
@@ -42,12 +42,12 @@ function Counter({ children, color = 'neutral' }: CounterProps) {
           background: colors.green100,
           color: colors.neutralInverted100,
         }),
-        ...(color === 'indigo' && {
-          background: colors.indigo100,
+        ...(color === 'blue' && {
+          background: colors.blue100,
           color: colors.neutralInverted100,
         }),
-        ...(color === 'amber' && {
-          background: colors.amber100,
+        ...(color === 'orange' && {
+          background: colors.orange100,
           color: colors.neutralInverted100,
         }),
         ...(color === 'white' && {

diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -48,7 +48,7 @@ export const Component = () => {
             {
               value: 'scheduled',
               label: (
-                <Badge color="indigo-subtle" leadIcon="date">
+                <Badge color="blue-subtle" leadIcon="date">
                   Scheduled
                 </Badge>
               ),

diff --git a/src/components/SelectInput/SelectInput.stories.tsx b/src/components/SelectInput/SelectInput.stories.tsx
@@ -58,7 +58,7 @@ export const CustomLabelBadge = () => {
         },
         {
           label: (
-            <Badge color="indigo-subtle" leadIcon="date">
+            <Badge color="blue-subtle" leadIcon="date">
               Scheduled
             </Badge>
           ),

diff --git a/src/utils/colors.ts b/src/utils/colors.ts
@@ -20,18 +20,18 @@ const colors = Object.freeze({
   red20: 'var(--red-20)',
   red10: 'var(--red-10)',
   red5: 'var(--red-5)',
-  amber100: 'var(--amber-100)',
-  amber80: 'var(--amber-80)',
-  amber60: 'var(--amber-60)',
-  amber20: 'var(--amber-20)',
-  amber10: 'var(--amber-10)',
-  amber5: 'var(--amber-5)',
-  indigo100: 'var(--indigo-100)',
-  indigo80: 'var(--indigo-80)',
-  indigo60: 'var(--indigo-60)',
-  indigo20: 'var(--indigo-20)',
-  indigo10: 'var(--indigo-10)',
-  indigo5: 'var(--indigo-5)',
+  orange100: 'var(--orange-100)',
+  orange80: 'var(--orange-80)',
+  orange60: 'var(--orange-60)',
+  orange20: 'var(--orange-20)',
+  orange10: 'var(--orange-10)',
+  orange5: 'var(--orange-5)',
+  blue100: 'var(--blue-100)',
+  blue80: 'var(--blue-80)',
+  blue60: 'var(--blue-60)',
+  blue20: 'var(--blue-20)',
+  blue10: 'var(--blue-10)',
+  blue5: 'var(--blue-5)',
   green100: 'var(--green-100)',
   green80: 'var(--green-80)',
   green60: 'var(--green-60)',