From 61c3613d1c7b27db41756d9add7e038cf87bf8f5 Mon Sep 17 00:00:00 2001 From: Jordan Connor <87339233+JordanConnor@users.noreply.github.com> Date: Wed, 5 Mar 2025 14:48:21 +0000 Subject: [PATCH 1/3] Add tokens for badge background and text. https://github.com/element-hq/element-web/issues/29425 https://github.com/element-hq/element-x-ios/issues/3867 https://github.com/element-hq/element-x-android/issues/4356 --- tokens/theme-semantics.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index 3a3210ed..a0b83bef 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -94,6 +94,18 @@ "type": "color", "description": "Decorative text colour (6, Orange) for avatars and usernames." } + }, + "badge": { + "accent": { + "value": "{color.green.1100}", + "type": "color", + "description": "Badge accent text colour" + }, + "info": { + "value": "{color.blue.1100}", + "type": "color", + "description": "Badge info text colour" + } } }, "bg": { @@ -244,6 +256,18 @@ "type": "color", "description": "Background colour for accent or brand actions. State: Pressed" } + }, + "badge": { + "accent": { + "value": "{color.alpha.green.300}", + "type": "color", + "description": "Badge accent background colour" + }, + "info": { + "value": "{color.alpha.blue.300}", + "type": "color", + "description": "Badge info background colour" + } } }, "border": { From 0e06e6da8db150ef043f94ec22074339dc32cb94 Mon Sep 17 00:00:00 2001 From: Jordan Connor <87339233+JordanConnor@users.noreply.github.com> Date: Wed, 5 Mar 2025 16:27:57 +0000 Subject: [PATCH 2/3] Add $themes.json (Exported styles to Figma first, then Token Studio recognised changes) --- tokens/$themes.json | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/tokens/$themes.json b/tokens/$themes.json index 32ee16a7..4ed35900 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -473,7 +473,11 @@ "color.bg.accent.rest": "S:0ad925fdff7a16a7b64b279564727c03071f5722,", "color.bg.accent.hovered": "S:6ce4d2e3bf9e5a762dc8077fcf2fa36419cb2562,", "color.bg.accent.pressed": "S:298a3c8274c7f142e4260d93a17d67e5dbad015b,", - "color.icon.accent.primary": "S:335e8d3421a11fbd10085c38653cfb1d0972cd36," + "color.icon.accent.primary": "S:335e8d3421a11fbd10085c38653cfb1d0972cd36,", + "color.text.badge.accent": "S:52cfa06b8fb99ce5f6a20fee1c8b88681e3e9627,", + "color.text.badge.info": "S:93ee4d6095e2915ab5738467e05a6a8c978db4cb,", + "color.bg.badge.accent": "S:b5f70ed6d7483155e50cb408af60cd3b21a2bfc0,", + "color.bg.badge.info": "S:6314532de767c8ca0f50eda707834295b5bd80ab," } }, { @@ -862,7 +866,11 @@ "color.bg.accent.rest": "S:970bcb6a50e57a4a23b71dbe85982acccdd29275,", "color.bg.accent.hovered": "S:d2a2580bbc3a49b20d80bff6e041d8c63d163096,", "color.bg.accent.pressed": "S:d7d921087a362582f8202a5949e416cb9cbdd11c,", - "color.icon.accent.primary": "S:1bad861fc99ed9e04874289a7d3be7cf7fa33772," + "color.icon.accent.primary": "S:1bad861fc99ed9e04874289a7d3be7cf7fa33772,", + "color.text.badge.accent": "S:660b4b90f66aa46a66cb11cd3c633dfbfb86622d,", + "color.text.badge.info": "S:438180ee20793406df6a2d5caa93b9af769208bc,", + "color.bg.badge.accent": "S:42d531b2e86a8cb6fa32804316bdc4e7ae21c767,", + "color.bg.badge.info": "S:f26edf77753c8ce3dc3f7544eadc355937691b17," } }, { @@ -1251,7 +1259,11 @@ "color.bg.accent.rest": "S:d79f034b90817f53cbba62c197d31c778ea8e09a,", "color.bg.accent.hovered": "S:e0adad4161f53f0ab27fda5b640b1bfb96c0d4bf,", "color.bg.accent.pressed": "S:f174aac7bd4c4ebd76f0449197dc92496a70a640,", - "color.icon.accent.primary": "S:ca4514d13e1497a75be02cfe41e29f24be2c05ba," + "color.icon.accent.primary": "S:ca4514d13e1497a75be02cfe41e29f24be2c05ba,", + "color.text.badge.accent": "S:4c9ad4661fd7b4faf5ce6f5272d122333048e7d1,", + "color.text.badge.info": "S:f842c7f15d25aa728f0cf0333550331dcd254dc7,", + "color.bg.badge.accent": "S:dd4fdb5b900f9535c9e692337e25cb0d7cbf25ac,", + "color.bg.badge.info": "S:af45de93ee6c2bb34751a5e3ab47edd76b364c87," } }, { @@ -1640,7 +1652,11 @@ "color.bg.accent.rest": "S:d84cae77ebab79e4adffd21e7f0574c4692c8a9a,", "color.bg.accent.hovered": "S:d613a08ee025ee7a9ce9ee6e65fda2b088cd47f8,", "color.bg.accent.pressed": "S:62eae9aca98cf02cfe1599fd456bb4995db5b563,", - "color.icon.accent.primary": "S:d3f02cccf95f4800a93ad469d723eca4c9610631," + "color.icon.accent.primary": "S:d3f02cccf95f4800a93ad469d723eca4c9610631,", + "color.text.badge.accent": "S:f450c6f2e2acb31b944cebdc36caa2bbc9d330ab,", + "color.text.badge.info": "S:6fb27bf524524715cf199df01f65efd13d6c755b,", + "color.bg.badge.accent": "S:292e7ac04a28fc3638aa988f3888d19a5c1e7936,", + "color.bg.badge.info": "S:3d83f372809d73777218dcacfd249feb07a53596," } } ] \ No newline at end of file From 91ca755d4b896e75df52ce8084240b63763aa5c8 Mon Sep 17 00:00:00 2001 From: Doug Date: Thu, 6 Mar 2025 11:09:42 +0000 Subject: [PATCH 3/3] Generate assets. --- assets/android/src/SemanticColors.kt | 8 ++++++++ assets/android/src/SemanticColorsDark.kt | 4 ++++ assets/android/src/SemanticColorsDarkHc.kt | 4 ++++ assets/android/src/SemanticColorsLight.kt | 4 ++++ assets/android/src/SemanticColorsLightHc.kt | 4 ++++ assets/ios/swift/CompoundColorTokens.swift | 4 ++++ assets/ios/swift/CompoundUIColorTokens.swift | 4 ++++ assets/web/css/cpd-common-semantic.css | 4 ++++ assets/web/js/cpdDark.d.ts | 4 ++++ assets/web/js/cpdDark.js | 4 ++++ assets/web/js/cpdDarkHc.d.ts | 4 ++++ assets/web/js/cpdDarkHc.js | 4 ++++ assets/web/js/cpdLight.d.ts | 4 ++++ assets/web/js/cpdLight.js | 4 ++++ assets/web/js/cpdLightHc.d.ts | 4 ++++ assets/web/js/cpdLightHc.js | 4 ++++ 16 files changed, 68 insertions(+) diff --git a/assets/android/src/SemanticColors.kt b/assets/android/src/SemanticColors.kt index 3b1baa5f..496be0f9 100644 --- a/assets/android/src/SemanticColors.kt +++ b/assets/android/src/SemanticColors.kt @@ -48,6 +48,10 @@ data class SemanticColors( val bgActionSecondaryPressed: Color, /** Background colour for secondary actions. State: Rest. */ val bgActionSecondaryRest: Color, + /** Badge accent background colour */ + val bgBadgeAccent: Color, + /** Badge info background colour */ + val bgBadgeInfo: Color, /** Default global background for the user interface. Elevation: Default (Level 0) */ val bgCanvasDefault: Color, @@ -143,6 +147,10 @@ Elevation: Level 0. */ val textActionAccent: Color, /** Default text colour for plain actions. */ val textActionPrimary: Color, + /** Badge accent text colour */ + val textBadgeAccent: Color, + /** Badge info text colour */ + val textBadgeInfo: Color, /** Text colour for destructive plain actions. */ val textCriticalPrimary: Color, /** Decorative text colour (1, Lime) for avatars and usernames. */ diff --git a/assets/android/src/SemanticColorsDark.kt b/assets/android/src/SemanticColorsDark.kt index 80110b55..0d6b214c 100644 --- a/assets/android/src/SemanticColorsDark.kt +++ b/assets/android/src/SemanticColorsDark.kt @@ -35,6 +35,8 @@ val compoundColorsDark = SemanticColors( bgActionSecondaryHovered = DarkColorTokens.colorAlphaGray200, bgActionSecondaryPressed = DarkColorTokens.colorAlphaGray300, bgActionSecondaryRest = DarkColorTokens.colorThemeBg, + bgBadgeAccent = DarkColorTokens.colorAlphaGreen300, + bgBadgeInfo = DarkColorTokens.colorAlphaBlue300, bgCanvasDefault = DarkColorTokens.colorThemeBg, bgCanvasDefaultLevel1 = DarkColorTokens.colorGray300, bgCanvasDisabled = DarkColorTokens.colorGray200, @@ -80,6 +82,8 @@ val compoundColorsDark = SemanticColors( iconTertiaryAlpha = DarkColorTokens.colorAlphaGray800, textActionAccent = DarkColorTokens.colorGreen900, textActionPrimary = DarkColorTokens.colorGray1400, + textBadgeAccent = DarkColorTokens.colorGreen1100, + textBadgeInfo = DarkColorTokens.colorBlue1100, textCriticalPrimary = DarkColorTokens.colorRed900, textDecorative1 = DarkColorTokens.colorLime1100, textDecorative2 = DarkColorTokens.colorCyan1100, diff --git a/assets/android/src/SemanticColorsDarkHc.kt b/assets/android/src/SemanticColorsDarkHc.kt index 601de074..1cd94887 100644 --- a/assets/android/src/SemanticColorsDarkHc.kt +++ b/assets/android/src/SemanticColorsDarkHc.kt @@ -35,6 +35,8 @@ val compoundColorsHcDark = SemanticColors( bgActionSecondaryHovered = DarkHcColorTokens.colorAlphaGray200, bgActionSecondaryPressed = DarkHcColorTokens.colorAlphaGray300, bgActionSecondaryRest = DarkHcColorTokens.colorThemeBg, + bgBadgeAccent = DarkHcColorTokens.colorAlphaGreen300, + bgBadgeInfo = DarkHcColorTokens.colorAlphaBlue300, bgCanvasDefault = DarkHcColorTokens.colorThemeBg, bgCanvasDefaultLevel1 = DarkHcColorTokens.colorGray300, bgCanvasDisabled = DarkHcColorTokens.colorGray200, @@ -80,6 +82,8 @@ val compoundColorsHcDark = SemanticColors( iconTertiaryAlpha = DarkHcColorTokens.colorAlphaGray800, textActionAccent = DarkHcColorTokens.colorGreen900, textActionPrimary = DarkHcColorTokens.colorGray1400, + textBadgeAccent = DarkHcColorTokens.colorGreen1100, + textBadgeInfo = DarkHcColorTokens.colorBlue1100, textCriticalPrimary = DarkHcColorTokens.colorRed900, textDecorative1 = DarkHcColorTokens.colorLime1100, textDecorative2 = DarkHcColorTokens.colorCyan1100, diff --git a/assets/android/src/SemanticColorsLight.kt b/assets/android/src/SemanticColorsLight.kt index 88f210b4..19ac5ded 100644 --- a/assets/android/src/SemanticColorsLight.kt +++ b/assets/android/src/SemanticColorsLight.kt @@ -35,6 +35,8 @@ val compoundColorsLight = SemanticColors( bgActionSecondaryHovered = LightColorTokens.colorAlphaGray200, bgActionSecondaryPressed = LightColorTokens.colorAlphaGray300, bgActionSecondaryRest = LightColorTokens.colorThemeBg, + bgBadgeAccent = LightColorTokens.colorAlphaGreen300, + bgBadgeInfo = LightColorTokens.colorAlphaBlue300, bgCanvasDefault = LightColorTokens.colorThemeBg, bgCanvasDefaultLevel1 = LightColorTokens.colorThemeBg, bgCanvasDisabled = LightColorTokens.colorGray200, @@ -80,6 +82,8 @@ val compoundColorsLight = SemanticColors( iconTertiaryAlpha = LightColorTokens.colorAlphaGray800, textActionAccent = LightColorTokens.colorGreen900, textActionPrimary = LightColorTokens.colorGray1400, + textBadgeAccent = LightColorTokens.colorGreen1100, + textBadgeInfo = LightColorTokens.colorBlue1100, textCriticalPrimary = LightColorTokens.colorRed900, textDecorative1 = LightColorTokens.colorLime1100, textDecorative2 = LightColorTokens.colorCyan1100, diff --git a/assets/android/src/SemanticColorsLightHc.kt b/assets/android/src/SemanticColorsLightHc.kt index b69d54a3..52b0bf12 100644 --- a/assets/android/src/SemanticColorsLightHc.kt +++ b/assets/android/src/SemanticColorsLightHc.kt @@ -35,6 +35,8 @@ val compoundColorsHcLight = SemanticColors( bgActionSecondaryHovered = LightHcColorTokens.colorAlphaGray200, bgActionSecondaryPressed = LightHcColorTokens.colorAlphaGray300, bgActionSecondaryRest = LightHcColorTokens.colorThemeBg, + bgBadgeAccent = LightHcColorTokens.colorAlphaGreen300, + bgBadgeInfo = LightHcColorTokens.colorAlphaBlue300, bgCanvasDefault = LightHcColorTokens.colorThemeBg, bgCanvasDefaultLevel1 = LightHcColorTokens.colorThemeBg, bgCanvasDisabled = LightHcColorTokens.colorGray200, @@ -80,6 +82,8 @@ val compoundColorsHcLight = SemanticColors( iconTertiaryAlpha = LightHcColorTokens.colorAlphaGray800, textActionAccent = LightHcColorTokens.colorGreen900, textActionPrimary = LightHcColorTokens.colorGray1400, + textBadgeAccent = LightHcColorTokens.colorGreen1100, + textBadgeInfo = LightHcColorTokens.colorBlue1100, textCriticalPrimary = LightHcColorTokens.colorRed900, textDecorative1 = LightHcColorTokens.colorLime1100, textDecorative2 = LightHcColorTokens.colorCyan1100, diff --git a/assets/ios/swift/CompoundColorTokens.swift b/assets/ios/swift/CompoundColorTokens.swift index 27e24e21..f7c7fbe1 100644 --- a/assets/ios/swift/CompoundColorTokens.swift +++ b/assets/ios/swift/CompoundColorTokens.swift @@ -16,6 +16,8 @@ public class CompoundColorTokens { public let bgActionSecondaryHovered = CompoundCoreColorTokens.alphaGray200 public let bgActionSecondaryPressed = CompoundCoreColorTokens.alphaGray300 public let bgActionSecondaryRest = CompoundCoreColorTokens.themeBg + public let bgBadgeAccent = CompoundCoreColorTokens.alphaGreen300 + public let bgBadgeInfo = CompoundCoreColorTokens.alphaBlue300 public let bgCanvasDefault = CompoundCoreColorTokens.themeBg public let bgCanvasDisabled = CompoundCoreColorTokens.gray200 public let bgCriticalHovered = CompoundCoreColorTokens.red1000 @@ -59,6 +61,8 @@ public class CompoundColorTokens { public let iconTertiaryAlpha = CompoundCoreColorTokens.alphaGray800 public let textActionAccent = CompoundCoreColorTokens.green900 public let textActionPrimary = CompoundCoreColorTokens.gray1400 + public let textBadgeAccent = CompoundCoreColorTokens.green1100 + public let textBadgeInfo = CompoundCoreColorTokens.blue1100 public let textCriticalPrimary = CompoundCoreColorTokens.red900 public let textDecorative1 = CompoundCoreColorTokens.lime1100 public let textDecorative2 = CompoundCoreColorTokens.cyan1100 diff --git a/assets/ios/swift/CompoundUIColorTokens.swift b/assets/ios/swift/CompoundUIColorTokens.swift index 19738510..07b478fc 100644 --- a/assets/ios/swift/CompoundUIColorTokens.swift +++ b/assets/ios/swift/CompoundUIColorTokens.swift @@ -16,6 +16,8 @@ public class CompoundUIColorTokens { public let bgActionSecondaryHovered = CompoundCoreUIColorTokens.alphaGray200 public let bgActionSecondaryPressed = CompoundCoreUIColorTokens.alphaGray300 public let bgActionSecondaryRest = CompoundCoreUIColorTokens.themeBg + public let bgBadgeAccent = CompoundCoreUIColorTokens.alphaGreen300 + public let bgBadgeInfo = CompoundCoreUIColorTokens.alphaBlue300 public let bgCanvasDefault = CompoundCoreUIColorTokens.themeBg public let bgCanvasDisabled = CompoundCoreUIColorTokens.gray200 public let bgCriticalHovered = CompoundCoreUIColorTokens.red1000 @@ -59,6 +61,8 @@ public class CompoundUIColorTokens { public let iconTertiaryAlpha = CompoundCoreUIColorTokens.alphaGray800 public let textActionAccent = CompoundCoreUIColorTokens.green900 public let textActionPrimary = CompoundCoreUIColorTokens.gray1400 + public let textBadgeAccent = CompoundCoreUIColorTokens.green1100 + public let textBadgeInfo = CompoundCoreUIColorTokens.blue1100 public let textCriticalPrimary = CompoundCoreUIColorTokens.red900 public let textDecorative1 = CompoundCoreUIColorTokens.lime1100 public let textDecorative2 = CompoundCoreUIColorTokens.cyan1100 diff --git a/assets/web/css/cpd-common-semantic.css b/assets/web/css/cpd-common-semantic.css index b2830777..d4b4a13e 100644 --- a/assets/web/css/cpd-common-semantic.css +++ b/assets/web/css/cpd-common-semantic.css @@ -15,6 +15,8 @@ --cpd-color-text-decorative-4: var(--cpd-color-purple-1100); --cpd-color-text-decorative-5: var(--cpd-color-pink-1100); --cpd-color-text-decorative-6: var(--cpd-color-orange-1100); + --cpd-color-text-badge-accent: var(--cpd-color-green-1100); + --cpd-color-text-badge-info: var(--cpd-color-blue-1100); --cpd-color-bg-subtle-primary: var(--cpd-color-gray-400); --cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300); --cpd-color-bg-canvas-default: var(--cpd-color-theme-bg); @@ -41,6 +43,8 @@ --cpd-color-bg-accent-rest: var(--cpd-color-green-900); --cpd-color-bg-accent-hovered: var(--cpd-color-green-1000); --cpd-color-bg-accent-pressed: var(--cpd-color-green-1100); + --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300); + --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300); --cpd-color-border-disabled: var(--cpd-color-gray-500); --cpd-color-border-focused: var(--cpd-color-blue-900); --cpd-color-border-interactive-primary: var(--cpd-color-gray-800); diff --git a/assets/web/js/cpdDark.d.ts b/assets/web/js/cpdDark.d.ts index 7e7bb07e..60694b45 100644 --- a/assets/web/js/cpdDark.d.ts +++ b/assets/web/js/cpdDark.d.ts @@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string; export const cpdColorTextDecorative4: string; export const cpdColorTextDecorative5: string; export const cpdColorTextDecorative6: string; +export const cpdColorTextBadgeAccent: string; +export const cpdColorTextBadgeInfo: string; export const cpdColorBgSubtlePrimary: string; export const cpdColorBgSubtleSecondary: string; export const cpdColorBgCanvasDefault: string; @@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string; export const cpdColorBgAccentRest: string; export const cpdColorBgAccentHovered: string; export const cpdColorBgAccentPressed: string; +export const cpdColorBgBadgeAccent: string; +export const cpdColorBgBadgeInfo: string; export const cpdColorBgSubtleSecondaryLevel0: string; export const cpdColorBorderDisabled: string; export const cpdColorBorderFocused: string; diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index e15f9e4e..bb051b01 100644 --- a/assets/web/js/cpdDark.js +++ b/assets/web/js/cpdDark.js @@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#d991de"; export const cpdColorTextDecorative4 = "#ad9cfe"; export const cpdColorTextDecorative5 = "#fe84a2"; export const cpdColorTextDecorative6 = "#f6913d"; +export const cpdColorTextBadgeAccent = "#1fc090"; +export const cpdColorTextBadgeInfo = "#7aacf4"; export const cpdColorBgSubtlePrimary = "#26282d"; export const cpdColorBgSubtleSecondary = "#1d1f24"; export const cpdColorBgCanvasDefault = "#101317"; @@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#470000"; export const cpdColorBgAccentRest = "#129a78"; export const cpdColorBgAccentHovered = "#17ac84"; export const cpdColorBgAccentPressed = "#1fc090"; +export const cpdColorBgBadgeAccent = "hsl(151, 100%, 7%, 1)"; +export const cpdColorBgBadgeInfo = "hsl(229, 100%, 20%, 1)"; export const cpdColorBgSubtleSecondaryLevel0 = "#101317"; export const cpdColorBorderDisabled = "#323539"; export const cpdColorBorderFocused = "#4187eb"; diff --git a/assets/web/js/cpdDarkHc.d.ts b/assets/web/js/cpdDarkHc.d.ts index 7e7bb07e..60694b45 100644 --- a/assets/web/js/cpdDarkHc.d.ts +++ b/assets/web/js/cpdDarkHc.d.ts @@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string; export const cpdColorTextDecorative4: string; export const cpdColorTextDecorative5: string; export const cpdColorTextDecorative6: string; +export const cpdColorTextBadgeAccent: string; +export const cpdColorTextBadgeInfo: string; export const cpdColorBgSubtlePrimary: string; export const cpdColorBgSubtleSecondary: string; export const cpdColorBgCanvasDefault: string; @@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string; export const cpdColorBgAccentRest: string; export const cpdColorBgAccentHovered: string; export const cpdColorBgAccentPressed: string; +export const cpdColorBgBadgeAccent: string; +export const cpdColorBgBadgeInfo: string; export const cpdColorBgSubtleSecondaryLevel0: string; export const cpdColorBorderDisabled: string; export const cpdColorBorderFocused: string; diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index 84641357..6d7a79ee 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/assets/web/js/cpdDarkHc.js @@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#eac0ed"; export const cpdColorTextDecorative4 = "#cec7ff"; export const cpdColorTextDecorative5 = "#ffbbca"; export const cpdColorTextDecorative6 = "#fdc197"; +export const cpdColorTextBadgeAccent = "#8fddbc"; +export const cpdColorTextBadgeInfo = "#b2cffa"; export const cpdColorBgSubtlePrimary = "#2b2e33"; export const cpdColorBgSubtleSecondary = "#26282d"; export const cpdColorBgCanvasDefault = "#101317"; @@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#580000"; export const cpdColorBgAccentRest = "#37c998"; export const cpdColorBgAccentHovered = "#61d2a6"; export const cpdColorBgAccentPressed = "#8fddbc"; +export const cpdColorBgBadgeAccent = "hsl(155, 100%, 9%, 1)"; +export const cpdColorBgBadgeInfo = "hsl(224, 100%, 22%, 1)"; export const cpdColorBgSubtleSecondaryLevel0 = "#101317"; export const cpdColorBorderDisabled = "#3c3f44"; export const cpdColorBorderFocused = "#89b5f6"; diff --git a/assets/web/js/cpdLight.d.ts b/assets/web/js/cpdLight.d.ts index 7e7bb07e..60694b45 100644 --- a/assets/web/js/cpdLight.d.ts +++ b/assets/web/js/cpdLight.d.ts @@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string; export const cpdColorTextDecorative4: string; export const cpdColorTextDecorative5: string; export const cpdColorTextDecorative6: string; +export const cpdColorTextBadgeAccent: string; +export const cpdColorTextBadgeInfo: string; export const cpdColorBgSubtlePrimary: string; export const cpdColorBgSubtleSecondary: string; export const cpdColorBgCanvasDefault: string; @@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string; export const cpdColorBgAccentRest: string; export const cpdColorBgAccentHovered: string; export const cpdColorBgAccentPressed: string; +export const cpdColorBgBadgeAccent: string; +export const cpdColorBgBadgeInfo: string; export const cpdColorBgSubtleSecondaryLevel0: string; export const cpdColorBorderDisabled: string; export const cpdColorBorderFocused: string; diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index 4f105fdc..b1113d82 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#822198"; export const cpdColorTextDecorative4 = "#5d26cd"; export const cpdColorTextDecorative5 = "#9f0850"; export const cpdColorTextDecorative6 = "#9b2200"; +export const cpdColorTextBadgeAccent = "#005c45"; +export const cpdColorTextBadgeInfo = "#064ab1"; export const cpdColorBgSubtlePrimary = "#e1e6ec"; export const cpdColorBgSubtleSecondary = "#f0f2f5"; export const cpdColorBgCanvasDefault = "#ffffff"; @@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#ffefe4"; export const cpdColorBgAccentRest = "#007a61"; export const cpdColorBgAccentHovered = "#006b52"; export const cpdColorBgAccentPressed = "#005c45"; +export const cpdColorBgBadgeAccent = "hsla(150, 100%, 36%, 0.11)"; +export const cpdColorBgBadgeInfo = "hsla(215, 100%, 52%, 0.09)"; export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5"; export const cpdColorBorderDisabled = "#cdd3da"; export const cpdColorBorderFocused = "#0467dd"; diff --git a/assets/web/js/cpdLightHc.d.ts b/assets/web/js/cpdLightHc.d.ts index 7e7bb07e..60694b45 100644 --- a/assets/web/js/cpdLightHc.d.ts +++ b/assets/web/js/cpdLightHc.d.ts @@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string; export const cpdColorTextDecorative4: string; export const cpdColorTextDecorative5: string; export const cpdColorTextDecorative6: string; +export const cpdColorTextBadgeAccent: string; +export const cpdColorTextBadgeInfo: string; export const cpdColorBgSubtlePrimary: string; export const cpdColorBgSubtleSecondary: string; export const cpdColorBgCanvasDefault: string; @@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string; export const cpdColorBgAccentRest: string; export const cpdColorBgAccentHovered: string; export const cpdColorBgAccentPressed: string; +export const cpdColorBgBadgeAccent: string; +export const cpdColorBgBadgeInfo: string; export const cpdColorBgSubtleSecondaryLevel0: string; export const cpdColorBorderDisabled: string; export const cpdColorBorderFocused: string; diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index 700b9ca6..42c753fd 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#5c0f76"; export const cpdColorTextDecorative4 = "#4200a6"; export const cpdColorTextDecorative5 = "#72003a"; export const cpdColorTextDecorative6 = "#770000"; +export const cpdColorTextBadgeAccent = "#00402b"; +export const cpdColorTextBadgeInfo = "#043088"; export const cpdColorBgSubtlePrimary = "#d7dce3"; export const cpdColorBgSubtleSecondary = "#e1e6ec"; export const cpdColorBgCanvasDefault = "#ffffff"; @@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#ffdfc8"; export const cpdColorBgAccentRest = "#00553d"; export const cpdColorBgAccentHovered = "#004d36"; export const cpdColorBgAccentPressed = "#00402b"; +export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)"; +export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)"; export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec"; export const cpdColorBorderDisabled = "#bdc4cc"; export const cpdColorBorderFocused = "#0543a7";