Merge branch 'main' of https://github.com/chanzuckerberg/sci-components…

… into prod
chanzuckerberg · Oct 2, 2024 · 5fc5762 · 5fc5762
2 parents bc81ad6 + 0efb03c
commit 5fc5762
Show file tree

Hide file tree

Showing 41 changed files with 976 additions and 180 deletions.
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -12,15 +12,27 @@
     --sds-border-base-hover: 1px dashed #000000;
     --sds-border-base-pressed: 1px dashed #000000;
     --sds-border-base-table: 1px solid #c3c3c3;
-    --sds-border-beta-default: 1px solid #8b54e2;
-    --sds-border-info-default: 1px solid #1a6cef;
+    --sds-border-beta-default: 1px solid #6526b5;
+    --sds-border-beta-extra-thick: 4px solid #6526b5;
+    --sds-border-beta-thick: 2px solid #6526b5;
+    --sds-border-info-default: 1px solid #0041b9;
+    --sds-border-info-extra-thick: 4px solid #0041b9;
+    --sds-border-info-thick: 2px solid #0041b9;
     --sds-border-link-dashed: 1px dashed;
     --sds-border-link-solid: 1px solid;
-    --sds-border-negative-default: 1px solid #db2131;
+    --sds-border-negative-default: 1px solid #980013;
+    --sds-border-negative-extra-thick: 4px solid #980013;
+    --sds-border-negative-thick: 2px solid #980013;
     --sds-border-neutral-default: 1px solid #969696;
+    --sds-border-neutral-extra-thick: 4px solid #969696;
+    --sds-border-neutral-thick: 2px solid #969696;
     --sds-border-none: none;
-    --sds-border-notice-default: 1px solid #da9900;
-    --sds-border-positive-default: 1px solid #238444;
+    --sds-border-notice-default: 1px solid #b77800;
+    --sds-border-notice-extra-thick: 4px solid #b77800;
+    --sds-border-notice-thick: 2px solid #b77800;
+    --sds-border-positive-default: 1px solid #105b2b;
+    --sds-border-positive-extra-thick: 4px solid #105b2b;
+    --sds-border-positive-thick: 2px solid #105b2b;
     --sds-color-primitive-blue-100: #e2eeff;
     --sds-color-primitive-blue-200: #cce1ff;
     --sds-color-primitive-blue-300: #9dc6ff;
@@ -182,9 +194,10 @@
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-color: black;
     --sds-font-font-family-body: "Inter", sans-serif;
@@ -218,13 +231,13 @@
     --sds-font-body-l-600-letter-spacing: 0px;
     --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
     --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxxs-600-text-transform: uppercase;
     --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxs-600-text-transform: uppercase;
     --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
     --sds-font-caps-xxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxs-600-text-transform: uppercase;
     --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-header-xxxs-600-letter-spacing: 0.1px;
     --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
@@ -297,15 +310,27 @@
     --sds-border-base-hover: 1px dashed #ffffff;
     --sds-border-base-pressed: 1px dashed #ffffff;
     --sds-border-base-table: 1px solid #696969;
-    --sds-border-beta-default: 1px solid #cebef8;
-    --sds-border-info-default: 1px solid #a2c9ff;
+    --sds-border-beta-default: 1px solid #e4dcfc;
+    --sds-border-beta-extra-thick: 4px solid #e4dcfc;
+    --sds-border-beta-thick: 2px solid #e4dcfc;
+    --sds-border-info-default: 1px solid #cde3ff;
+    --sds-border-info-extra-thick: 4px solid #cde3ff;
+    --sds-border-info-thick: 2px solid #cde3ff;
     --sds-border-link-dashed: 1px dashed;
     --sds-border-link-solid: 1px solid;
