@eui/styles 17.0.0-next.10 → 17.0.0-next.11

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.10",
+    "version": "17.0.0-next.11",
     "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

@@ -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-input.scss

@@ -6,12 +6,13 @@
     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/_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/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,5 +1,3 @@
-// TODO v17 - extract directive bound styling to global particular structure here to be recongnizable and kept
-
 .eui-input-maxlength-wrapper {
     position: relative;
     width: 100%;

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;
@@ -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,5 +1,12 @@
 // 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 {

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

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/03-vars/colors-dark.vars';