From 23f00e9fe77b89d248b9add2545b1f77af33b494 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 21 Jan 2025 11:09:07 +0100 Subject: [PATCH] :bug: Fix some styles on token pills --- .../main/ui/workspace/tokens/token_pill.cljs | 3 +- .../main/ui/workspace/tokens/token_pill.scss | 127 +++++++++++------- 2 files changed, 81 insertions(+), 49 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs index 14cbb273d..734098199 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs @@ -138,7 +138,7 @@ can-edit? (:can-edit (deref refs/permissions)) is-viewer (not can-edit?) - errors? (or (nil? theme-token) (and (seq errors) (seq (:errors theme-token)))) + errors? (and (seq errors) (seq (:errors theme-token))) color (when (seq (ctob/find-token-value-references value)) (wtt/resolved-value-hex theme-token)) contains-path? (str/includes? name ".") @@ -186,6 +186,7 @@ (dom/set-attribute! node "title" title))))] [:button {:class (stl/css-case :token-pill true + :token-pill-default can-edit? :token-pill-applied (and can-edit? (or half-applied full-applied)) :token-pill-invalid (and can-edit? errors?) :token-pill-invalid-applied (and full-applied errors? can-edit?) diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss index 2f68d9d45..927b68713 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss +++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss @@ -9,12 +9,6 @@ @import "./common.scss"; .token-pill { - --token-pill-background: var(--color-background-tertiary); - --token-pill-foreground: var(--color-foreground-secondary); - --token-pill-border: var(--color-background-tertiary); - --token-pill-outline: none; - --token-pill-accent: var(--color-background-quaternary); - @include use-typography("code-font"); border: none; background: none; @@ -30,29 +24,8 @@ padding: $s-2 $s-8 $s-2 $s-4; color: var(--token-pill-foreground); background: var(--token-pill-background); - - &:hover { - --token-pill-background: var(--color-token-background); - --token-pill-foreground: var(--color-foreground-primary); - --token-pill-border: var(--color-token-background); - --token-pill-outline: none; - --token-pill-accent: var(--color-background-quaternary); - } - - &:focus-visible { - --token-pill-outline: var(--color-background-primary); - --token-pill-border: var(--color-accent-primary); - outline-offset: -3px; - } - - &:disabled { - --token-pill-background: var(--color-background-primary); - --token-pill-foreground: var(--color-foreground-secondary); - --token-pill-border: var(--color-background-tertiary); - --token-pill-outline: none; - --token-pill-accent: var(--color-background-tertiary); - } } + .name-wrapper { display: block; overflow: hidden; @@ -77,7 +50,31 @@ .last-name-wrapper { flex-shrink: 0; - margin-left: 4px; +} + +.token-pill-icon { + color: var(--token-pill-accent); +} + +.token-pill-default { + --token-pill-background: var(--color-background-tertiary); + --token-pill-foreground: var(--color-foreground-secondary); + --token-pill-border: var(--color-background-tertiary); + --token-pill-outline: none; + --token-pill-accent: var(--color-background-quaternary); + &:hover { + --token-pill-background: var(--color-token-background); + --token-pill-foreground: var(--color-foreground-primary); + --token-pill-border: var(--color-token-background); + --token-pill-outline: none; + --token-pill-accent: var(--color-background-quaternary); + } + + &:focus-visible { + --token-pill-outline: var(--color-background-primary); + --token-pill-border: var(--color-accent-primary); + outline-offset: -3px; + } } .token-pill-applied { @@ -96,17 +93,9 @@ &:focus-visible { --token-pill-background: var(--color-token-background); --token-pill-foreground: var(--color-token-foreground); - --token-pill-outline: var(--color-accent-primary); - --token-pill-border: var(--color-token-background); - --token-pill-accent: var(--color-token-accent); - } - - &:disabled { - --token-pill-background: var(--color-background-primary); - --token-pill-foreground: var(--color-token-foreground); - --token-pill-border: var(--color-token-accent); - --token-pill-outline: none; --token-pill-accent: var(--color-token-accent); + --token-pill-outline: var(--color-background-primary); + --token-pill-border: var(--color-accent-primary); } } @@ -114,14 +103,20 @@ --token-pill-background: var(--color-background-tertiary); --token-pill-foreground: var(--color-foreground-error); --token-pill-border: var(--color-background-tertiary); + --token-pill-outline: none; --token-pill-accent: var(--color-foreground-error); - &:hover, - &:focus-visible, - &:disabled { - --token-pill-background: var(--color-background-tertiary); + &:focus-visible { --token-pill-foreground: var(--color-foreground-error); - --token-pill-border: var(--color-background-tertiary); + } + &:hover { + --token-pill-foreground: var(--color-foreground-primary); + } + &:hover, + &:focus-visible { + --token-pill-background: var(--color-background-tertiary); + --token-pill-outline: var(--color-background-tertiary); + --token-pill-border: var(--color-accent-primary); --token-pill-accent: var(--color-foreground-error); } } @@ -129,12 +124,48 @@ .token-pill-invalid-applied { --token-pill-border: var(--color-foreground-error); &:hover, - &:focus-visible, - &:disabled { + &:focus-visible { --token-pill-border: var(--color-foreground-error); } } -.token-pill-icon { - color: var(--token-pill-accent); +.token-pill-viewer { + --token-pill-background: var(--color-background-primary); + --token-pill-foreground: var(--color-foreground-secondary); + --token-pill-border: var(--color-background-tertiary); + --token-pill-outline: none; + --token-pill-accent: var(--color-background-quaternary); +} + +.token-pill-applied-viewer { + --token-pill-background: var(--color-background-primary); + --token-pill-foreground: var(--color-token-foreground); + --token-pill-border: var(--color-token-accent); + --token-pill-outline: none; + --token-pill-accent: var(--color-token-accent); +} + +.token-pill-invalid-viewer { + --token-pill-border: var(--color-token-background); + --token-pill-foreground: var(--color-foreground-error); + --token-pill-accent: var(--color-foreground-error); + + &:hover, + &:focus-visible { + --token-pill-border: var(--color-token-background); + --token-pill-foreground: var(--color-foreground-error); + --token-pill-accent: var(--color-foreground-error); + } +} + +.token-pill-invalid-applied-viewer { + --token-pill-border: var(--color-accent-error); + --token-pill-foreground: var(--color-foreground-error); + --token-pill-accent: var(--color-foreground-error); + &:hover, + &:focus-visible { + --token-pill-border: var(--color-accent-error); + --token-pill-foreground: var(--color-foreground-error); + --token-pill-accent: var(--color-foreground-error); + } }