@eui/styles 17.0.0-next.6 → 17.0.0-next.8

package/package.json

@@ -14,6 +14,6 @@
         "npm": "Please use yarn instead of NPM to install dependencies"
     },
     "license": "EUPL-1.1",
-    "version": "17.0.0-next.6",
+    "version": "17.0.0-next.8",
     "tag": "next"
 }

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

@@ -12,7 +12,6 @@
     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();
-    @include eui-clearable-input();
 
     &::placeholder {
         color: v(eui-base-color-grey-50) !important;

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/03-assets/_module.scss

@@ -1,2 +1 @@
 @import '@eui/styles-base/src/styles/05-assets/module-icons-svg';
-@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/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-showcase-all.scss

@@ -11,14 +11,11 @@ $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';
 
 // 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 +26,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 +39,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';