mirror of
https://github.com/penpot/penpot.git
synced 2025-03-19 11:11:21 -05:00
🐛 Fix some styles on token pills
This commit is contained in:
parent
642efcb47b
commit
23f00e9fe7
2 changed files with 81 additions and 49 deletions
|
@ -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?)
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue