@trilogy-ds/styles 0.0.1-beta.8 → 0.0.3-beta-v4

package/framework/src/utilities/_controls.scss

@@ -1,67 +1,56 @@
-$control-radius: $radius !default;
-$control-radius-small: $radius-small !default;
-
 $control-border-width: 1px !default;
 
 $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
-$control-padding-horizontal: 20px;
-
-%control {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    align-items: center;
-    border: $control-border-width solid transparent;
-    border-radius: $control-radius-small;
-    display: inline-flex;
-    font-size: $size-normal;
-    height: 2.25em;
-    justify-content: flex-start;
-    line-height: 1.5;
-    padding-bottom: $control-padding-vertical;
-    padding-left: $control-padding-horizontal;
-    padding-right: $control-padding-horizontal;
-    padding-top: $control-padding-vertical;
-    position: relative;
-    vertical-align: top;
+$control-padding-horizontal: 16px;
 
-    // bug fix pour iOS qui zoom sur le champ si la police ne fait pas 16px
+@mixin control {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  align-items: center;
+  border: $control-border-width solid transparent;
+  border-radius: var(--radius-small);
+  display: inline-flex;
+  font-size: $size-normal;
+  height: 46px;
+  justify-content: flex-start;
+  line-height: 1.4;
+  padding-bottom: $control-padding-vertical;
+  padding-left: $control-padding-horizontal;
+  padding-right: $control-padding-horizontal;
+  padding-top: $control-padding-vertical;
+  position: relative;
+  vertical-align: top;
+
+  // bug fix pour iOS qui zoom sur le champ si la police ne fait pas 16px
+  @supports (-webkit-overflow-scrolling: touch) {
+    font-size: $text-16;
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+
+    // répétition nécessaire : bug fix pour iOS qui zoom sur le champ si la police ne fait pas 16px
     @supports (-webkit-overflow-scrolling: touch) {
-        font-size: $text-16;
-    }
-
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active {
-        outline: none;
-
-        // répétition nécessaire : bug fix pour iOS qui zoom sur le champ si la police ne fait pas 16px
-        @supports (-webkit-overflow-scrolling: touch) {
-            font-size: $text-16;
-        }
+      font-size: $text-16;
     }
+  }
 
-    &[disabled] {
-        cursor: not-allowed;
-    }
-}
-
-@mixin control {
-    @extend %control;
+  &[disabled] {
+    cursor: not-allowed;
+  }
 
-    height: 46px;
-    line-height: 1.4;
 }
 
 @mixin control-small {
-    border-radius: $control-radius-small;
-    font-size: $size-small;
+  border-radius: var(--radius-small);
+  font-size: $size-small;
 }
 
 @mixin control-medium {
-    font-size: $size-medium;
+  font-size: $size-medium;
 }
 
 @mixin control-large {
-    font-size: $size-large;
+  font-size: $size-large;
 }

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

@@ -14,27 +14,16 @@ $size-large: $text-24 !default;
 
 // Brand Color
 $colors-brand: (
-  'background', 'main', 'font'
+  'background', 'main', 'accent'
 );
 
 // Brand Color Functionnal
-$colors-brand-funcionnal: (
-  'background', 'main', 'alternate', 'font', 'info', 'success', 'error', 'warning'
+$colors-brand-functionnal: (
+  'background', 'main', 'accent', 'info', 'success', 'error', 'warning', 'neutral'
 );
 
 $colors-feedback: (
-  'success': (
-    'bg-success',
-  ),
-  'error': (
-    'bg-error',
-  ),
-  'warning': (
-    'bg-warning',
-  ),
-  'info': (
-    'bg-info',
-  ),
+  'success', 'error', 'warning', 'info'
 );
 
 // Gestion des z-index

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

@@ -1,37 +1,7 @@
 @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
- @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
- @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 ;
+@import "colors";
+
+$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 +51,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 +105,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;