@eui/styles 15.0.0-rc.2 → 15.0.0-rc.4

package/src/styles/05-material/compiled/_sources.scss

@@ -0,0 +1,382 @@
+// TODO REMAP WITH tokens colors
+
+// 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;
+
+// INFO
+$palette-info-50: #e0eef6;
+$palette-info-100: #b3d4e9;
+$palette-info-200: #80b7da;
+$palette-info-300: #4d9acb;
+$palette-info-400: #2685bf;
+$palette-info-500: #006fb4; // ECL BASE rgb(0, 111, 180)
+$palette-info-600: #0067ad;
+$palette-info-700: #005ca4;
+$palette-info-800: #00529c;
+$palette-info-900: #00408c;
+$palette-info-A100: #b8d3ff;
+$palette-info-A200: #85b3ff;
+$palette-info-A400: #5294ff;
+$palette-info-A700: #3984ff;
+
+// SUCCESS
+$palette-success-50: #e9efe7;
+$palette-success-100: #c8d7c4;
+$palette-success-200: #a3bd9c;
+$palette-success-300: #7ea274;
+$palette-success-400: #628e57;
+$palette-success-500: #467a39; // ECL BASE rgb(70, 122, 57)
+$palette-success-600: #3f7233;
+$palette-success-700: #37672c;
+$palette-success-800: #2f5d24;
+$palette-success-900: #204a17;
+$palette-success-A100: #9aff88;
+$palette-success-A200: #6fff55;
+$palette-success-A400: #44ff22;
+$palette-success-A700: #2eff08;
+
+// 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;
+
+// WARNING
+$palette-warning-50: #fdf2e5;
+$palette-warning-100: #fbdfbe;
+$palette-warning-200: #f9ca93;
+$palette-warning-300: #f6b568;
+$palette-warning-400: #f4a547;
+$palette-warning-500: #f29527; // ECL BASE rgb(242, 149, 39)
+$palette-warning-600: #f08d23;
+$palette-warning-700: #ee821d;
+$palette-warning-800: #ec7817;
+$palette-warning-900: #e8670e;
+$palette-warning-A100: #fff;
+$palette-warning-A200: #ffece0;
+$palette-warning-A400: #ffcbad;
+$palette-warning-A700: #ffbb94;
+
+// DANGER (MAT WARN)
+$palette-danger-50: #fbe4e6;
+$palette-danger-100: #f4bcc1;
+$palette-danger-200: #ed9098;
+$palette-danger-300: #e5646e;
+$palette-danger-400: #e0424f;
+$palette-danger-500: #da2131; // ECL BASE rgb(218, 33, 49)
+$palette-danger-600: #d61d2b;
+$palette-danger-700: #d01824;
+$palette-danger-800: #cb141e;
+$palette-danger-900: #c20b13;
+$palette-danger-A100: #fee;
+$palette-danger-A200: #ffbbbd;
+$palette-danger-A400: #ff888b;
+$palette-danger-A700: #ff6e72;
+
+// SECONDARY (GREY)
+//                                          current     previous
+$palette-grey-50: rgb(250, 250, 250);   // #fafafa
+$palette-grey-100: rgb(246, 247, 250);  // #f6f7fa    #f5f5f5
+$palette-grey-200: rgb(238, 238, 238);  // #eeeeee
+$palette-grey-300: rgb(210, 210, 210);  // #d2d2d2    #e0e0e0
+$palette-grey-400: rgb(189, 189, 189);  // #bdbdbd
+$palette-grey-500: rgb(158, 158, 158);  // #9e9e9e
+$palette-grey-base: rgb(158, 158, 158);
+$palette-grey-600: rgb(117, 117, 117);  // #757575
+$palette-grey-700: rgb(97, 97, 97);     // #616161
+$palette-grey-800: rgb(66, 66, 66);     // #424242
+$palette-grey-900: rgb(33, 33, 33);     // #212121
+$palette-grey-1000: rgb(0, 0, 0);
+$palette-grey-A100: rgb(255, 255, 255);
+$palette-grey-A200: rgb(238, 238, 238);
+$palette-grey-A400: rgb(189, 189, 189);
+$palette-grey-A700: rgb(97, 97, 97);
+
+
+$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-secondary: (
+    50: $palette-grey-50,
+    100: $palette-grey-100,
+    200: $palette-grey-200,
+    300: $palette-grey-300,
+    400: $palette-grey-400,
+    500: $palette-grey-500,
+    600: $palette-grey-600,
+    700: $palette-grey-700,
+    800: $palette-grey-800,
+    900: $palette-grey-900,
+    A100: $palette-grey-A100,
+    A200: $palette-grey-A200,
+    A400: $palette-grey-A400,
+    A700: $palette-grey-A700,
+    contrast: (
+        50: $private-eui-color,
+        100: $private-eui-color,
+        200: $private-eui-color,
+        300: $private-eui-color,
+        400: $private-eui-color-white,
+        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-white,
+    )
+);
+
+$mat-eui-info: (
+    50: $palette-info-50,
+    100: $palette-info-100,
+    200: $palette-info-200,
+    300: $palette-info-300,
+    400: $palette-info-400,
+    500: $palette-info-500,
+    600: $palette-info-600,
+    700: $palette-info-700,
+    800: $palette-info-800,
+    900: $palette-info-900,
+    A100: $palette-info-A100,
+    A200: $palette-info-A200,
+    A400: $palette-info-A400,
+    A700: $palette-info-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-white,
+    )
+);
+
+$mat-eui-success: (
+    50: $palette-success-50,
+    100: $palette-success-100,
+    200: $palette-success-200,
+    300: $palette-success-300,
+    400: $palette-success-400,
+    500: $palette-success-500,
+    600: $palette-success-600,
+    700: $palette-success-700,
+    800: $palette-success-800,
+    900: $palette-success-900,
+    A100: $palette-success-A100,
+    A200: $palette-success-A200,
+    A400: $palette-success-A400,
+    A700: $palette-success-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-warning: (
+    50: $palette-warning-50,
+    100: $palette-warning-100,
+    200: $palette-warning-200,
+    300: $palette-warning-300,
+    400: $palette-warning-400,
+    500: $palette-warning-500,
+    600: $palette-warning-600,
+    700: $palette-warning-700,
+    800: $palette-warning-800,
+    900: $palette-warning-900,
+    A100: $palette-warning-A100,
+    A200: $palette-warning-A200,
+    A400: $palette-warning-A400,
+    A700: $palette-warning-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-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,
+ )
+));
+
+// Apply theme
+@include mat.core-theme($eui-theme);
+@include mat.datepicker-theme($eui-theme);
+@include mat.autocomplete-theme($eui-theme);
+
+// overrides over material for some edge cases
+// @import 'overrides';

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

