@eui/eds-styles 22.0.0-alpha.5 → 22.0.0-alpha.50

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

@@ -41,36 +41,44 @@ $default-feature: "min-width";
         transition: none;
     }
 }
-@mixin eds-focus-ring($offset: 1px) {
+@mixin eds-focus-visible-critical($offset: -2px, $size: 2px) {
+    &:focus-visible:not([readonly]) {
+        outline: $size solid var(--eds-c-border-critical) !important;
+        outline-offset: $offset !important;
+        transition: none;
+    }
+}
+
+@mixin eds-focus-ring($offset: 2px) {
     &:focus:not([readonly]) {
         outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
         outline-offset: $offset !important;
-        border-radius: var(--eds-br-xs) !important;
+        // border-radius: var(--eds-br-xs) !important;
     }
 }
-@mixin eds-focus-ring-rounded($offset: 1px) {
+@mixin eds-focus-ring-critical($offset: 2px) {
     &:focus:not([readonly]) {
-        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+        outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;
         outline-offset: $offset !important;
-        border-radius: var(--eds-br-full) !important;
+        // border-radius: var(--eds-br-xs) !important;
     }
 }
-@mixin eds-focus-visible-ring($offset: 1px) {
+
+@mixin eds-focus-visible-ring($offset: 2px) {
     &:focus-visible:not([readonly]) {
         outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
         outline-offset: $offset !important;
-        border-radius: var(--eds-br-xs) !important;
+        // border-radius: var(--eds-br-xs) !important;
     }
 }
-@mixin eds-focus-visible-ring-rounded($offset: 1px) {
+@mixin eds-focus-visible-ring-critical($offset: 2px) {
     &:focus-visible:not([readonly]) {
-        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+        outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;
         outline-offset: $offset !important;
-        border-radius: var(--eds-br-full) !important;
+        // border-radius: var(--eds-br-xs) !important;
     }
 }
 
-
 @mixin loading-indicator() {
     align-items: center;
     display: flex;
@@ -110,26 +118,42 @@ $default-feature: "min-width";
     }
 }
 
-// EDS Input mixin — common styles for text inputs, textareas, selects
+// EDS Input mixin — common styles for text inputs, textareas, selects.
+//
+// Size is parametrized through private custom properties that default to the
+// `m` size. Components reflect a `size` host attribute and override these
+// privates per `:host([size="s"])` / `:host([size="l"])` (see eds-input-size()).
 @mixin eds-input() {
-    font: var(--eds-f-paragraph-m);
+    // Size-driven privates (defaults = `m`)
+    --_eds-input-height: var(--eds-si-4xl);
+    --_eds-input-pad-v: var(--eds-sp-xs);
+    --_eds-input-pad-h: var(--eds-sp-s);
+    --_eds-input-font: var(--eds-f-paragraph-m);
+    --_eds-input-font-weight: var(--eds-f-w-regular);
+    --_eds-input-placeholder-font: var(--eds-f-placeholder-m);
+    --_eds-input-placeholder-font-weight: var(--eds-f-w-light);
+
+    font: var(--_eds-input-font);
+    font-weight: var(--_eds-input-font-weight);
     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);
+    height: var(--_eds-input-height);
+    padding: var(--_eds-input-pad-v) var(--_eds-input-pad-h);
     width: 100%;
-    @include eds-focus-visible();
+    @include eds-focus-visible-ring();
 
     &:not([hidden]) {
         display: block;
     }
 
     &::placeholder {
-        color: var(--eds-c-foreground-subtler);
+        color: var(--eds-c-foreground-placeholder);
+        font: var(--_eds-input-placeholder-font);
+        font-weight: var(--_eds-input-placeholder-font-weight);
         opacity: 1;
     }
 
@@ -146,15 +170,16 @@ $default-feature: "min-width";
     // Disabled
     &:disabled:not([readonly]),
     &--disabled:not([readonly]) {
-        background-color: var(--eds-c-suface-disabled);
+        background-color: var(--eds-c-surface-disabled-subtle);
         border-color: var(--eds-c-border-disabled);
-        color: var(--eds-c-foreground-subtler);
+        color: var(--eds-c-foreground-disabled);
         pointer-events: none;
     }
 
     // Invalid
-    &--invalid {
+    &[invalid] {
         border-color: var(--eds-c-border-critical);
+        @include eds-focus-visible-ring-critical();
     }
 
     &--loading {
@@ -165,3 +190,51 @@ $default-feature: "min-width";
         }
     }    
 }
+
+// EDS Input size overrides — applies the `s` / `l` size privates.
+// Call inside a component's `:host` scope (after `eds-input()`); it emits the
+// `[input-size="s"]` / `[input-size="l"]` branches. The size variant is
+// reflected as the `input-size` host attribute (NOT `size`, which is reserved
+// for the native `<select size>` / `<input size>` DOM attribute). The `m` size
+// is the default already set by `eds-input()`, so no `[input-size="m"]` branch
+// is needed.
+@mixin eds-input-size() {
+    &[input-size="s"] {
+        --_eds-input-height: calc(var(--eds-si-3xl) + var(--eds-si-2xs)); // 36px
+        --_eds-input-pad-v: var(--eds-sp-2xs);
+        --_eds-input-pad-h: var(--eds-sp-s);
+    }
+
+    &[input-size="l"] {
+        --_eds-input-height: var(--eds-si-6xl); // 48px
+        --_eds-input-pad-v: var(--eds-sp-s);
+        --_eds-input-pad-h: var(--eds-sp-m);
+    }
+}
+
+@mixin eds-input-hover() {
+    &:hover:not([aria-disabled="true"]):not(:disabled) {
+        // box-shadow: var(--eds-sh-1);
+
+        &:not([aria-disabled="true"]):not(:checked):not(:disabled):not([readonly]):not([indeterminate="true"]):not([invalid="true"]) {
+            border-color: var(--eds-c-border);  //EDS aligned
+        }
+
+        // checkbox
+        &.eds-checkbox {
+            &:checked:not([readonly]):not([invalid="true"]),
+            &[checked="true"]:not([readonly]):not([invalid="true"]),
+            &[indeterminate="true"]:not([readonly]) {
+                background-color: var(--eds-c-surface-primary--hover);
+            }
+        }
+
+        //radio
+        &.eds-radio {
+            &:checked:not([readonly]):not([invalid="true"]) {
+                background-color: var(--eds-c-surface-elevation);
+                border-color: var(--eds-c-border-primary--hover);
+            }
+        }
+    }
+}