Switching decorative backgrounds to not use alpha (#77)

* Switching decorative backgrounds to not use alpha. {color.alpha.lime.300} -> {color.lime.300} * Generate assets.
element-hq · Feb 29, 2024 · c3fff1f · c3fff1f
1 parent 6c5bec9
commit c3fff1f
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 48 deletions.
diff --git a/assets/ios/swift/CompoundColorTokens.swift b/assets/ios/swift/CompoundColorTokens.swift
@@ -343,12 +343,12 @@ public class CompoundColorTokens {
     public static let colorBgAccentPressed = colorGreen1100
     public static let colorBgAccentHovered = colorGreen1000
     public static let colorBgAccentRest = colorGreen900
-    public static let colorBgDecorative6 = colorAlphaOrange300
-    public static let colorBgDecorative5 = colorAlphaPink300
-    public static let colorBgDecorative4 = colorAlphaPurple300
-    public static let colorBgDecorative3 = colorAlphaFuchsia300
-    public static let colorBgDecorative2 = colorAlphaCyan300
-    public static let colorBgDecorative1 = colorAlphaLime300
+    public static let colorBgDecorative6 = colorOrange300
+    public static let colorBgDecorative5 = colorPink300
+    public static let colorBgDecorative4 = colorPurple300
+    public static let colorBgDecorative3 = colorFuchsia300
+    public static let colorBgDecorative2 = colorCyan300
+    public static let colorBgDecorative1 = colorLime300
     public static let colorBgInfoSubtle = colorBlue200
     public static let colorBgSuccessSubtle = colorGreen200
     public static let colorBgCriticalSubtleHovered = colorRed300

diff --git a/assets/ios/swift/CompoundUIColorTokens.swift b/assets/ios/swift/CompoundUIColorTokens.swift
@@ -343,12 +343,12 @@ public class CompoundUIColorTokens {
     public static let colorBgAccentPressed = colorGreen1100
     public static let colorBgAccentHovered = colorGreen1000
     public static let colorBgAccentRest = colorGreen900
-    public static let colorBgDecorative6 = colorAlphaOrange300
-    public static let colorBgDecorative5 = colorAlphaPink300
-    public static let colorBgDecorative4 = colorAlphaPurple300
-    public static let colorBgDecorative3 = colorAlphaFuchsia300
-    public static let colorBgDecorative2 = colorAlphaCyan300
-    public static let colorBgDecorative1 = colorAlphaLime300
+    public static let colorBgDecorative6 = colorOrange300
+    public static let colorBgDecorative5 = colorPink300
+    public static let colorBgDecorative4 = colorPurple300
+    public static let colorBgDecorative3 = colorFuchsia300
+    public static let colorBgDecorative2 = colorCyan300
+    public static let colorBgDecorative1 = colorLime300
     public static let colorBgInfoSubtle = colorBlue200
     public static let colorBgSuccessSubtle = colorGreen200
     public static let colorBgCriticalSubtleHovered = colorRed300

diff --git a/assets/web/css/cpd-common-semantic.css b/assets/web/css/cpd-common-semantic.css
@@ -26,12 +26,12 @@
   --cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
   --cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
   --cpd-color-bg-accent-rest: var(--cpd-color-green-900);
-  --cpd-color-bg-decorative-6: var(--cpd-color-alpha-orange-300);
-  --cpd-color-bg-decorative-5: var(--cpd-color-alpha-pink-300);
-  --cpd-color-bg-decorative-4: var(--cpd-color-alpha-purple-300);
-  --cpd-color-bg-decorative-3: var(--cpd-color-alpha-fuchsia-300);
-  --cpd-color-bg-decorative-2: var(--cpd-color-alpha-cyan-300);
-  --cpd-color-bg-decorative-1: var(--cpd-color-alpha-lime-300);
+  --cpd-color-bg-decorative-6: var(--cpd-color-orange-300);
+  --cpd-color-bg-decorative-5: var(--cpd-color-pink-300);
+  --cpd-color-bg-decorative-4: var(--cpd-color-purple-300);
+  --cpd-color-bg-decorative-3: var(--cpd-color-fuchsia-300);
+  --cpd-color-bg-decorative-2: var(--cpd-color-cyan-300);
+  --cpd-color-bg-decorative-1: var(--cpd-color-lime-300);
   --cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
   --cpd-color-bg-success-subtle: var(--cpd-color-green-200);
   --cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);

diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js
@@ -587,12 +587,12 @@ export const cpdColorBgCriticalSubtle = "#3e0000";
 export const cpdColorBgCriticalSubtleHovered = "#470000";
 export const cpdColorBgSuccessSubtle = "#001f0e";
 export const cpdColorBgInfoSubtle = "#00095d";
-export const cpdColorBgDecorative1 = "hsl(120, 100%, 8%, 1)";
-export const cpdColorBgDecorative2 = "hsl(219, 100%, 15%, 1)";
-export const cpdColorBgDecorative3 = "hsl(282, 100%, 15%, 1)";
-export const cpdColorBgDecorative4 = "hsl(259, 100%, 21%, 1)";
-export const cpdColorBgDecorative5 = "hsl(339, 100%, 14%, 1)";
-export const cpdColorBgDecorative6 = "hsl(0, 100%, 14%, 1)";
+export const cpdColorBgDecorative1 = "#002600";
+export const cpdColorBgDecorative2 = "#001b4e";
+export const cpdColorBgDecorative3 = "#37004e";
+export const cpdColorBgDecorative4 = "#22006a";
+export const cpdColorBgDecorative5 = "#450018";
+export const cpdColorBgDecorative6 = "#470000";
 export const cpdColorBgAccentRest = "#129a78";
 export const cpdColorBgAccentHovered = "#17ac84";
 export const cpdColorBgAccentPressed = "#1fc090";

diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js
@@ -587,12 +587,12 @@ export const cpdColorBgCriticalSubtle = "#470000";
 export const cpdColorBgCriticalSubtleHovered = "#590000";
 export const cpdColorBgSuccessSubtle = "#002513";
 export const cpdColorBgInfoSubtle = "#001264";
-export const cpdColorBgDecorative1 = "hsl(120, 100%, 9%, 1)";
-export const cpdColorBgDecorative2 = "hsl(215, 100%, 18%, 1)";
-export const cpdColorBgDecorative3 = "hsl(285, 100%, 18%, 1)";
-export const cpdColorBgDecorative4 = "hsl(261, 100%, 25%, 1)";
-export const cpdColorBgDecorative5 = "hsl(335, 100%, 17%, 1)";
-export const cpdColorBgDecorative6 = "hsl(0, 100%, 17%, 1)";
+export const cpdColorBgDecorative1 = "#003000";
+export const cpdColorBgDecorative2 = "#002559";
+export const cpdColorBgDecorative3 = "#46005e";
+export const cpdColorBgDecorative4 = "#2c0080";
+export const cpdColorBgDecorative5 = "#550024";
+export const cpdColorBgDecorative6 = "#580000";
 export const cpdColorBgAccentRest = "#37c998";
 export const cpdColorBgAccentHovered = "#61d2a6";
 export const cpdColorBgAccentPressed = "#8fddbc";

diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js
@@ -587,12 +587,12 @@ export const cpdColorBgCriticalSubtle = "#fff7f6";
 export const cpdColorBgCriticalSubtleHovered = "#ffefec";
 export const cpdColorBgSuccessSubtle = "#f1fbf6";
 export const cpdColorBgInfoSubtle = "#f4f8ff";
-export const cpdColorBgDecorative1 = "hsla(107, 98%, 41%, 0.15)";
-export const cpdColorBgDecorative2 = "hsla(188, 100%, 38%, 0.11)";
-export const cpdColorBgDecorative3 = "hsla(295, 89%, 41%, 0.07)";
-export const cpdColorBgDecorative4 = "hsla(248, 100%, 55%, 0.07)";
-export const cpdColorBgDecorative5 = "hsla(347, 100%, 54%, 0.08)";
-export const cpdColorBgDecorative6 = "hsla(24, 100%, 52%, 0.11)";
+export const cpdColorBgDecorative1 = "#e0f8d9";
+export const cpdColorBgDecorative2 = "#e3f5f8";
+export const cpdColorBgDecorative3 = "#faeefb";
+export const cpdColorBgDecorative4 = "#f1efff";
+export const cpdColorBgDecorative5 = "#ffecf0";
+export const cpdColorBgDecorative6 = "#ffefe4";
 export const cpdColorBgAccentRest = "#007a61";
 export const cpdColorBgAccentHovered = "#006b52";
 export const cpdColorBgAccentPressed = "#005c45";

diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js
@@ -587,12 +587,12 @@ export const cpdColorBgCriticalSubtle = "#ffefec";
 export const cpdColorBgCriticalSubtleHovered = "#ffdfda";
 export const cpdColorBgSuccessSubtle = "#e3f7ed";
 export const cpdColorBgInfoSubtle = "#e9f2ff";
-export const cpdColorBgDecorative1 = "hsla(105, 92%, 42%, 0.28)";
-export const cpdColorBgDecorative2 = "hsla(186, 100%, 37%, 0.22)";
-export const cpdColorBgDecorative3 = "hsla(298, 91%, 40%, 0.13)";
-export const cpdColorBgDecorative4 = "hsla(248, 100%, 53%, 0.12)";
-export const cpdColorBgDecorative5 = "hsla(347, 100%, 50%, 0.13)";
-export const cpdColorBgDecorative6 = "hsla(25, 100%, 51%, 0.22)";
+export const cpdColorBgDecorative1 = "#c8f1ba";
+export const cpdColorBgDecorative2 = "#c7ecf0";
+export const cpdColorBgDecorative3 = "#f6dff7";
+export const cpdColorBgDecorative4 = "#e6e2ff";
+export const cpdColorBgDecorative5 = "#ffdee5";
+export const cpdColorBgDecorative6 = "#ffdfc8";
 export const cpdColorBgAccentRest = "#00553d";
 export const cpdColorBgAccentHovered = "#004d36";
 export const cpdColorBgAccentPressed = "#00402b";

diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json
@@ -203,32 +203,32 @@
       },
       "decorative": {
         "1": {
-          "value": "{color.alpha.lime.300}",
+          "value": "{color.lime.300}",
           "type": "color",
           "description": "Decorative background (1, Lime) for avatars and usernames."
         },
         "2": {
-          "value": "{color.alpha.cyan.300}",
+          "value": "{color.cyan.300}",
           "type": "color",
           "description": "Decorative background (2, Cyan) for avatars and usernames."
         },
         "3": {
-          "value": "{color.alpha.fuchsia.300}",
+          "value": "{color.fuchsia.300}",
           "type": "color",
           "description": "Decorative background (3, Fuchsia) for avatars and usernames."
         },
         "4": {
-          "value": "{color.alpha.purple.300}",
+          "value": "{color.purple.300}",
           "type": "color",
           "description": "Decorative background (4, Purple) for avatars and usernames."
         },
         "5": {
-          "value": "{color.alpha.pink.300}",
+          "value": "{color.pink.300}",
           "type": "color",
           "description": "Decorative background (5, Pink) for avatars and usernames."
         },
         "6": {
-          "value": "{color.alpha.orange.300}",
+          "value": "{color.orange.300}",
           "type": "color",
           "description": "Decorative background (6, Orange) for avatars and usernames."
         }