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

✨ Add DS foundation colors

Browse source
This commit is contained in:
Eva Marco 2024-07-01 14:24:12 +02:00
parent 746b448f30
commit 6c68a34d63
1 changed files with 79 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,20 +4,94 @@
//
// Copyright (c) KALEIDOS INC
// Accent colors
$mint-150: #7efff5;
$mint-250: #00d1b8;
$mint-700: #426158;
$green-200: #a7e8d9;
$green-500: #2d9f8f;
$green-950: #0a2927;
$orange-200: #ffc8a8;
$orange-500: #fe4811;
$orange-950: #440806;
$red-200: #ffcada;
$red-500: #ff3277;
$red-700: #c80857;
$red-950: #500124;
$pink-400: #ff6fe0;
$purple-200: #e1d2f5;
$purple-400: #bb97d8;
$purple-600: #8c33eb;
$purple-700: #6911d4;
// Background colors
$white: #fff;
$blue-200: #bae3fd;
$blue-500: #0e9be9;
$blue-950: #082c49;
$cobalt-700: #1345aa;
$black: #000;
$gray-950: #18181a;
$gray-900: #212426;
$gray-800: #2e3434;
$gray-200: #e8eaee;
$gray-100: #eef0f2;
$gray-50: #f3f4f6;
$white: #fff;
$blue-teal-700: #495e74;
$grayish-blue-500: #8f9da3;
:global(.light) {
--color-accent-primary: #{$mint-150};
--color-accent-primary: #{$purple-700};
--color-accent-primary-muted: #{$purple-200};
--color-accent-secondary: #{$cobalt-700};
--color-accent-tertiary: #{$purple-600};
--color-accent-quaternary: #{$pink-400};
--color-accent-success: #{$green-500};
--color-background-success: #{$green-200};
--color-accent-warning: #{$orange-500};
--color-background-warning: #{$orange-200};
--color-accent-error: #{$red-500};
--color-background-error: #{$red-200};
--color-accent-info: #{$blue-500};
--color-background-info: #{$blue-200};
--color-background-primary: #{$white};
--color-background-secondary: #{$gray-200};
--color-background-tertiary: #{$gray-50};
--color-background-quaternary: #{$gray-100};
--color-foreground-primary: #{$black};
--color-foreground-secondary: #{$blue-teal-700};
}
:global(.default) {
--color-accent-primary: #{$purple-700};
--color-accent-primary: #{$mint-150};
--color-accent-primary-muted: #{$mint-700};
--color-accent-secondary: #{$purple-400};
--color-accent-tertiary: #{$mint-250};
--color-accent-quaternary: #{$pink-400};
--color-accent-success: #{$green-500};
--color-background-success: #{$green-950};
--color-accent-warning: #{$orange-500};
--color-background-warning: #{$orange-950};
--color-accent-error: #{$red-700};
--color-background-error: #{$red-950};
--color-accent-info: #{$blue-500};
--color-background-info: #{$blue-950};
--color-background-primary: #{$gray-950};
--color-background-secondary: #{$black};
--color-background-tertiary: #{$gray-900};
--color-background-quaternary: #{$gray-800};
--color-foreground-primary: #{$white};
--color-foreground-secondary: #{$grayish-blue-500};
}