-    --sds-border-negative-default: 1px solid #FF9385;
+    --sds-border-negative-default: 1px solid #ffbdb3;
+    --sds-border-negative-extra-thick: 4px solid #ffbdb3;
+    --sds-border-negative-thick: 2px solid #ffbdb3;
     --sds-border-neutral-default: 1px solid #aaaaaa;
+    --sds-border-neutral-extra-thick: 4px solid #aaaaaa;
+    --sds-border-neutral-thick: 2px solid #aaaaaa;
     --sds-border-none: none;
-    --sds-border-notice-default: 1px solid #cf8e00;
-    --sds-border-positive-default: 1px solid #85d898;
+    --sds-border-notice-default: 1px solid #efad00;
+    --sds-border-notice-extra-thick: 4px solid #efad00;
+    --sds-border-notice-thick: 2px solid #efad00;
+    --sds-border-positive-default: 1px solid #bcecc5;
+    --sds-border-positive-extra-thick: 4px solid #bcecc5;
+    --sds-border-positive-thick: 2px solid #bcecc5;
     --sds-color-primitive-blue-100: #002573;
     --sds-color-primitive-blue-200: #0048c5;
     --sds-color-primitive-blue-300: #2573f4;
@@ -342,13 +367,13 @@
     --sds-color-primitive-purple-700: #f0ebfe;
     --sds-color-primitive-purple-800: #fbf9ff;
     --sds-color-primitive-red-100: #630008;
-    --sds-color-primitive-red-200: #A30000;
-    --sds-color-primitive-red-300: #E52722;
-    --sds-color-primitive-red-400: #FF695B;
-    --sds-color-primitive-red-500: #FF9385;
-    --sds-color-primitive-red-600: #FFBDB3;
-    --sds-color-primitive-red-700: #FFD8D1;
-    --sds-color-primitive-red-800: #FFF1EE;
+    --sds-color-primitive-red-200: #a30000;
+    --sds-color-primitive-red-300: #e52722;
+    --sds-color-primitive-red-400: #ff695b;
+    --sds-color-primitive-red-500: #ff9385;
+    --sds-color-primitive-red-600: #ffbdb3;
+    --sds-color-primitive-red-700: #ffd8d1;
+    --sds-color-primitive-red-800: #fff1ee;
     --sds-color-primitive-yellow-100: #552300;
     --sds-color-primitive-yellow-200: #834500;
     --sds-color-primitive-yellow-300: #985a00;
@@ -427,15 +452,15 @@
     --sds-color-semantic-info-surface-primary: #002573;
     --sds-color-semantic-info-surface-secondary: #a2c9ff;
     --sds-color-semantic-info-text: #cde3ff;
-    --sds-color-semantic-negative-border: #FF9385;
-    --sds-color-semantic-negative-fill-hover: #FFBDB3;
-    --sds-color-semantic-negative-fill-pressed: #FFD8D1;
-    --sds-color-semantic-negative-fill-primary: #FF9385;
+    --sds-color-semantic-negative-border: #ff9385;
+    --sds-color-semantic-negative-fill-hover: #ffbdb3;
+    --sds-color-semantic-negative-fill-pressed: #ffd8d1;
+    --sds-color-semantic-negative-fill-primary: #ff9385;
     --sds-color-semantic-negative-fill-secondary: #630008;
-    --sds-color-semantic-negative-ornament: #FFBDB3;
+    --sds-color-semantic-negative-ornament: #ffbdb3;
     --sds-color-semantic-negative-surface-primary: #630008;
-    --sds-color-semantic-negative-surface-secondary: #FF9385;
-    --sds-color-semantic-negative-text: #FFBDB3;
+    --sds-color-semantic-negative-surface-secondary: #ff9385;
+    --sds-color-semantic-negative-text: #ffbdb3;
     --sds-color-semantic-neutral-border: #aaaaaa;
     --sds-color-semantic-neutral-fill-hover: #cdcdcd;
     --sds-color-semantic-neutral-fill-pressed: #ededed;
@@ -467,9 +492,10 @@
     --sds-corner-m: 4px;
     --sds-corner-s: 2px;
     --sds-corner-none: 0px;
-    --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-    --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-    --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+    --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+    --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+    --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
     --sds-drop-shadow-none: none;
     --sds-font-color: black;
     --sds-font-font-family-body: "Inter", sans-serif;
@@ -503,13 +529,13 @@
     --sds-font-body-l-600-letter-spacing: 0px;
     --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
     --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxxs-600-text-transform: uppercase;
     --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxxs-600-text-transform: uppercase;
     --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
     --sds-font-caps-xxs-600-letter-spacing: 0.5px;
-    --sds-font-caps-xxs-600-text-transform:  uppercase;
+    --sds-font-caps-xxs-600-text-transform: uppercase;
     --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
     --sds-font-header-xxxs-600-letter-spacing: 0.1px;
     --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
@@ -566,4 +592,4 @@
     --sds-space-xl: 24px;
     --sds-space-xxl: 40px;
   }
-}
+}
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
@@ -55,14 +55,30 @@
       },
       "beta": {
         "default": {
-          "value": "1px solid {sds.color.primitive.purple.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.purple.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.purple.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.purple.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.purple.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.purple.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.purple.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.purple.600.darkValue}"
         }
       },
       "info": {
         "default": {
-          "value": "1px solid {sds.color.primitive.blue.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.blue.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.blue.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.blue.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.blue.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.blue.600.darkValue}"
         }
       },
       "link": {
@@ -77,14 +93,30 @@
       },
       "negative": {
         "default": {
-          "value": "1px solid {sds.color.primitive.red.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.red.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.red.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.red.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.red.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.red.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.red.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.red.600.darkValue}"
         }
       },
       "neutral": {
         "default": {
           "value": "1px solid {sds.color.primitive.gray.500.value}",
           "darkValue": "1px solid {sds.color.primitive.gray.500.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.gray.500.value}",
+          "darkValue": "4px solid {sds.color.primitive.gray.500.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.gray.500.value}",
+          "darkValue": "2px solid {sds.color.primitive.gray.500.darkValue}"
         }
       },
       "none": {
@@ -93,14 +125,30 @@
       },
       "notice": {
         "default": {
-          "value": "1px solid {sds.color.primitive.yellow.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.yellow.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.yellow.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.yellow.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.yellow.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.yellow.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.yellow.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.yellow.600.darkValue}"
         }
       },
       "positive": {
         "default": {
-          "value": "1px solid {sds.color.primitive.green.500.value}",
-          "darkValue": "1px solid {sds.color.primitive.green.500.darkValue}"
+          "value": "1px solid {sds.color.primitive.green.600.value}",
+          "darkValue": "1px solid {sds.color.primitive.green.600.darkValue}"
+        },
+        "extraThick": {
+          "value": "4px solid {sds.color.primitive.green.600.value}",
+          "darkValue": "4px solid {sds.color.primitive.green.600.darkValue}"
+        },
+        "thick": {
+          "value": "2px solid {sds.color.primitive.green.600.value}",
+          "darkValue": "2px solid {sds.color.primitive.green.600.darkValue}"
         }
       }
     }

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -22,24 +22,48 @@ $sds-border-base-pressed: 1px dashed #000000;
 $sds-border-base-pressed-dark: 1px dashed #ffffff;
 $sds-border-base-table: 1px solid #c3c3c3;
 $sds-border-base-table-dark: 1px solid #696969;
