fix(borders): change borders semantic names

chanzuckerberg · Mar 12, 2024 · cffb970 · cffb970
1 parent 9e831b8
commit cffb970
Show file tree

Hide file tree

Showing 20 changed files with 102 additions and 115 deletions.
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -1,23 +1,22 @@
 :root {
-  --sds-border-negative-400: 1px solid #dc132c;
-  --sds-border-base-100: 1px solid #f8f8f8;
-  --sds-border-base-200: 1px solid #eaeaea;
-  --sds-border-base-300: 1px solid #cccccc;
-  --sds-border-base-400: 1px solid #999999;
-  --sds-border-base-500: 1px solid #767676;
+  --sds-border-negative-default: 1px solid #dc132c;
+  --sds-border-base-divider: 1px solid #eaeaea;
+  --sds-border-base-table: 1px solid #cccccc;
+  --sds-border-base-disabled: 1px solid #cccccc;
+  --sds-border-base-default: 1px solid #999999;
   --sds-border-base-black: 2px dashed #000000;
-  --sds-border-base-dashed-400: 2px dashed #999999;
+  --sds-border-base-hover: 2px dashed #000000;
+  --sds-border-base-dashed: 2px dashed #999999;
   --sds-border-link-dashed: 1px dashed;
   --sds-border-link-solid: 1px solid;
-  --sds-border-accent-300: 1px solid #a6c9ff;
-  --sds-border-accent-400: 1px solid #0b68f8;
-  --sds-border-accent-500: 1px solid #0142a4;
-  --sds-border-accent-600: 1px solid #002660;
-  --sds-border-accent-dashed-400: 2px dashed #0b68f8;
-  --sds-border-info-400: 1px solid #0b68f8;
-  --sds-border-beta-400: 1px solid #7a41ce;
-  --sds-border-positive-400: 1px solid #3cb371;
-  --sds-border-notice-400: 1px solid #f5a623;
+  --sds-border-accent-disabled: 1px solid #a6c9ff;
+  --sds-border-accent-default: 1px solid #0b68f8;
+  --sds-border-accent-hover: 1px solid #0142a4;
+  --sds-border-accent-dashed: 2px dashed #0b68f8;
+  --sds-border-info-default: 1px solid #0b68f8;
+  --sds-border-beta-default: 1px solid #7a41ce;
+  --sds-border-positive-default: 1px solid #3cb371;
+  --sds-border-notice-default: 1px solid #f5a623;
   --sds-border-none: none;
   --sds-color-primitive-common-black: #000000;
   --sds-color-primitive-common-white: #ffffff;

diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json
@@ -2,43 +2,38 @@
   "sds": {
     "border": {
       "negative": {
-        "400": { "value": "1px solid {sds.color.primitive.red.400.value}" }
+        "default": { "value": "1px solid {sds.color.primitive.red.400.value}" }
       },
       "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}" },
-        "400": { "value": "1px solid {sds.color.primitive.gray.400.value}" },
-        "500": { "value": "1px solid {sds.color.primitive.gray.500.value}" },
+        "divider": { "value": "1px solid {sds.color.primitive.gray.200.value}" },
+        "table": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
+        "disabled": { "value": "1px solid {sds.color.primitive.gray.300.value}" },
+        "default": { "value": "1px solid {sds.color.primitive.gray.400.value}" },
         "black": { "value": "2px dashed {sds.color.primitive.common.black.value}" },
-        "dashed": {
-          "400": { "value": "2px dashed {sds.color.primitive.gray.400.value}" }
-        }
+        "hover": { "value": "2px dashed {sds.color.primitive.common.black.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.gray.400.value}" }
       },
       "link": {
         "dashed": { "value": "1px dashed" },
         "solid": { "value": "1px solid" }
       },
       "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": {
-          "400": { "value": "2px dashed {sds.color.primitive.blue.400.value}" }
-        }
+        "disabled": { "value": "1px solid {sds.color.primitive.blue.300.value}" },
+        "default": { "value": "1px solid {sds.color.primitive.blue.400.value}" },
+        "hover": { "value": "1px solid {sds.color.primitive.blue.500.value}" },
+        "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" }
       },
       "info": {
-        "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" }
+        "default": { "value": "1px solid {sds.color.primitive.blue.400.value}" }
       },
       "beta": {
-        "400": { "value": "1px solid {sds.color.primitive.purple.400.value}" }
+        "default": { "value": "1px solid {sds.color.primitive.purple.400.value}" }
       },
       "positive": {
-        "400": { "value": "1px solid {sds.color.primitive.green.400.value}" }
+        "default": { "value": "1px solid {sds.color.primitive.green.400.value}" }
       },
       "notice": {
-        "400": { "value": "1px solid {sds.color.primitive.yellow.400.value}" }
+        "default": { "value": "1px solid {sds.color.primitive.yellow.400.value}" }
       },
       "none": {
         "value": "none"

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -1,22 +1,21 @@
-$sds-border-negative-400: 1px solid #DC132C;
-$sds-border-base-100: 1px solid #F8F8F8;
-$sds-border-base-200: 1px solid #EAEAEA;
-$sds-border-base-300: 1px solid #CCCCCC;
-$sds-border-base-400: 1px solid #999999;
-$sds-border-base-500: 1px solid #767676;
+$sds-border-negative-default: 1px solid #DC132C;
+$sds-border-base-divider: 1px solid #EAEAEA;
+$sds-border-base-table: 1px solid #CCCCCC;
+$sds-border-base-disabled: 1px solid #CCCCCC;
+$sds-border-base-default: 1px solid #999999;
 $sds-border-base-black: 2px dashed #000000;
-$sds-border-base-dashed-400: 2px dashed #999999;
+$sds-border-base-hover: 2px dashed #000000;
+$sds-border-base-dashed: 2px dashed #999999;
 $sds-border-link-dashed: 1px dashed;
 $sds-border-link-solid: 1px solid;
-$sds-border-accent-300: 1px solid #A6C9FF;
-$sds-border-accent-400: 1px solid #0B68F8;
-$sds-border-accent-500: 1px solid #0142A4;
-$sds-border-accent-600: 1px solid #002660;
-$sds-border-accent-dashed-400: 2px dashed #0B68F8;
-$sds-border-info-400: 1px solid #0B68F8;
-$sds-border-beta-400: 1px solid #7A41CE;
-$sds-border-positive-400: 1px solid #3CB371;
-$sds-border-notice-400: 1px solid #F5A623;
+$sds-border-accent-disabled: 1px solid #A6C9FF;
+$sds-border-accent-default: 1px solid #0B68F8;
+$sds-border-accent-hover: 1px solid #0142A4;
+$sds-border-accent-dashed: 2px dashed #0B68F8;
+$sds-border-info-default: 1px solid #0B68F8;
+$sds-border-beta-default: 1px solid #7A41CE;
+$sds-border-positive-default: 1px solid #3CB371;
+$sds-border-notice-default: 1px solid #F5A623;
 $sds-border-none: none;
 $sds-color-primitive-common-black: #000000;
 $sds-color-primitive-common-white: #FFFFFF;

diff --git a/packages/components/src/core/Accordion/style.ts b/packages/components/src/core/Accordion/style.ts
@@ -34,14 +34,14 @@ export const StyledAccordion = styled(Accordion, {
 
     const shadows = getShadows(props);
     const typography = getTypography(props);
-    const border = getBorders(props);
+    const borders = getBorders(props);
     const spaces = getSpaces(props);
 
     return css`
       &.${accordionClasses.root} {
         box-shadow: ${shadows?.none};
         font-family: ${typography?.fontFamily?.body};
-        border-bottom: ${useDivider ? border?.base[200] : "none"};
+        border-bottom: ${useDivider ? borders?.base?.divider : "none"};
         height: fit-content;
 
         & .${accordionSummaryClasses.root} {

diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
@@ -97,7 +97,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
         .${autocompleteClasses.groupUl} {
           position: relative;
           margin: 0 0 ${spaces?.m}px;
-          border-bottom: ${borders?.base[200]};
+          border-bottom: ${borders?.base?.divider};
           padding-bottom: ${spaces?.xxs}px;
 
           & li:last-of-type {
@@ -155,15 +155,15 @@ export const StyledMenuInputSearch = styled(InputSearch, {
 export const StyledPaper = styled(Paper)`
   ${(props) => {
     const spaces = getSpaces(props);
-    const borders = getBorders(props);
     const corners = getCorners(props);
     const shadows = getShadows(props);
+    const borders = getBorders(props);
     const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
       padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px ;
       background-color: ${semanticComponentColors?.base?.surfacePrimary};
-      border: ${borders?.base[100]};
+      border: ${borders?.none};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
       box-sizing: border-box;

diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts
@@ -30,7 +30,7 @@ export const StyledColumn = styled("div")`
       width: ${width}px;
 
       &:not(:last-child) {
-        border-right: ${borders?.base[200]};
+        border-right: ${borders?.base?.divider};
         margin-right: ${spaces?.m}px;
       }
 

diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts
@@ -36,15 +36,15 @@ export const StyledPopper = styled(Popper, {
     !doNotForwardProps.includes(prop) || prop === "anchorEl",
 })`
   ${(props: StyleProps) => {
-    const borders = getBorders(props);
     const corners = getCorners(props);
     const shadows = getShadows(props);
     const spaces = getSpaces(props);
+    const borders = getBorders(props);
     const semanticComponentColors = getSemanticComponentColors(props);
 
     return `
       background-color: ${semanticComponentColors?.base?.surfacePrimary};
-      border: ${borders?.base[100]};
+      border: ${borders?.none};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
       padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px;

diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/style.ts b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/style.ts
@@ -41,7 +41,7 @@ export const StyledColorWrapper = styled("div")`
       }
 
       &:hover {
-        border: ${borders?.base.black};
+        border: ${borders?.base?.hover};
         z-index: 10;
 
         .color-title {

diff --git a/packages/components/src/core/DropdownMenu/style.ts b/packages/components/src/core/DropdownMenu/style.ts
@@ -82,7 +82,7 @@ export const StyledPopper = styled(Popper, {
 
     return `
       background-color: ${semanticComponentColors?.base?.surface};
-      border: ${borders?.base[100]};
+      border: ${borders?.none};
       border-radius: ${corners?.m}px;
       box-shadow: ${shadows?.m};
       box-sizing: border-box;
@@ -101,8 +101,7 @@ export const StyledPaper = styled(Paper, {
 
     return `
       box-shadow: ${shadows?.none} !important;
-      border: ${borders?.none} !important;
-      border-radius: 0;
+      border: ${borders?.none};
       margin: 0;
       padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px;
 

diff --git a/packages/components/src/core/InputDropdown/style.ts b/packages/components/src/core/InputDropdown/style.ts
@@ -50,7 +50,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
   return css`
     ${labelStyle(props)}
 
-    border: ${borders?.base[400]};
+    border: ${borders?.base?.default};
     color: ${semanticTextColors?.base?.primary};
     cursor: pointer;
     padding: ${padding};
@@ -93,7 +93,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => {
     }
 
     &:active {
-      border: ${borders?.accent[400]};
+      border: ${borders?.accent?.default};
       color: ${semanticTextColors?.base?.primary};
 
       path {

diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
@@ -33,17 +33,17 @@ const error = (props: InputTextExtraProps): SerializedStyles => {
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.negative[400]};
+      border: ${borders?.negative?.default};
     }
 
     .${outlinedInputClasses.root}:hover
       .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.negative[400]};
+      border: ${borders?.negative?.default};
     }
 
     .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.negative[400]};
+        border: ${borders?.negative?.default};
       }
 
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
@@ -62,17 +62,17 @@ const warning = (props: InputTextExtraProps): SerializedStyles => {
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.notice[400]};
+      border: ${borders?.notice?.default};
     }
 
     .${outlinedInputClasses.root}:hover
       .${outlinedInputClasses.notchedOutline} {
-      border: ${borders?.notice[400]};
+      border: ${borders?.notice?.default};
     }
 
     .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.notice[400]};
+        border: ${borders?.notice?.default};
       }
 
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
@@ -92,11 +92,11 @@ const disabledStyled = (props: InputTextExtraProps): SerializedStyles => {
   return css`
     .${outlinedInputClasses.disabled} {
       .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.base[300]};
+        border: ${borders?.base?.disabled};
       }
 
       &:hover .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.base[300]};
+        border: ${borders?.base?.disabled};
       }
 
       &::placeholder {
@@ -128,10 +128,10 @@ const userInput = (props: InputTextExtraProps): SerializedStyles => {
 
   const border =
     intent === "error"
-      ? borders?.negative[400]
+      ? borders?.negative?.default
       : intent === "warning"
-        ? borders?.notice[400]
-        : borders?.accent[400];
+        ? borders?.notice?.default
+        : borders?.accent?.default;
 
   return css`
     .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
@@ -187,7 +187,7 @@ export const StyledInputBase = styled(TextField, {
 
       .${outlinedInputClasses.notchedOutline} {
         border-radius: ${corners?.m}px;
-        border: ${borders?.base[400]};
+        border: ${borders?.base?.default};
       }
 
       .${outlinedInputClasses.root}:hover
@@ -197,7 +197,7 @@ export const StyledInputBase = styled(TextField, {
 
       .${outlinedInputClasses.root}.${outlinedInputClasses.focused}
         .${outlinedInputClasses.notchedOutline} {
-        border: ${borders?.accent[400]};
+        border: ${borders?.accent?.default};
       }
 
       ${sdsType === "textArea" && textArea(props)}

diff --git a/packages/components/src/core/InputToggle/style.ts b/packages/components/src/core/InputToggle/style.ts
@@ -68,7 +68,7 @@ const toggleOn = (props: InputToggleExtraProps) => {
   const semanticTextColors = getSemanticTextColors(props);
 
   return `
-    outline: ${disabled ? borders?.accent[300] : borders?.accent[400]};
+    outline: ${disabled ? borders?.accent?.disabled : borders?.accent?.default};
 
     .${switchClasses.thumb} {
       color: ${disabled ? semanticComponentColors?.accent?.borderDisabled : semanticComponentColors?.accent?.border};
@@ -93,7 +93,7 @@ const toggleOn = (props: InputToggleExtraProps) => {
     ${
       !disabled &&
       `&:hover {
-        outline: ${borders?.accent[500]};
+        outline: ${borders?.accent?.hover};
 
         .${switchClasses.thumb} {
           color: ${colors?.blue[500]};
@@ -112,7 +112,7 @@ const toggleOff = (props: InputToggleExtraProps) => {
 
   return `
     & {
-      outline: ${disabled ? borders?.base[300] : borders?.base[400]};
+      outline: ${disabled ? borders?.base?.disabled : borders?.base?.default};
     }
 
     .${switchClasses.thumb} {

diff --git a/packages/components/src/core/NavigationJumpTo/style.ts b/packages/components/src/core/NavigationJumpTo/style.ts
@@ -82,7 +82,7 @@ export const StyledTab = styled(Tab, {
         left: -${spaces?.l}px;
         width: ${spaces?.xxxs}px;
         height: 100%;
-        background-color: ${semanticComponentColors?.base?.borderHover};
+        background-color: ${semanticComponentColors?.base?.border};
         display: none;
         border-radius: ${spaces?.xxxs}px;
       }

diff --git a/packages/components/src/core/TableRow/style.ts b/packages/components/src/core/TableRow/style.ts
@@ -88,7 +88,7 @@ export const StyledTableRow = styled("tr", {
 
     return `
       align-items: center;
-      border-bottom: ${useDivider ? borders?.base[300] : borders?.none};
+      border-bottom: ${useDivider ? borders?.base?.table : borders?.none};
 
       ${rowHeight ? `max-height: ${rowHeight}px;` : ""}
 

diff --git a/packages/components/src/core/Tabs/style.tsx b/packages/components/src/core/Tabs/style.tsx
@@ -85,7 +85,7 @@ export const StyledTab = styled(RawTab, {
       color: ${semanticTextColors?.base?.secondary};
 
       &:hover, :focus {
-        box-shadow: 0 2px 0 0 ${semanticComponentColors?.base?.borderHover};
+        box-shadow: 0 2px 0 0 ${semanticComponentColors?.base?.border};
         color: ${semanticTextColors?.base?.primary};
       }