feat(styles): update all components to accomodate new figma refactor …

…style changes
chanzuckerberg · Feb 23, 2024 · 6eb6418 · 6eb6418
1 parent 9f8010b
commit 6eb6418
Show file tree

Hide file tree

Showing 132 changed files with 2,504 additions and 1,764 deletions.
diff --git a/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx b/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
@@ -68,12 +68,14 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
     name: "Column Three",
     options: [
       {
-        icon: <CustomSdsIcon sdsSize="s" color="gray" />,
+        icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
         name: "Custom SDS Icon",
         section: "With Icon",
       },
       {
-        icon: <CustomSvgIcon sx={{ color: "#999", height: 14, width: 14 }} />,
+        icon: (
+          <CustomSvgIcon sx={{ color: "#767676", height: 16, width: 16 }} />
+        ),
         name: "Custom SVG Icon",
         section: "With Icon",
       },
@@ -82,6 +84,7 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
         name: "Puzzle Piece",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
@@ -90,13 +93,15 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
         name: "Copy",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
         icon: "lightBulb",
         name: "Light Bulb",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
@@ -105,20 +110,23 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
         name: "List",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
         icon: "treeVertical",
         name: "Vertical Tree",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
       {
         icon: "link",
         name: "Link",
         sdsIconProps: {
           color: "gray",
+          shade: 500,
         },
       },
     ],

diff --git a/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx b/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
@@ -34,12 +34,12 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     section: "name with details",
   },
   {
-    icon: <CustomSdsIcon sdsSize="s" color="gray" />,
+    icon: <CustomSdsIcon sdsSize="s" color="gray" shade={500} />,
     name: "Custom SDS Icon",
     section: "With Icon",
   },
   {
-    icon: <CustomSvgIcon sx={{ color: "#999", height: 14, width: 14 }} />,
+    icon: <CustomSvgIcon sx={{ color: "#767676", height: 16, width: 16 }} />,
     name: "Custom SVG Icon",
     section: "With Icon",
   },
@@ -48,7 +48,7 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     name: "Puzzle Piece",
     sdsIconProps: {
       color: "gray",
-      sdsSize: "xl",
+      shade: 500,
     },
     section: "With Icon",
   },
@@ -58,6 +58,7 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     name: "Copy",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
@@ -66,6 +67,7 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     name: "Light Bulb",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
@@ -75,6 +77,7 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     name: "List",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
@@ -83,6 +86,7 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     name: "Vertical Tree",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
@@ -91,6 +95,7 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     name: "Link",
     sdsIconProps: {
       color: "gray",
+      shade: 500,
     },
     section: "With Icon",
   },
@@ -103,21 +108,21 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
             label="bug"
             sdsStyle="rounded"
             sdsType="secondary"
-            color="error"
+            color="negative"
             hover={false}
           />
           <Tag
             label="feature"
             sdsStyle="rounded"
             sdsType="secondary"
-            color="warning"
+            color="notice"
             hover={false}
           />
           <Tag
             label="refactor"
             sdsStyle="rounded"
             sdsType="secondary"
-            color="gray"
+            color="neutral"
             hover={false}
           />
         </div>

