@eui/eds-styles 23.0.0-alpha.10 → 23.0.0-alpha.12

package/dist/base/00-reset/index.scss

@@ -1,285 +1,15 @@
-/*! EDS Reset — based on normalize.css, modernized for evergreen browsers */
+/*! EDS Reset — minimal reset for evergreen browsers with encapsulated components */
 
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: var(--eds-base-line-height); /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
 body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
- */
-
-abbr[title] {
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in Edge.
- */
-
-button,
-input {
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge and Firefox.
- */
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * Correct the text wrapping in Edge.
- */
-
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Hide the template element and elements with [hidden] attribute.
- */
-
-template,
 [hidden] {
   display: none;
 }

package/dist/base/01-base/animations.scss

@@ -0,0 +1,8 @@
+@keyframes eds-spin {
+    from {
+        transform: translateY(-50%) rotate(0deg);
+    }
+    to {
+        transform: translateY(-50%) rotate(360deg);
+    }
+}

package/dist/base/01-base/index.scss

@@ -2,4 +2,5 @@
 $eds-assets-base-path: '@eui/eds-styles/dist/assets' !default;
 
 @forward 'functions';
-@forward 'mixins';
+@forward 'mixins';
+@forward 'animations';

package/dist/base/01-base/mixins.scss

@@ -68,4 +68,100 @@ $default-feature: "min-width";
         outline-offset: $offset !important;
         border-radius: var(--eds-br-full) !important;
     }
-}
+}
+
+
+@mixin loading-indicator() {
+    align-items: center;
+    display: flex;
+
+    &::after,
+    &::before {
+        content: '';
+        height: var(--eds-sp-l);
+        position: absolute;
+        right: var(--eds-sp-s);
+        width: var(--eds-sp-l);
+    }
+
+    &::before {
+        border: var(--eds-sp-3xs) solid rgba(0, 0, 0, 0.35);
+        border-radius: 100%;
+    }
+
+    &::after {
+        animation: loading 0.6s linear;
+        animation-iteration-count: infinite;
+        border-color: var(--eui-c-white) transparent transparent;
+        border-radius: 100%;
+        border-style: solid;
+        border-width: var(--eds-sp-3xs);
+        box-shadow: 0 0 0 1px transparent;
+    }
+
+    &--sm::after,
+    &--sm::before {
+        height: var(--eds-sp-m);
+        width: var(--eds-sp-m);
+    }
+
+    @keyframes loading {
+        to { transform: rotate(360deg); }
+    }
+}
+
+// EDS Input mixin — common styles for text inputs, textareas, selects
+@mixin eds-input() {
+    font: var(--eds-f-paragraph-m);
+    appearance: none;
+    background-color: var(--eds-c-surface-elevation);
+    border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
+    border-radius: var(--eds-br-s);
+    box-shadow: none;
+    color: var(--eds-c-foreground-default);
+    min-height: var(--eds-si-3xl);
+    padding: var(--eds-sp-xs) var(--eds-sp-s);
+    width: 100%;
+    @include eds-focus-visible();
+
+    &:not([hidden]) {
+        display: block;
+    }
+
+    &::placeholder {
+        color: var(--eds-c-foreground-subtler);
+        opacity: 1;
+    }
+
+    // Readonly
+    &[readonly] {
+        background-color: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        padding-left: 0;
+        padding-right: 0;
+        pointer-events: none;
+    }
+
+    // Disabled
+    &:disabled:not([readonly]),
+    &--disabled:not([readonly]) {
+        background-color: var(--eds-c-suface-disabled);
+        border-color: var(--eds-c-border-disabled);
+        color: var(--eds-c-foreground-subtler);
+        pointer-events: none;
+    }
+
+    // Invalid
+    &--invalid {
+        border-color: var(--eds-c-border-critical);
+    }
+
+    &--loading {
+        padding-right: var(--eds-sp-7xl);
+
+        &-icon {
+            @include loading-indicator();
+        }
+    }    
+}

package/dist/base/02-tokens/typography-semantic.scss

@@ -27,6 +27,8 @@ $typography-semantic-map: (
         ),
         label: (
             l: ( size: l, line-height: l, weight: regular ), 
+            l-medium: ( size: l, line-height: l, weight: medium ), 
+            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ), 
             m: ( size: m, line-height: m, weight: regular ),
             m-medium: ( size: m, line-height: m, weight: medium ),
             m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
@@ -65,6 +67,8 @@ $typography-semantic-map: (
         ),
         label: (
             l: ( size: l, line-height: l, weight: regular ), 
+            l-medium: ( size: l, line-height: l, weight: medium ), 
+            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),             
             m: ( size: m, line-height: m, weight: regular ),
             m-medium: ( size: m, line-height: m, weight: medium ),
             m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
@@ -103,6 +107,8 @@ $typography-semantic-map: (
         ),
         label: (
             l: ( size: l, line-height: l, weight: regular ), 
+            l-medium: ( size: l, line-height: l, weight: medium ), 
+            l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),             
             m: ( size: m, line-height: m, weight: regular ),
             m-medium: ( size: m, line-height: m, weight: medium ),
             m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),

package/dist/base/03-vars/typography.scss

