From 3ad536f4649f43d56e4280880dc70a0605e6b727 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 14 Nov 2024 11:52:58 -0500 Subject: [PATCH] Remove color/text/placeholder token As per https://github.com/element-hq/element-web/issues/28426#issuecomment-2472911879, the color/text/placeholder token is being removed from the design system as it does not generally result in accessible contrast levels. It should be replaced with color/text/secondary. Note that update to the token data was performed manually as Aaron and I need to take a look at what's happened with the Tokens Studio setup (and I'm incidentally interested in switching our export format to the new W3C DTCG standard). --- assets/android/src/SemanticColors.kt | 2 -- assets/android/src/SemanticColorsDark.kt | 1 - assets/android/src/SemanticColorsDarkHc.kt | 1 - assets/android/src/SemanticColorsLight.kt | 1 - assets/android/src/SemanticColorsLightHc.kt | 1 - assets/ios/swift/CompoundColorTokens.swift | 1 - assets/ios/swift/CompoundUIColorTokens.swift | 1 - assets/web/css/cpd-common-semantic.css | 1 - assets/web/js/cpdDark.d.ts | 1 - assets/web/js/cpdDark.js | 1 - assets/web/js/cpdDarkHc.d.ts | 1 - assets/web/js/cpdDarkHc.js | 1 - assets/web/js/cpdLight.d.ts | 1 - assets/web/js/cpdLight.js | 1 - assets/web/js/cpdLightHc.d.ts | 1 - assets/web/js/cpdLightHc.js | 1 - tokens/$themes.json | 4 ---- tokens/theme-semantics.json | 5 ----- 18 files changed, 26 deletions(-) diff --git a/assets/android/src/SemanticColors.kt b/assets/android/src/SemanticColors.kt index 5d68fbd5..634bdc8e 100644 --- a/assets/android/src/SemanticColors.kt +++ b/assets/android/src/SemanticColors.kt @@ -167,8 +167,6 @@ Elevation: Default (Level 1). */ val textLinkExternal: Color, /** For use as text color on top of high-contrast solid backgrounds like primary, accent, or destructive actions. */ val textOnSolidPrimary: Color, - /** Use for placeholder text. Placeholder text should be non-essential. Do not rely exclusively on it. */ - val textPlaceholder: Color, /** Highest contrast text. */ val textPrimary: Color, /** Lowest contrast text. */ diff --git a/assets/android/src/SemanticColorsDark.kt b/assets/android/src/SemanticColorsDark.kt index 4faa1d7c..c77d38d4 100644 --- a/assets/android/src/SemanticColorsDark.kt +++ b/assets/android/src/SemanticColorsDark.kt @@ -97,7 +97,6 @@ val compoundColorsDark = SemanticColors( textInfoPrimary = DarkColorTokens.colorBlue900, textLinkExternal = DarkColorTokens.colorBlue900, textOnSolidPrimary = DarkColorTokens.colorThemeBg, - textPlaceholder = DarkColorTokens.colorGray800, textPrimary = DarkColorTokens.colorGray1400, textSecondary = DarkColorTokens.colorGray900, textSuccessPrimary = DarkColorTokens.colorGreen900, diff --git a/assets/android/src/SemanticColorsDarkHc.kt b/assets/android/src/SemanticColorsDarkHc.kt index e9ef5e70..693d79ad 100644 --- a/assets/android/src/SemanticColorsDarkHc.kt +++ b/assets/android/src/SemanticColorsDarkHc.kt @@ -97,7 +97,6 @@ val compoundColorsHcDark = SemanticColors( textInfoPrimary = DarkHcColorTokens.colorBlue900, textLinkExternal = DarkHcColorTokens.colorBlue900, textOnSolidPrimary = DarkHcColorTokens.colorThemeBg, - textPlaceholder = DarkHcColorTokens.colorGray800, textPrimary = DarkHcColorTokens.colorGray1400, textSecondary = DarkHcColorTokens.colorGray900, textSuccessPrimary = DarkHcColorTokens.colorGreen900, diff --git a/assets/android/src/SemanticColorsLight.kt b/assets/android/src/SemanticColorsLight.kt index a75eed82..66b36866 100644 --- a/assets/android/src/SemanticColorsLight.kt +++ b/assets/android/src/SemanticColorsLight.kt @@ -97,7 +97,6 @@ val compoundColorsLight = SemanticColors( textInfoPrimary = LightColorTokens.colorBlue900, textLinkExternal = LightColorTokens.colorBlue900, textOnSolidPrimary = LightColorTokens.colorThemeBg, - textPlaceholder = LightColorTokens.colorGray800, textPrimary = LightColorTokens.colorGray1400, textSecondary = LightColorTokens.colorGray900, textSuccessPrimary = LightColorTokens.colorGreen900, diff --git a/assets/android/src/SemanticColorsLightHc.kt b/assets/android/src/SemanticColorsLightHc.kt index 27815570..ec8d4e95 100644 --- a/assets/android/src/SemanticColorsLightHc.kt +++ b/assets/android/src/SemanticColorsLightHc.kt @@ -97,7 +97,6 @@ val compoundColorsHcLight = SemanticColors( textInfoPrimary = LightHcColorTokens.colorBlue900, textLinkExternal = LightHcColorTokens.colorBlue900, textOnSolidPrimary = LightHcColorTokens.colorThemeBg, - textPlaceholder = LightHcColorTokens.colorGray800, textPrimary = LightHcColorTokens.colorGray1400, textSecondary = LightHcColorTokens.colorGray900, textSuccessPrimary = LightHcColorTokens.colorGreen900, diff --git a/assets/ios/swift/CompoundColorTokens.swift b/assets/ios/swift/CompoundColorTokens.swift index 17406185..7c207c9d 100644 --- a/assets/ios/swift/CompoundColorTokens.swift +++ b/assets/ios/swift/CompoundColorTokens.swift @@ -71,7 +71,6 @@ public class CompoundColorTokens { public let textActionAccent = CompoundCoreColorTokens.green900 public let textActionPrimary = CompoundCoreColorTokens.gray1400 public let textDisabled = CompoundCoreColorTokens.gray800 - public let textPlaceholder = CompoundCoreColorTokens.gray800 public let textSecondary = CompoundCoreColorTokens.gray900 public let textPrimary = CompoundCoreColorTokens.gray1400 public init() { } diff --git a/assets/ios/swift/CompoundUIColorTokens.swift b/assets/ios/swift/CompoundUIColorTokens.swift index 933e3ac1..3fd738d9 100644 --- a/assets/ios/swift/CompoundUIColorTokens.swift +++ b/assets/ios/swift/CompoundUIColorTokens.swift @@ -71,7 +71,6 @@ public class CompoundUIColorTokens { public let textActionAccent = CompoundCoreUIColorTokens.green900 public let textActionPrimary = CompoundCoreUIColorTokens.gray1400 public let textDisabled = CompoundCoreUIColorTokens.gray800 - public let textPlaceholder = CompoundCoreUIColorTokens.gray800 public let textSecondary = CompoundCoreUIColorTokens.gray900 public let textPrimary = CompoundCoreUIColorTokens.gray1400 public init() { } diff --git a/assets/web/css/cpd-common-semantic.css b/assets/web/css/cpd-common-semantic.css index 889ba68e..b2830777 100644 --- a/assets/web/css/cpd-common-semantic.css +++ b/assets/web/css/cpd-common-semantic.css @@ -1,7 +1,6 @@ :root, [class*="cpd-theme-"] { --cpd-color-text-primary: var(--cpd-color-gray-1400); --cpd-color-text-secondary: var(--cpd-color-gray-900); - --cpd-color-text-placeholder: var(--cpd-color-gray-800); --cpd-color-text-disabled: var(--cpd-color-gray-800); --cpd-color-text-action-primary: var(--cpd-color-gray-1400); --cpd-color-text-action-accent: var(--cpd-color-green-900); diff --git a/assets/web/js/cpdDark.d.ts b/assets/web/js/cpdDark.d.ts index bfdadf9b..68a3e2bb 100644 --- a/assets/web/js/cpdDark.d.ts +++ b/assets/web/js/cpdDark.d.ts @@ -564,7 +564,6 @@ export const cpdColorAlphaPink1300: string; export const cpdColorAlphaPink1400: string; export const cpdColorTextPrimary: string; export const cpdColorTextSecondary: string; -export const cpdColorTextPlaceholder: string; export const cpdColorTextDisabled: string; export const cpdColorTextActionPrimary: string; export const cpdColorTextActionAccent: string; diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index df75ed5a..d5b14f90 100644 --- a/assets/web/js/cpdDark.js +++ b/assets/web/js/cpdDark.js @@ -588,7 +588,6 @@ export const cpdColorAlphaPink1300 = "hsl(347, 100%, 91%, 1)"; export const cpdColorAlphaPink1400 = "hsl(347, 100%, 96%, 1)"; export const cpdColorTextPrimary = "#ebeef2"; export const cpdColorTextSecondary = "#808994"; -export const cpdColorTextPlaceholder = "#656c76"; export const cpdColorTextDisabled = "#656c76"; export const cpdColorTextActionPrimary = "#ebeef2"; export const cpdColorTextActionAccent = "#129a78"; diff --git a/assets/web/js/cpdDarkHc.d.ts b/assets/web/js/cpdDarkHc.d.ts index bfdadf9b..68a3e2bb 100644 --- a/assets/web/js/cpdDarkHc.d.ts +++ b/assets/web/js/cpdDarkHc.d.ts @@ -564,7 +564,6 @@ export const cpdColorAlphaPink1300: string; export const cpdColorAlphaPink1400: string; export const cpdColorTextPrimary: string; export const cpdColorTextSecondary: string; -export const cpdColorTextPlaceholder: string; export const cpdColorTextDisabled: string; export const cpdColorTextActionPrimary: string; export const cpdColorTextActionAccent: string; diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index e2814d6e..74a6a3b6 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/assets/web/js/cpdDarkHc.js @@ -588,7 +588,6 @@ export const cpdColorAlphaPink1300 = "hsl(347, 100%, 96%, 1)"; export const cpdColorAlphaPink1400 = "hsl(347, 100%, 97%, 1)"; export const cpdColorTextPrimary = "#f2f5f7"; export const cpdColorTextSecondary = "#acb4bd"; -export const cpdColorTextPlaceholder = "#79818d"; export const cpdColorTextDisabled = "#79818d"; export const cpdColorTextActionPrimary = "#f2f5f7"; export const cpdColorTextActionAccent = "#37c998"; diff --git a/assets/web/js/cpdLight.d.ts b/assets/web/js/cpdLight.d.ts index bfdadf9b..68a3e2bb 100644 --- a/assets/web/js/cpdLight.d.ts +++ b/assets/web/js/cpdLight.d.ts @@ -564,7 +564,6 @@ export const cpdColorAlphaPink1300: string; export const cpdColorAlphaPink1400: string; export const cpdColorTextPrimary: string; export const cpdColorTextSecondary: string; -export const cpdColorTextPlaceholder: string; export const cpdColorTextDisabled: string; export const cpdColorTextActionPrimary: string; export const cpdColorTextActionAccent: string; diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index 656b68fb..82b16797 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -588,7 +588,6 @@ export const cpdColorAlphaPink1300 = "hsl(333, 100%, 19%, 1)"; export const cpdColorAlphaPink1400 = "hsl(339, 100%, 13%, 1)"; export const cpdColorTextPrimary = "#1b1d22"; export const cpdColorTextSecondary = "#656d77"; -export const cpdColorTextPlaceholder = "#818a95"; export const cpdColorTextDisabled = "#818a95"; export const cpdColorTextActionPrimary = "#1b1d22"; export const cpdColorTextActionAccent = "#007a61"; diff --git a/assets/web/js/cpdLightHc.d.ts b/assets/web/js/cpdLightHc.d.ts index bfdadf9b..68a3e2bb 100644 --- a/assets/web/js/cpdLightHc.d.ts +++ b/assets/web/js/cpdLightHc.d.ts @@ -564,7 +564,6 @@ export const cpdColorAlphaPink1300: string; export const cpdColorAlphaPink1400: string; export const cpdColorTextPrimary: string; export const cpdColorTextSecondary: string; -export const cpdColorTextPlaceholder: string; export const cpdColorTextDisabled: string; export const cpdColorTextActionPrimary: string; export const cpdColorTextActionAccent: string; diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index 19903f46..eb8b6af4 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -588,7 +588,6 @@ export const cpdColorAlphaPink1300 = "hsl(337, 100%, 15%, 1)"; export const cpdColorAlphaPink1400 = "hsl(341, 100%, 13%, 1)"; export const cpdColorTextPrimary = "#1a1c21"; export const cpdColorTextSecondary = "#474a51"; -export const cpdColorTextPlaceholder = "#6c737e"; export const cpdColorTextDisabled = "#6c737e"; export const cpdColorTextActionPrimary = "#1a1c21"; export const cpdColorTextActionAccent = "#00553d"; diff --git a/tokens/$themes.json b/tokens/$themes.json index ced03093..32ee16a7 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -256,7 +256,6 @@ "color.pink.1200": "S:eb5066b25db0cad26515968a04799aa9eb9eb576,", "color.pink.1300": "S:8483a61fce3cd72aff9b7f59d2ff10f08c8da883,", "color.pink.1400": "S:53c44540f976de7eac7758da7fdd343c063eb89a,", - "color.text.placeholder": "S:03ee4d5f515150d227cdc4f3bb7afa7ce4481bfa,", "color.text.disabled": "S:c0ef2df73b0c547df91c5f02b55aa44799888887,", "color.icon.primary": "S:22c36898bc78af4957b5e1e194a429d69acd226a,", "color.icon.secondary": "S:136c2bb327648b0d34314f793ea3642eecfcf426,", @@ -646,7 +645,6 @@ "color.pink.1200": "S:376b48ca6a6600fb661b3e28130226e341a437e1,", "color.pink.1300": "S:ebc013c1820223dbea255c368e9e1cd478d2c1c9,", "color.pink.1400": "S:0ce25e1027c24e66ed54a2110e6af405f17b36d7,", - "color.text.placeholder": "S:bcb03fd9cc070fd7aa5ccadc33f0c39ad1df922a,", "color.text.disabled": "S:64b391fd8d9150db694dbb3a44e7d7793a31abcc,", "color.icon.primary": "S:3a7f4b6144afbeba725bafaafa963c12416e62d9,", "color.icon.secondary": "S:e29e687c7d3dd57b60905b2f189a47701b291b86,", @@ -1036,7 +1034,6 @@ "color.pink.1200": "S:a0a73e0d8f8075538b3a4703da1a2fa57ceb9751,", "color.pink.1300": "S:18d93d563878a5819ffce86e74307d9b37fbc389,", "color.pink.1400": "S:06d8255b03f5b33f0b47101b87c59052f1564a10,", - "color.text.placeholder": "S:5667befff4c534ba8d1fc97bd84dead8c4b61ef4,", "color.text.disabled": "S:f2a0fa920d084dc98fd4d7d8c1753a953fece34b,", "color.icon.primary": "S:5fb3e41fc85b271d927a4ff193ad651a803d8f01,", "color.icon.secondary": "S:5983df9a83dc807cc3c4c383f133e8bf157d369c,", @@ -1426,7 +1423,6 @@ "color.pink.1200": "S:525a0ed6323d13459878556dece591b67e3c5f05,", "color.pink.1300": "S:94856c8a1871c56e702be00d7253ab7f1f63b00c,", "color.pink.1400": "S:5cc17ee5ed536339a3a0af0132dc4b4cc89116ae,", - "color.text.placeholder": "S:5d10ebedc3e5f7a0aa1a86184d3e56f3b124d055,", "color.text.disabled": "S:590e955cd43f400c2d1970d771711ada8afb6926,", "color.icon.primary": "S:a3518cc53b2604689e1c0a2a2bb855dc66e14221,", "color.icon.secondary": "S:c536998a9aa004328a6e6794a32ee3db53c4c47c,", diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index 9f729636..3a3210ed 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -11,11 +11,6 @@ "type": "color", "description": "Lowest contrast text." }, - "placeholder": { - "value": "{color.gray.800}", - "type": "color", - "description": "Use for placeholder text. Placeholder text should be non-essential. Do not rely exclusively on it." - }, "disabled": { "value": "{color.gray.800}", "type": "color",