From 039b03249b8946a0be6e25bdc861c127964d054d Mon Sep 17 00:00:00 2001 From: eva Date: Thu, 25 Nov 2021 17:17:58 +0100 Subject: [PATCH] :sparkles: Create css variables fron our sass varibles to use them in cljs files --- .../styles/common/dependencies/colors.scss | 135 ++++++++++++++---- 1 file changed, 109 insertions(+), 26 deletions(-) diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index 5a9c19c4d7..ff9fafecfb 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/frontend/resources/styles/common/dependencies/colors.scss @@ -22,7 +22,7 @@ $color-danger: #E65244; $color-info: #59b9e2; $color-ocean: #4285f4; $color-component: #76B0B8; -$color-component-highlight: #00E0FF; +$color-component-highlight: #1890ff; $color-pink: #feecfc; // Gray scale @@ -30,9 +30,14 @@ $color-gray-10: #E3E3E3; $color-gray-20: #b1b2b5; $color-gray-30: #7B7D85; $color-gray-40: #64666A; -$color-gray-50: #303236; +$color-gray-50: #303236; $color-gray-60: #1F1F1F; +// UI colors +$color-select: #1FDEA7; +$color-distance: #DB00FF; +$color-snap: #D383DA; + // Mixing Color variable for creating both light and dark colors $mix-percentage-dark: 81%; $mix-percentage-darker: 60%; @@ -41,43 +46,121 @@ $mix-percentage-lighter: 20%; $mix-percentage-lightest: 10%; // Lighter colors -$color-success-light: mix($color-success, $color-white, $mix-percentage-light); -$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); +$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d +$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de -$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); -$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); +$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); //#b7add1 +$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4 -$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); -$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); +$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); //#5af2c6 +$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1 -$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); -$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); +$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); //#fda035 +$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc; -$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); -$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); +$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); //#eb7569 +$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda -$color-info-light: mix($color-info, $color-white, $mix-percentage-light); -$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); +$color-info-light: mix($color-info, $color-white, $mix-percentage-light); //#7ac7e8 +$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9; // Darker colors -$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); -$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); +$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b; +$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537; -$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); -$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); +$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0 +$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77 -$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); -$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); +$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //#28c295; +$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e -$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); -$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); +$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02; +$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201 -$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); -$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker); +$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237 +$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);// #8a3129; -$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark); -$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); +$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);// #4896b7 +$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88; // bg transparent $color-dark-bg: rgba(0,0,0,.4); $color-light-bg: rgba(255,255,255,.6); + +// Transform scss variables into css variables to use them onto cljs files +:root { + // Colors + --color-white: #{$color-white}; + --color-black: #{$color-black}; + --color-canvas: #{$color-canvas}; + --color-dashboard: #{$color-dashboard}; + + // Main color; + --color-primary: #{$color-primary}; + + // Secondary colors; + --color-success: #{$color-success}; + --color-complete: #{$color-complete}; + --color-warning: #{$color-warning}; + --color-danger: #{$color-danger}; + --color-info: #{$color-info}; + --color-ocean: #{$color-ocean}; + --color-component: #{$color-component}; + --color-component-highlinght: #{$color-component-highlight}; + --color-pink: #{$color-pink}; + + // Gray scale; + --color-gray-10: #{$color-gray-10}; + --color-gray-20: #{$color-gray-20}; + --color-gray-30: #{$color-gray-30}; + --color-gray-40: #{$color-gray-40}; + --color-gray-50: #{$color-gray-50}; + --color-gray-60: #{$color-gray-60}; + + // UI colors + --color-distance: #{$color-distance}; + --color-select: #{$color-select}; + --color-snap: #{$color-snap}; + + // Lighter colors + --color-success-light : #{$color-success-light}; + --color-success-lighter : #{$color-success-lighter}; + + --color-complete-light : #{$color-complete-light}; + --color-complete-lighter : #{$color-complete-lighter}; + + --color-primary-light: #{$color-primary-light}; + --color-primary-lighter : #{$color-primary-lighter}; + + --color-warning-light : #{$color-warning-light}; + --color-warning-lighter : #{$color-warning-lighter}; + + --color-danger-light : #{$color-danger-light}; + --color-danger-lighter : #{$color-danger-lighter}; + + --color-info-light : #{$color-info-light}; + --color-info-lighter : #{$color-info-lighter}; + + // Darker colors + --color-success-dark : #{$color-success-dark}; + --color-success-darker : #{$color-success-darker}; + + --color-complete-dark : #{$color-complete-dark}; + --color-complete-darker : #{$color-complete-darker}; + + --color-primary-dark : #{$color-primary-dark}; + --color-primary-darker : #{$color-primary-darker}; + + --color-warning-dark : #{$color-warning-dark}; + --color-warning-darker : #{$color-warning-darker}; + + --color-danger-dark : #{$color-danger-dark}; + --color-danger-darker : #{$color-danger-darker}; + + --color-info-dark : #{$color-info-dark}; + --color-info-darker : #{$color-info-darker}; + + // bg transparent + --color-dark-bg : #{$color-dark-bg}; + --color-light-bg : #{$color-light-bg}; + } \ No newline at end of file