Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 22:49:01 -05:00
Code Issues Activity

Merge pull request #4987 from penpot/eva-add-selection-colors-to-ds

Browse source 
✨  Add selection colors to ds
This commit is contained in:
Alejandro 2024-08-16 07:59:18 +02:00 • committed by GitHub
commit d1d3b4353a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,9 +41,6 @@
--status-color-info-500: #0e9be9; // used on pixel grid and status widget --status-color-info-500: #0e9be9; // used on pixel grid and status widget
//GENERIC
--color-canvas: #e8e9ea; // Not defined on DS
// APP COLORS // APP COLORS
--app-white: #ffffff; // Used in several places --app-white: #ffffff; // Used in several places
--app-black: #000; // Used on interactions, measurements and editor files --app-black: #000; // Used on interactions, measurements and editor files

20
frontend/src/app/main/ui/ds/colors.scss
View file

@ -9,6 +9,8 @@
$mint-150: #7efff5; $mint-150: #7efff5;
$mint-250: #00d1b8; $mint-250: #00d1b8;
$mint-700: #426158; $mint-700: #426158;
$mint-150-60: #7efff599;
$mint-250-10: #00d1b81a;
$green-200: #a7e8d9; $green-200: #a7e8d9;
$green-500: #2d9f8f; $green-500: #2d9f8f;
@ -29,6 +31,8 @@ $purple-200: #e1d2f5;
$purple-400: #bb97d8; $purple-400: #bb97d8;
$purple-600: #8c33eb; $purple-600: #8c33eb;
$purple-700: #6911d4; $purple-700: #6911d4;
$purple-600-10: #8c33eb1a;
$purple-700-60: #6911d499;
$blue-200: #bae3fd; $blue-200: #bae3fd;
$blue-500: #0e9be9; $blue-500: #0e9be9;
@ -38,22 +42,30 @@ $cobalt-700: #1345aa;
$black: #000; $black: #000;
$gray-950: #18181a; $gray-950: #18181a;
$gray-950-60: #18181a99;
$gray-950-90: #18181ae6;
$gray-900: #212426; $gray-900: #212426;
$gray-800: #2e3434; $gray-800: #2e3434;
$gray-200: #e8eaee; $gray-200: #e8eaee;
$gray-100: #eef0f2; $gray-100: #eef0f2;
$gray-50: #f3f4f6; $gray-50: #f3f4f6;
$white: #fff; $white: #fff;
$white-60: #ffffff99;
$white-90: #ffffffe6;
$blue-teal-700: #495e74; $blue-teal-700: #495e74;
$grayish-blue-500: #8f9da3; $grayish-blue-500: #8f9da3;
$grayish-red: #bfbfbf;
:global(.light) { :global(.light) {
--color-accent-primary: #{$purple-700}; --color-accent-primary: #{$purple-700};
--color-accent-primary-muted: #{$purple-200}; --color-accent-primary-muted: #{$purple-200};
--color-accent-secondary: #{$cobalt-700}; --color-accent-secondary: #{$cobalt-700};
--color-accent-tertiary: #{$purple-600}; --color-accent-tertiary: #{$purple-600};
--color-accent-quaternary: #{$pink-400}; --color-accent-quaternary: #{$pink-400};
--color-accent-overlay: #{$purple-600-10};
--color-accent-select: #{$purple-700-60};
--color-accent-success: #{$green-500}; --color-accent-success: #{$green-500};
--color-background-success: #{$green-200}; --color-background-success: #{$green-200};
@ -73,6 +85,9 @@ $grayish-blue-500: #8f9da3;
--color-foreground-secondary: #{$blue-teal-700}; --color-foreground-secondary: #{$blue-teal-700};
--color-shadow: #{color.change($blue-teal-700, $alpha: 0.2)}; --color-shadow: #{color.change($blue-teal-700, $alpha: 0.2)};
--color-overlay-default: #{$white-60};
--color-overlay-onboarding: #{$white-90};
--color-canvas: #{$grayish-red};
} }
:global(.default) { :global(.default) {
@ -81,6 +96,8 @@ $grayish-blue-500: #8f9da3;
--color-accent-secondary: #{$purple-400}; --color-accent-secondary: #{$purple-400};
--color-accent-tertiary: #{$mint-250}; --color-accent-tertiary: #{$mint-250};
--color-accent-quaternary: #{$pink-400}; --color-accent-quaternary: #{$pink-400};
--color-accent-overlay: #{$mint-250-10};
--color-accent-select: #{$mint-150-60};
--color-accent-success: #{$green-500}; --color-accent-success: #{$green-500};
--color-background-success: #{$green-950}; --color-background-success: #{$green-950};
@ -100,4 +117,7 @@ $grayish-blue-500: #8f9da3;
--color-foreground-secondary: #{$grayish-blue-500}; --color-foreground-secondary: #{$grayish-blue-500};
--color-shadow: #{color.change($black, $alpha: 0.6)}; --color-shadow: #{color.change($black, $alpha: 0.6)};
--color-overlay-default: #{$gray-950-60};
--color-overlay-onboarding: #{$gray-950-90};
--color-canvas: #{$grayish-red};
} }