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

♻️ Add new exceptions for light theme

Browse source
This commit is contained in:
Eva 2024-01-30 10:40:28 +01:00 • committed by Alonso Torres
parent a882d0bf6d
commit 153bb752a4
28 changed files with 131 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -127,7 +127,7 @@
border-radius: $br-8;
color: var(--button-tertiary-foreground-color-rest);
background-color: transparent;
border: $s-1 solid transparent;
border: $s-2 solid transparent;
svg,
span svg {
stroke: var(--button-tertiary-foreground-color-rest);
@ -135,7 +135,7 @@
&:hover {
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-hover);
border: $s-1 solid var(--button-secondary-border-color-hover);
border: $s-2 solid var(--button-secondary-border-color-hover);
svg,
span svg {
stroke: var(--button-tertiary-foreground-color-hover);
@ -143,7 +143,7 @@
}
&:active {
outline: none;
border: $s-1 solid transparent;
border: $s-2 solid transparent;
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
svg,
@ -168,11 +168,11 @@
.button-icon-selected {
outline: none;
border: $s-1 solid transparent;
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-active);
border: $s-2 solid var(--button-icon-border-color-selected);
background-color: var(--button-icon-background-color-selected);
color: var(--button-icon-foreground-color-selected);
svg {
stroke: var(--button-tertiary-foreground-color-active);
stroke: var(--button-icon-foreground-color-selected);
}
}

1
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -42,6 +42,7 @@
--lf-primary: #000;
--lf-secondary: #495e74;
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
--lf-secondary-50: #{color.change(#495e74, $alpha: 0.5)};
//Light accent
--la-primary: #6911d4;

44
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -63,6 +63,12 @@
--button-tertiary-border-color-focus: var(--color-accent-primary);
--button-tertiary-foreground-color-focus: var(--color-foreground-primary);
--button-icon-foreground-color: var(--color-foreground-secondary);
--button-icon-foreground-color-hover: var(--color-foreground-secondary);
--button-icon-background-color-selected: var(--color-background-quaternary);
--button-icon-foreground-color-selected: var(--color-accent-primary);
--button-icon-border-color-selected: var(--color-background-quaternary);
--button-radio-background-color-rest: var(--color-background-tertiary);
--button-radio-border-color-rest: var(--color-background-tertiary);
--button-radio-foreground-color-rest: var(--color-foreground-secondary);
@ -92,11 +98,14 @@
--constraint-center-area-background-color: var(--color-background-primary);
// TABS
--tabs-background-color: var(--color-background-secondary);
--tab-background-color-hover: var(--color-background-primary);
--tab-background-color-selected: var(--color-background-quaternary);
--tab-foreground-color: var(--color-foreground-secondary);
--tab-foreground-color-hover: var(--color-foreground-primary);
--tab-foreground-color-selected: var(--color-accent-primary);
--tab-border-color: var(--color-background-secondary);
--tab-border-color-selected: var(--color-background-secondary);
// SECTION TITLE
--title-background-color: var(--color-background-primary);
@ -213,16 +222,14 @@
--assets-item-background-color: var(--color-background-tertiary);
--assets-item-background-color-hover: var(--color-background-quaternary);
--assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
--assets-item-name-foreground-color: var(--color-foreground-secondary);
--assets-item-name-foreground-color: var(--color-foreground-primary);
--assets-item-name-foreground-color-hover: var(--color-foreground-primary);
--assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
--assets-item-border-color: var(--color-accent-primary);
--assets-item-background-color-drag: var(--color-accent-primary-muted);
--assets-item-border-color-drag: var(--color-accent-tertiary);
--assets-component-background-color: var(--app-white); // We don't want this color to change with palette
--assets-component-background-color-disabled: var(
--df-secondary;
); // We don't want this color to change with palette
--assets-item-background-color-drag: transparent;
--assets-item-border-color-drag: var(--color-accent-primary-muted);
--assets-component-background-color: var(--app-white); // TODO: review this token
--assets-component-background-color-disabled: var(--df-secondary;);
--assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-accent-tertiary);
@ -230,6 +237,7 @@
--radio-btn-background-color-selected: var(--color-background-quaternary);
--radio-btn-foreground-color: var(--color-foreground-secondary);
--radio-btn-foreground-color-selected: var(--color-accent-primary);
--radio-btn-border-color: var(--color-background-tertiary);
--radio-btn-border-color-selected: var(--color-background-quaternary);
--library-name-foreground-color: var(--color-foreground-primary);
@ -354,3 +362,25 @@
#app {
background-color: var(--app-background);
}
.light {
--assets-component-background-color: var(--color-background-secondary);
--tabs-background-color: var(--color-background-tertiary);
--tab-background-color-selected: var(--color-background-primary);
--tab-border-color: var(--color-background-tertiary);
--tab-border-color-selected: var(--color-background-secondary);
--radio-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-primary);
--radio-btn-foreground-color: var(--color-foreground-secondary);
--radio-btn-foreground-color-selected: var(--color-accent-primary);
--radio-btn-border-color: var(--color-background-tertiary);
--radio-btn-border-color-selected: var(--color-background-secondary);
--button-icon-background-color-selected: var(--color-background-primary);
--button-icon-border-color-selected: var(--color-background-secondary);
--assets-item-name-background-color: var(--color-background-primary);
--assets-item-name-foreground-color: var(--color-foreground-primary);
}

3
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -24,8 +24,7 @@
--color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--la-secondary);
--overlay-color: rgba(255, 255, 255, 0.4);
--overlay-color: var(--lf-secondary-50);
--shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;