mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 15:39:50 -05:00
✨ Create css variables fron our sass varibles to use them in cljs files
This commit is contained in:
eva
Alonso Torres
parent
3919cf4f86
commit
039b03249b
1 changed files with 109 additions and 26 deletions
|
|
@ -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};
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue