fix(bordercolors): fix border colors design tokens

chanzuckerberg · Feb 17, 2024 · 9f8010b · 9f8010b
1 parent 6c63b52
commit 9f8010b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 deletions.
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -1,20 +1,22 @@
 :root {
-  --sds-borders-error-400: 1px solid #fef2f2;
-  --sds-borders-gray-100: 1px solid #f8f8f8;
-  --sds-borders-gray-200: 1px solid #eaeaea;
-  --sds-borders-gray-300: 1px solid #cccccc;
-  --sds-borders-gray-400: 1px solid #999999;
-  --sds-borders-gray-500: 1px solid #767676;
-  --sds-borders-gray-dashed: 2px dashed #999999;
+  --sds-borders-negative-400: 1px solid #dc132c;
+  --sds-borders-base-100: 1px solid #f8f8f8;
+  --sds-borders-base-200: 1px solid #eaeaea;
+  --sds-borders-base-300: 1px solid #cccccc;
+  --sds-borders-base-400: 1px solid #999999;
+  --sds-borders-base-500: 1px solid #767676;
+  --sds-borders-base-dashed: 2px dashed #999999;
   --sds-borders-link-dashed: 1px dashed;
   --sds-borders-link-solid: 1px solid;
-  --sds-borders-primary-300: 1px solid #a6c9ff;
-  --sds-borders-primary-400: 1px solid #0b68f8;
-  --sds-borders-primary-500: 1px solid #0142a4;
-  --sds-borders-primary-600: 1px solid #002660;
-  --sds-borders-primary-dashed: 2px dashed #0b68f8;
-  --sds-borders-success-400: 1px solid #ecf5f0;
-  --sds-borders-warning-400: 1px solid #fcf6ec;
+  --sds-borders-accent-300: 1px solid #a6c9ff;
+  --sds-borders-accent-400: 1px solid #0b68f8;
+  --sds-borders-accent-500: 1px solid #0142a4;
+  --sds-borders-accent-600: 1px solid #002660;
+  --sds-borders-accent-dashed: 2px dashed #0b68f8;
+  --sds-borders-info-400: 1px solid #0b68f8;
+  --sds-borders-beta-400: 1px solid #7a41ce;
+  --sds-borders-positive-400: 1px solid #3cb371;
+  --sds-borders-notice-400: 1px solid #f5a623;
   --sds-color-primitive-blue-100: #f5f9ff;
   --sds-color-primitive-blue-200: #e9f1ff;
   --sds-color-primitive-blue-300: #a6c9ff;

diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
@@ -1,10 +1,10 @@
 {
   "sds": {
     "borders": {
-      "error": {
-        "400": { "value": "1px solid {sds.color.primitive.red.100.value}" }
+      "negative": {
+        "400": { "value": "1px solid {sds.color.primitive.red.400.value}" }
       },
-      "gray": {
+      "base": {
         "100": { "value": "1px solid {sds.color.primitive.gray.100.value}" },
         "200": { "value": "1px solid {sds.color.primitive.gray.200.value}" },
         "300": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
@@ -16,18 +16,24 @@
         "dashed": { "value": "1px dashed" },
         "solid": { "value": "1px solid" }
       },
-      "primary": {
+      "accent": {
         "300": { "value": "1px solid {sds.color.primitive.blue.300.value}" },
         "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" },
         "500": { "value": "1px solid {sds.color.primitive.blue.500.value}" },
         "600": { "value": "1px solid {sds.color.primitive.blue.600.value}" },
         "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" }
       },
-      "success": {
-        "400": { "value": "1px solid {sds.color.primitive.green.100.value}" }
+      "info": {
+        "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" }
       },
-      "warning": {
-        "400": { "value": "1px solid {sds.color.primitive.yellow.100.value}" }
+      "beta": {
+        "400": { "value": "1px solid {sds.color.primitive.purple.400.value}" }
+      },
+      "positive": {
+        "400": { "value": "1px solid {sds.color.primitive.green.400.value}" }
+      },
+      "notice": {
+        "400": { "value": "1px solid {sds.color.primitive.yellow.400.value}" }
       }
     }
   }

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -1,19 +1,21 @@
-$sds-borders-error-400: 1px solid #FEF2F2;
-$sds-borders-gray-100: 1px solid #F8F8F8;
-$sds-borders-gray-200: 1px solid #EAEAEA;
-$sds-borders-gray-300: 1px solid #CCCCCC;
-$sds-borders-gray-400: 1px solid #999999;
-$sds-borders-gray-500: 1px solid #767676;
-$sds-borders-gray-dashed: 2px dashed #999999;
+$sds-borders-negative-400: 1px solid #DC132C;
+$sds-borders-base-100: 1px solid #F8F8F8;
+$sds-borders-base-200: 1px solid #EAEAEA;
+$sds-borders-base-300: 1px solid #CCCCCC;
+$sds-borders-base-400: 1px solid #999999;
+$sds-borders-base-500: 1px solid #767676;
+$sds-borders-base-dashed: 2px dashed #999999;
 $sds-borders-link-dashed: 1px dashed;
 $sds-borders-link-solid: 1px solid;
-$sds-borders-primary-300: 1px solid #A6C9FF;
-$sds-borders-primary-400: 1px solid #0B68F8;
-$sds-borders-primary-500: 1px solid #0142A4;
-$sds-borders-primary-600: 1px solid #002660;
-$sds-borders-primary-dashed: 2px dashed #0B68F8;
-$sds-borders-success-400: 1px solid #ECF5F0;
-$sds-borders-warning-400: 1px solid #FCF6EC;
+$sds-borders-accent-300: 1px solid #A6C9FF;
+$sds-borders-accent-400: 1px solid #0B68F8;
+$sds-borders-accent-500: 1px solid #0142A4;
+$sds-borders-accent-600: 1px solid #002660;
+$sds-borders-accent-dashed: 2px dashed #0B68F8;
+$sds-borders-info-400: 1px solid #0B68F8;
+$sds-borders-beta-400: 1px solid #7A41CE;
+$sds-borders-positive-400: 1px solid #3CB371;
+$sds-borders-notice-400: 1px solid #F5A623;
 $sds-color-primitive-blue-100: #F5F9FF;
 $sds-color-primitive-blue-200: #E9F1FF;
 $sds-color-primitive-blue-300: #A6C9FF;