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

♻️ Remove duplicated color tokens

Browse source
This commit is contained in:
Eva Marco 2024-07-23 13:07:01 +02:00
parent 00c5d58203
commit 2c5289d338
44 changed files with 264 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/auth.scss
View file

@ -44,7 +44,7 @@
svg {
width: 100%;
fill: $df-primary;
fill: var(--color-foreground-primary);
height: auto;
}

2
frontend/src/app/main/ui/auth/register.scss
View file

@ -9,7 +9,7 @@
.accept-terms-and-privacy-wrapper {
:global(a) {
color: $df-secondary;
color: var(--color-foreground-secondary);
font-weight: $fw700;
}
}

2
frontend/src/app/main/ui/components/forms.scss
View file

@ -93,7 +93,7 @@
top: calc(50% - $s-8);
svg {
@extend .button-icon-small;
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
width: $s-16;
height: $s-16;
}

10
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -32,7 +32,7 @@
font-size: $fs-12;
padding: $s-24;
text-align: center;
color: $df-secondary;
color: var(--color-foreground-secondary);
}
.comments-icon {
@ -57,7 +57,7 @@
}
&:hover {
background-color: $db-quaternary;
background-color: var(--color-background-quaternary);
--comment-icon-small-foreground-color: var(--icon-foreground-active);
}
}
@ -69,7 +69,7 @@
.dropdown {
@include menuShadow;
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $br-8;
border: $s-1 solid transparent;
bottom: $s-4;
@ -82,7 +82,7 @@
hr {
margin: 0;
border-color: $df-secondary;
border-color: var(--color-foreground-secondary);
}
}
@ -94,7 +94,7 @@
}
.header-title {
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-11;
line-height: 1.28;
flex-grow: 1;

2
frontend/src/app/main/ui/dashboard/files.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16;
overflow-y: auto;
width: 100%;
border-top: $s-1 solid $db-quaternary;
border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects {
user-select: none;

48
frontend/src/app/main/ui/dashboard/fonts.scss
View file

@ -8,7 +8,7 @@
@use "common/refactor/common-dashboard";
.dashboard-fonts {
border-top: $s-1 solid $db-quaternary;
border-top: $s-1 solid var(--color-background-quaternary);
display: flex;
flex-direction: column;
padding-left: $s-120;
@ -31,18 +31,18 @@
h3 {
font-size: $fs-14;
color: $df-secondary;
color: var(--color-foreground-secondary);
margin: $s-4;
}
.font-item {
color: $db-secondary;
color: var(--color-background-secondary);
}
}
.installed-fonts-header {
align-items: center;
color: $df-secondary;
color: var(--color-foreground-secondary);
display: flex;
font-size: $fs-12;
height: $s-40;
@ -65,11 +65,11 @@
justify-content: flex-end;
input {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-color: transparent;
border-radius: $br-8;
border: $s-1 solid transparent;
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-14;
height: $s-32;
margin: 0;
@ -77,19 +77,19 @@
width: $s-152;
&:focus {
outline: $s-1 solid $da-primary;
outline: $s-1 solid var(--color-accent-primary);
}
&::placeholder {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
}
}
.font-item {
align-items: center;
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $br-4;
color: $df-secondary;
color: var(--color-foreground-secondary);
display: flex;
font-size: $fs-14;
justify-content: space-between;
@ -103,13 +103,13 @@
margin: 0;
padding: $s-8;
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $br-8;
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-14;
&:focus {
outline: $s-1 solid $da-primary;
outline: $s-1 solid var(--color-accent-primary);
}
}
@ -152,16 +152,16 @@
&:hover {
.icon svg {
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
}
}
}
}
.table-field {
color: $df-primary;
color: var(--color-foreground-primary);
.variant {
background-color: $db-quaternary;
background-color: var(--color-background-quaternary);
border-radius: $br-8;
margin-right: $s-4;
padding-right: $s-4;
@ -189,7 +189,7 @@
svg {
width: $s-16;
height: $s-16;
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
fill: none;
}
@ -204,7 +204,7 @@
background: none;
border: none;
svg {
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
}
}
}
@ -242,15 +242,15 @@
display: flex;
flex-direction: column;
gap: $s-24;
color: $db-secondary;
color: var(--color-background-secondary);
width: $s-500;
h2 {
color: $df-primary;
color: var(--color-foreground-primary);
font-weight: 400;
}
p {
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-16;
}
}
@ -263,7 +263,7 @@
.fonts-placeholder {
align-items: center;
border-radius: $br-8;
border: $s-1 solid $db-quaternary;
border: $s-1 solid var(--color-background-quaternary);
display: flex;
flex-direction: column;
height: $s-160;
@ -273,14 +273,14 @@
width: 100%;
.icon svg {
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
fill: none;
width: $s-32;
height: $s-32;
}
.label {
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-14;
}
}

