Remove color/text/placeholder token

As per element-hq/element-web#28426 (comment), 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).
element-hq · Nov 14, 2024 · 6aae217 · 6aae217
1 parent f110809
commit 6aae217
Show file tree

Hide file tree

Showing 18 changed files with 2 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,",
@@ -1647,4 +1643,4 @@
       "color.icon.accent.primary": "S:d3f02cccf95f4800a93ad469d723eca4c9610631,"
     }
   }
-]
+]
diff --git 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",
@@ -399,4 +394,4 @@
       }
     }
   }
-}
+}