@eui/styles 17.0.0-next.9 → 17.0.0-rc.2

package/package.json

@@ -9,11 +9,11 @@
     "description": "eUI core styling",
     "author": "ec.europa.eui@gmail.com",
     "engines": {
-        "node": "^18.13.0 || >=20.0.0",
+        "node": "^18.13.0 || >=20.9.0",
         "yarn": ">=1.22.4 <2",
         "npm": "Please use yarn instead of NPM to install dependencies"
     },
     "license": "EUPL-1.1",
-    "version": "17.0.0-next.9",
+    "version": "17.0.0-rc.2",
     "tag": "next"
 }

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

@@ -16,7 +16,7 @@
             z-index: v(eui-base-z-index-clearable-icon);
     
             &:focus {
-                @include eui-accessible-focus-outline();
+                @include eui-accessible-focus();
             }
 
             > svg {

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

@@ -1,7 +1,6 @@
 @mixin eui-disabled($opacity: v(eui-base-disabled-opacity)) {
     background-image: none;
-    // border-color: inherit;
     box-shadow: none;
-    cursor: not-allowed;
+    cursor: not-allowed !important;
     opacity: $opacity;
 }

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

@@ -1,17 +1,18 @@
 // eUI Inputs Layout & states commons
 // 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-font-family();
     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-border();
+    @include eui-accessible-focus();
 
     &::placeholder {
         color: v(eui-base-color-grey-50) !important;
@@ -57,10 +58,7 @@
             right: v(eui-base-spacing-s);
             user-select: none;
             visibility: visible;
-
-            &:focus {
-                @include eui-accessible-focus-outline();
-            }
+            @include eui-accessible-focus();
 
             > svg {
                 fill: v(eui-base-color-grey-35);

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

@@ -3,7 +3,6 @@
         display: inherit;
         height: $size;      // horizontal scroll
         width: $size;       // vertical scroll
-        // z-index: v(eui-base-z-index-highlighted);        // should be when in edition mode
         @if ($state == active) {
             background-color: $background-color;
         }
@@ -19,7 +18,7 @@
             border-radius: $border-radius;
 
             &:hover {
-                background-color: v(eui-base-color-grey-35);
+                background-color: v(eui-base-color-grey-50);
             }
         }
         @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,12 +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';
 @import 'eui-resizable';
-
-// v17 removed
-// @import 'ux-form-control-state';
-// @import 'ux-clearable-input';

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/05-material/_material.scss

@@ -1,136 +1,37 @@
 // 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,
     )
 );
 