@@ -53,17 +53,27 @@
 
     @include base.media(maps.$eds-bkp-tablet) {
         @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {
+            $desktopTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'desktop'), $type);
             @each $size, $sizeDef in $typeDef {
-                --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+                $desktopSizeDef: map.get($desktopTypeDef, $size);
+                // Only emit override if size or line-height differs from desktop
+                @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {
+                    --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+                }
             }
         }        
     }
 
     @include base.media(maps.$eds-bkp-mobile) {
         @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {
+            $tabletTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'tablet'), $type);
             @each $size, $sizeDef in $typeDef {
-                --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+                $tabletSizeDef: map.get($tabletTypeDef, $size);
+                // Only emit override if size or line-height differs from tablet
+                @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {
+                    --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
+                }
             }
         }        
     }    
-}
+}

package/dist/base/04-elements/html-body.scss

@@ -0,0 +1,26 @@
+@use '../01-base' as base;
+
+html {
+    display: block;
+    height: 100%;
+    font-size: var(--eds-f-s-base);
+    line-height: var(--eds-base-line-height);
+    // @include base.eui-scrollbars();
+}
+
+body {
+    background-color: var(--eds-c-surface-elevation);
+    color: var(--eds-c-foreground);
+    font-family: var(--eds-f-family);
+    font-feature-settings: 'liga';
+    font-size: var(--eds-f-s-base);
+    -moz-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
+    font-style: normal;
+    font-weight: normal;
+    height: 100%;
+    line-height: var(--eds-base-line-height);
+    margin: 0;
+    text-align: start;
+    text-rendering: optimizeLegibility;
+}

package/dist/base/04-elements/index.scss

@@ -1,26 +1,2 @@
-@use '../01-base' as base;
-
-html {
-    display: block;
-    height: 100%;
-    font-size: var(--eds-f-s-base);
-    line-height: var(--eds-base-line-height);
-    // @include base.eui-scrollbars();
-}
-
-body {
-    background-color: var(--eds-c-surface-elevation);
-    color: var(--eds-c-foreground);
-    font-family: var(--eds-f-family);
-    font-feature-settings: 'liga';
-    font-size: var(--eds-f-s-base);
-    -moz-font-smoothing: antialiased;
-    -webkit-font-smoothing: antialiased;
-    font-style: normal;
-    font-weight: normal;
-    height: 100%;
-    line-height: var(--eds-base-line-height);
-    margin: 0;
-    text-align: start;
-    text-rendering: optimizeLegibility;
-}
+@forward 'html-body';
+@forward 'table';

package/dist/base/04-elements/table.scss

@@ -0,0 +1,142 @@
+.eui-21 {
+    table.eds-table-default {
+        background-color: transparent;
+        border-collapse: collapse;
+        border-spacing: 0;
+        color: var(--eds-c-foreground);
+        max-width: 100%;
+        overflow: auto;
+        position: relative;
+
+        th,
+        td {
+            &:first-child {
+                border-left: 0;
+            }
+
+            &:last-child {
+                border-right: 0;
+            }
+        }
+
+        // Overall settings (default)
+        thead > tr > th,
+        tbody > tr > td,
+        tfoot > tr > td {
+            vertical-align: middle;
+        }
+
+        tr > th,
+        tr > td {
+            padding: var(--eds-sp-s);
+            text-align: left;
+        }
+
+        thead {
+            th {
+                color: var(--eds-c-foreground-default);
+                padding: var(--eds-sp-m) var(--eds-sp-s);
+                vertical-align: middle;
+                font: var(--eds-f-label-m-semi-bold);
+            }
+
+            tr {
+                border-bottom: var(--eds-bw-s) solid var(--eds-c-border-divider);
+                border-top: 0;
+                background: var(--eds-c-surface-elevation);
+            }
+        }
+
+        // Striped & hovered tables by default
+        tbody {
+            tr:nth-of-type(odd) {
+                background-color: transparent;
+
+                &:hover {
+                    background-color: var(--eds-c-surface-hover);
+                }
+            }
+
+            tr:nth-of-type(even) {
+                background-color: var(--eds-c-surface-elevation);
+
+                &:hover {
+                    background-color: var(--eds-c-surface-hover);
+                }
+            }
+        }
+
+        tfoot {
+            tr {
+                background: var(--eds-c-surface-elevation);
+            }
+        }
+
+        tr {
+            border-bottom: var(--eds-bw-s) solid var(--eds-c-border-divider);
+            display: table-row;
+        }
+
+        &--no-zebra {
+            tbody {
+                tr:nth-of-type(odd) {
+                    background-color: transparent;
+                }
+
+                tr:nth-of-type(even) {
+                    background-color: transparent;
+                }
+            }
+        }
+
+        // Compact table
+        &--compact {
+            thead {
+                th {
+                    padding: var(--eds-sp-xs) var(--eds-sp-s);
+                }
+            }
+
+            tr > td {
+                padding: var(--eds-sp-3xs) var(--eds-sp-s);
+            }
+        }
+
+        // Responsive table
+        &--responsive {
+            display: table;
+            width: 100%;
+
+            &--bordered {
+                border: 0;
+            }
+        }
+
+        // NoWrap table content
+        &--nowrap {
+            white-space: nowrap;
+
+            thead > tr > th,
+            tbody > tr > td,
+            tfoot > tr > td {
+                white-space: nowrap;
+            }
+        }
+
+        // Centered table
+        &--centered {
+            display: table;
+            margin: 0 auto;
+            width: auto;
+        }
+
+        // Middle aligned cells content
+        &--align-middle {
+            thead > tr > th,
+            tbody > tr > td,
+            tfoot > tr > td {
+                vertical-align: middle;
+            }
+        }
+    }
+}