fix: issue with custom colors wrong property name (#1139)

db-ux-design-system · Jan 28, 2025 · 4261ce8 · 4261ce8
1 parent bf25dfe
commit 4261ce8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/utils/data.ts b/src/utils/data.ts
@@ -229,11 +229,11 @@ export const speakingNamesDefaultMapping: SpeakingName[] = [
   { name: "bg-inverted-contrast-max-hovered", dark: 11, light: 4 },
   { name: "bg-inverted-contrast-max-pressed", dark: 10, light: 5 },
   { name: "bg-inverted-contrast-high-default", dark: 9, light: 6 },
-  { name: "bg-inverted-bg-inverted-contrast-high-hovered", dark: 8, light: 5 },
-  { name: "bg-inverted-bg-inverted-contrast-high-pressed", dark: 7, light: 4 },
+  { name: "bg-inverted-contrast-high-hovered", dark: 8, light: 5 },
+  { name: "bg-inverted-contrast-high-pressed", dark: 7, light: 4 },
   { name: "bg-inverted-contrast-low-default", dark: 8, light: 7 },
-  { name: "bg-inverted-bg-inverted-contrast-low-hovered", dark: 7, light: 6 },
-  { name: "bg-inverted-bg-inverted-contrast-low-pressed", dark: 6, light: 5 },
+  { name: "bg-inverted-contrast-low-hovered", dark: 7, light: 6 },
+  { name: "bg-inverted-contrast-low-pressed", dark: 6, light: 5 },
   { name: "on-bg-inverted-default", dark: 3, light: 14 },
   { name: "on-bg-inverted-hovered", dark: 4, light: 13 },
   { name: "on-bg-inverted-pressed", dark: 5, light: 12 },

diff --git a/src/utils/outputs/download.ts b/src/utils/outputs/download.ts
@@ -173,7 +173,7 @@ export const downloadTheme = async (
 
     let allCustomColorClasses = "";
     for (const colorName of Object.keys(theme.customColors)) {
-      const colorClass = generateCustomColorClass(colorName);
+      const colorClass = generateCustomColorClass(colorName.toLowerCase());
       zip.file(
         `${webFolder}/${customColorsFolder}/classes/${colorName}.css`,
         colorClass,

diff --git a/src/utils/outputs/web/custom-color-class.ts b/src/utils/outputs/web/custom-color-class.ts
@@ -109,20 +109,20 @@ export const generateCustomColorClass = (colorName: string): string => {
   --db-adaptive-bg-inverted-contrast-high-default: var(
   	--db-${colorName}-bg-inverted-contrast-high-default
   );
-  --db-adaptive-bg-inverted-bg-inverted-contrast-high-hovered: var(
-  	--db-${colorName}-bg-inverted-bg-inverted-contrast-high-hovered
+  --db-adaptive-bg-inverted-contrast-high-hovered: var(
+  	--db-${colorName}-bg-inverted-contrast-high-hovered
   );
-  --db-adaptive-bg-inverted-bg-inverted-contrast-high-pressed: var(
-  	--db-${colorName}-bg-inverted-bg-inverted-contrast-high-pressed
+  --db-adaptive-bg-inverted-contrast-high-pressed: var(
+  	--db-${colorName}-bg-inverted-contrast-high-pressed
   );
   --db-adaptive-bg-inverted-contrast-low-default: var(
   	--db-${colorName}-bg-inverted-contrast-low-default
   );
-  --db-adaptive-bg-inverted-bg-inverted-contrast-low-hovered: var(
-  	--db-${colorName}-bg-inverted-bg-inverted-contrast-low-hovered
+  --db-adaptive-bg-inverted-contrast-low-hovered: var(
+  	--db-${colorName}-bg-inverted-contrast-low-hovered
   );
-  --db-adaptive-bg-inverted-bg-inverted-contrast-low-pressed: var(
-  	--db-${colorName}-bg-inverted-bg-inverted-contrast-low-pressed
+  --db-adaptive-bg-inverted-contrast-low-pressed: var(
+  	--db-${colorName}-bg-inverted-contrast-low-pressed
   );
   --db-adaptive-on-bg-inverted-default: var(
   	--db-${colorName}-on-bg-inverted-default