Merge branch 'main' into dkilgore-eightfold/default-table-loading-fixup

EightfoldAI · May 26, 2023 · 928a5ea · 928a5ea
2 parents fadc41b + 26c16fd
commit 928a5ea
Show file tree

Hide file tree

Showing 50 changed files with 1,603 additions and 1,282 deletions.
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -102,26 +102,24 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
       hashingFunction: () => 0,
       size: '32px',
       outline: {
-        // outlineColor: 'var(--green-color-60)',
         outlineOffset: '1px',
-        // outlineStyle: 'solid',
         outlineWidth: '2px',
       },
       statusItems: {
         [StatusItemsPosition.Bottom]: {
           ...statusItemProps,
           ariaLabel: 'Clock icon',
-          backgroundColor: 'var(--green-color-20)',
-          color: 'var(--green-color-70)',
+          backgroundColor: 'var(--green-background2-color)',
+          color: 'var(--green-secondary-color)',
           wrapperStyle: { padding: '2px' },
           path: IconName.mdiHome,
           size: '6px',
         },
         [StatusItemsPosition.TopRight]: {
           ...statusItemProps,
           ariaLabel: 'Pencil icon',
-          backgroundColor: 'var(--green-color-20)',
-          color: 'var(--green-color-70)',
+          backgroundColor: 'var(--green-background2-color)',
+          color: 'var(--green-secondary-color)',
           wrapperStyle: { padding: '2px' },
           path: IconName.mdiPencil,
           size: '6px',
@@ -134,7 +132,7 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
       fontSize: '48px',
       hashingFunction: () => 0,
       outline: {
-        outlineColor: 'var(--blue-color-60)',
+        outlineColor: 'var(--blue-tertiary-color)',
         outlineOffset: '2px',
         outlineStyle: 'solid',
         outlineWidth: '4px',
@@ -143,11 +141,11 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
         [StatusItemsPosition.TopRight]: {
           ...statusItemProps,
           ariaLabel: 'Pencil icon',
-          backgroundColor: 'var(--red-color-20)',
-          color: 'var(--red-color-70)',
+          backgroundColor: 'var(--red-background2-color)',
+          color: 'var(--red-secondary-color)',
           onClick: () => alert('Clicked pencil icon'),
           outline: {
-            outlineColor: 'var(--red-color-60)',
+            outlineColor: 'var(--red-tertiary-color)',
             outlineOffset: '0px',
             outlineStyle: 'solid',
             outlineWidth: '2px',
@@ -156,8 +154,8 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
         [StatusItemsPosition.Bottom]: {
           ...statusItemProps,
           ariaLabel: 'Clock icon',
-          backgroundColor: 'var(--grey-color-10)',
-          color: 'var(--grey-color-70)',
+          backgroundColor: 'var(--grey-background1-color)',
+          color: 'var(--grey-secondary-color)',
           onClick: () => alert('Clicked clock icon'),
           outline: {},
           path: IconName.mdiClock,
@@ -193,28 +191,28 @@ const Avatar_StatusItem_Story: ComponentStory<typeof Avatar> = (args) => {
         [StatusItemsPosition.Left]: {
           ...statusItemProps,
           ariaLabel: 'Magnify icon',
-          backgroundColor: 'var(--blue-color-20)',
+          backgroundColor: 'var(--blue-background2-color)',
           onClick: () => alert('Clicked magnify icon'),
           path: IconName.mdiMagnify,
         },
         [StatusItemsPosition.TopLeft]: {
           ...statusItemProps,
           ariaLabel: 'Clock icon',
-          backgroundColor: 'var(--red-color-30)',
+          backgroundColor: 'var(--red-background3-color)',
           onClick: () => alert('Clicked clock icon'),
           path: IconName.mdiClock,
           text: '3000',
         },
         [StatusItemsPosition.Top]: {
           ...statusItemProps,
-          backgroundColor: 'var(--red-color-30)',
+          backgroundColor: 'var(--red-background3-color)',
           path: IconName.mdiBell,
           text: '4',
           textMaxLength: 2,
         },
         [StatusItemsPosition.Right]: {
           ...statusItemProps,
-          backgroundColor: 'var(--blue-color-20)',
+          backgroundColor: 'var(--blue-background2-color)',
           path: IconName.mdiCalendar,
           text: '20',
           alignIcon: StatusItemIconAlign.Left,
@@ -267,7 +265,7 @@ Avatar_Icon.args = {
     path: IconName.mdiBell,
   },
   style: {
-    backgroundColor: 'var(--accent-color-20)',
+    backgroundColor: 'var(--accent-background2-color)',
   },
 };
 
@@ -284,7 +282,7 @@ Avatar_Round_Icon.args = {
     path: IconName.mdiBell,
   },
   style: {
-    backgroundColor: 'var(--accent-color-20)',
+    backgroundColor: 'var(--accent-background2-color)',
   },
   type: 'round',
 };

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -47,14 +47,14 @@ const MinStatusItemFontSize: number = 12;
 const StatusItemFontDiff: string = '2px';
 
 const StatusItemOutlineDefaults: React.CSSProperties = {
-  outlineColor: 'var(--grey-color-80)',
+  outlineColor: 'var(--grey-color)',
   outlineOffset: '0px',
   outlineStyle: 'solid',
   outlineWidth: '2px',
 };
 
 const AvatarOutlineDefaults: React.CSSProperties = {
-  outlineColor: 'var(--green-color-60)',
+  outlineColor: 'var(--green-tertiary-color)',
   outlineOffset: '2px',
   outlineStyle: 'solid',
   outlineWidth: '4px',

diff --git a/src/components/Avatar/Avatar.types.ts b/src/components/Avatar/Avatar.types.ts
@@ -64,7 +64,7 @@ export interface StatusItemsProps extends IconProps {
   /**
    * Status item outline
    *
-   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--grey-color-80)', outlineOffset: '0px', outlineStyle: 'solid', outlineWidth: '2px' }`
+   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--grey-color)', outlineOffset: '0px', outlineStyle: 'solid', outlineWidth: '2px' }`
    */
   outline?: AvatarOutlineProps;
   /**
@@ -124,7 +124,7 @@ export interface BaseAvatarProps extends OcBaseProps<HTMLDivElement> {
   /**
    * Avatar outline
    *
-   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--green-color-60)', outlineOffset: '2px', outlineStyle: 'solid', outlineWidth: '4px' }`
+   * Defaults when `outline` is truthy are `{ outlineColor: 'var(--green-tertiary-color)', outlineOffset: '2px', outlineStyle: 'solid', outlineWidth: '4px' }`
    */
   outline?: AvatarOutlineProps;
   /**

diff --git a/src/components/Avatar/Styles/group.scss b/src/components/Avatar/Styles/group.scss
@@ -40,7 +40,7 @@
   }
 
   &-max-count {
-    background-color: var(--grey-color-20);
+    background-color: var(--grey-background2-color);
     color: var(--text-secondary-color);
   }
 }

diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
@@ -11,51 +11,51 @@
   justify-content: center;
 
   &.red {
-    background-color: var(--red-color-60);
+    background-color: var(--red-tertiary-color);
   }
 
   &.orange {
-    background-color: var(--orange-color-60);
+    background-color: var(--orange-tertiary-color);
   }
 
   &.red-orange {
-    background-color: var(--redorange-color-60);
+    background-color: var(--redorange-tertiary-color);
   }
 
   &.yellow {
-    background-color: var(--yellow-color-60);
+    background-color: var(--yellow-tertiary-color);
   }
 
   &.yellow-green {
-    background-color: var(--yellowgreen-color-60);
+    background-color: var(--yellowgreen-tertiary-color);
   }
 
   &.green {
-    background-color: var(--green-color-60);
+    background-color: var(--green-tertiary-color);
   }
 
   &.blue-green {
-    background-color: var(--bluegreen-color-60);
+    background-color: var(--bluegreen-tertiary-color);
   }
 
   &.blue {
-    background-color: var(--blue-color-60);
+    background-color: var(--blue-tertiary-color);
   }
 
   &.blue-violet {
-    background-color: var(--blueviolet-color-60);
+    background-color: var(--blueviolet-tertiary-color);
   }
 
   &.violet {
-    background-color: var(--violet-color-60);
+    background-color: var(--violet-tertiary-color);
   }
 
   &.violet-red {
-    background-color: var(--violetred-color-60);
+    background-color: var(--violetred-tertiary-color);
   }
 
   &.grey {
-    background-color: var(--grey-color-60);
+    background-color: var(--grey-tertiary-color);
   }
 }
 

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -242,7 +242,7 @@
       &:after {
         animation: $motion-duration-fast $motion-easing-easeinout 1
           nudgeRingMedium;
-        border: $space-xxs solid var(--primary-color-20);
+        border: $space-xxs solid var(--primary-background2-color);
         border-radius: 100%;
         content: '';
         height: 14px;
@@ -484,11 +484,11 @@
 }
 
 .button-primary {
-  --button-counter-default-background-color: var(--accent-color-10);
-  --button-counter-hover-background-color: var(--accent-color-20);
-  --button-counter-checked-background-color: var(--accent-color-10);
-  --button-counter-focus-background-color: var(--accent-color-10);
-  --button-counter-active-background-color: var(--accent-color-10);
+  --button-counter-default-background-color: var(--accent-background1-color);
+  --button-counter-hover-background-color: var(--accent-background2-color);
+  --button-counter-checked-background-color: var(--accent-background1-color);
+  --button-counter-focus-background-color: var(--accent-background1-color);
+  --button-counter-active-background-color: var(--accent-background1-color);
 
   color: var(--button-primary-text-color);
   background-color: var(--button-primary-background-color);
@@ -528,11 +528,11 @@
 }
 
 .button-secondary {
-  --button-counter-default-background-color: var(--primary-color-20);
-  --button-counter-hover-background-color: var(--primary-color-20);
-  --button-counter-checked-background-color: var(--primary-color-10);
-  --button-counter-focus-background-color: var(--primary-color-20);
-  --button-counter-active-background-color: var(--primary-color-10);
+  --button-counter-default-background-color: var(--primary-background2-color);
+  --button-counter-hover-background-color: var(--primary-background2-color);
+  --button-counter-checked-background-color: var(--primary-background1-color);
+  --button-counter-focus-background-color: var(--primary-background2-color);
+  --button-counter-active-background-color: var(--primary-background1-color);
 
   color: var(--button-secondary-text-color);
   background-color: var(--button-secondary-background-color);
@@ -606,12 +606,16 @@
 }
 
 .button-primary-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-10);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-10);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background1-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-primary-disruptive-text-color);
   background-color: var(--button-primary-disruptive-background-color);
@@ -637,12 +641,16 @@
 }
 
 .button-secondary-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-20);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-20);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background2-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background2-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-secondary-disruptive-text-color);
   background-color: var(--button-secondary-disruptive-background-color);
@@ -670,11 +678,11 @@
 }
 
 .button-default {
-  --button-counter-default-background-color: var(--primary-color-20);
-  --button-counter-hover-background-color: var(--primary-color-20);
-  --button-counter-checked-background-color: var(--primary-color-10);
-  --button-counter-focus-background-color: var(--primary-color-20);
-  --button-counter-active-background-color: var(--primary-color-10);
+  --button-counter-default-background-color: var(--primary-background2-color);
+  --button-counter-hover-background-color: var(--primary-background2-color);
+  --button-counter-checked-background-color: var(--primary-background1-color);
+  --button-counter-focus-background-color: var(--primary-background2-color);
+  --button-counter-active-background-color: var(--primary-background1-color);
 
   color: var(--button-default-text-color);
   background-color: var(--button-default-background-color);
@@ -714,12 +722,16 @@
 }
 
 .button-disruptive {
-  --button-counter-default-background-color: var(--disruptive-color-20);
-  --button-counter-hover-background-color: var(--disruptive-color-20);
-  --button-counter-checked-background-color: var(--disruptive-color-10);
-  --button-counter-focus-background-color: var(--disruptive-color-20);
-  --button-counter-active-background-color: var(--disruptive-color-10);
-  --button-counter-default-text-color: var(--disruptive-color-80);
+  --button-counter-default-background-color: var(
+    --disruptive-background2-color
+  );
+  --button-counter-hover-background-color: var(--disruptive-background2-color);
+  --button-counter-checked-background-color: var(
+    --disruptive-background1-color
+  );
+  --button-counter-focus-background-color: var(--disruptive-background2-color);
+  --button-counter-active-background-color: var(--disruptive-background1-color);
+  --button-counter-default-text-color: var(--disruptive-color);
 
   color: var(--button-default-disruptive-text-color);
   background-color: var(--button-default-disruptive-background-color);
@@ -1289,15 +1301,15 @@
     &.button-secondary-disruptive {
       &.focus-visible,
       &:focus-visible {
-        color: var(--disruptive-color-80);
+        color: var(--disruptive-color);
       }
     }
 
     &.button-disruptive {
       &.focus-visible,
       &:focus-visible {
-        background-color: var(--disruptive-color-10);
-        color: var(--disruptive-color-80);
+        background-color: var(--disruptive-background1-color);
+        color: var(--disruptive-color);
       }
     }