Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues 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
Show stats 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))
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?)

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

@ -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);
}
}