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

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-outline();
+            }
+
+            > 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,7 +2,6 @@
 // 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);
@@ -12,6 +11,7 @@
     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-border();
 
     &::placeholder {
         color: v(eui-base-color-grey-50) !important;
@@ -51,21 +51,22 @@
         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;
+            visibility: visible;
 
             &:focus {
-                @include eui-accessible-focus-border-rounded();
+                @include eui-accessible-focus-outline();
             }
 
             > 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

@@ -10,6 +10,7 @@
 @import 'eui-border-state';
 @import 'eui-loading-indicator';
 @import 'eui-input';
+@import 'eui-resizable';
 
 // v17 removed
 // @import 'ux-form-control-state';

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/{_module-cdk.scss → _material-cdk.scss}

@@ -106,5 +106,3 @@
     width: 100%;
     overflow-y: scroll;
 }
-
-@import './overrides/module';

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

@@ -0,0 +1,156 @@
+// Material colors : generated with : http://mcg.mbitson.com
+
+// PRIMARY
+$palette-primary-50: #e0e9f2;
+$palette-primary-100: #b3c7df;
+$palette-primary-200: #80a2ca;
+$palette-primary-300: #4d7cb4;
+$palette-primary-400: #2660a4;
+$palette-primary-500: #004494; // ECL BASE rgb(0, 68, 148)
+$palette-primary-600: #003e8c;
+$palette-primary-700: #003581;
+$palette-primary-800: #002d77;
+$palette-primary-900: #001f65;
+$palette-primary-A100: #95abff;
+$palette-primary-A200: #6283ff;
+$palette-primary-A400: #2f5bff;
+$palette-primary-A700: #1547ff;
+
+// ACCENT
+$palette-accent-50: #fffae3;
+$palette-accent-100: #fff3b9;
+$palette-accent-200: #ffeb8b;
+$palette-accent-300: #ffe25d;
+$palette-accent-400: #ffdc3a;
+$palette-accent-500: #ffd617; // ECL BASE rgb(255, 214, 23)
+$palette-accent-600: #ffd114;
+$palette-accent-700: #fc1;
+$palette-accent-800: #ffc60d;
+$palette-accent-900: #ffbc07;
+$palette-accent-A100: #fff;
+$palette-accent-A200: #fffcf4;
+$palette-accent-A400: #ffecc1;
+$palette-accent-A700: #ffe5a7;
+
+$private-eui-color: #999;
+$private-eui-color-white: #fff;
+
+$mat-eui-primary: (
+    50: $palette-primary-50,
+    100: $palette-primary-100,
+    200: $palette-primary-200,
+    300: $palette-primary-300,
+    400: $palette-primary-400,
+    500: $palette-primary-500,
+    600: $palette-primary-600,
+    700: $palette-primary-700,
+    800: $palette-primary-800,
+    900: $palette-primary-900,
+    A100: $palette-primary-A100,
+    A200: $palette-primary-A200,
+    A400: $palette-primary-A400,
+    A700: $palette-primary-A700,
+    contrast: (
+        50: $private-eui-color,
+        100: $private-eui-color,
+        200: $private-eui-color,
+        300: $private-eui-color,
+        400: $private-eui-color,
+        500: $private-eui-color-white,
+        600: $private-eui-color-white,
+        700: $private-eui-color-white,
+        800: $private-eui-color-white,
+        900: $private-eui-color-white,
+        A100: $private-eui-color,
+        A200: $private-eui-color-white,
+        A400: $private-eui-color-white,
+        A700: $private-eui-color-white,
+    )
+);
+
+$mat-eui-danger: (
+    50: $palette-danger-50,
+    100: $palette-danger-100,
+    200: $palette-danger-200,
+    300: $palette-danger-300,
+    400: $palette-danger-400,
+    500: $palette-danger-500,
+    600: $palette-danger-600,
+    700: $palette-danger-700,
+    800: $palette-danger-800,
+    900: $palette-danger-900,
+    A100: $palette-danger-A100,
+    A200: $palette-danger-A200,
+    A400: $palette-danger-A400,
+    A700: $palette-danger-A700,
+    contrast: (
+        50: $private-eui-color,
+        100: $private-eui-color,
+        200: $private-eui-color,
+        300: $private-eui-color,
+        400: $private-eui-color,
+        500: $private-eui-color-white,
+        600: $private-eui-color-white,
+        700: $private-eui-color-white,
+        800: $private-eui-color-white,
+        900: $private-eui-color-white,
+        A100: $private-eui-color,
+        A200: $private-eui-color,
+        A400: $private-eui-color,
+        A700: $private-eui-color,
+    )
+);
+
+$mat-eui-accent: (
+    50: $palette-accent-50,
+    100: $palette-accent-100,
+    200: $palette-accent-200,
+    300: $palette-accent-300,
+    400: $palette-accent-400,
+    500: $palette-accent-500,
+    600: $palette-accent-600,
+    700: $palette-accent-700,
+    800: $palette-accent-800,
+    900: $palette-accent-900,
+    A100: $palette-accent-A100,
+    A200: $palette-accent-A200,
+    A400: $palette-accent-A400,
+    A700: $palette-accent-A700,
+    contrast: (
+        50: $private-eui-color,
+        100: $private-eui-color,
+        200: $private-eui-color,
+        300: $private-eui-color,
+        400: $private-eui-color,
+        500: $private-eui-color,
+        600: $private-eui-color,
+        700: $private-eui-color,
+        800: $private-eui-color,
+        900: $private-eui-color,
+        A100: $private-eui-color,
+        A200: $private-eui-color,
+        A400: $private-eui-color,
+        A700: $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);
+$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,
+ )
+));
+
+@include mat.datepicker-theme($eui-theme);
+@include mat.autocomplete-theme($eui-theme);

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

