@eui/styles 17.0.0-next.2 → 17.0.0-next.21

package/package.json

@@ -8,7 +8,12 @@
     ],
     "description": "eUI core styling",
     "author": "ec.europa.eui@gmail.com",
+    "engines": {
+        "node": "^18.13.0 || >=20.0.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.2",
+    "version": "17.0.0-next.21",
     "tag": "next"
 }

package/src/styles/01-ecl/_module-eui-ecl.scss

@@ -0,0 +1,27 @@
+@use '@ecl/theme-eu';
+
+// Icons & Images
+// @use '@ecl/vanilla-component-icon/icon';
+
+// Layout
+// @use '@ecl/vanilla-layout-grid/grid';
+
+// Other atoms
+@use '@ecl/vanilla-component-label/label-eu';
+@use '@ecl/vanilla-component-link/link-eu';
+
+// @use '@ecl/vanilla-utility-background/background';
+// @use '@ecl/vanilla-utility-border/border';
+// @use '@ecl/vanilla-utility-clearfix/clearfix';
+// @use '@ecl/vanilla-utility-dimension/dimension';
+@use '@ecl/vanilla-utility-flex/flex';
+// @use '@ecl/vanilla-utility-float/float';
+// @use '@ecl/vanilla-utility-disablescroll/disablescroll';
+@use '@ecl/vanilla-utility-display/display';
+// @use '@ecl/vanilla-utility-media/media';
+// @use '@ecl/vanilla-utility-print/print';
+@use '@ecl/vanilla-utility-screen-reader/screen-reader';
+// @use '@ecl/vanilla-utility-shadow/shadow';
+@use '@ecl/vanilla-utility-spacing/spacing';
+@use '@ecl/vanilla-utility-typography/typography-eu';
+@use '@ecl/vanilla-utility-z-index/z-index';

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

@@ -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();
+            }
+
+            > 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-disabled.scss

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

@@ -0,0 +1,54 @@
+// Material colors : generated with : http://mcg.mbitson.com
+
+// PRIMARY
+$palette-primary-300: #4d7cb4;
+$palette-primary-500: #004494; // ECL BASE rgb(0, 68, 148)
+$palette-primary-900: #001f65;
+
+// ACCENT
+$palette-accent-A100: #fff;
+$palette-accent-A200: #fffcf4;
+$palette-accent-A400: #ffecc1;
+
+$private-eui-color: #999;
+$private-eui-color-white: #fff;
+
+$mat-eui-primary: (
+    300: $palette-primary-300,
+    500: $palette-primary-500,
+    900: $palette-primary-900,
+    contrast: (
+        300: $private-eui-color,
+        500: $private-eui-color-white,
+        900: $private-eui-color-white,
+    )
+);
+
+$mat-eui-accent: (
+    A100: $palette-accent-A100,
+    A200: $palette-accent-A200,
+    A400: $palette-accent-A400,
+    contrast: (
+        A100: $private-eui-color,
+        A200: $private-eui-color,
+        A400: $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);
+
+// define theme
+$eui-theme: mat.define-light-theme((
+ color: (
+   primary: $eui-t-color-primary,
+   accent: $eui-t-color-accent,
+ )
+));
+
+@include mat.datepicker-theme($eui-theme);

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/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,53 @@
+@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-grey-90: var(--eui-base-color-grey-5);
+    --_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-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;
+    }
+
+    // PRISM
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string {
+        background: inherit;
+    }
+}