@@ -0,0 +1,11 @@
+table {
+    border: 0 transparent;
+}
+
+:focus {
+    outline: 0;
+}
+
+:focus-visible {
+    outline: 0;
+}

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

@@ -3,6 +3,7 @@
 // @import 'eui-inline-edit';      // eUI13+
 // @import 'inputs-ngvalidation';  // KEEP for legacy
 
+@import 'default';
 @import 'flex';
 @import 'typography';
 @import 'eui-input-maxlength';  // eUI13+ DS aligned

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

@@ -1,7 +1,6 @@
+// TODO v15, spillover over ECL
 @import 'legacy/form';
 @import 'legacy/form-compact';
-@import 'legacy/input-checkbox-default';
-@import 'legacy/input-radio-default';
 @import 'legacy/ux-input-placeholder';
 @import 'legacy/ux-input-maxlength';
 @import 'legacy/ux-form-group';

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

@@ -25,7 +25,8 @@
 
 // COMPONENTS
 @import '07-elements/module';
-// // COMPONENTS
+
+// COMPONENTS
 @import '07-elements/module-legacy';
 
 // THEMES

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

@@ -27,7 +27,8 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // COMPONENTS
 @import '07-elements/module';
-// // COMPONENTS
+
+// COMPONENTS
 @import '07-elements/module-legacy';
 
 // THEMES

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

@@ -1,2 +0,0 @@
-@import 'themes/default/module';
-@import 'components/module';

package/src/styles/05-material/_old-v14-material/components/_button.scss

