3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix some styles on token pills

Browse source
This commit is contained in:
Eva Marco 2025-01-21 11:09:07 +01:00
parent 642efcb47b
commit 23f00e9fe7
2 changed files with 81 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
View file

@ -138,7 +138,7 @@
can-edit? (:can-edit (deref refs/permissions)) can-edit? (:can-edit (deref refs/permissions))
is-viewer (not can-edit?) 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)) color (when (seq (ctob/find-token-value-references value))
(wtt/resolved-value-hex theme-token)) (wtt/resolved-value-hex theme-token))
contains-path? (str/includes? name ".") contains-path? (str/includes? name ".")
@ -186,6 +186,7 @@
(dom/set-attribute! node "title" title))))] (dom/set-attribute! node "title" title))))]
[:button {:class (stl/css-case :token-pill true [: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-applied (and can-edit? (or half-applied full-applied))
:token-pill-invalid (and can-edit? errors?) :token-pill-invalid (and can-edit? errors?)
:token-pill-invalid-applied (and full-applied errors? can-edit?) :token-pill-invalid-applied (and full-applied errors? can-edit?)

127
frontend/src/app/main/ui/workspace/tokens/token_pill.scss
View file

@ -9,12 +9,6 @@
@import "./common.scss"; @import "./common.scss";
.token-pill { .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"); @include use-typography("code-font");
border: none; border: none;
background: none; background: none;
@ -30,29 +24,8 @@
padding: $s-2 $s-8 $s-2 $s-4; padding: $s-2 $s-8 $s-2 $s-4;
color: var(--token-pill-foreground); color: var(--token-pill-foreground);
background: var(--token-pill-background); 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 { .name-wrapper {
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -77,7 +50,31 @@
.last-name-wrapper { .last-name-wrapper {
flex-shrink: 0; 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 { .token-pill-applied {
@ -96,17 +93,9 @@
&:focus-visible { &:focus-visible {
--token-pill-background: var(--color-token-background); --token-pill-background: var(--color-token-background);
--token-pill-foreground: var(--color-token-foreground); --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-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-background: var(--color-background-tertiary);
--token-pill-foreground: var(--color-foreground-error); --token-pill-foreground: var(--color-foreground-error);
--token-pill-border: var(--color-background-tertiary); --token-pill-border: var(--color-background-tertiary);
--token-pill-outline: none;
--token-pill-accent: var(--color-foreground-error); --token-pill-accent: var(--color-foreground-error);
&:hover, &:focus-visible {
&:focus-visible,
&:disabled {
--token-pill-background: var(--color-background-tertiary);
--token-pill-foreground: var(--color-foreground-error); --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); --token-pill-accent: var(--color-foreground-error);
} }
} }
@ -129,12 +124,48 @@
.token-pill-invalid-applied { .token-pill-invalid-applied {
--token-pill-border: var(--color-foreground-error); --token-pill-border: var(--color-foreground-error);
&:hover, &:hover,
&:focus-visible, &:focus-visible {
&:disabled {
--token-pill-border: var(--color-foreground-error); --token-pill-border: var(--color-foreground-error);
} }
} }
.token-pill-icon { .token-pill-viewer {
color: var(--token-pill-accent); --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);
}
} }