feat: add all theme2 colors to avatar and pill component

EightfoldAI · Jul 11, 2022 · ad77f09 · ad77f09
1 parent 52ec290
commit ad77f09
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 92 deletions.
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -8,13 +8,17 @@ import { Icon } from '../Icon';
 
 export const AVATAR_THEME_SET = [
     styles.red,
-    styles.grey,
-    styles.blue,
+    styles.redOrange,
     styles.orange,
+    styles.yellow,
+    styles.yellowGreen,
     styles.green,
+    styles.blueGreen,
+    styles.blue,
+    styles.blueViolet,
     styles.violet,
-    styles.yellow,
-    styles.bluegreen,
+    styles.violetRed,
+    styles.grey,
 ];
 
 const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
@@ -38,12 +42,16 @@ const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
             styles.wrapperStyle,
             classNames,
             { [styles.red]: theme === 'red' },
+            { [styles.redOrange]: theme === 'redOrange' },
             { [styles.orange]: theme === 'orange' },
             { [styles.yellow]: theme === 'yellow' },
+            { [styles.yellowGreen]: theme === 'yellowGreen' },
             { [styles.green]: theme === 'green' },
-            { [styles.bluegreen]: theme === 'bluegreen' },
+            { [styles.blueGreen]: theme === 'blueGreen' },
             { [styles.blue]: theme === 'blue' },
+            { [styles.blueViolet]: theme === 'blueViolet' },
             { [styles.violet]: theme === 'violet' },
+            { [styles.violetRed]: theme === 'violetRed' },
             { [styles.grey]: theme === 'grey' },
             AVATAR_THEME_SET?.[colorSetIndex],
         ]);

diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
@@ -2,52 +2,54 @@
     align-items: center;
     display: flex;
     justify-content: center;
+    color: var(--text-inverse-color);
 
-<<<<<<< HEAD
     &.red {
-        background-color: var(--red-color-20);
-        border: solid 1px var(--red-color-30);
-        color: var(--red-color);
-=======
-    &.disruptive {
-        background-color: var(--disruptive-color-60);
-        color: var(--text-inverse-color);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
+        background-color: var(--red-color-60);
     }
 
-    &.grey {
-        background-color: var(--grey-color-60);
-        color: var(--text-inverse-color);
+    &.orange {
+        background-color: var(--orange-color-60);
     }
 
-    &.blue {
-        background-color: var(--blue-color-60);
-        color: var(--text-inverse-color);
+    &.red-orange {
+        background-color: var(--redorange-color-60);
     }
 
-    &.orange {
-        background-color: var(--orange-color-60);
-        color: var(--text-inverse-color);
+    &.yellow {
+        background-color: var(--yellow-color-60);
+    }
+
+    &.yellow-green {
+        background-color: var(--yellowgreen-color-60);
     }
 
     &.green {
         background-color: var(--green-color-60);
-        color: var(--text-inverse-color);
+    }
+
+    &.blue-green {
+        background-color: var(--bluegreen-color-60);
+    }
+
+    &.blue {
+        background-color: var(--blue-color-60);
+    }
+
+    &.blue-violet {
+        background-color: var(--blueviolet-color-60);
     }
 
     &.violet {
         background-color: var(--violet-color-60);
-        color: var(--text-inverse-color);
     }
 
-    &.yellow {
-        background-color: var(--yellow-color-60);
-        color: var(--text-inverse-color);
+    &.violet-red {
+        background-color: var(--violetred-color-60);
     }
 
-    &.bluegreen {
-        background-color: var(--bluegreen-color-60);
-        color: var(--text-inverse-color);
+    &.grey {
+        background-color: var(--grey-color-60);
     }
 }
 

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -1,23 +1,6 @@
 .button {
     --button-default-foreground-color: var(--primary-color);
-<<<<<<< HEAD
-    --button-hover-foreground-color: var(--primary-color);
-    --button-focus-foreground-color: var(--primary-color-80);
-    --button-active-foreground-color: var(--primary-color-80);
-    --button-visited-foreground-color: var(--primary-color-80);
-    --button-default-outline-color: var(--primary-color);
-    --button-hover-outline-color: var(--primary-color-60);
-    --button-active-outline-color: var(--primary-color-80);
-    --button-visited-outline-color: var(--primary-color-80);
-    --button-focus-outline-color: var(--primary-color-40);
-    --button-primary-default-background-color: var(--primary-color);
-    --button-primary-hover-background-color: var(--primary-color-60);
-    --button-primary-focus-background-color: var(--primary-color-80);
-    --button-primary-active-background-color: var(--primary-color-80);
-    --button-primary-visited-background-color: var(--primary-color-80);
-=======
     --button-focus-outline-color: var(--blueviolet-color-50);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
     --button-primary-default-border-color: var(--primary-color);
     --button-two-state-default-foreground-color: var(--grey-color-70);
     --button-two-state-hover-foreground-color: var(--primary-color);
@@ -279,13 +262,7 @@
     }
 
     &:active {
-<<<<<<< HEAD
-        background-color: var(--button-primary-active-background-color);
-        border-color: var(--button-primary-active-border-color);
-        color: var(--text-inverse-color);
-=======
         --bg: var(--accent-color-30);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
     }
 }
 
@@ -303,13 +280,7 @@
     }
 
     &:active {
-<<<<<<< HEAD
-        background-color: var(--button-active-background-color);
-        color: var(--button-active-foreground-color);
-        outline-color: var(--button-active-outline-color);
-=======
         --bg: var(--accent-color-20);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
     }
 }
 
@@ -324,12 +295,7 @@
     }
 
     &:active {
-<<<<<<< HEAD
-        background-color: var(--disruptive-color-80);
-        border-color: var(--disruptive-color-80);
-=======
         --bg: var(--disruptive-color-30);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
     }
 }
 