diff --git a/packages/components/src/common/customSdsIcon.tsx b/packages/components/src/common/customSdsIcon.tsx
@@ -10,12 +10,14 @@ function CustomSdsIcon(props: {
   sdsSize?: IconProps<"bacteria">["sdsSize"];
   sdsType?: IconProps<"bacteria">["sdsType"];
   color?: IconProps<"bacteria">["color"];
+  shade?: IconProps<"bacteria">["shade"];
 }) {
   const {
     sdsIcon = "bacteria",
     sdsSize = "l",
     sdsType = "static",
-    color = "primary",
+    color = "blue",
+    shade = 400,
     ...rest
   } = props;
   return (
@@ -24,6 +26,7 @@ function CustomSdsIcon(props: {
       sdsSize={sdsSize}
       sdsType={sdsType}
       color={color}
+      shade={shade}
       {...rest}
     />
   );

diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -74,6 +74,7 @@
   --sds-color-semantic-component-base-fill-selected: #000000;
   --sds-color-semantic-component-base-fill-disabled: #cccccc;
   --sds-color-semantic-component-base-on-fill-disabled: #999999;
+  --sds-color-semantic-component-base-surface: #ffffff;
   --sds-color-semantic-component-base-surface-primary: #ffffff;
   --sds-color-semantic-component-base-surface-secondary: #f8f8f8;
   --sds-color-semantic-component-base-surface-tertiary: #eaeaea;
@@ -119,6 +120,13 @@
   --sds-color-semantic-component-negative-surface: #f8e8e8;
   --sds-color-semantic-component-negative-border: #dc132c;
   --sds-color-semantic-component-negative-icon: #dc132c;
+  --sds-color-semantic-component-neutral-fill: #999999;
+  --sds-color-semantic-component-neutral-fill-hover: #767676;
+  --sds-color-semantic-component-neutral-fill-pressed: #545454;
+  --sds-color-semantic-component-neutral-fill-on-fill: #ffffff;
+  --sds-color-semantic-component-neutral-surface: #eaeaea;
+  --sds-color-semantic-component-neutral-border: #999999;
+  --sds-color-semantic-component-neutral-icon: #999999;
   --sds-color-semantic-component-notice-fill: #f5a623;
   --sds-color-semantic-component-notice-fill-hover: #d8921f;
   --sds-color-semantic-component-notice-fill-pressed: #946314;

diff --git a/packages/components/src/common/styles-dictionary/design-tokens/color.json b/packages/components/src/common/styles-dictionary/design-tokens/color.json
@@ -91,6 +91,9 @@
             "on-fill-disabled": {
               "value": "{sds.color.primitive.gray.400.value}"
             },
+            "surface": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
             "surface-primary": {
               "value": "{sds.color.primitive.gray.white.value}"
             },
@@ -173,6 +176,19 @@
             "border": { "value": "{sds.color.primitive.red.400.value}" },
             "icon": { "value": "{sds.color.primitive.red.400.value}" }
           },
+          "neutral": {
+            "fill": { "value": "{sds.color.primitive.gray.400.value}" },
+            "fill-hover": { "value": "{sds.color.primitive.gray.500.value}" },
+            "fill-pressed": {
+              "value": "{sds.color.primitive.gray.600.value}"
+            },
+            "fill-on-fill": {
+              "value": "{sds.color.primitive.gray.white.value}"
+            },
+            "surface": { "value": "{sds.color.primitive.gray.200.value}" },
+            "border": { "value": "{sds.color.primitive.gray.400.value}" },
+            "icon": { "value": "{sds.color.primitive.gray.400.value}" }
+          },
           "notice": {
             "fill": { "value": "{sds.color.primitive.yellow.400.value}" },
             "fill-hover": { "value": "{sds.color.primitive.yellow.500.value}" },

diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -204,6 +204,7 @@
     "sds-color-semantic-component-base-fill-selected": "#000000",
     "sds-color-semantic-component-base-fill-disabled": "#CCCCCC",
     "sds-color-semantic-component-base-on-fill-disabled": "#999999",
+    "sds-color-semantic-component-base-surface": "#FFFFFF",
     "sds-color-semantic-component-base-surface-primary": "#FFFFFF",
     "sds-color-semantic-component-base-surface-secondary": "#F8F8F8",
     "sds-color-semantic-component-base-surface-tertiary": "#EAEAEA",
@@ -249,6 +250,13 @@
     "sds-color-semantic-component-negative-surface": "#F8E8E8",
     "sds-color-semantic-component-negative-border": "#DC132C",
     "sds-color-semantic-component-negative-icon": "#DC132C",
+    "sds-color-semantic-component-neutral-fill": "#999999",
+    "sds-color-semantic-component-neutral-fill-hover": "#767676",
+    "sds-color-semantic-component-neutral-fill-pressed": "#545454",
+    "sds-color-semantic-component-neutral-fill-on-fill": "#FFFFFF",
+    "sds-color-semantic-component-neutral-surface": "#EAEAEA",
+    "sds-color-semantic-component-neutral-border": "#999999",
+    "sds-color-semantic-component-neutral-icon": "#999999",
     "sds-color-semantic-component-notice-fill": "#F5A623",
     "sds-color-semantic-component-notice-fill-hover": "#D8921F",
     "sds-color-semantic-component-notice-fill-pressed": "#946314",

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -73,6 +73,7 @@ $sds-color-semantic-component-base-fill-open: #F8F8F8;
 $sds-color-semantic-component-base-fill-selected: #000000;
 $sds-color-semantic-component-base-fill-disabled: #CCCCCC;
 $sds-color-semantic-component-base-on-fill-disabled: #999999;
+$sds-color-semantic-component-base-surface: #FFFFFF;
 $sds-color-semantic-component-base-surface-primary: #FFFFFF;
 $sds-color-semantic-component-base-surface-secondary: #F8F8F8;
 $sds-color-semantic-component-base-surface-tertiary: #EAEAEA;
@@ -118,6 +119,13 @@ $sds-color-semantic-component-negative-fill-on-fill: #FFFFFF;
 $sds-color-semantic-component-negative-surface: #F8E8E8;
 $sds-color-semantic-component-negative-border: #DC132C;
 $sds-color-semantic-component-negative-icon: #DC132C;
+$sds-color-semantic-component-neutral-fill: #999999;
+$sds-color-semantic-component-neutral-fill-hover: #767676;
+$sds-color-semantic-component-neutral-fill-pressed: #545454;
+$sds-color-semantic-component-neutral-fill-on-fill: #FFFFFF;
+$sds-color-semantic-component-neutral-surface: #EAEAEA;
+$sds-color-semantic-component-neutral-border: #999999;
+$sds-color-semantic-component-neutral-icon: #999999;
 $sds-color-semantic-component-notice-fill: #F5A623;
 $sds-color-semantic-component-notice-fill-hover: #D8921F;
 $sds-color-semantic-component-notice-fill-pressed: #946314;

diff --git a/packages/components/src/common/svgs/IconSpeechBubblesLarge.svg b/packages/components/src/common/svgs/IconSpeechBubblesLarge.svg
diff --git a/packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`<Accordion /> Default story renders snapshot 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1gtxzl5-MuiPaper-root-MuiAccordion-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-mnqvzr-MuiPaper-root-MuiAccordion-root"
 >
   <div
     aria-controls="undefined-header-panel-content"
     aria-expanded="false"
-    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-q39ari-MuiButtonBase-root-MuiAccordionSummary-root"
+    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-12obwtz-MuiButtonBase-root-MuiAccordionSummary-root"
     id="undefined-header"
     role="button"
     tabindex="0"
@@ -51,7 +51,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
           role="region"
         >
           <div
-            class="MuiAccordionDetails-root css-rnrgul-MuiAccordionDetails-root"
+            class="MuiAccordionDetails-root css-kcniag-MuiAccordionDetails-root"
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
           </div>

diff --git a/packages/components/src/core/Accordion/components/AccordionDetails/style.ts b/packages/components/src/core/Accordion/components/AccordionDetails/style.ts
@@ -10,8 +10,7 @@ export const StyledAccordionDetails = styled(AccordionDetails)`
     const spaces = getSpaces(props);
 
     return css`
-      padding: ${spaces?.m}px;
-      padding-top: ${spaces?.xxs}px;
+      padding: ${spaces?.xxs}px ${spaces?.m}px ${spaces?.m}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/style.ts b/packages/components/src/core/Accordion/components/AccordionHeader/style.ts
@@ -1,45 +1,40 @@
 import { css } from "@emotion/react";
-import { AccordionSummary } from "@mui/material";
+import { AccordionSummary, accordionSummaryClasses } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   fontBodyXxs,
   fontHeaderS,
-  getColors,
+  getSemanticComponentColors,
+  getSemanticTextColors,
   getSpaces,
 } from "src/core/styles";
 
 export const StyledAccordionHeader = styled(AccordionSummary)`
   ${fontHeaderS}
   ${(props: CommonThemeProps) => {
     const spaces = getSpaces(props);
-    const colors = getColors(props);
+    const semanticComponentColors = getSemanticComponentColors(props);
 
     return css`
       padding: ${spaces?.m}px;
-      min-height: 40px;
       align-items: flex-start;
       box-sizing: border-box;
 
-      &.Mui-expanded {
-        min-height: 40px;
-      }
-
-      .MuiAccordionSummary-content {
+      .${accordionSummaryClasses.content} {
         margin: 0;
         flex-direction: column;
 
-        &.Mui-expanded {
+        &.${accordionSummaryClasses.expanded} {
           margin: 0;
         }
       }
 
-      .MuiAccordionSummary-expandIconWrapper {
-        padding: 0px;
-        margin-right: 0;
+      .${accordionSummaryClasses.expandIconWrapper} {
         margin-left: ${spaces?.m}px;
+        align-self: center;
         svg {
-          color: ${colors?.gray[500]};
+          color: ${semanticComponentColors?.base?.icon};
         }
       }
     `;
@@ -50,10 +45,10 @@ export const StyledSubtitle = styled("p")`
   ${fontBodyXxs}
 
   ${(props: CommonThemeProps) => {
-    const colors = getColors(props);
+    const semanticTextColors = getSemanticTextColors(props);
 
     return css`
-      color: ${colors?.gray[500]};
+      color: ${semanticTextColors?.base?.secondary};
       margin: 0;
     `;
   }}