mirror of
https://github.com/penpot/penpot.git
synced 2025-06-26 15:06:59 +02:00
♻️ Update basic color palette
This commit is contained in:
Eva
Alonso Torres
parent
a85a7c74c3
commit
a882d0bf6d
51 changed files with 287 additions and 271 deletions
|
|
@ -19,9 +19,9 @@
|
|||
"Default data for page metadata."
|
||||
{:grid-x-axis grid-x-axis
|
||||
:grid-y-axis grid-y-axis
|
||||
:grid-color "var(--off-white)"
|
||||
:grid-color "var(--df-secondary)"
|
||||
:grid-alignment true
|
||||
:background "var(--white)"})
|
||||
:background "var(--app-white)"})
|
||||
|
||||
(def size-presets
|
||||
[{:name "APPLE"}
|
||||
|
|
|
|||
|
|
@ -124,17 +124,15 @@
|
|||
;; --- Handle: Presence
|
||||
|
||||
(def ^:private presence-palette
|
||||
#{"#82e590" ; green
|
||||
"#7ad7c5" ; blue-green
|
||||
#{"#f49ef7" ; pink
|
||||
"#75cafc" ; blue
|
||||
"#a9bdfa" ; blue-purple
|
||||
"#fdcf79" ; gold
|
||||
"#a9bdfa" ; indigo
|
||||
"#faa6b7" ; red
|
||||
"#cbaaff" ; purple
|
||||
"#f49ef7" ; pink
|
||||
"#faa6b7" ; salmon
|
||||
"#f9b489" ; orange
|
||||
"#fdcd79" ; soft-orange
|
||||
"#dee563" ; yellow -> default presence color
|
||||
"#b1e96f" ; yellow-green
|
||||
"#b1e96f" ; lemon
|
||||
})
|
||||
|
||||
(defn handle-presence
|
||||
|
|
@ -145,7 +143,7 @@
|
|||
(remove nil?))
|
||||
used (into #{} xfm presence)
|
||||
avail (set/difference presence-palette used)]
|
||||
(or (first avail) "var(--black)")))
|
||||
(or (first avail) "var(--app-black)")))
|
||||
|
||||
(update-color [color presence]
|
||||
(if (some? color)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.auth-section {
|
||||
align-items: center;
|
||||
background: $db-primary;
|
||||
background: var(--panel-background-color);
|
||||
display: grid;
|
||||
gap: $s-32;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.separator {
|
||||
border-color: $db-cuaternary;
|
||||
border-color: $db-quaternary;
|
||||
margin: $s-24 0;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
padding: $s-24 0;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
color: var(--app-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.notification-icon {
|
||||
fill: $df-primary;
|
||||
fill: var(--main-icon-foreground);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: $s-32;
|
||||
|
|
@ -33,6 +33,6 @@
|
|||
.notification-text-email,
|
||||
.notification-text {
|
||||
font-size: $fs-16;
|
||||
color: $df-secondary;
|
||||
color: var(--notification-foreground-color-default);
|
||||
margin-bottom: $s-16;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
padding: $s-8 $s-16;
|
||||
|
||||
&:hover {
|
||||
background: $db-primary;
|
||||
background: var(--comment-thread-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@
|
|||
}
|
||||
}
|
||||
&.invalid {
|
||||
background-color: var(--status-error-background-color);
|
||||
background-color: var(--status-widget-background-color-error);
|
||||
.text {
|
||||
color: var(--alert-foreground-color-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
.separator {
|
||||
margin: 0;
|
||||
height: $s-12;
|
||||
border-top: 1px solid $db-primary;
|
||||
border-top: $s-1 solid var(--dropdown-separator-color);
|
||||
}
|
||||
}
|
||||
.checked-element {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@use "refactor/common-refactor.scss" as *;
|
||||
|
||||
.dashboard {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--app-background);
|
||||
display: grid;
|
||||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
grid-template-rows: $s-52 1fr;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
|
||||
svg {
|
||||
stroke: $da-primary;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard-fonts {
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: $s-120;
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
.table-field {
|
||||
color: $df-primary;
|
||||
.variant {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
margin-right: $s-4;
|
||||
padding-right: $s-4;
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
&.failure {
|
||||
margin-right: $s-12;
|
||||
svg {
|
||||
stroke: var(--warning-color);
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
|
||||
background-color: $db-primary;
|
||||
border-radius: $br-12;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
color: $df-primary;
|
||||
font-size: $fs-12;
|
||||
|
||||
|
|
@ -289,9 +289,9 @@
|
|||
}
|
||||
}
|
||||
&.warning {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
.icon svg {
|
||||
stroke: var(--warning-color);
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
.fonts-placeholder {
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: $s-160;
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
}
|
||||
|
||||
:global(svg#loader-pencil) {
|
||||
stroke: $db-cuaternary;
|
||||
stroke: $db-quaternary;
|
||||
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
@ -345,7 +345,7 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
}
|
||||
|
||||
svg {
|
||||
background-color: var(--canvas-color);
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: $br-4;
|
||||
border: $s-2 solid transparent;
|
||||
height: $s-24;
|
||||
|
|
|
|||
34
frontend/src/app/main/ui/dashboard/import.scss
vendored
34
frontend/src/app/main/ui/dashboard/import.scss
vendored
|
|
@ -39,8 +39,8 @@
|
|||
width: 100%;
|
||||
margin-bottom: $s-24;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--alert-background-color-ok);
|
||||
color: var(--alert-foreground-color-ok);
|
||||
background-color: var(--alert-background-color-success);
|
||||
color: var(--alert-foreground-color-success);
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
width: $s-24;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--alert-foreground-color-ok);
|
||||
stroke: var(--alert-foreground-color-success);
|
||||
}
|
||||
}
|
||||
.message {
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
}
|
||||
&.error {
|
||||
svg {
|
||||
stroke: var(--status-error-color);
|
||||
stroke: var(--element-foreground-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -163,46 +163,46 @@
|
|||
|
||||
&.loading {
|
||||
.file-name {
|
||||
color: var(--status-pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
.file-icon {
|
||||
:global(#loader-pencil) {
|
||||
color: var(--status-pending-color);
|
||||
stroke: var(--status-pending-color);
|
||||
fill: var(--status-pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
stroke: var(--element-foreground-pending);
|
||||
fill: var(--element-foreground-pending);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
.file-name {
|
||||
color: var(--status-warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
.file-icon svg {
|
||||
stroke: var(--status-warning-color);
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--status-warning-color);
|
||||
fill: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
.file-name {
|
||||
color: var(--status-success-color);
|
||||
color: var(--element-foreground-success);
|
||||
.file-icon svg {
|
||||
stroke: var(--status-success-color);
|
||||
stroke: var(--element-foreground-success);
|
||||
}
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--status-success-color);
|
||||
fill: var(--element-foreground-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
.file-name {
|
||||
color: var(--status-error-color);
|
||||
color: var(--element-foreground-error);
|
||||
.file-icon svg {
|
||||
stroke: var(--status-error-color);
|
||||
stroke: var(--element-foreground-error);
|
||||
}
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--status-error-color);
|
||||
fill: var(--element-foreground-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
input.element-title {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--input-background-color-active);
|
||||
border-radius: $br-8;
|
||||
color: $df-primary;
|
||||
font-size: $fs-16;
|
||||
|
|
@ -47,7 +47,7 @@ input.element-title {
|
|||
}
|
||||
&:hover {
|
||||
svg {
|
||||
fill: var(--warning-color);
|
||||
fill: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
85% top;
|
||||
background-repeat: no-repeat;
|
||||
align-items: center;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
&:hover {
|
||||
border: $s-2 solid $da-tertiary;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
color: $da-primary;
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
flex-direction: column;
|
||||
height: $s-200;
|
||||
background: transparent;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
|
||||
.text {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
|
||||
background-color: $db-primary;
|
||||
border-right: $s-1 solid $db-cuaternary;
|
||||
background-color: var(--panel-background-color);
|
||||
border-right: $s-1 solid $db-quaternary;
|
||||
margin: 0 $s-16 0 0;
|
||||
padding: $s-16 0 0 0;
|
||||
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
position: absolute;
|
||||
z-index: $z-index-4;
|
||||
background-color: $db-tertiary;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
|
||||
.separator {
|
||||
|
|
@ -161,11 +161,11 @@
|
|||
padding: $s-6 $s-16;
|
||||
|
||||
.warning {
|
||||
color: var(--dark-warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
svg {
|
||||
height: $s-12;
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
li {
|
||||
color: $df-primary;
|
||||
&.warning {
|
||||
color: var(--dark-warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
.teams-dropdown {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
min-width: $s-248;
|
||||
|
||||
left: 0;
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
.team-icon {
|
||||
&.new-team {
|
||||
background-color: $da-primary;
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
}
|
||||
|
||||
.new-team {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
|
||||
&.action {
|
||||
|
|
@ -425,7 +425,7 @@
|
|||
}
|
||||
|
||||
&.current {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
.element-title {
|
||||
color: $da-primary;
|
||||
}
|
||||
|
|
@ -441,7 +441,7 @@
|
|||
position: relative;
|
||||
|
||||
background-color: $db-tertiary;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
.profile {
|
||||
align-items: center;
|
||||
|
|
@ -474,8 +474,7 @@
|
|||
.dropdown {
|
||||
left: $s-16;
|
||||
bottom: $s-44;
|
||||
|
||||
background-color: $db-primary;
|
||||
background-color: var(--profile-drowpdown-background-color);
|
||||
border: $s-1 solid $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
min-width: $s-252;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
align-items: center;
|
||||
background-color: transparent;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
color: $df-secondary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
.dropdown {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
box-shadow: 0 $s-2 $s-8 rgba(0, 0, 0, 0.25);
|
||||
left: calc(-1 * $s-144);
|
||||
max-height: $s-480;
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
color: $df-primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
|
||||
&.title {
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
li {
|
||||
color: $df-primary;
|
||||
&.warning {
|
||||
color: var(--warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
align-items: center;
|
||||
padding: $s-4 $s-8;
|
||||
font-size: $fs-14;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
border-color: transparent;
|
||||
border-radius: $br-8;
|
||||
}
|
||||
|
|
@ -271,7 +271,7 @@
|
|||
text-transform: uppercase;
|
||||
|
||||
&.pending {
|
||||
background-color: var(--warning-color);
|
||||
background-color: var(--status-color-warning-500);
|
||||
}
|
||||
|
||||
&.expired {
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
height: $s-16;
|
||||
}
|
||||
.failure svg {
|
||||
fill: var(--warning-color);
|
||||
fill: var(--element-foreground-warning);
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
}
|
||||
|
|
@ -422,7 +422,7 @@
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: $s-16;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
color: $df-secondary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
margin-right: $s-32;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
margin-left: $s-6;
|
||||
position: absolute;
|
||||
border-top-left-radius: $s-8;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
|
||||
.card-container {
|
||||
width: $s-276;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
colors ["var(--color-background-primary)"
|
||||
"var(--color-background-secondary)"
|
||||
"var(--color-background-tertiary)"
|
||||
"var(--color-background-cuaternary)"
|
||||
"var(--color-background-quaternary)"
|
||||
"var(--color-foreground-primary)"
|
||||
"var(--color-foreground-secondary)"
|
||||
"var(--color-accent-primary)"
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@
|
|||
height: 100%;
|
||||
min-height: $s-32;
|
||||
min-width: $s-32;
|
||||
background-color: var(--white);
|
||||
background-color: var(--app-white);
|
||||
border-radius: $br-6;
|
||||
margin: auto 0;
|
||||
img,
|
||||
|
|
@ -276,28 +276,27 @@
|
|||
}
|
||||
&.loading {
|
||||
.file-name {
|
||||
color: var(--pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
.file-icon svg:global(#loader-pencil) {
|
||||
color: var(--pending-color);
|
||||
stroke: var(--pending-color);
|
||||
fill: var(--pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
stroke: var(--element-foreground-pending);
|
||||
fill: var(--element-foreground-pending);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
.file-name {
|
||||
color: var(--error-color);
|
||||
color: var(--element-foreground-error);
|
||||
.file-icon svg {
|
||||
stroke: var(--error-color);
|
||||
stroke: var(--element-foreground-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.file-name {
|
||||
color: var(--ok-color);
|
||||
color: var(--element-foreground-success);
|
||||
.file-icon svg {
|
||||
stroke: var(--ok-color);
|
||||
stroke: var(--element-foreground-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
;; ------------------------------------------------
|
||||
|
||||
(def font-size 11)
|
||||
(def distance-color "var(--color-distance)")
|
||||
(def distance-text-color "var(--color-white)")
|
||||
(def warning-color "var(--color-warning)")
|
||||
(def distance-color "var(--da-quaternary)")
|
||||
(def distance-text-color "var(--app-white)")
|
||||
(def warning-color "var(--status-color-warning-500)")
|
||||
(def flex-display-pill-width 40)
|
||||
(def flex-display-pill-height 20)
|
||||
(def flex-display-pill-border-radius 4)
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@
|
|||
(def select-guide-width 1)
|
||||
(def select-guide-dasharray 5)
|
||||
|
||||
(def hover-color "var(--color-foreground-tertiary)")
|
||||
(def hover-color "var(--color-accent-quaternary)")
|
||||
|
||||
(def size-display-color "var(--white)")
|
||||
(def size-display-color "var(--app-white)")
|
||||
(def size-display-opacity 0.7)
|
||||
(def size-display-text-color "var(--black)")
|
||||
(def size-display-text-color "var(--app-black)")
|
||||
(def size-display-width-min 50)
|
||||
(def size-display-width-max 75)
|
||||
(def size-display-height 16)
|
||||
|
||||
(def distance-color "var(--color-foreground-tertiary)")
|
||||
(def distance-text-color "var(--white)")
|
||||
(def distance-color "var(--color-accent-quaternary)")
|
||||
(def distance-text-color "var(--app-white)")
|
||||
(def distance-border-radius 2)
|
||||
(def distance-pill-width 50)
|
||||
(def distance-pill-height 16)
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
}
|
||||
|
||||
.success {
|
||||
--bg-color: var(--alert-background-color-ok);
|
||||
--fg-color: var(--alert-foreground-color-ok);
|
||||
--bg-color: var(--alert-background-color-success);
|
||||
--fg-color: var(--alert-foreground-color-success);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--app-background);
|
||||
display: grid;
|
||||
grid-template-rows: $s-48 1fr;
|
||||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
@ -107,8 +107,8 @@
|
|||
}
|
||||
&.disabled {
|
||||
input {
|
||||
background-color: $db-primary;
|
||||
border-color: $db-cuaternary;
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border-color: $db-quaternary;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
.content {
|
||||
padding: $s-2 $s-6;
|
||||
&.expired {
|
||||
background-color: var(--warning-color);
|
||||
background-color: var(--status-color-warning-500);
|
||||
border-radius: $br-4;
|
||||
color: $db-secondary;
|
||||
}
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
.access-tokens-empty {
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
color: $df-secondary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
}
|
||||
&.disabled {
|
||||
input {
|
||||
background-color: $db-primary;
|
||||
border-color: $db-cuaternary;
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border-color: $db-quaternary;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.dashboard-sidebar {
|
||||
background-color: $db-primary;
|
||||
border-right: $s-1 solid $db-cuaternary;
|
||||
background-color: var(--panel-background-color);
|
||||
border-right: $s-1 solid $db-quaternary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1 / span 2;
|
||||
|
|
@ -112,14 +112,14 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
&::before {
|
||||
background-color: $df-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
color: $da-primary;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@
|
|||
:y area-y
|
||||
:width area-width
|
||||
:height area-height
|
||||
:style {:fill "var(--color-foreground-tertiary)"
|
||||
:style {:fill "var(--color-accent-quaternary)"
|
||||
:fill-opacity 0.3}}]
|
||||
[:text {:x area-text-x
|
||||
:y area-text-y
|
||||
:style {:fill "var(--color-foreground-tertiary)"
|
||||
:style {:fill "var(--color-accent-quaternary)"
|
||||
:font-family "worksans"
|
||||
:font-weight 600
|
||||
:font-size 14
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
:y (:y cell-origin)
|
||||
:width cell-width
|
||||
:height cell-height
|
||||
:style {:stroke "var(--color-foreground-tertiary)"
|
||||
:style {:stroke "var(--color-accent-quaternary)"
|
||||
:stroke-width 1.5
|
||||
:fill "none"}}]
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.settings-bar-left {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--panel-background-color);
|
||||
height: 100%;
|
||||
width: $s-256;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
}
|
||||
|
||||
& svg {
|
||||
background-color: var(--canvas-color);
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: $br-4;
|
||||
border: $s-2 solid transparent;
|
||||
height: $s-24;
|
||||
|
|
|
|||
|
|
@ -188,16 +188,16 @@
|
|||
@extend .button-icon;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
stroke: var(--status-icon-foreground-color);
|
||||
stroke: var(--status-widget-icon-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.pending-status {
|
||||
background-color: var(--status-warning-background-color);
|
||||
background-color: var(--status-widget-background-color-warning);
|
||||
}
|
||||
|
||||
.saving-status {
|
||||
background-color: var(--status-pending-background-color);
|
||||
background-color: var(--status-widget-background-color-pending);
|
||||
svg {
|
||||
animation: spin-animation 1s infinite;
|
||||
animation-timing-function: linear;
|
||||
|
|
@ -205,11 +205,11 @@
|
|||
}
|
||||
|
||||
.saved-status {
|
||||
background-color: var(--status-ok-background-color);
|
||||
background-color: var(--status-widget-background-color-success);
|
||||
}
|
||||
|
||||
.error-status {
|
||||
background-color: var(--status-error-background-color);
|
||||
background-color: var(--status-widget-background-color-error);
|
||||
}
|
||||
|
||||
.viewer-btn {
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
[rumext.v2 :as mf]))
|
||||
|
||||
(def primary-color "var(--color-accent-tertiary)")
|
||||
(def secondary-color "var(--color-foreground-tertiary)")
|
||||
(def black-color "var(--black)")
|
||||
(def white-color "var(--white)")
|
||||
(def gray-color "var(--off-white)")
|
||||
(def secondary-color "var(--color-accent-quaternary)")
|
||||
(def black-color "var(--app-black)")
|
||||
(def white-color "var(--app-white)")
|
||||
(def gray-color "var(--df-secondary)")
|
||||
|
||||
(def current-edit-path-ref
|
||||
(l/derived
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
.shape-title {
|
||||
font-size: $fs-14;
|
||||
padding-bottom: $s-4;
|
||||
background: $db-cuaternary;
|
||||
background: $db-quaternary;
|
||||
color: $df-primary;
|
||||
padding: $s-8;
|
||||
border-radius: $s-8;
|
||||
|
|
|
|||
|
|
@ -359,7 +359,7 @@
|
|||
border-radius: $br-6;
|
||||
|
||||
&:hover {
|
||||
background: $db-cuaternary;
|
||||
background: $db-quaternary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
[rumext.v2 :as mf]))
|
||||
|
||||
(def gradient-line-stroke-width 2)
|
||||
(def gradient-line-stroke-color "var(--white)")
|
||||
(def gradient-line-stroke-color "var(--app-white)")
|
||||
(def gradient-square-width 15)
|
||||
(def gradient-square-radius 2)
|
||||
(def gradient-square-stroke-width 2)
|
||||
(def gradient-width-handler-radius 5)
|
||||
(def gradient-width-handler-color "var(--white)")
|
||||
(def gradient-square-stroke-color "var(--white)")
|
||||
(def gradient-width-handler-color "var(--app-white)")
|
||||
(def gradient-square-stroke-color "var(--app-white)")
|
||||
(def gradient-square-stroke-color-selected "var(--color-accent-tertiary)")
|
||||
|
||||
(mf/defc shadow [{:keys [id x y width height offset]}]
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
:rx (/ gradient-square-radius zoom)
|
||||
:width (/ gradient-square-width zoom)
|
||||
:height (/ gradient-square-width zoom)
|
||||
:stroke (if selected "var(--color-accent-tertiary)" "var(--white)")
|
||||
:stroke (if selected "var(--color-accent-tertiary)" "var(--app-white)")
|
||||
:stroke-width (/ gradient-square-stroke-width zoom)
|
||||
:fill (:value color)
|
||||
:fill-opacity (:opacity color)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
fill: var(--grid-editor-marker-color);
|
||||
}
|
||||
.marker-text {
|
||||
fill: var(--white);
|
||||
fill: var(--app-white);
|
||||
font-size: calc($s-12 / var(--zoom));
|
||||
font-family: worksans;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@
|
|||
(when icon-pdata
|
||||
[:path {:fill stroke
|
||||
:stroke-width 2
|
||||
:stroke "var(--white)"
|
||||
:stroke "var(--app-white)"
|
||||
:d icon-pdata
|
||||
:transform (str
|
||||
"scale(" inv-zoom ", " inv-zoom ") "
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
|
||||
(if-not selected?
|
||||
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
|
||||
[:path {:stroke "var(--off-white)"
|
||||
[:path {:stroke "var(--df-secondary)"
|
||||
:fill "none"
|
||||
:pointer-events "visible"
|
||||
:stroke-width (/ 2 zoom)
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
[:& interaction-marker {:index index
|
||||
:x dest-x
|
||||
:y dest-y
|
||||
:stroke "var(--off-white)"
|
||||
:stroke "var(--df-secondary)"
|
||||
:action-type action-type
|
||||
:arrow-dir arrow-dir
|
||||
:zoom zoom}])]
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
[:& (mf/provider embed/context) {:value false}
|
||||
[:& shape-wrapper {:shape dest-shape}]]]]
|
||||
[:path {:stroke "var(--color-accent-tertiary)"
|
||||
:fill "var(--black)"
|
||||
:fill "var(--app-black)"
|
||||
:fill-opacity 0.5
|
||||
:stroke-width 1
|
||||
:d (dm/str "M" marker-x " " marker-y " "
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
[{:keys [session profile] :as props}]
|
||||
(let [zoom (mf/deref refs/selected-zoom)
|
||||
point (:point session)
|
||||
background-color (:color session "var(--black)")
|
||||
text-color (:text-color session "var(--white)")
|
||||
background-color (:color session "var(--app-black)")
|
||||
text-color (:text-color session "var(--app-white)")
|
||||
transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
|
||||
shown-name (if (> (count (:fullname profile)) 16)
|
||||
(str (str/slice (:fullname profile) 0 12) "...")
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@
|
|||
:style {:fillOpacity "1"
|
||||
:strokeWidth "1px"
|
||||
:vectorEffect "non-scaling-stroke"}
|
||||
:fill "var(--white)"
|
||||
:fill "var(--app-white)"
|
||||
:stroke color
|
||||
:cx cx'
|
||||
:cy cy'}]
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
:style {:fillOpacity 1
|
||||
:stroke color
|
||||
:strokeWidth "1px"
|
||||
:fill "var(--white)"
|
||||
:fill "var(--app-white)"
|
||||
:vectorEffect "non-scaling-stroke"}
|
||||
:data-position (name position)
|
||||
:cx (+ x (/ length 2))
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private line-color "var(--color-foreground-tertiary)")
|
||||
(def ^:private line-color "var(--color-accent-quaternary)")
|
||||
(def ^:private segment-gap 2)
|
||||
(def ^:private segment-gap-side 5)
|
||||
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
[:text {:x (if (= coord :x) x (+ x (/ width 2)))
|
||||
:y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
|
||||
:font-size (/ pill-text-font-size zoom)
|
||||
:fill "var(--white)"
|
||||
:fill "var(--app-white)"
|
||||
:text-anchor "middle"}
|
||||
(fmt/format-number distance)]])
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
[beicon.v2.core :as rx]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private line-color "var(--color-foreground-tertiary)")
|
||||
(def ^:private line-color "var(--color-accent-quaternary)")
|
||||
(def ^:private line-opacity 0.6)
|
||||
(def ^:private line-width 1)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue