github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-28 20:58:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Add new tier two color tokens for ui elements

Browse Source
This commit is contained in:
elhombretecla 2025-10-06 09:53:11 +02:00
parent 2de6b6460e
commit c565915007
2 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/main/ui/ds/colors.scss
View File

@ -79,6 +79,9 @@ $grayish-red: #bfbfbf;
--color-accent-select: #{$purple-600-10};
--color-accent-action: #{$purple-400};
--color-accent-action-hover: #{$purple-500};
--color-accent-ui-base: #{$purple-200};
--color-accent-ui-hover: #{$purple-600};
--color-accent-ui-active: #{$gray-200};
--color-accent-success: #{$green-500};
--color-background-success: #{$green-200};
@ -127,6 +130,9 @@ $grayish-red: #bfbfbf;
--color-accent-select: #{$mint-250-10};
--color-accent-action: #{$purple-400};
--color-accent-action-hover: #{$purple-500};
--color-accent-ui-base: #{$green-500};
--color-accent-ui-hover: #{$mint-250};
--color-accent-ui-active: #{$gray-800};
--color-accent-success: #{$green-500};
--color-background-success: #{$green-950};

24
frontend/src/app/main/ui/ds/controls/switcher/switcher.scss
View File

@ -28,7 +28,7 @@ $switcher-transition-duration: 0.2s;
--switcher-track-outline-offset: 0;
--switcher-track-width: #{$switcher-md-track-width};
--switcher-track-height: #{$switcher-md-track-height};
--switcher-track-bg: var(--color-background-quaternary);
--switcher-track-bg: var(--color-accent-ui-active);
--switcher-track-opacity: 1;
--switcher-thumb-transform: translateX(0);
@ -124,11 +124,11 @@ $switcher-transition-duration: 0.2s;
// Checked state
.switcher-checked {
--switcher-track-bg: var(--color-accent-success);
--switcher-track-bg: var(--color-accent-ui-base);
--switcher-thumb-bg: var(--color-static-white);
--switcher-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
&:hover {
--switcher-track-bg: var(--color-accent-tertiary);
--switcher-track-bg: var(--color-accent-ui-hover);
}
}
@ -156,20 +156,4 @@ $switcher-transition-duration: 0.2s;
.switcher-thumb {
transition: none;
}
}
// TODO: Create new tier two tokens that represent this element
// // Light mode color overrides
// :global(.light) {
// .switcher {
// --switcher-track-bg: var(--color-background-secondary);
// }
// .switcher-checked {
// --switcher-track-bg: var(--color-accent-primary-muted);
// &:hover {
// --switcher-thumb-bg: var(--color-background-default);
// }
// }
// }
}