Upgrade to compound-design-tokens v2 (#28471)

* Upgrade to compound-design-tokens v2 Switch out color/text/placeholder for color/text/secondary Signed-off-by: Michael Telatynski <[email protected]> * Upgrade compound to fix Search component placeholder colour Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Nov 15, 2024 · 07380c7 · 07380c7
1 parent ae3ca52
commit 07380c7
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -85,8 +85,8 @@
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
-        "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^7.1.0",
+        "@vector-im/compound-design-tokens": "^2.0.1",
+        "@vector-im/compound-web": "^7.3.0",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",

diff --git a/res/css/views/emojipicker/_EmojiPicker.pcss b/res/css/views/emojipicker/_EmojiPicker.pcss
@@ -111,7 +111,7 @@ Please see LICENSE files in the repository root for full details.
         border-radius: 4px 0;
 
         &::placeholder {
-            color: var(--cpd-color-text-placeholder);
+            color: var(--cpd-color-text-secondary);
         }
     }
 

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -155,7 +155,7 @@ Please see LICENSE files in the repository root for full details.
         display: inline-block;
         pointer-events: none;
         white-space: nowrap;
-        color: var(--cpd-color-text-placeholder);
+        color: var(--cpd-color-text-secondary);
     }
 }
 

diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
@@ -136,7 +136,7 @@ $input-border-color: rgba(231, 231, 231, 0.2);
 $input-darker-bg-color: #181b21;
 $input-darker-fg-color: #61708b;
 $input-lighter-bg-color: #f2f5f8;
-$input-placeholder: var(--cpd-color-text-placeholder);
+$input-placeholder: var(--cpd-color-text-secondary);
 /* ******************** */
 
 /* Dialog */

diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss
@@ -54,7 +54,7 @@ $input-border-color: #e7e7e7;
 $input-darker-bg-color: #181b21;
 $input-darker-fg-color: #61708b;
 $input-lighter-bg-color: #f2f5f8;
-$input-placeholder: var(--cpd-color-text-placeholder);
+$input-placeholder: var(--cpd-color-text-secondary);
 
 $resend-button-divider-color: $muted-fg-color;
 

diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss
@@ -81,7 +81,7 @@ $strong-input-border-color: #c7c7c7;
 /* used for UserSettings EditableText */
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
-$input-placeholder: var(--cpd-color-text-placeholder);
+$input-placeholder: var(--cpd-color-text-secondary);
 /* scrollbars */
 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
 /* context menus */

diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
@@ -184,7 +184,7 @@ $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: $secondary-accent-color;
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
-$input-placeholder: var(--cpd-color-text-placeholder);
+$input-placeholder: var(--cpd-color-text-secondary);
 /* ******************** */
 
 /* Dialog */

diff --git a/yarn.lock b/yarn.lock
@@ -3414,15 +3414,15 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vector-im/compound-design-tokens@^1.8.0":
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.9.1.tgz#644dc7ca5ca251fd476af2a7c075e9d740c08871"
-  integrity sha512-zjI+PhoNLNrJrLU8whEGjzCuxdqIz6tM0ARYBMS8AG1vC+NlGak6Y21TWnzHT3VINNhnF+PiQ9lFWsU65GydOg==
+"@vector-im/compound-design-tokens@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-2.0.1.tgz#add14494caab16cdbe98f2bdabe726908739def4"
+  integrity sha512-4nkPcrPII+sejispn+UkWZYFN7LecN39e4WGBupdceiMq0NJrfXrnVtJ9/6BDLgSqHInb6R/IWQkIbPbzfqRMg==
 
-"@vector-im/compound-web@^7.1.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.2.0.tgz#0ec4a598e5755cc4b3e83fbc232a4986a12bf808"
-  integrity sha512-wOT2kSo936FSBG1CsZ1vmHLwTTWBq9OBBfq76sM95rUawRSQCCWnjFMLTiacRvxBHucZaSNsfhpJH3oZcrOexw==
+"@vector-im/compound-web@^7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.3.0.tgz#9594113ac50bff4794715104a30a60c52d15517d"
+  integrity sha512-gDppQUtpk5LvNHUg+Zlv9qzo1iBAag0s3g8Ec0qS5q4zGBKG6ruXXrNUKg1aK8rpbo2hYQsGaHM6dD8NqLoq3Q==
   dependencies:
     "@floating-ui/react" "^0.26.24"
     "@radix-ui/react-context-menu" "^2.2.1"