johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

♻️ Refactor dashboard sidebar css

Browse Source
This commit is contained in:
Eva Marco
2024-03-01 15:57:29 +01:00
committed by Alonso Torres
parent 9ad0662409
commit c2b8e5c946
5 changed files with 700 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/resources/styles/common/refactor/basic-rules.scss
View File

@@ -848,6 +848,7 @@
color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color);
border: $s-2 solid var(--panel-border-color);
margin: 0;
}
.menu-item-base {

17
frontend/resources/styles/common/refactor/design-tokens.scss
View File

@@ -155,6 +155,7 @@
--icon-foreground-hover: var(--color-foreground-primary);
--icon-foreground-accept: var(--status-color-success-500);
--icon-foreground-discard: var(--status-color-error-500);
--icon-foreground-active: var(--color-accent-primary);
// INPUTS, SELECTS, DROPDOWNS
@@ -201,6 +202,7 @@
--menu-background-color: var(--color-background-tertiary);
--menu-foreground-color: var(--color-foreground-primary);
--menu-icon-foreground-color: var(--color-foreground-secondary);
--menu-background-color-selected: var(--color-background-tertiary);
--menu-background-color-hover: var(--color-background-quaternary);
--menu-foreground-color-hover: var(--color-foreground-primary);
@@ -358,6 +360,11 @@
--search-bar-background-color: var(--color-background-primary);
--search-bar-input-background-color: var(--color-background-tertiary);
--search-bar-input-border-color: var(--color-background-tertiary);
--search-bar-input-border-color-focus: var(--color-accent-primary);
--search-bar-placeholder-foreground-color: var(--color-foreground-secondary);
--search-bar-foreground-color: var(--color-foreground-primary);
--search-bar-icon-foreground-color: var(--color-foreground-secondary);
--search-bar-icon-foreground-color-hover: var(--color-accent-primary);
--pill-background-color: var(--color-background-tertiary);
--pill-foreground-color: var(--color-foreground-primary);
@@ -369,6 +376,8 @@
--resize-area-background-color: var(--color-background-primary);
--resize-area-border-color: var(--color-background-quaternary);
--profile-section-background-color: var(--color-background-tertiary);
--flow-tag-background-color: var(--color-background-tertiary);
--flow-tag-foreground-color: var(--color-foreground-secondary);
--flow-tag-background-color-hover: var(--color-background-quaternary);
@@ -393,6 +402,14 @@
// NEW TEAM BUTTON
// TODO: we should not put these functional tokens here, but rather in the components they belong to
--new-team-button-background-color: var(--color-background-primary);
//DASHBOARD
--sidebar-element-foreground-color: var(--color-foreground-secondary);
--sidebar-element-background-color-hover: var(--color-background-secondary);
--sidebar-element-foreground-color-hover: var(--color-accent-primary);
--sidebar-element-background-color-selected: var(--color-background-quaternary);
--sidebar-element-foreground-color-selected: var(--color-accent-primary);
--profile-foreground-color: var(--color-foreground-primary);
}
#app {