From c3fff1f2b042295cd5f4bcf8d4fe68ec47ca4061 Mon Sep 17 00:00:00 2001 From: Jordan Connor <87339233+JordanConnor@users.noreply.github.com> Date: Thu, 29 Feb 2024 12:57:05 +0000 Subject: [PATCH] Switching decorative backgrounds to not use alpha (#77) * Switching decorative backgrounds to not use alpha. {color.alpha.lime.300} -> {color.lime.300} * Generate assets. --- assets/ios/swift/CompoundColorTokens.swift | 12 ++++++------ assets/ios/swift/CompoundUIColorTokens.swift | 12 ++++++------ assets/web/css/cpd-common-semantic.css | 12 ++++++------ assets/web/js/cpdDark.js | 12 ++++++------ assets/web/js/cpdDarkHc.js | 12 ++++++------ assets/web/js/cpdLight.js | 12 ++++++------ assets/web/js/cpdLightHc.js | 12 ++++++------ tokens/theme-semantics.json | 12 ++++++------ 8 files changed, 48 insertions(+), 48 deletions(-) diff --git a/assets/ios/swift/CompoundColorTokens.swift b/assets/ios/swift/CompoundColorTokens.swift index 61851702..d144d4cb 100644 --- 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 index 9f48e93a..3670afe4 100644 --- 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 index 4d7b90be..9ee7fe8e 100644 --- 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 index a66b866b..d64f46ea 100644 --- 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 index 6404c861..1c6a8807 100644 --- 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 index 48a3c7b8..17fdcd7a 100644 --- 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 index 37006eef..f52f9bc1 100644 --- 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 index 0ef769ca..0cca5ec0 100644 --- 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." }