refactor(contentcard): removed borderSecondary colors and fixed media…

… overlapping with border
chanzuckerberg · Feb 27, 2025 · 946c469 · 946c469
1 parent 1f23d20
commit 946c469
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 53 deletions.
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -102,13 +102,10 @@
     --sds-color-semantic-base-border-primary-hover: #000000;
     --sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
     --sds-color-semantic-base-border-primary-inverse: #c3c3c3;
-    --sds-color-semantic-base-border-primary-on-fill: #ffffff;
+    --sds-color-semantic-base-border-on-fill: #ffffff;
     --sds-color-semantic-base-border-primary-pressed: #000000;
     --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
     --sds-color-semantic-base-border-secondary: #c3c3c3;
-    --sds-color-semantic-base-border-secondary-hover: #969696;
-    --sds-color-semantic-base-border-secondary-pressed: #3b3b3b;
-    --sds-color-semantic-base-border-secondary-disabled: #dfdfdf;
     --sds-color-semantic-base-divider: #dfdfdf;
     --sds-color-semantic-base-divider-inverse: #6c6c6c;
     --sds-color-semantic-base-fill-disabled: #dfdfdf;
@@ -615,13 +612,10 @@
     --sds-color-semantic-base-border-primary-hover: #ffffff;
     --sds-color-semantic-base-border-primary-hover-inverse: #000000;
     --sds-color-semantic-base-border-primary-inverse: #696969;
-    --sds-color-semantic-base-border-primary-on-fill: #000000;
+    --sds-color-semantic-base-border-on-fill: #000000;
     --sds-color-semantic-base-border-primary-pressed: #ffffff;
     --sds-color-semantic-base-border-primary-pressed-inverse: #000000;
     --sds-color-semantic-base-border-secondary: #696969;
-    --sds-color-semantic-base-border-secondary-hover: #aaaaaa;
-    --sds-color-semantic-base-border-secondary-pressed: #ededed;
-    --sds-color-semantic-base-border-secondary-disabled: #494949;
     --sds-color-semantic-base-divider: #494949;
     --sds-color-semantic-base-divider-inverse: #cdcdcd;
     --sds-color-semantic-base-fill-disabled: #494949;