@@ -141,16 +42,13 @@ $mat-eui-accent: (
 // 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/overrides/_cdk-virtual-scrollable.scss

@@ -0,0 +1,3 @@
+.cdk-virtual-scrollable {
+    @include eui-scrollbars();
+}

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

@@ -4,3 +4,4 @@
 @import 'cdk-overlay-container';
 @import 'cdk-overlay-container.mq';
 @import 'cdk-overlay-pane';
+@import 'cdk-virtual-scrollable';

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,11 +1,9 @@
-// TODO v17 - extract directive bound styling to global particular structure here to be recongnizable and kept
-
 .eui-input-maxlength-wrapper {
     position: relative;
     width: 100%;
 
     .eui-input-maxlength {
-        @include eui-font(xs, ui);
+        @include eui-font-family-xs();
         background-color: v(eui-base-color-grey-10);
         border: 1px solid v(eui-base-color-grey-50);
         border-radius: v(eui-base-border-radius);

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;
@@ -23,7 +22,7 @@ table.eui-table-default {
     thead {
         th {
             border-bottom: 1px solid v(eui-base-color-grey-10);
-            color: v(eui-base-color-grey-75);
+            color: v(eui-base-color-grey-100);
             font-size: v(eui-base-font-size);
             padding: v(eui-base-spacing-m) v(eui-base-spacing-s);
             vertical-align: middle;
@@ -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,14 +1,19 @@
 // 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 {
     // Exposed CSS variables
     --eui-base-font-size: 14px;                         // Font size base for compact theme
-    --eui-base-line-height: 1.25;                       // Unitless number value is multiplied by the element's font size
     // Setup
     font-size: var(--eui-base-font-size);               // Applies the defined custom font size
-    line-height: var(--eui-base-line-height);           // Applies the defined custom line height ratio
 }
 
 // FORM ELEMENTS
@@ -16,7 +21,6 @@ html.eui-t-compact {
 form.eui-t-form-compact {
     // Exposed CSS variables
     --eui-base-font-size: 14px;                         // Font size base for compact theme
-    --eui-base-line-height: 1.25;                       // Unitless number value is multiplied by the element's font size
     --eui-input-group-spacing: var(--eui-base-spacing-s);   // Spacing between form groups elements
     // Internals
     // See: eui-styles-base\src\styles\02-base\mixins\theming\_compact-vars.scss
@@ -24,7 +28,6 @@ form.eui-t-form-compact {
     // Setup
     --eui-compact-ratio: 0.82;                          // Sets form inputs/elements to 39px height (default: 44px)
     font-size: var(--eui-base-font-size);               // Applies the defined custom font size
-    line-height: var(--eui-base-line-height);           // Applies the defined custom line height ratio
 
     // Internals
     .eui-input-group {
@@ -51,7 +54,6 @@ form.eui-t-form-compact {
 .eui-table.eui-t-table-compact {
     // Exposed CSS variables
     --eui-base-font-size: 14px;                              // Font size base for compact theme
-    --eui-base-line-height: 1.25;                       // Unitless number value is multiplied by the element's font size
     --eui-table-header-padding: var(--eui-base-spacing-s);   // Table header spacer set to 0.75rem
     --eui-table-row-padding: var(--eui-base-spacing-2xs);    // Table body row spacer set to 0.25rem
     --eui-table-footer-padding: var(--eui-base-spacing-s);   // Table footer spacer set to 0.75rem
@@ -59,7 +61,6 @@ form.eui-t-form-compact {
     @include eui-compact-get-tokens();
     // Setup
     font-size: var(--eui-base-font-size);                    // Applies the defined custom font size
-    line-height: var(--eui-base-line-height);           // Applies the defined custom line height ratio
 
     // Internals
     thead {
@@ -98,14 +99,12 @@ form.eui-t-form-compact {
 .eui-card.eui-t-card-compact {
     // Exposed CSS variables
     --eui-base-font-size: 14px;                              // Font size base for compact theme
-    --eui-base-line-height: 1.25;                       // Unitless number value is multiplied by the element's font size
     --eui-card-title-size: var(--eui-base-font-size-m);      // Card title font size
     --eui-card-subtitle-size: var(--eui-base-font-size-s);   // Card subtitle font size
     // Internals
     @include eui-compact-get-tokens();
     // Setup
     font-size: var(--eui-base-font-size);                    // Applies the defined custom font size
-    line-height: var(--eui-base-line-height);           // Applies the defined custom line height ratio
 
     // Internals
     .eui-card {
@@ -130,3 +129,30 @@ form.eui-t-form-compact {
         }
     }
 }
+
+
+// OTHER CMP
+.eui-t-compact {
+    .eui-buttons {
+        &--size-s {
+            .eui-button {
+                min-height: calc(2 * #{v(eui-base-spacing-m)});
+                min-width: calc(2.5 * #{v(eui-base-spacing-m)});
+            }
+        }
+
+        &--size-m {
+            .eui-button {
+                min-height: calc(2.5 * #{v(eui-base-spacing-m)});
+                min-width: calc(2.5 * #{v(eui-base-spacing-m)});
+            }
+        }
+
+        &--size-l {
+            .eui-button {
+                min-height: calc(3.25 * #{v(eui-base-spacing-m)});
+                min-width: calc(3.25 * #{v(eui-base-spacing-m)});
+            }
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+@import '@eui/styles-base/src/styles/03-vars/colors-dark.vars';
+
+html.eui-t-dark {
+    // default order
+    // 140, 130, 120, 110, 100, 75,  50,  25,  10,   5,   0
+    // dark-theme order
+    //   0,   5,  10,  25,  50, 75, 100, 110, 120, 130, 140
+
+    // grey shades
+    // 110, 100, 90, 80, 75, 50, 25, 20, 15, 10,   5,   2,   0
+    //   0,   2,  5, 10, 15, 20, 25, 50, 75, 80,  90, 100, 110
+
+    // colors remapped for easier forced colors over dark ones
+    --_dark-white: var(--eui-base-color-grey-100);
+    --_dark-primary-100: var(--eui-base-color-primary-50);
+    --_dark-primary-110: var(--eui-base-color-primary-25);
+    --_dark-grey-90: var(--eui-base-color-grey-5);
+    --_dark-grey-100: var(--eui-base-color-grey-2);
+    --_dark-danger-100: var(--eui-base-color-danger-50);
+
+    // layout specific
+    .eui-app-toolbar, .eui-toolbar {
+        background-color: v(_dark-primary-100);
+        color: v(_dark-white);
+
+        .eui-icon-svg {
+            svg {
+                fill: v(_dark-white);
+                color: v(_dark-white);
+            }
+        }
+
+        .eui-user-profile__infos {
+            &-name,
+            &-welcome {
+                color: v(_dark-white);
+            }
+        }
+    }
+    .eui-toolbar-environment {
+        background-color: v(_dark-danger-100);
+        color: v(_dark-white);
+    }
+
+    // cmp specific
+    .eui-card-content {
+        background-color: v(_dark-grey-90);
+    }
+
+    .eui-slide-toggle__handler {
+        background-color: v(_dark-white) !important;
+
+        .eui-icon-svg {
+            svg {
+                fill: v(_dark-grey-100) !important;
+                color: v(_dark-grey-100) !important;
+            }
+        }
+    }
+
+    .eui-search {
+        .eui-input-text {
+            background-color: v(_dark-primary-110);
+        }
+    }
+}