44
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -63,7 +63,7 @@ $thumbnail-default-height: $s-168; // Default width
&.dragged {
border-radius: $br-4;
outline: $br-4 solid $da-primary;
outline: $br-4 solid var(--color-accent-primary);
text-align: initial;
width: calc(var(--th-width) + $s-12);
height: var(--th-height, #{$thumbnail-default-height});
@ -71,7 +71,7 @@ $thumbnail-default-height: $s-168; // Default width
&.overlay {
border-radius: $br-4;
border: $s-2 solid $da-tertiary;
border: $s-2 solid var(--color-accent-tertiary);
height: 100%;
opacity: 0;
pointer-events: none;
@ -101,7 +101,7 @@ $thumbnail-default-height: $s-168; // Default width
h3 {
border: $s-1 solid transparent;
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-16;
font-weight: $fw400;
height: $s-28;
@ -120,7 +120,7 @@ $thumbnail-default-height: $s-168; // Default width
}
.date {
color: $df-secondary;
color: var(--color-foreground-secondary);
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
@ -136,7 +136,7 @@ $thumbnail-default-height: $s-168; // Default width
}
.item-badge {
background-color: $da-primary;
background-color: var(--color-accent-primary);
border: none;
border-radius: $br-6;
position: absolute;
@ -149,7 +149,7 @@ $thumbnail-default-height: $s-168; // Default width
justify-content: center;
svg {
stroke: $db-secondary;
stroke: var(--color-background-secondary);
fill: none;
height: $s-16;
width: $s-16;
@ -157,18 +157,18 @@ $thumbnail-default-height: $s-168; // Default width
}
&.add-file {
border: $s-1 dashed $df-secondary;
border: $s-1 dashed var(--color-foreground-secondary);
justify-content: center;
box-shadow: none;
span {
color: $db-primary;
color: var(--color-background-primary);
font-size: $fs-14;
}
&:hover {
background-color: $df-primary;
border: $s-2 solid $da-tertiary;
background-color: var(--color-foreground-primary);
border: $s-2 solid var(--color-accent-tertiary);
}
}
}
@ -179,9 +179,9 @@ $thumbnail-default-height: $s-168; // Default width
left: $s-4;
width: $s-32;
height: $s-32;
background-color: $da-tertiary;
background-color: var(--color-accent-tertiary);
border-radius: $br-circle;
color: $db-secondary;
color: var(--color-background-secondary);
font-size: $fs-16;
display: flex;
justify-content: center;
@ -197,7 +197,7 @@ $thumbnail-default-height: $s-168; // Default width
&:hover,
&:focus,
&:focus-within {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
.project-th-actions {
opacity: 1;
}
@ -208,7 +208,7 @@ $thumbnail-default-height: $s-168; // Default width
.selected {
.grid-item-th {
outline: $s-4 solid $da-tertiary;
outline: $s-4 solid var(--color-accent-tertiary);
}
}
}
@ -223,7 +223,7 @@ $thumbnail-default-height: $s-168; // Default width
width: $s-32;
span {
color: $db-secondary;
color: var(--color-background-secondary);
}
}
@ -290,7 +290,7 @@ $thumbnail-default-height: $s-168; // Default width
}
.grid-item-th.library {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
flex-direction: column;
height: 90%;
justify-content: flex-start;
@ -299,7 +299,7 @@ $thumbnail-default-height: $s-168; // Default width
.asset-section {
font-size: $fs-12;
color: $df-secondary;
color: var(--color-foreground-secondary);
&:not(:first-child) {
margin-top: $s-16;
@ -312,7 +312,7 @@ $thumbnail-default-height: $s-168; // Default width
text-transform: uppercase;
.num-assets {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
}
@ -320,7 +320,7 @@ $thumbnail-default-height: $s-168; // Default width
align-items: center;
border-radius: $br-4;
border: $s-1 solid transparent;
color: $df-primary;
color: var(--color-foreground-primary);
display: flex;
font-size: $fs-12;
margin-top: $s-4;
@ -328,7 +328,7 @@ $thumbnail-default-height: $s-168; // Default width
position: relative;
.name-block {
color: $df-secondary;
color: var(--color-foreground-secondary);
width: calc(100% - $s-24 - $s-8);
}
@ -349,11 +349,11 @@ $thumbnail-default-height: $s-168; // Default width
}
.color-name {
color: $df-primary;
color: var(--color-foreground-primary);
}
.color-value {
color: $df-secondary;
color: var(--color-foreground-secondary);
margin-left: $s-4;
text-transform: uppercase;
}

6
frontend/src/app/main/ui/dashboard/inline_edition.scss
View file

@ -17,7 +17,7 @@
input.element-title {
background-color: var(--input-background-color-active);
border-radius: $br-8;
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-16;
height: $s-32;
margin: 0;
@ -26,7 +26,7 @@ input.element-title {
width: 100%;
&:focus-visible {
border: $s-1 solid $da-primary;
border: $s-1 solid var(--color-accent-primary);
outline: none;
}
}
@ -39,7 +39,7 @@ input.element-title {
right: calc(-1 * $s-8);
svg {
fill: $df-secondary;
fill: var(--color-foreground-secondary);
height: $s-16;
transform: rotate(45deg) translateY(7px);
width: $s-16;

2
frontend/src/app/main/ui/dashboard/libraries.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16;
overflow-y: auto;
width: 100%;
border-top: $s-1 solid $db-quaternary;
border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects {
user-select: none;

22
frontend/src/app/main/ui/dashboard/placeholder.scss
View file

@ -19,7 +19,7 @@
85% top;
background-repeat: no-repeat;
align-items: center;
border: $s-1 solid $db-quaternary;
border: $s-1 solid var(--color-background-quaternary);
border-radius: $br-4;
display: flex;
flex-direction: column;
@ -30,7 +30,7 @@
.text {
a {
color: $df-primary;
color: var(--color-foreground-primary);
}
p {
max-width: $s-360;
@ -41,9 +41,9 @@
}
.create-new {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $br-8;
color: $df-primary;
color: var(--color-foreground-primary);
cursor: pointer;
height: $s-160;
margin: $s-8;
@ -55,23 +55,23 @@
svg {
width: $s-32;
height: $s-32;
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
}
&:hover {
border: $s-2 solid $da-tertiary;
background-color: $db-quaternary;
color: $da-primary;
border: $s-2 solid var(--color-accent-tertiary);
background-color: var(--color-background-quaternary);
color: var(--color-accent-primary);
svg {
stroke: $da-tertiary;
stroke: var(--color-accent-tertiary);
}
}
}
.text {
margin-top: $s-12;
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-16;
}
}
@ -85,7 +85,7 @@
}
.placeholder-text {
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-16;
text-align: center;
}

8
frontend/src/app/main/ui/dashboard/projects.scss
View file

@ -155,7 +155,7 @@
// Team hero
.team-hero {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $br-8;
border: none;
display: flex;
@ -185,7 +185,7 @@
.title {
font-size: $fs-24;
color: $df-primary;
color: var(--color-foreground-primary);
font-weight: $fw400;
}
@ -193,11 +193,11 @@
flex: 1;
font-size: $fs-16;
span {
color: $df-secondary;
color: var(--color-foreground-secondary);
display: block;
}
a {
color: $da-primary;
color: var(--color-accent-primary);
}
padding: $s-8 0;
}

8
frontend/src/app/main/ui/dashboard/search.scss
View file

@ -13,7 +13,7 @@
margin-right: $s-16;
overflow-y: auto;
width: 100%;
border-top: $s-1 solid $db-quaternary;
border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects {
user-select: none;
@ -35,14 +35,14 @@
flex-direction: column;
height: $s-200;
background: transparent;
border: $s-1 solid $db-quaternary;
border: $s-1 solid var(--color-background-quaternary);
border-radius: $br-8;
.text {
color: $df-primary;
color: var(--color-foreground-primary);
}
.icon svg {
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
width: $s-32;
height: $s-32;
}

4
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -92,7 +92,7 @@
width: 100%;
z-index: $z-index-modal;
border-radius: $br-circle;
background-color: $da-primary;
background-color: var(--color-accent-primary);
}
.image-icon {
@ -378,7 +378,7 @@
}
.hero-desc {
color: $df-secondary;
color: var(--color-foreground-secondary);
margin-bottom: 0;
font-size: $fs-16;
max-width: $s-512;

22
frontend/src/app/main/ui/dashboard/templates.scss
View file

@ -43,7 +43,7 @@
margin-right: $s-32;
position: relative;
z-index: $z-index-1;
background-color: $db-quaternary;
background-color: var(--color-background-quaternary);
}
.title-text {
@ -53,7 +53,7 @@
font-size: $fs-16;
margin-left: $s-16;
margin-right: $s-8;
color: $df-primary;
color: var(--color-foreground-primary);
font-weight: $fw400;
}
@ -62,7 +62,7 @@
vertical-align: middle;
margin-left: $s-16;
margin-right: $s-8;
color: $df-primary;
color: var(--color-foreground-primary);
margin-left: $s-16;
margin-right: $s-16;
transform: rotate(90deg);
@ -80,20 +80,20 @@
.move-button {
position: absolute;
top: $s-136;
border: $s-2 solid $df-secondary;
border: $s-2 solid var(--color-foreground-secondary);
border-radius: 50%;
text-align: center;
width: $s-36;
height: $s-36;
cursor: pointer;
background-color: $df-primary;
background-color: var(--color-foreground-primary);
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
&:hover {
border: $s-2 solid $da-tertiary;
border: $s-2 solid var(--color-accent-tertiary);
}
}
@ -116,7 +116,7 @@
height: $s-228;
margin-left: $s-6;
border-top-left-radius: $s-8;
background-color: $db-quaternary;
background-color: var(--color-background-quaternary);
overflow: scroll hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
@ -139,12 +139,12 @@
width: $s-256;
font-size: $fs-16;
cursor: pointer;
color: $df-primary;
color: var(--color-foreground-primary);
padding: $s-3 $s-6 $s-16 $s-6;
border-radius: $br-8;
&:hover {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
}
}
@ -188,12 +188,12 @@
.template-link-title {
font-size: $fs-14;
color: $df-primary;
color: var(--color-foreground-primary);
font-weight: $fw400;
}
.template-link-text {
font-size: $fs-12;
margin-top: $s-8;
color: $df-secondary;
color: var(--color-foreground-secondary);
}

2
frontend/src/app/main/ui/flex_controls/common.cljs
View file

@ -8,7 +8,7 @@
;; ------------------------------------------------
(def font-size 11)
(def distance-color "var(--da-quaternary)")
(def distance-color "var(--color-accent-quaternary)")
(def distance-text-color "var(--app-white)")
(def warning-color "var(--status-color-warning-500)")
(def flex-display-pill-width 40)

58
frontend/src/app/main/ui/settings.scss
View file

@ -28,7 +28,7 @@
margin-right: $s-16;
overflow-y: auto;
width: 100%;
border-top: $s-1 solid $db-quaternary;
border-top: $s-1 solid var(--color-background-quaternary);
&.dashboard-projects {
user-select: none;
@ -49,7 +49,7 @@
justify-content: center;
align-items: center;
a {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
}
@ -79,41 +79,41 @@
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-11;
margin-bottom: $s-12;
margin-left: calc(-1 * $s-4);
}
input,
select {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $s-8;
border-color: transparent;
color: $df-primary;
color: var(--color-foreground-primary);
padding: 0 $s-16;
&:focus {
outline: $s-1 solid $da-primary;
outline: $s-1 solid var(--color-accent-primary);
}
::placeholder {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
}
.help-icon {
bottom: $s-12;
top: auto;
svg {
fill: $df-secondary;
fill: var(--color-foreground-secondary);
}
}
&.disabled {
input {
background-color: var(--input-background-color-disabled);
border-color: $db-quaternary;
color: $df-secondary;
border-color: var(--color-background-quaternary);
color: var(--color-foreground-secondary);
}
}
.input-container {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $s-8;
border-color: transparent;
margin-top: $s-24;
@ -123,45 +123,45 @@
top: calc(-1 * $s-24);
}
span {
color: $df-primary;
color: var(--color-foreground-primary);
}
}
&:focus {
border: $s-1 solid $da-primary;
border: $s-1 solid var(--color-accent-primary);
}
}
textarea {
border-radius: $s-8;
padding: $s-12 $s-16;
background-color: $db-tertiary;
color: $df-primary;
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
border: none;
&:focus {
outline: $s-1 solid $da-primary;
outline: $s-1 solid var(--color-accent-primary);
}
}
}
.field-title {
color: $df-primary;
color: var(--color-foreground-primary);
}
.field-title:not(:first-child) {
margin-top: $s-64;
}
.field-text {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
button,
.btn-secondary {
width: 100%;
font-size: $fs-11;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
&:hover {
color: $da-primary;
background-color: $db-quaternary;
color: var(--color-accent-primary);
background-color: var(--color-background-quaternary);
}
}
hr {
@ -180,20 +180,20 @@
width: 100%;
.newsletter-subs {
border-bottom: $s-1 solid $df-secondary;
border-top: $s-1 solid $df-secondary;
border-bottom: $s-1 solid var(--color-foreground-secondary);
border-top: $s-1 solid var(--color-foreground-secondary);
padding: $s-32 0;
margin-bottom: $s-32;
.newsletter-title {
font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-14;
}
label {
font-family: "worksans", "vazirmatn", sans-serif;
color: $db-primary;
color: var(--color-background-primary);
font-size: $fs-12;
margin-right: calc(-1 * $s-16);
margin-bottom: $s-12;
@ -201,7 +201,7 @@
.info {
font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-12;
margin-bottom: $s-8;
}
@ -239,10 +239,10 @@
height: $s-120;
border-radius: 50%;
font-size: $fs-24;
color: $df-primary;
color: var(--color-foreground-primary);
line-height: 5;
text-align: center;
background: $da-tertiary;
background: var(--color-accent-tertiary);
z-index: 14;
}

8
frontend/src/app/main/ui/settings/feedback.scss
View file

@ -11,15 +11,15 @@
textarea {
border-radius: $br-8;
padding: $br-12;
background-color: $db-tertiary;
color: $df-primary;
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
border: none;
::placeholder {
color: $db-disabled;
color: var(--color-background-disabled);
}
&:focus {
outline: $s-1 solid $da-primary;
outline: $s-1 solid var(--color-accent-primary);
}
}
}

76
frontend/src/app/main/ui/settings/profile.scss
View file

@ -12,7 +12,7 @@
justify-content: center;
align-items: center;
a:not(.button-primary) {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
}
@ -34,11 +34,11 @@
width: 100%;
font-size: $fs-11;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
&:hover {
color: $da-primary;
background-color: $db-quaternary;
color: var(--color-accent-primary);
background-color: var(--color-background-quaternary);
}
}
hr {
@ -64,7 +64,7 @@
}
.field-title {
color: $df-primary;
color: var(--color-foreground-primary);
&:not(:first-child) {
margin-top: $s-64;
@ -72,7 +72,7 @@
}
.field-text {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
.custom-input,
@ -81,41 +81,41 @@
label {
position: relative;
text-transform: uppercase;
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-11;
margin-bottom: $s-12;
margin-left: calc(-1 * $s-4);
}
input,
select {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $br-8;
border-color: transparent;
color: $df-primary;
color: var(--color-foreground-primary);
padding: 0 $s-16;
&:focus {
outline: $s-1 solid $da-primary;
outline: $s-1 solid var(--color-accent-primary);
}
::placeholder {
color: $df-secondary;
color: var(--color-foreground-secondary);
}
}
.help-icon {
bottom: $s-12;
top: auto;
svg {
fill: $df-secondary;
fill: var(--color-foreground-secondary);
}
}
&.disabled {
input {
background-color: var(--input-background-color-disabled);
border-color: $db-quaternary;
color: $df-secondary;
border-color: var(--color-background-quaternary);
color: var(--color-foreground-secondary);
}
}
.input-container {
background-color: $db-tertiary;
background-color: var(--color-background-tertiary);
border-radius: $br-8;
border-color: transparent;
margin-top: $s-24;
@ -125,21 +125,21 @@
top: calc(-1 * $s-24);
}
span {
color: $df-primary;
color: var(--color-foreground-primary);
}
}
&:focus {
border: $s-1 solid $da-primary;
border: $s-1 solid var(--color-accent-primary);
}
}
textarea {
border-radius: $br-8;
padding: $s-12 $s-16;
background-color: $db-tertiary;
color: $df-primary;
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
border: none;
&:focus {
outline: $s-1 solid $da-primary;
outline: $s-1 solid var(--color-accent-primary);
}
}
}
@ -152,13 +152,13 @@
h1 {
font-size: $fs-36;
color: $db-tertiary;
color: var(--color-background-tertiary);
margin-bottom: $s-20;
}
.subtitle {
font-size: $fs-24;
color: $db-tertiary;
color: var(--color-background-tertiary);
margin-bottom: $s-20;
}
@ -168,7 +168,7 @@
margin-bottom: $s-48;
svg {
fill: $db-primary;
fill: var(--color-background-primary);
height: 40%;
width: 40%;
}
@ -176,14 +176,14 @@
.notification-text {
font-size: $fs-16;
color: $db-primary;
color: var(--color-background-primary);
margin-bottom: $s-20;
}
.notification-text-email {
background: $df-primary;
background: var(--color-foreground-primary);
border-radius: $br-4;
color: $db-primary;
color: var(--color-background-primary);
font-size: $fs-16;
font-weight: $fw500;
margin: $s-24 0 $s-40 0;
@ -194,7 +194,7 @@
h2 {
font-size: $fs-24;
font-weight: $fw400;
color: $df-primary;
color: var(--color-foreground-primary);
display: flex;
align-items: center;
margin: $s-16 0;
@ -203,7 +203,7 @@
h3 {
font-size: $fs-12;
font-weight: $fw400;
color: $df-primary;
color: var(--color-foreground-primary);
display: flex;
align-items: center;
margin: $s-8 0;
@ -217,11 +217,11 @@
}
p {
color: $db-primary;
color: var(--color-background-primary);
}
hr {
border-color: $df-secondary;
border-color: var(--color-foreground-secondary);
}
.links {
@ -258,10 +258,10 @@ form.avatar-form {
height: 100%;
border-radius: 50%;
font-size: $fs-24;
color: $df-primary;
color: var(--color-foreground-primary);
line-height: 6;
text-align: center;
background: $da-tertiary;
background: var(--color-accent-tertiary);
z-index: $z-index-modal;
}
@ -290,27 +290,27 @@ form.avatar-form {
}
.newsletter-subs {
border-bottom: $s-1 solid $df-secondary;
border-top: $s-1 solid $df-secondary;
border-bottom: $s-1 solid var(--color-foreground-secondary);
border-top: $s-1 solid var(--color-foreground-secondary);
padding: $s-32 0;
margin-bottom: $s-32;
.newsletter-title {
font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-14;
}
label {
font-family: "worksans", "vazirmatn", sans-serif;
color: $db-primary;
color: var(--color-background-primary);
font-size: $fs-12;
margin-right: calc(-1 * $s-16);
margin-bottom: $s-12;
}
.info {
color: $df-secondary;
color: var(--color-foreground-secondary);
font-size: $fs-12;
margin-bottom: $s-8;
}

2
frontend/src/app/main/ui/settings/sidebar.scss
View file

@ -80,7 +80,7 @@
}
.back-text {
color: $df-primary;
color: var(--color-foreground-primary);
}
.arrow-icon {

12
frontend/src/app/main/ui/static.scss
View file

@ -9,7 +9,7 @@
.exception-layout {
width: 100%;
height: 100%;
background-color: $db-secondary;
background-color: var(--color-background-secondary);
}
.deco-before,
@ -19,7 +19,7 @@
svg {
position: absolute;
fill: $df-secondary;
fill: var(--color-foreground-secondary);
height: 1537px;
width: $s-80;
}
@ -48,7 +48,7 @@
border: none;
cursor: pointer;
svg {
fill: $df-primary;
fill: var(--color-foreground-primary);
width: $s-48;
height: auto;
}
@ -75,12 +75,12 @@
.main-message {
@include bigTitleTipography;
color: $df-primary;
color: var(--color-foreground-primary);
}
.desc-message {
@include bigTitleTipography;
color: $df-secondary;
color: var(--color-foreground-secondary);
}
.sign-info {
@ -95,6 +95,6 @@
.image {
svg {
fill: $df-primary;
fill: var(--color-foreground-primary);
}
}

2
frontend/src/app/main/ui/viewer/inspect/code.scss
View file

@ -39,7 +39,7 @@
// Overrides background setted in the theme
:global(.hljs) {
background: $db-tertiary;
background: var(--color-background-tertiary);
}
&.collapsed {

4
frontend/src/app/main/ui/workspace/coordinates.scss
View file

@ -9,7 +9,7 @@
$width-settings-bar: 256px;
.container {
background-color: var(--db-primary);
background-color: var(--color-background-primary);
border-radius: $br-4;
bottom: 0px;
padding: $s-2 $s-8;
@ -28,6 +28,6 @@ $width-settings-bar: 256px;
}
.coordinate {
color: var(--df-primary);
color: var(--color-foreground-primary);
font-size: $fs-12;
}

2
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -287,7 +287,7 @@
height: $s-52;
margin-top: $s-8;
border-radius: $br-circle;
background: $db-quaternary;
background: var(--color-background-quaternary);
display: flex;
justify-content: center;
align-items: center;

2
frontend/src/app/main/ui/workspace/main_menu.scss
View file

@ -52,7 +52,7 @@
.separator {
margin-top: $s-8;
height: $s-4;
border-top: $s-1 solid $db-secondary;
border-top: $s-1 solid var(--color-background-secondary);
}
.shortcut {

28
frontend/src/app/main/ui/workspace/plugins.scss
View file

@ -26,7 +26,7 @@
}
hr {
border-color: $db-tertiary;
border-color: var(--color-background-tertiary);
}
}
@ -148,12 +148,12 @@
.plugin-title {
@include bodyMediumTypography;
color: $df-primary;
color: var(--color-foreground-primary);
}
.plugin-summary {
@include bodySmallTypography;
color: $df-secondary;
color: var(--color-foreground-secondary);
}
.plugins-empty {
@ -173,19 +173,19 @@
display: flex;
justify-content: center;
align-items: center;
background: $db-tertiary;
background: var(--color-background-tertiary);
svg {
width: $s-16;
height: $s-16;
stroke: $df-secondary;
stroke: var(--color-foreground-secondary);
fill: none;
}
}
.plugins-empty-text {
@include bodySmallTypography;
color: $df-primary;
color: var(--color-foreground-primary);
}
div.input-error {
@ -206,7 +206,7 @@ div.input-error {
}
.plugins-link {
color: $da-primary;
color: var(--color-accent-primary);
font-size: $fs-12;
display: inline-flex;
align-items: center;
@ -216,7 +216,7 @@ div.input-error {
margin-top: calc(-1 * $s-2);
width: $s-12;
height: $s-12;
stroke: $da-primary;
stroke: var(--color-accent-primary);
fill: none;
}
}
@ -239,7 +239,7 @@ div.input-error {
svg {
width: $s-24;
height: $s-24;
stroke: $da-primary;
stroke: var(--color-accent-primary);
fill: none;
}
}
@ -247,14 +247,14 @@ div.input-error {
.permissions-list-text {
@include bodySmallTypography;
margin: 0;
color: $df-secondary;
color: var(--color-foreground-secondary);
}
.permissions-disclaimer {
@include bodySmallTypography;
padding: $s-16;
background: $db-tertiary;
color: $df-secondary;
background: var(--color-background-tertiary);
color: var(--color-foreground-secondary);
border-radius: $br-4;
}
@ -265,10 +265,10 @@ div.input-error {
.discover {
@include bodySmallTypography;
color: $df-secondary;
color: var(--color-foreground-secondary);
margin-top: $s-24;
a {
color: $da-primary;
color: var(--color-accent-primary);
}
}

8
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
View file

@ -10,7 +10,7 @@
display: flex;
flex-direction: column;
background-color: var(--panel-background-color);
color: $df-primary;
color: var(--color-foreground-primary);
font-size: $fs-12;
user-select: text;
}
@ -54,8 +54,8 @@
.shape-title {
font-size: $fs-14;
padding-bottom: $s-4;
background: $db-quaternary;
color: $df-primary;
background: var(--color-background-quaternary);
color: var(--color-foreground-primary);
padding: $s-8;
border-radius: $s-8;
display: flex;
@ -83,7 +83,7 @@
}
.shape-link {
color: $df-primary;
color: var(--color-foreground-primary);
text-decoration: underline;
}

2
frontend/src/app/main/ui/workspace/sidebar/history.scss
View file

@ -95,7 +95,7 @@
}
.history-entry-summary-text {
margin: 0 $s-8;
color: $df-primary;
color: var(--color-foreground-primary);
}
.history-entry-summary-button {
opacity: $op-0;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View file

@ -260,7 +260,7 @@
.component-list-empty {
@include bodySmallTypography;
margin: 0 $s-4 0 $s-8;
color: $df-secondary;
color: var(--color-foreground-secondary);
}
.component-item {

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -289,7 +289,7 @@
}
.track-name {
color: $df-primary;
color: var(--color-foreground-primary);
}
.track-detail {
@ -297,7 +297,7 @@
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
color: $df-secondary;
color: var(--color-foreground-secondary);
}
.expand-icon {
@ -357,11 +357,11 @@
button {
@include buttonStyle;
padding: $s-8;
color: $df-primary;
color: var(--color-foreground-primary);
border-radius: $br-6;
&:hover {
background: $db-quaternary;
background: var(--color-background-quaternary);
}
}
}

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

@ -65,7 +65,7 @@
font-size: $fs-10;
text-transform: uppercase;
margin-inline-start: $s-4;
color: $df-primary;
color: var(--color-foreground-primary);
}
.attr-row {

2
frontend/src/app/main/ui/workspace/viewport/outline.cljs
View file

@ -33,7 +33,7 @@
;; NOTE: that we don't use mf/deref to avoid a repaint dependency here
objects (deref refs/workspace-page-objects)
color (if (ctn/in-any-component? objects shape)
"var(--color-component-highlight)"
"var(--assets-component-hightlight)"
"var(--color-accent-tertiary)")
x (dm/get-prop shape :x)

2
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View file

@ -32,7 +32,7 @@
(def resize-point-rect-size 8)
(def resize-side-height 8)
(def selection-rect-color-normal "var(--color-accent-tertiary)")
(def selection-rect-color-component "var(--color-component-highlight)")
(def selection-rect-color-component "var(--assets-component-hightlight)")
(def selection-rect-width 1)
(def min-selrect-side 10)
(def small-selrect-side 30)

2
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -87,7 +87,7 @@
color (if selected?
(if (ctn/in-any-component? objects frame)
"var(--color-component-highlight)"
"var(--assets-component-hightlight)"
"var(--color-accent-tertiary)")
"#8f9da3") ;; TODO: Set this color on the DS