diff --git a/packages/components/src/common/styles-dictionary/design-tokens/colors.json b/packages/components/src/common/styles-dictionary/design-tokens/colors.json
@@ -122,7 +122,7 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
-          "border-primary-on-fill": {
+          "border-on-fill": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
@@ -138,18 +138,6 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
-          "border-secondary-hover": {
-            "value": "{sds.color.primitive.gray.500.value}",
-            "darkValue": "{sds.color.primitive.gray.500.darkValue}"
-          },
-          "border-secondary-pressed": {
-            "value": "{sds.color.primitive.gray.700.value}",
-            "darkValue": "{sds.color.primitive.gray.700.darkValue}"
-          },
-          "border-secondary-disabled": {
-            "value": "{sds.color.primitive.gray.200.value}",
-            "darkValue": "{sds.color.primitive.gray.200.darkValue}"
-          },
           "divider": {
             "value": "{sds.color.primitive.gray.200.value}",
             "darkValue": "{sds.color.primitive.gray.200.darkValue}"

diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -1169,13 +1169,10 @@
       "sds-color-semantic-base-border-primary-hover": "#ffffff",
       "sds-color-semantic-base-border-primary-hover-inverse": "#000000",
       "sds-color-semantic-base-border-primary-inverse": "#696969",
-      "sds-color-semantic-base-border-primary-on-fill": "#000000",
+      "sds-color-semantic-base-border-on-fill": "#000000",
       "sds-color-semantic-base-border-primary-pressed": "#ffffff",
       "sds-color-semantic-base-border-primary-pressed-inverse": "#000000",
       "sds-color-semantic-base-border-secondary": "#696969",
-      "sds-color-semantic-base-border-secondary-hover": "#aaaaaa",
-      "sds-color-semantic-base-border-secondary-pressed": "#ededed",
-      "sds-color-semantic-base-border-secondary-disabled": "#494949",
       "sds-color-semantic-base-divider": "#494949",
       "sds-color-semantic-base-divider-inverse": "#cdcdcd",
       "sds-color-semantic-base-fill-disabled": "#494949",
@@ -1341,13 +1338,10 @@
       "sds-color-semantic-base-border-primary-hover": "#000000",
       "sds-color-semantic-base-border-primary-hover-inverse": "#ffffff",
       "sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
-      "sds-color-semantic-base-border-primary-on-fill": "#ffffff",
+      "sds-color-semantic-base-border-on-fill": "#ffffff",
       "sds-color-semantic-base-border-primary-pressed": "#000000",
       "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
       "sds-color-semantic-base-border-secondary": "#c3c3c3",
-      "sds-color-semantic-base-border-secondary-hover": "#969696",
-      "sds-color-semantic-base-border-secondary-pressed": "#3b3b3b",
-      "sds-color-semantic-base-border-secondary-disabled": "#dfdfdf",
       "sds-color-semantic-base-divider": "#dfdfdf",
       "sds-color-semantic-base-divider-inverse": "#6c6c6c",
       "sds-color-semantic-base-fill-disabled": "#dfdfdf",

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -199,20 +199,14 @@ $sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
 $sds-color-semantic-base-border-primary-hover-inverse-dark: #000000;
 $sds-color-semantic-base-border-primary-inverse: #c3c3c3;
 $sds-color-semantic-base-border-primary-inverse-dark: #696969;
-$sds-color-semantic-base-border-primary-on-fill: #ffffff;
-$sds-color-semantic-base-border-primary-on-fill-dark: #000000;
+$sds-color-semantic-base-border-on-fill: #ffffff;
+$sds-color-semantic-base-border-on-fill-dark: #000000;
 $sds-color-semantic-base-border-primary-pressed: #000000;
 $sds-color-semantic-base-border-primary-pressed-dark: #ffffff;
 $sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
 $sds-color-semantic-base-border-primary-pressed-inverse-dark: #000000;
 $sds-color-semantic-base-border-secondary: #c3c3c3;
 $sds-color-semantic-base-border-secondary-dark: #696969;
-$sds-color-semantic-base-border-secondary-hover: #969696;
-$sds-color-semantic-base-border-secondary-hover-dark: #aaaaaa;
-$sds-color-semantic-base-border-secondary-pressed: #3b3b3b;
-$sds-color-semantic-base-border-secondary-pressed-dark: #ededed;
-$sds-color-semantic-base-border-secondary-disabled: #dfdfdf;
-$sds-color-semantic-base-border-secondary-disabled-dark: #494949;
 $sds-color-semantic-base-divider: #dfdfdf;
 $sds-color-semantic-base-divider-dark: #494949;
 $sds-color-semantic-base-divider-inverse: #6c6c6c;

diff --git a/packages/components/src/core/ContentCard/components/ContentCardImageMedia/index.tsx b/packages/components/src/core/ContentCard/components/ContentCardImageMedia/index.tsx
@@ -33,7 +33,7 @@ const ContentCardImageMedia = forwardRef<
     maxHeight: sdsType === "narrow" ? imageSize : "100%",
     maxWidth: sdsType === "narrow" ? "100%" : imageSize,
     minHeight: imageSize,
-    minWidth: imageSize,
+    minWidth: sdsType === "narrow" ? "unset" : imageSize,
     width: "100%",
   };
 

diff --git a/packages/components/src/core/NavigationHeader/components/NavigationHeaderPrimaryNav/style.ts b/packages/components/src/core/NavigationHeader/components/NavigationHeaderPrimaryNav/style.ts
@@ -21,7 +21,7 @@ const NarrowPrimaryNavItem = (props: PrimaryNavItemProps): SerializedStyles => {
     : colors?.base.backgroundSecondary;
 
   const activeBorderColor = hasInvertedStyle
-    ? colors?.base?.borderPrimaryOnFill
+    ? colors?.base?.borderOnFill
     : colors?.accent?.border;
 
   const inactiveBorderColor = hasInvertedStyle
@@ -88,11 +88,11 @@ const WideStyledLabel = (props: PrimaryNavItemProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   const activeBorderColor = hasInvertedStyle
-    ? colors?.base?.borderPrimaryOnFill
+    ? colors?.base?.borderOnFill
     : colors?.accent?.border;
 
   const inactiveBorderColor = hasInvertedStyle
-    ? colors?.base.borderPrimaryOnFill
+    ? colors?.base.borderOnFill
     : colors?.base.borderPrimary;
 
   return css`

diff --git a/packages/components/src/core/styles/common/makeThemeOptions.ts b/packages/components/src/core/styles/common/makeThemeOptions.ts
@@ -31,19 +31,16 @@ export const SDSPaletteLight = (appTheme: AppTheme): SDSPalette => {
       backgroundSecondary: appTheme.colors.gray[100],
       backgroundSecondaryInverse: appTheme.colors.gray[700],
       backgroundTertiary: appTheme.colors.gray[200],
+      borderOnFill: appTheme.colors.gray[50]!,
       borderPrimary: appTheme.colors.gray[600],
       borderPrimaryDisabled: appTheme.colors.gray[300],
       borderPrimaryDisabledInverse: appTheme.colors.gray[600],
       borderPrimaryHover: appTheme.colors.gray[900]!,
       borderPrimaryHoverInverse: appTheme.colors.gray[50]!,
       borderPrimaryInverse: appTheme.colors.gray[300],
-      borderPrimaryOnFill: appTheme.colors.gray[50]!,
       borderPrimaryPressed: appTheme.colors.gray[900]!,
       borderPrimaryPressedInverse: appTheme.colors.gray[50]!,
       borderSecondary: appTheme.colors.gray[300],
-      borderSecondaryDisabled: appTheme.colors.gray[200],
-      borderSecondaryHover: appTheme.colors.gray[500],
-      borderSecondaryPressed: appTheme.colors.gray[700],
       divider: appTheme.colors.gray[200],
       dividerInverse: appTheme.colors.gray[600],
       fillDisabled: appTheme.colors.gray[200],
@@ -171,19 +168,16 @@ export const SDSPaletteDark = (appTheme: AppTheme): SDSPalette => {
       backgroundSecondary: appTheme.colors.gray[100],
       backgroundSecondaryInverse: appTheme.colors.gray[700],
       backgroundTertiary: appTheme.colors.gray[200],
+      borderOnFill: appTheme.colors.gray[50]!,
       borderPrimary: appTheme.colors.gray[600],
       borderPrimaryDisabled: appTheme.colors.gray[300],
       borderPrimaryDisabledInverse: appTheme.colors.gray[600],
       borderPrimaryHover: appTheme.colors.gray[900]!,
       borderPrimaryHoverInverse: appTheme.colors.gray[50]!,
       borderPrimaryInverse: appTheme.colors.gray[300],
-      borderPrimaryOnFill: appTheme.colors.gray[50]!,
       borderPrimaryPressed: appTheme.colors.gray[900]!,
       borderPrimaryPressedInverse: appTheme.colors.gray[50]!,
       borderSecondary: appTheme.colors.gray[300],
-      borderSecondaryDisabled: appTheme.colors.gray[200],
-      borderSecondaryHover: appTheme.colors.gray[500],
-      borderSecondaryPressed: appTheme.colors.gray[700],
       divider: appTheme.colors.gray[200],
       dividerInverse: appTheme.colors.gray[600],
       fillDisabled: appTheme.colors.gray[200],

diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts
@@ -52,14 +52,11 @@ export interface BaseColor {
   borderSecondary: string;
   borderPrimaryHover: string;
   borderPrimaryHoverInverse: string;
-  borderSecondaryHover: string;
-  borderPrimaryOnFill: string;
+  borderOnFill: string;
   borderPrimaryPressed: string;
   borderPrimaryPressedInverse: string;
-  borderSecondaryPressed: string;
   borderPrimaryDisabled: string;
   borderPrimaryDisabledInverse: string;
-  borderSecondaryDisabled: string;
   ornamentDisabled: string;
   ornamentDisabledInverse: string;
   ornamentOnFill: string;