@@ -346,12 +312,7 @@
     }
 
     &:active {
-<<<<<<< HEAD
-        color: var(--disruptive-color-80);
-        outline-color: var(--disruptive-color-80);
-=======
         --bg: var(--disruptive-color-20);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
     }
 }
 
@@ -365,21 +326,11 @@
     outline-offset: -2px;
 
     &:hover {
-<<<<<<< HEAD
-        background-color: var(--button-hover-variant-background-color);
-        color: var(--button-hover-foreground-color);
-    }
-
-    &:active {
-        background-color: var(--button-active-background-color);
-        color: var(--button-active-foreground-color);
-=======
         --bg: transparent;
     }
 
     &:active {
         --bg: var(--accent-color-20);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
     }
 }
 
@@ -409,21 +360,11 @@
     outline-offset: -2px;
 
     &:hover {
-<<<<<<< HEAD
-        background-color: var(--grey-color-10);
-        color: var(--text-secondary-color);
-    }
-
-    &:active {
-        background-color: var(--grey-color-20);
-        color: var(--text-secondary-color);
-=======
         --bg: transparent;
     }
 
     &:active {
         --bg: var(--grey-color-20);
->>>>>>> 3d53a6f (feat: theme 2 color palette, default button & input shape to pull, styles for selectors, tabs, buttons, accordion & match score (#174))
     }
 }
 

diff --git a/src/components/Pills/Pill.tsx b/src/components/Pills/Pill.tsx
@@ -42,12 +42,16 @@ export const Pill: FC<PillProps> = React.forwardRef(
             styles.tagPills,
             rest.classNames,
             { [styles.red]: theme === 'red' },
+            { [styles.redOrange]: theme === 'redOrange' },
             { [styles.orange]: theme === 'orange' },
             { [styles.yellow]: theme === 'yellow' },
+            { [styles.yellowGreen]: theme === 'yellowGreen' },
             { [styles.green]: theme === 'green' },
-            { [styles.bluegreen]: theme === 'blueGreen' },
+            { [styles.blueGreen]: theme === 'blueGreen' },
             { [styles.blue]: theme === 'blue' },
+            { [styles.blueViolet]: theme === 'blueViolet' },
             { [styles.violet]: theme === 'violet' },
+            { [styles.violetRed]: theme === 'violetRed' },
             { [styles.grey]: theme === 'grey' },
         ]);
         return (

diff --git a/src/components/Pills/Pills.stories.tsx b/src/components/Pills/Pills.stories.tsx
@@ -49,12 +49,16 @@ export default {
 
 const themes: OcThemeNames[] = [
     'red',
+    'redOrange',
     'orange',
     'yellow',
+    'yellowGreen',
     'green',
     'blueGreen',
     'blue',
+    'blueViolet',
     'violet',
+    'violetRed',
     'grey',
 ];
 

diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss
@@ -33,6 +33,12 @@
         --hover-bg: var(--red-color-30);
     }
 
+    &.red-orange {
+        --bg: var(--redorange-color-20);
+        --label: var(--redorange-color);
+        --hover-bg: var(--redorange-color-30);
+    }
+
     &.orange {
         --bg: var(--orange-color-20);
         --label: var(--orange-color);
@@ -45,13 +51,19 @@
         --hover-bg: var(--yellow-color-30);
     }
 
+    &.yellow-green {
+        --bg: var(--yellowgreen-color-20);
+        --label: var(--yellowgreen-color);
+        --hover-bg: var(--yellowgreen-color-30);
+    }
+
     &.green {
         --bg: var(--green-color-20);
         --label: var(--green-color);
         --hover-bg: var(--green-color-30);
     }
 
-    &.bluegreen {
+    &.blue-green {
         --bg: var(--bluegreen-color-20);
         --label: var(--bluegreen-color);
         --hover-bg: var(--bluegreen-color-30);
@@ -62,12 +74,23 @@
         --label: var(--blue-color);
     }
 
+    &.blue-violet {
+        --bg: var(--blueviolet-color-20);
+        --label: var(--blueviolet-color);
+    }
+
     &.violet {
         --bg: var(--violet-color-20);
         --label: var(--violet-color);
         --hover-bg: var(--violet-color-30);
     }
 
+    &.violet-red {
+        --bg: var(--violetred-color-20);
+        --label: var(--violetred-color);
+        --hover-bg: var(--violetred-color-30);
+    }
+
     &.grey {
         --bg: var(--grey-color-20);
         --label: var(--grey-color);