diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index ade8d8991..46e6ba113 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -41,9 +41,6 @@ --status-color-info-500: #0e9be9; // used on pixel grid and status widget - //GENERIC - --color-canvas: #e8e9ea; // Not defined on DS - // APP COLORS --app-white: #ffffff; // Used in several places --app-black: #000; // Used on interactions, measurements and editor files diff --git a/frontend/src/app/main/ui/ds/colors.scss b/frontend/src/app/main/ui/ds/colors.scss index aa21f26d2..e7a63c0fa 100644 --- a/frontend/src/app/main/ui/ds/colors.scss +++ b/frontend/src/app/main/ui/ds/colors.scss @@ -9,6 +9,8 @@ $mint-150: #7efff5; $mint-250: #00d1b8; $mint-700: #426158; +$mint-150-60: #7efff599; +$mint-250-10: #00d1b81a; $green-200: #a7e8d9; $green-500: #2d9f8f; @@ -29,6 +31,8 @@ $purple-200: #e1d2f5; $purple-400: #bb97d8; $purple-600: #8c33eb; $purple-700: #6911d4; +$purple-600-10: #8c33eb1a; +$purple-700-60: #6911d499; $blue-200: #bae3fd; $blue-500: #0e9be9; @@ -38,22 +42,30 @@ $cobalt-700: #1345aa; $black: #000; $gray-950: #18181a; +$gray-950-60: #18181a99; +$gray-950-90: #18181ae6; $gray-900: #212426; $gray-800: #2e3434; $gray-200: #e8eaee; $gray-100: #eef0f2; $gray-50: #f3f4f6; $white: #fff; +$white-60: #ffffff99; +$white-90: #ffffffe6; $blue-teal-700: #495e74; $grayish-blue-500: #8f9da3; +$grayish-red: #bfbfbf; + :global(.light) { --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-overlay: #{$purple-600-10}; + --color-accent-select: #{$purple-700-60}; --color-accent-success: #{$green-500}; --color-background-success: #{$green-200}; @@ -73,6 +85,9 @@ $grayish-blue-500: #8f9da3; --color-foreground-secondary: #{$blue-teal-700}; --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) { @@ -81,6 +96,8 @@ $grayish-blue-500: #8f9da3; --color-accent-secondary: #{$purple-400}; --color-accent-tertiary: #{$mint-250}; --color-accent-quaternary: #{$pink-400}; + --color-accent-overlay: #{$mint-250-10}; + --color-accent-select: #{$mint-150-60}; --color-accent-success: #{$green-500}; --color-background-success: #{$green-950}; @@ -100,4 +117,7 @@ $grayish-blue-500: #8f9da3; --color-foreground-secondary: #{$grayish-blue-500}; --color-shadow: #{color.change($black, $alpha: 0.6)}; + --color-overlay-default: #{$gray-950-60}; + --color-overlay-onboarding: #{$gray-950-90}; + --color-canvas: #{$grayish-red}; }