@eui/styles 17.0.0-next.1 → 17.0.0-next.11

package/src/styles/01-ecl/_module-eui-ecl.scss

@@ -0,0 +1,27 @@
+@use '@ecl/theme-eu';
+
+// Icons & Images
+// @use '@ecl/vanilla-component-icon/icon';
+
+// Layout
+// @use '@ecl/vanilla-layout-grid/grid';
+
+// Other atoms
+@use '@ecl/vanilla-component-label/label-eu';
+@use '@ecl/vanilla-component-link/link-eu';
+
+// @use '@ecl/vanilla-utility-background/background';
+// @use '@ecl/vanilla-utility-border/border';
+// @use '@ecl/vanilla-utility-clearfix/clearfix';
+// @use '@ecl/vanilla-utility-dimension/dimension';
+@use '@ecl/vanilla-utility-flex/flex';
+// @use '@ecl/vanilla-utility-float/float';
+// @use '@ecl/vanilla-utility-disablescroll/disablescroll';
+@use '@ecl/vanilla-utility-display/display';
+// @use '@ecl/vanilla-utility-media/media';
+// @use '@ecl/vanilla-utility-print/print';
+@use '@ecl/vanilla-utility-screen-reader/screen-reader';
+// @use '@ecl/vanilla-utility-shadow/shadow';
+@use '@ecl/vanilla-utility-spacing/spacing';
+@use '@ecl/vanilla-utility-typography/typography-eu';
+@use '@ecl/vanilla-utility-z-index/z-index';

package/src/styles/02-base/mixins/_eui-border-state.scss

@@ -1,30 +1,30 @@
 // Left side border status
 @mixin eui-border-state($state: null) {
     @if ($state == primary) {
-        border-left: v(eui-border-state-width) solid v(eui-base-color-primary-100);
+        border-left: v(eui-base-spacing-xs) solid v(eui-base-color-primary-100);
     }
 
     @if ($state == secondary) {
-        border-left: v(eui-border-state-width) solid v(eui-base-color-grey-25);
+        border-left: v(eui-base-spacing-xs) solid v(eui-base-color-grey-25);
     }
 
     @if ($state == info) {
-        border-left: v(eui-border-state-width) solid v(eui-base-color-info-100);
+        border-left: v(eui-base-spacing-xs) solid v(eui-base-color-info-100);
     }
 
     @if ($state == success) {
-        border-left: v(eui-border-state-width) solid v(eui-base-color-success-100);
+        border-left: v(eui-base-spacing-xs) solid v(eui-base-color-success-100);
     }
 
     @if ($state == warning) {
-        border-left: v(eui-border-state-width) solid v(eui-base-color-warning-100);
+        border-left: v(eui-base-spacing-xs) solid v(eui-base-color-warning-100);
     }
 
     @if ($state == danger) {
-        border-left: v(eui-border-state-width) solid v(eui-base-color-danger-100);
+        border-left: v(eui-base-spacing-xs) solid v(eui-base-color-danger-100);
     }
 
     @if ($state == accent) {
-        border-left: v(eui-border-state-width) solid v(eui-base-color-accent-100);
+        border-left: v(eui-base-spacing-xs) solid v(eui-base-color-accent-100);
     }
 }

package/src/styles/02-base/mixins/_eui-clearable-input.scss

@@ -1,18 +1,31 @@
+// This mixin sets the layout of the euiClearable directive
 @mixin eui-clearable-input() {
-    align-items: center;
-    background-color: v(eui-base-color-white);
-    color: v(eui-base-color-grey-35);
-    cursor: pointer;
-    display: flex;
-    font-size: v(eui-base-font-size-m);
-    user-select: none;
+    .eui-clearable-wrapper {
+        align-items: center;
+        display: flex;
+        position: relative;
+        width: 100%;
 
-    &:before {
-        position: absolute;
-        right: v(eui-base-spacing-s);
-    }
+        .eui-input-text--clearable-icon {
+            bottom: calc(#{v(eui-base-spacing-s)} - 2px);
+            cursor: pointer;
+            position: absolute;
+            right: v(eui-base-spacing-s);
+            user-select: none;
+            visibility: visible;
+            z-index: v(eui-base-z-index-clearable-icon);
+    
+            &:focus {
+                @include eui-accessible-focus();
+            }
+
+            > svg {
+                fill: v(eui-base-color-grey-35);
 
-    &:hover {
-        color: v(eui-base-color-grey-100);
+                &:hover {
+                    fill: v(eui-base-color-danger-100);
+                }
+            }
+        }
     }
 }

package/src/styles/02-base/mixins/_eui-input.scss

@@ -2,16 +2,17 @@
 // Used for: eui-input-text, eui-input-number, eui-select, eui-textarea, eui-datepicker, eui-autocomplete
 @mixin eui-input() {
     @include eui-font(m, ui);
-    @include eui-accessible-focus-border();
     appearance: none;
     background-color: v(eui-base-color-white);
     border: 1px solid v(eui-base-color-grey-50);
     border-radius: v(eui-base-border-radius);
+    box-shadow: v(eui-app-box-shadow);
     color: v(eui-base-color-grey-100);
     display: block;
     min-height: calc(#{v(eui-base-spacing-2xl)} + #{v(eui-base-spacing-2xs)});  // DS aligned 44px
     padding: calc(#{v(eui-base-spacing-s)} - 1px);  // Trick to have inner paddings without exceeding default min-height
     width: 100%;
+    @include eui-accessible-focus();
 
     &::placeholder {
         color: v(eui-base-color-grey-50) !important;
@@ -51,21 +52,19 @@
         padding-right: v(eui-base-spacing-2xl);
 
         &-icon {
-            visibility: visible;
+            bottom: calc(#{v(eui-base-spacing-s)} - 2px);
+            cursor: pointer;
             position: absolute;
             right: v(eui-base-spacing-s);
-            cursor: pointer;
             user-select: none;
-
-            &:focus {
-                @include eui-accessible-focus-border-rounded();
-            }
+            visibility: visible;
+            @include eui-accessible-focus();
 
             > svg {
                 fill: v(eui-base-color-grey-35);
 
                 &:hover {
-                    fill: v(eui-base-color-grey-100);
+                    fill: v(eui-base-color-danger-100);
                 }
             }
         }

package/src/styles/02-base/mixins/_eui-resizable.scss

@@ -0,0 +1,14 @@
+@mixin eui-resizable( $eui-resizable-bar-right-offset: unset, $eui-resizable-icon-top-offset: v(eui-base-spacing-m) ) {
+    .eui-resizable {
+        .eui-resizable-bar {
+            // For eui-page-column
+            @if ($eui-resizable-bar-right-offset != unset) {
+                right: calc($eui-resizable-bar-right-offset + 2px);
+            }
+        }
+
+        .eui-resizable-icon__container {
+            transform: translateY( calc($eui-resizable-icon-top-offset + 2px) );
+        }
+    }
+}

package/src/styles/02-base/mixins/_eui-scrollbars.scss

@@ -1,4 +1,4 @@
-@mixin eui-scrollbars( $size: 8px, $foreground-color: v(eui-base-color-grey-20), $background-color: v(eui-base-color-grey-10), $border-radius: 5rem, $state: active ) {
+@mixin eui-scrollbars( $size: 8px, $foreground-color: v(eui-base-color-grey-20), $background-color: v(eui-base-color-grey-5), $border-radius: 5rem, $state: active ) {
     &::-webkit-scrollbar {
         display: inherit;
         height: $size;      // horizontal scroll
@@ -19,7 +19,7 @@
             border-radius: $border-radius;
 
             &:hover {
-                background-color: v(eui-base-color-grey-25);
+                background-color: v(eui-base-color-grey-35);
             }
         }
         @else {

package/src/styles/02-base/mixins/_module.scss

@@ -1,4 +1,3 @@
-// @import 'eui-accessibility';     // Moved to eui-styles-base
 @import 'eui-border-radius';
 @import 'eui-flex-container';
 @import 'eui-flex-column-wrapper';
@@ -6,11 +5,7 @@
 @import 'eui-utils';
 @import 'eui-bg-rounded';
 @import 'eui-disabled';
-@import 'eui-clearable-input';
 @import 'eui-border-state';
 @import 'eui-loading-indicator';
 @import 'eui-input';
-
-// v17 removed
-// @import 'ux-form-control-state';
-// @import 'ux-clearable-input';
+@import 'eui-resizable';

package/src/styles/02b-base-vars/_layout.vars.scss

@@ -41,29 +41,6 @@
     --eui-page-column--size-xxl: 300px;
     --eui-page-column--size-xxxl: 350px;
     --eui-page-column-footer-height: 3.5rem;
-
-    // Misc
-    --eui-border-state-width: 6px;
-
-    // Colors
-    // eUI App elements
-    --eui-app-header-bg-color: var(--eui-base-color-white);
-    --eui-app-header-title-color: var(--eui-base-color-grey-100);
-    --eui-app-header-subtitle-color: var(--eui-base-color-grey-75);
-
-    --eui-app-toolbar-color: var(--eui-base-color-white);
-    --eui-app-toolbar-bg-color: var(--eui-base-color-primary-100);
-    --eui-app-toolbar-border-bottom-color: var(--eui-base-color-primary-25);
-
-    --eui-app-sidebar-bg-color: var(--eui-base-color-grey-2);
-    --eui-app-sidebar-border-right-color: #f2f4f9;
-
-    --eui-app-body-bg-color: var(--eui-base-color-grey-2);
-    --eui-app-main-bg-color: var(--eui-base-color-grey-2);
-
-    --eui-app-footer-color: var(--eui-base-color-font);
-    --eui-app-footer-bg-color: var(--eui-base-color-grey-2);
-    --eui-app-footer-border-top-color: #e8ebf1;
 }
 
 .xs, .sm {

package/src/styles/02b-base-vars/_module.scss

@@ -1,2 +1,3 @@
 @import '@eui/styles-base/src/styles/03-vars/module';
 @import 'layout.vars';
+@import 'other.vars';

package/src/styles/02b-base-vars/_other.vars.scss

@@ -0,0 +1,3 @@
+:root {
+    --eui-app-box-shadow: none; // var(--eui-base-shadow-z-depth-0);
+}

package/src/styles/03-assets/_module-icons-flags.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/05-assets/module-icons-flags';

package/src/styles/03-assets/_module-legacy-icons-font.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/05-assets/module-icons-font';

package/src/styles/05-material/_material.scss

@@ -0,0 +1,54 @@
+// Material colors : generated with : http://mcg.mbitson.com
+
+// PRIMARY
+$palette-primary-300: #4d7cb4;
+$palette-primary-500: #004494; // ECL BASE rgb(0, 68, 148)
+$palette-primary-900: #001f65;
+
+// ACCENT
+$palette-accent-A100: #fff;
+$palette-accent-A200: #fffcf4;
+$palette-accent-A400: #ffecc1;
+
+$private-eui-color: #999;
+$private-eui-color-white: #fff;
+
+$mat-eui-primary: (
+    300: $palette-primary-300,
+    500: $palette-primary-500,
+    900: $palette-primary-900,
+    contrast: (
+        300: $private-eui-color,
+        500: $private-eui-color-white,
+        900: $private-eui-color-white,
+    )
+);
+
+$mat-eui-accent: (
+    A100: $palette-accent-A100,
+    A200: $palette-accent-A200,
+    A400: $palette-accent-A400,
+    contrast: (
+        A100: $private-eui-color,
+        A200: $private-eui-color,
+        A400: $private-eui-color,
+    )
+);
+
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+// define palettes
+$eui-t-color-primary: mat.define-palette($mat-eui-primary, 500, 300, 900);     // $palette-name, $default: 500, $lighter: 100, $darker: 700
+$eui-t-color-accent:  mat.define-palette($mat-eui-accent, A200, A100, A400);
+
+// define theme
+$eui-theme: mat.define-light-theme((
+ color: (
+   primary: $eui-t-color-primary,
+   accent: $eui-t-color-accent,
+ )
+));
+
+@include mat.datepicker-theme($eui-theme);

package/src/styles/05-material/_module.scss

@@ -1,26 +1,2 @@
-// @use '@angular/material' as mat;
-
-// @include mat.core();
-
-// // define palettes
-// $eui-t-color-primary: mat.define-palette($mat-eui-primary, 500, 300, 900);     // $palette-name, $default: 500, $lighter: 100, $darker: 700
-// $eui-t-color-accent:  mat.define-palette($mat-eui-accent, A200, A100, A400);
-// $eui-t-color-warn:    mat.define-palette($mat-eui-danger, 500, A700, 900);     // The warn palette is optional (default: $mat-red)
-
-// // define theme
-// $eui-theme: mat.define-light-theme((
-//  color: (
-//    primary: $eui-t-color-primary,
-//    accent: $eui-t-color-accent,
-//    warn: $eui-t-color-warn,
-//  )
-// ));
-
-// // Apply theme
-// @include mat.core-theme($eui-theme);
-// @include mat.datepicker-theme($eui-theme);
-// @include mat.autocomplete-theme($eui-theme);
-
-// TODO v17 - check either alternatives or excludes to specific global css
-@import 'compiled/full';
+@import 'material';
 @import 'overrides/module';

package/src/styles/05-material/overrides/_calendar.scss

@@ -1,5 +1,6 @@
 .mat-calendar {
-    font-size: small;   // chore(eui-date-range-selector): deprecates/removes unused Inputs - BREAKING CHANGE - EUI-6781
+    font-size: small !important;
+    font-family: v(eui-base-font-family) !important;
 
     &.mat-calendar-year {
         .mat-calendar-period-button {

package/src/styles/06-shared/_module.scss

@@ -1,2 +1,5 @@
-// @import 'default';  // v17 removed
-@import 'eui-input-maxlength';  // eUI13+ DS aligned // v16 kept as-is as used into directive
+// Hide browser agent default (black) color
+:focus,
+:focus-visible {
+    outline: none;
+}

package/src/styles/07-elements/_module.scss

@@ -1,2 +1,3 @@
 @import '@eui/styles-base/src/styles/04-elements/module';
-@import 'eui-table-default/eui-table-default';
+@import './eui-table-default/eui-table-default';
+@import './directives/module';

package/src/styles/07-elements/directives/_eui-clearable-input.scss

@@ -0,0 +1,26 @@
+// Sets the layout of the euiClearable directive
+.eui-clearable-wrapper {
+    align-items: center;
+    display: flex;
+    position: relative;
+    width: 100%;
+
+    .eui-input-text--clearable-icon {
+        bottom: calc(#{v(eui-base-spacing-s)} - 2px);
+        cursor: pointer;
+        position: absolute;
+        right: v(eui-base-spacing-s);
+        user-select: none;
+        visibility: visible;
+        z-index: v(eui-base-z-index-clearable-icon);
+        @include eui-accessible-focus();
+
+        > svg {
+            fill: v(eui-base-color-grey-35);
+
+            &:hover {
+                fill: v(eui-base-color-danger-100);
+            }
+        }
+    }
+}

package/src/styles/{06-shared → 07-elements/directives}/_eui-input-maxlength.scss

@@ -1,5 +1,3 @@
-// TODO v17 - extract directive bound styling to global particular structure here to be recongnizable and kept
-
 .eui-input-maxlength-wrapper {
     position: relative;
     width: 100%;

package/src/styles/07-elements/directives/_module.scss

@@ -0,0 +1,2 @@
+@import 'eui-clearable-input';
+@import 'eui-input-maxlength';

package/src/styles/07-elements/eui-table-default/_eui-table-default.scss

@@ -1,4 +1,3 @@
-// stylelint-disable no-descending-specificity
 table.eui-table-default {
     background-color: transparent;
     border-collapse: collapse;
@@ -31,7 +30,7 @@ table.eui-table-default {
         }
 
         tr {
-            background: v(eui-base-color-grey-5);
+            background: v(eui-base-color-grey-10);
             border-top: 0;
         }
     }
@@ -125,74 +124,3 @@ table.eui-table-default {
         }
     }
 }
-
-// // RESPONSIVE LAYOUT (PROTO)
-// @include media($eui-bkp-mobile) {
-//     table.ux-table {
-//         display: block;
-
-//         &.ux-table--responsive {
-//             display: contents;
-
-//             &.ux-table--bordered {
-//                 tr {
-//                     border: 1px solid v(eui-base-color-grey-light);
-//                 }
-//             }
-
-//             &.ux-table--compact {
-//                 td {
-//                     padding-bottom: v(eui-base-spacing-3xs);
-//                     padding-top: v(eui-base-spacing-2xs);
-
-//                     &::before {
-//                         top: v(eui-base-spacing-2xs);
-//                     }
-//                 }
-//             }
-
-//             // Force table to be like cards
-//             thead,
-//             tbody,
-//             th,
-//             td,
-//             tr {
-//                 display: block;
-//             }
-
-//             // Hide table headers but not display: none for accessibility
-//             thead tr {
-//                 left: -9999px;
-//                 position: absolute;
-//                 top: -9999px;
-//             }
-
-//             tr {
-//                 height: auto;
-//             }
-
-//             th,
-//             td {
-//                 // Behave like a "row"
-//                 border: none;
-//                 border-bottom: 1px solid v(eui-base-color-grey-lightest);
-//                 padding: v(eui-base-spacing-xs);
-//                 padding-left: 50%;
-//                 position: relative;
-//             }
-
-//             td::before {
-//                 color: v(eui-base-color-grey-dark);
-//                 content: attr(data-col);    // Like a table header column
-//                 font-weight: bold;
-//                 left: v(eui-base-spacing-xs);
-//                 padding-right: v(eui-base-spacing-xs);
-//                 position: absolute;
-//                 // Mimic top & left paddings
-//                 top: v(eui-base-spacing-xs);
-//                 white-space: nowrap;
-//                 width: 45%;
-//             }
-//         }
-//     }
-// }

package/src/styles/08-themes/_module-compact.scss

@@ -1,5 +1,12 @@
 // TODO v17 find a better way to handle themes
 
+@mixin eui-compact-get-tokens($ratio: 0.875) {
+    --eui-compact-ratio: #{$ratio};
+    @each $spacing, $value in $eui-base-tokens-spacings {
+        --eui-base-spacing-#{$spacing}: calc( #{var(--eui-compact-ratio)} * #{$value} );
+    }
+}
+
 // GLOBAL COMPACT THEME
 ///////////////////////
 html.eui-t-compact {

package/src/styles/08-themes/_module-dark.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/03-vars/colors-dark.vars';