@@ -1,133 +0,0 @@
-.mat-menu-content:not(:empty) {
-    padding-bottom: 0 !important;
-    padding-top: 0 !important;
-}
-
-button.mat-button,
-button.mat-raised-button,
-button.mat-icon-button,
-button.mat-menu-item {
-    box-shadow: none;
-
-    &:focus {
-        outline: 0;
-    }
-}
-
-.eui-mat-dropdown-button {
-    &.btn {
-        &-sm {
-            font-size: 0.875rem;
-            line-height: 1.5;
-            padding: 0.25rem 0.5rem;
-        }
-
-        &-lg {
-            font-size: 1.25rem;
-            line-height: 1.5;
-            padding: 0.5rem 1rem;
-        }
-
-        &-outline {
-            &-primary {
-                border: 1px solid v(eui-base-color-primary-100);
-                color: v(eui-base-color-primary-100);
-
-                &:hover, &:focus {
-                    border: 1px solid v(eui-base-color-primary-100);
-                    background-color: v(eui-base-color-primary-75);
-                    color: v(eui-base-color-white) !important;
-                }
-            }
-
-            &-info {
-                border: 1px solid v(eui-base-color-info-100);
-                color: v(eui-base-color-info-100);
-
-                &:hover, &:focus {
-                    border: 1px solid v(eui-base-color-info-100);
-                    background-color: v(eui-base-color-info-75);
-                    color: v(eui-base-color-white) !important;
-                }
-            }
-
-            &-success {
-                border: 1px solid v(eui-base-color-success-100);
-                color: v(eui-base-color-success-100);
-
-                &:hover, &:focus {
-                    border: 1px solid v(eui-base-color-success-100);
-                    background-color: v(eui-base-color-success-75);
-                    color: v(eui-base-color-white) !important;
-                }
-            }
-
-            &-warning {
-                border: 1px solid v(eui-base-color-warning-100);
-                color: v(eui-base-color-warning-100);
-
-                &:hover, &:focus {
-                    border: 1px solid v(eui-base-color-warning-100);
-                    background-color: v(eui-base-color-warning-75);
-                    color: v(eui-base-color-white) !important;
-                }
-            }
-
-            &-danger {
-                border: 1px solid v(eui-base-color-danger-100);
-                color: v(eui-base-color-danger-100);
-
-                &:hover, &:focus {
-                    border: 1px solid v(eui-base-color-danger-100);
-                    background-color: v(eui-base-color-danger-75);
-                    color: v(eui-base-color-white) !important;
-                }
-            }
-        }
-
-        &-primary {
-            background-color: v(eui-base-color-primary-100);
-            color: v(eui-base-color-white) !important;
-
-            &:hover {
-                background-color: v(eui-base-color-primary-75);
-            }
-        }
-
-        &-info {
-            background-color: v(eui-base-color-info-100);
-            color: v(eui-base-color-white) !important;
-
-            &:hover {
-                background-color: v(eui-base-color-info-75);
-            }
-        }
-
-        &-success {
-            background-color: v(eui-base-color-success-100);
-            color: v(eui-base-color-white) !important;
-
-            &:hover {
-                background-color: v(eui-base-color-success-75);
-            }
-        }
-
-        &-warning {
-            background-color: v(eui-base-color-warning-100);
-            color: v(eui-base-color-white) !important;
-
-            &:hover {
-                background-color: v(eui-base-color-warning-75);
-            }
-        }
-
-        &-danger {
-            background-color: v(eui-base-color-danger-100);
-            color: v(eui-base-color-white) !important;
-
-            &:hover {
-                background-color: v(eui-base-color-danger-75);
-            }
-        }
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_calendar.scss

@@ -1,7 +0,0 @@
-.mat-calendar {
-    &.mat-calendar-year {
-        .mat-calendar-period-button {
-            display: none;
-        }
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_cdk-drag.scss

@@ -1,54 +0,0 @@
-// MATERIAL Drag & Drop
-.cdk-drag-handle {
-    cursor: move !important;
-}
-
-.cdk-drop-list {
-    display: flex;
-    min-height: v(eui-base-spacing-xl);
-    // outline: 2px dashed red;
-    min-width: 100%;
-}
-
-// .cdk-drop-list-receiving {
-//     min-height: v(eui-base-spacing-xl);
-//     outline: 2px dashed red;
-//     width: 100%;
-// }
-
-// Animate items as they're being sorted
-.cdk-drop-list-dragging .cdk-drag {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-// Animate an item that has been dropped
-.cdk-drag-animating {
-    transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-// Grabbed element
-.cdk-drag-preview {
-    // outline: 2px dashed lime !important;
-    background-color: transparent;  // v(eui-base-color-white);
-    box-shadow: none;
-    cursor: grab !important;
-    display: table;     // trick to get the full row width
-    margin: 0 !important;
-    opacity: 1;
-    position: relative;
-}
-
-.cdk-drag-dragging {
-    // outline: 2px dashed red !important;
-    opacity: 1;
-}
-
-.cdk-drag-placeholder {
-    background-color: transparent;
-    opacity: 0.35;
-
-    &:hover {
-        outline: 2px dashed v(eui-base-color-grey-35);
-        outline-offset: 2px;
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_cdk-global-scrollblock.scss

@@ -1,16 +0,0 @@
-// Disable global scrollbars (used in full screen eui-dialog for example)
-.cdk-global-scrollblock {
-    position: fixed;
-    overflow-y: scroll;     // Material default
-    width: 100%;
-    @include eui-scrollbars;
-}
-@include media($eui-bkp-mobile) {
-    .cdk-global-scrollblock {
-        height: 100%;
-        overflow: auto;
-        position: fixed;
-        width: 100%;
-        @include eui-scrollbars;
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_cdk-overlay-container.scss

@@ -1,13 +0,0 @@
-.cdk-overlay-container {
-    z-index: v(eui-base-z-index-cdk-overlay-container);   // MD: 1000
-
-    .mat-menu-panel {
-        max-width: inherit;
-        min-height: v(eui-base-spacing-l);
-        @include eui-scrollbars;
-    }
-
-    .mat-autocomplete-panel {
-        @include eui-scrollbars;
-    }
-}

package/src/styles/05-material/_old-v14-material/components/_cdk-overlay-pane.scss

@@ -1,4 +0,0 @@
-.cdk-overlay-pane {
-    // Dynamically changes based on CDK context
-    z-index: v(eui-base-z-index-cdk-overlay-pane);
-}