@trilogy-ds/styles 0.0.1-beta-4 → 0.0.1-beta-52

package/framework/src/utilities/_initial-variables.scss

@@ -1,37 +1,35 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 $suffix: '';
 
 /*
- All color have a
+ All color variables are defined here
  @string slug name used in classname (You can use your brand name)
  @color A valid css color value
  @invert The slug name of the best inverted color
- @hover A valid css color value (a variant color for the hover case) -- optional
+ @hover A valid css color value (a variant color for the hover case)
  @visited A valid css color value (a variant color for the pressed case) -- optional
  @background A valid css color value (a variant color for background) -- optional
  */
-
 $colors: (
-  'background': ['white', #fff, 'tertiary', #E9E9E9, #F4F4F4],
-  'main':['primary', #1A688A, 'white', #134960, #0c7b91],
-  'alternate':['secondary', #D44A4A, 'white', #b64508, #ec5353, #e3bcbc, #912b2b, #601212],
-  'font':['tertiary', #333, 'white', #222, #646464],
-  'aside':['hue42', hsl(42,100%,50%), 'tertiary'],
-  'success':['success', #007B52, 'white'],
-  'info':['info', #1A688A, 'white'],
-  'warning':['warning', #FFBB33, 'tertiary'],
-  'error':['error', #D42D02, 'white'],
-  'grey':['grey', #707070, 'white' ],
-  'grey-dark':['grey-dark', #646464, 'white' ],
-  'grey-light':['grey-light', #E9E9E9, 'white' ],
-  'grey-lighter':['grey-lighter', #F4F4F4, 'white' ],
-  'grey-disabled':['grey-disabled', #D1D1D1, 'white' ],
-  'bg-disabled': ['bg-disabled', hsl(0, 0%, 80%), 'disabled'],
-  'bg-success': ['bg-success', #cae8ca, 'success'],
-  'bg-info': ['bg-info', #c8dbec, 'info'],
-  'bg-warning': ['bg-warning', #ecdbc6, 'warning'],
-  'bg-error': ['bg-error', #eecccc, 'error'],
-) !default ;
+  'background': ['white', #fff, 'main', #E9E9E9],
+  'main':['main', #3d5d7e, 'white', #eff2f8],
+  'alternate':['accent', #da641b, 'white',  #bb5118],
+  'font':['main', #3d5d7e, 'white', #BBC6CD],
+  'success':['success', #007B52, 'white', #cae8ca],
+  'info':['info', #1A688A, 'white', #c8dbec],
+  'warning':['warning', #FFBB33, 'white', #ecdbc6],
+  'error':['error', #D42D02, 'white',#eecccc],
+  /* Grey disabled // BG : bg-disabled */
+  'disabled':['disabled', #646464, 'white', #D1D1D1],
+  'hovered': ['hovered', #24374a, 'font',#e4eaed],
+  /* grey , BG : grey-lighter */
+  'neutral':['grey', #707070, 'white', #F4F4F4 ],
+  /* grey dark , BG : grey-light */
+  'neutral-dark':['grey-dark', #646464, 'white', #E9E9E9 ]
+) !default;
+
+$hoverSelector: "&:hover:not([disabled]):not([aria-disabled=true])";
 
 // Typography OS-regular
 $family-sans-serif: 'Poppins Read', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
@@ -81,7 +79,7 @@ $text-64: 64px !default;
 $text-80: 80px !default;
 
 
-$size-1: $text-32;
+$size-1: 32px;
 $size-2: $text-28;
 $size-3: $text-24;
 $size-4: $text-20;
@@ -135,8 +133,6 @@ $speed: 86ms !default;
 // Radius
 $radius-small: 4px !default;
 $radius: 8px !default;
-$radius-large: 9px !default;
-$radius-rounded: 6685px !default;
 
 // Flags
 $variable-columns: true !default;