@@ -0,0 +1,2 @@
+@import 'material-cdk';
+@import 'overrides/module';

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/07-elements/eui-table-default/_eui-table-default.scss

@@ -31,7 +31,7 @@ table.eui-table-default {
         }
 
         tr {
-            background: v(eui-base-color-grey-5);
+            background: v(eui-base-color-grey-10);
             border-top: 0;
         }
     }

package/src/styles/99-utilities/_module.scss

@@ -1 +1 @@
-@import '@eui/styles-base/src/styles/99-utilities/module-all';
+@import '@eui/styles-base/src/styles/99-utilities/module';

package/src/styles/999-showcase/_component-demo-exports.scss

@@ -12,7 +12,11 @@
         flex: 1 1 50%;
         width: 50%;
     }
+}
 
+.eui-showcase-demo,
+.eui-showcase-demo-flex,
+.eui-showcase-demo-flex-column {
     .flex-spacer {
         flex: 1 1 auto;
         margin: 0 2rem;
@@ -22,20 +26,24 @@
         background-color: ghostwhite;
         border: 2px dotted silver;
         display: block;
+        height: 100vh;
         max-height: 20rem;
         overflow-y: auto;
         padding: 0.5rem;
         position: relative;
+        width: 100%;
         @include eui-scrollbars(6px);
 
         pre {
-            color: #666;
+            color: #cc367b;
             display: block;
             font-family: monospace;
-            font-size: 80%;
+            font-size: 95%;
             line-height: 1.25;
             margin-bottom: 0;
             overflow: initial;
+            white-space: pre;
+            word-wrap: break-word;
 
             > * {
                 align-items: center;

package/src/styles/999-showcase/_module.scss

@@ -1,4 +1,4 @@
-@import '@eui/styles-base/src/styles/eui-base-showcase-exports';
+@import '@eui/styles-base/src/styles/999-showcase-exports/module';
 
 @import 'prism-theme';
 @import 'component-demo-exports';

package/src/styles/eui-icons-flags.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// LEGACY ICONS FONT
+@import '03-assets/module-icons-flags';

package/src/styles/eui-legacy-icons-font.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// LEGACY ICONS FONT
+@import '03-assets/module-legacy-icons-font';

package/src/styles/eui-print.scss

@@ -1,3 +1,5 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
 // BASE
 @import '_base';
 

package/src/styles/eui-showcase-all.scss

@@ -11,14 +11,12 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // ASSETS
 @import '03-assets/module';
-// ICON FONT legacy export
-// @import '03-assets/module-legacy-icons-font'; // v17 removed
+@import '03-assets/module-legacy-icons-font';
+@import '03-assets/module-icons-flags';
 
 // BOOTSTRAP ONLY
 @import '04-vendors/module-bootstrap-grid';
 @import '04-vendors/module-bootstrap-utilities';
-// // VENDORS and overrides
-// @import '04-vendors/module-legacy'; // v17 removed
 
 // MATERIAL
 @import '05-material/module';
@@ -29,9 +27,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // COMPONENTS
 @import '07-elements/module';
 
-// COMPONENTS
-// @import '07-elements/module-legacy';  // v17 removed
-
 // THEMES
 @import '08-themes/module-compact';
 
@@ -45,8 +40,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // UTILITIES
 @import '99-utilities/module';
-// // UTILITIES
-// @import '99-utilities/module-legacy'; // v17 removed
 
 // showcase only styling
 @import '999-showcase/module';

package/src/styles/eui.scss

@@ -18,9 +18,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // MATERIAL - 22kb
 @import '05-material/module';
 
-// MATERIAL-CDK only - 5kb
-// @import '05-material/module-cdk';
-
 // SHARED and overrides - 1kb
 @import '06-shared/module';