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

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/05-material/{_old-v14-material/components → overrides}/_calendar.scss

@@ -1,4 +1,6 @@
 .mat-calendar {
+    font-size: small;   // chore(eui-date-range-selector): deprecates/removes unused Inputs - BREAKING CHANGE - EUI-6781
+
     &.mat-calendar-year {
         .mat-calendar-period-button {
             display: none;

package/src/styles/05-material/{_old-v14-material/components → overrides}/_cdk-drag.scss

@@ -1,20 +1,16 @@
-// MATERIAL Drag & Drop
+// MATERIAL Drag & Drop overrides
 .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%;
-// }
+    &:not(.cdk-drop-list-disabled) {
+        min-height: v(eui-base-spacing-xl);
+    }
+}
 
 // Animate items as they're being sorted
 .cdk-drop-list-dragging .cdk-drag {
@@ -28,7 +24,6 @@
 
 // Grabbed element
 .cdk-drag-preview {
-    // outline: 2px dashed lime !important;
     background-color: transparent;  // v(eui-base-color-white);
     box-shadow: none;
     cursor: grab !important;
@@ -39,7 +34,6 @@
 }
 
 .cdk-drag-dragging {
-    // outline: 2px dashed red !important;
     opacity: 1;
 }
 

package/src/styles/05-material/overrides/{_cdk.scss → _cdk-global-scrollblock.scss}

@@ -1,11 +1,7 @@
-.cdk-overlay-pane {
-    background-color: white;
-}
-
 // Disable global scrollbars (used in full screen eui-dialog for example)
 .cdk-global-scrollblock {
     position: fixed;
-    overflow-y: visible;
+    overflow-y: visible;     // Material default: scroll
     width: 100%;
     @include eui-scrollbars;
     top: 0 !important;

package/src/styles/05-material/overrides/_cdk-overlay-pane.scss

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

package/src/styles/05-material/{_old-v14-material/components → overrides}/_module.scss

@@ -1,11 +1,5 @@
-@import 'button';
 @import 'calendar';
 @import 'cdk-drag';
 @import 'cdk-global-scrollblock';
 @import 'cdk-overlay-container';
 @import 'cdk-overlay-pane';
-@import 'checkbox';
-@import 'input';
-@import 'option';
-@import 'radio';
-@import 'tooltip';

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/06-shared/_typography.scss

@@ -18,8 +18,6 @@ h6,
 .h9 {
     @include eui-font-family();
     color: inherit;
-    // font-family: v(eui-base-font-family);
-    // font-weight: normal;
 }
 
 h1,
@@ -106,7 +104,3 @@ abbr[title] {
 .label, abbr, blockquote, del, label, mark, p {
     font-size: v(eui-base-font-size);
 }
-
-label {
-    margin-bottom: v(eui-base-spacing-xs);
-}

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/02-base/mixins/_eui-svg-icons-content.scss

@@ -1,18 +0,0 @@
-@mixin euiSvgCheckmarkWhite() {
-    height: 1rem;
-    width: 1rem;
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
-}
-
-@mixin euiSvgChevronForward() {
-    height: 1rem;
-    width: 1rem;
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
-}
-
-@mixin euiSvgChevronDown() {
-    height: 1rem;
-    width: 1rem;
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
-}
-

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);
-            }
-        }
-    }
-}