-$sds-border-beta-default: 1px solid #8b54e2;
-$sds-border-beta-default-dark: 1px solid #cebef8;
-$sds-border-info-default: 1px solid #1a6cef;
-$sds-border-info-default-dark: 1px solid #a2c9ff;
+$sds-border-beta-default: 1px solid #6526b5;
+$sds-border-beta-default-dark: 1px solid #e4dcfc;
+$sds-border-beta-extra-thick: 4px solid #6526b5;
+$sds-border-beta-extra-thick-dark: 4px solid #e4dcfc;
+$sds-border-beta-thick: 2px solid #6526b5;
+$sds-border-beta-thick-dark: 2px solid #e4dcfc;
+$sds-border-info-default: 1px solid #0041b9;
+$sds-border-info-default-dark: 1px solid #cde3ff;
+$sds-border-info-extra-thick: 4px solid #0041b9;
+$sds-border-info-extra-thick-dark: 4px solid #cde3ff;
+$sds-border-info-thick: 2px solid #0041b9;
+$sds-border-info-thick-dark: 2px solid #cde3ff;
 $sds-border-link-dashed: 1px dashed;
 $sds-border-link-dashed-dark: 1px dashed;
 $sds-border-link-solid: 1px solid;
 $sds-border-link-solid-dark: 1px solid;
-$sds-border-negative-default: 1px solid #db2131;
-$sds-border-negative-default-dark: 1px solid #FF9385;
+$sds-border-negative-default: 1px solid #980013;
+$sds-border-negative-default-dark: 1px solid #FFBDB3;
+$sds-border-negative-extra-thick: 4px solid #980013;
+$sds-border-negative-extra-thick-dark: 4px solid #FFBDB3;
+$sds-border-negative-thick: 2px solid #980013;
+$sds-border-negative-thick-dark: 2px solid #FFBDB3;
 $sds-border-neutral-default: 1px solid #969696;
 $sds-border-neutral-default-dark: 1px solid #aaaaaa;
+$sds-border-neutral-extra-thick: 4px solid #969696;
+$sds-border-neutral-extra-thick-dark: 4px solid #aaaaaa;
+$sds-border-neutral-thick: 2px solid #969696;
+$sds-border-neutral-thick-dark: 2px solid #aaaaaa;
 $sds-border-none: none;
 $sds-border-none-dark: none;
-$sds-border-notice-default: 1px solid #da9900;
-$sds-border-notice-default-dark: 1px solid #cf8e00;
-$sds-border-positive-default: 1px solid #238444;
-$sds-border-positive-default-dark: 1px solid #85d898;
+$sds-border-notice-default: 1px solid #b77800;
+$sds-border-notice-default-dark: 1px solid #efad00;
+$sds-border-notice-extra-thick: 4px solid #b77800;
+$sds-border-notice-extra-thick-dark: 4px solid #efad00;
+$sds-border-notice-thick: 2px solid #b77800;
+$sds-border-notice-thick-dark: 2px solid #efad00;
+$sds-border-positive-default: 1px solid #105b2b;
+$sds-border-positive-default-dark: 1px solid #bcecc5;
+$sds-border-positive-extra-thick: 4px solid #105b2b;
+$sds-border-positive-extra-thick-dark: 4px solid #bcecc5;
+$sds-border-positive-thick: 2px solid #105b2b;
+$sds-border-positive-thick-dark: 2px solid #bcecc5;
 $sds-color-primitive-blue-100: #e2eeff;
 $sds-color-primitive-blue-100-dark: #002573;
 $sds-color-primitive-blue-200: #cce1ff;

diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
       Search by label
     </label>
     <div
-      class="MuiFormControl-root MuiTextField-root css-18ogam2-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-1dk6d19-MuiFormControl-root-MuiTextField-root"
     >
       <div
         class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
@@ -141,7 +141,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-ane0rk-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-undfwx-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -556,7 +556,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-ane0rk-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-undfwx-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
@@ -982,7 +982,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
       <div
         aria-hidden="false"
         aria-label="Search Input"
-        class="MuiFormControl-root MuiTextField-root css-109jzs5-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-hmaycg-MuiFormControl-root-MuiTextField-root"
         tabindex="0"
       >
         <div

diff --git a/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
 >
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-l94e07-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1yszhd5-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"