From 774b767b8083d9bace223e0f69e7c4e1f2081455 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 15 Nov 2024 11:46:48 +0000 Subject: [PATCH] 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 <7t3chguy@gmail.com> * Upgrade compound to fix Search component placeholder colour Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- package.json | 4 ++-- res/css/views/emojipicker/_EmojiPicker.pcss | 2 +- .../wysiwyg_composer/components/_Editor.pcss | 2 +- res/themes/dark/css/_dark.pcss | 2 +- res/themes/legacy-dark/css/_legacy-dark.pcss | 2 +- res/themes/legacy-light/css/_legacy-light.pcss | 2 +- res/themes/light/css/_light.pcss | 2 +- yarn.lock | 16 ++++++++-------- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 4ab97ed07d..0a0d0a477b 100644 --- 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 index cd7b2bb769..d4ae92172d 100644 --- 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 index dfe05afa3e..5c0d5da9fc 100644 --- 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 index 56630763fe..8b0673f692 100644 --- 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 index c6840f5b90..45bb1870f1 100644 --- 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 index 398cf0e1f1..76e0eec588 100644 --- 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 index d649b6b38d..5f278c6f16 100644 --- 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 index f2baf3b37e..1e7dc96440 100644 --- 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"