@fremtind/jokul 0.57.7 → 0.58.0

package/styles/shared/input/shared-input-styles.css

@@ -2,68 +2,6 @@
  * Do not edit directly
  * Generated on Wed, 18 Dec 2024 12:25:37 GMT
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-text-input-border-color: #636060;
-    --jkl-text-input-text-color: #1b1917;
-    --jkl-text-input-placeholder-color: #636060;
-    --jkl-text-input-unit-color: #1b1917;
-    --jkl-text-input-background-color: #ffffff;
-    --jkl-text-input-focus-color: #1b1917;
-    --jkl-text-input-error-background-color: #f6b3b3;
-    --jkl-text-input-error-text-color: #1b1917;
-    --jkl-text-input-error-placeholder-color: #636060;
-    --jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-text-area-counter-count-color: #636060;
-  }
-}
-[data-theme=light] {
-  --jkl-text-input-border-color: #636060;
-  --jkl-text-input-text-color: #1b1917;
-  --jkl-text-input-placeholder-color: #636060;
-  --jkl-text-input-unit-color: #1b1917;
-  --jkl-text-input-background-color: #ffffff;
-  --jkl-text-input-focus-color: #1b1917;
-  --jkl-text-input-error-background-color: #f6b3b3;
-  --jkl-text-input-error-text-color: #1b1917;
-  --jkl-text-input-error-placeholder-color: #636060;
-  --jkl-text-input-selection-color: rgba(27, 25, 23, 0.2);
-  --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
-  --jkl-text-area-counter-count-color: #636060;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-text-input-border-color: #c8c5c3;
-    --jkl-text-input-text-color: #f9f9f9;
-    --jkl-text-input-placeholder-color: #c8c5c3;
-    --jkl-text-input-unit-color: #f9f9f9;
-    --jkl-text-input-background-color: #313030;
-    --jkl-text-input-focus-color: #f9f9f9;
-    --jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
-    --jkl-text-input-error-background-color: #f6b3b3;
-    --jkl-text-input-error-text-color: #1b1917;
-    --jkl-text-input-error-placeholder-color: #636060;
-    --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-text-area-counter-count-color: #c8c5c3;
-  }
-}
-[data-theme=dark] {
-  --jkl-text-input-border-color: #c8c5c3;
-  --jkl-text-input-text-color: #f9f9f9;
-  --jkl-text-input-placeholder-color: #c8c5c3;
-  --jkl-text-input-unit-color: #f9f9f9;
-  --jkl-text-input-background-color: #313030;
-  --jkl-text-input-focus-color: #f9f9f9;
-  --jkl-text-input-selection-color: rgba(249, 249, 249, 0.25);
-  --jkl-text-input-error-background-color: #f6b3b3;
-  --jkl-text-input-error-text-color: #1b1917;
-  --jkl-text-input-error-placeholder-color: #636060;
-  --jkl-text-input-error-selection-color: rgba(27, 25, 23, 0.2);
-  --jkl-text-area-counter-count-color: #c8c5c3;
-}
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {

package/styles/shared/input/shared-input-styles.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}}[data-theme=light]{--jkl-text-input-border-color:#636060;--jkl-text-input-text-color:#1b1917;--jkl-text-input-placeholder-color:#636060;--jkl-text-input-unit-color:#1b1917;--jkl-text-input-background-color:#fff;--jkl-text-input-focus-color:#1b1917;--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-selection-color:rgba(27,25,23,.2);--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#636060}@media screen and (prefers-color-scheme:dark){:root{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}}[data-theme=dark]{--jkl-text-input-border-color:#c8c5c3;--jkl-text-input-text-color:#f9f9f9;--jkl-text-input-placeholder-color:#c8c5c3;--jkl-text-input-unit-color:#f9f9f9;--jkl-text-input-background-color:#313030;--jkl-text-input-focus-color:#f9f9f9;--jkl-text-input-selection-color:hsla(0,0%,98%,.25);--jkl-text-input-error-background-color:#f6b3b3;--jkl-text-input-error-text-color:#1b1917;--jkl-text-input-error-placeholder-color:#636060;--jkl-text-input-error-selection-color:rgba(27,25,23,.2);--jkl-text-area-counter-count-color:#c8c5c3}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}

package/styles/shared/input/shared-input-styles.scss

@@ -19,48 +19,6 @@ $_action-button-padding--compact: 0;
 $_action-button-focus-position: jkl.rem(6px);
 $_action-button-focus-position--compact: 0;
 
-$_text-input-focus-color: jkl.$color-granitt;
-$_text-input-selection-color: color.scale(
-    $color: $_text-input-focus-color,
-    $alpha: -80%,
-);
-
-$_text-input-focus-color--inverted: jkl.$color-snohvit;
-$_text-input-selection-color--inverted: color.scale(
-    $color: $_text-input-focus-color--inverted,
-    $alpha: -75%,
-);
-
-@include jkl.light-mode-variables {
-    --jkl-text-input-border-color: #{jkl.$color-stein};
-    --jkl-text-input-text-color: #{jkl.$color-granitt};
-    --jkl-text-input-placeholder-color: #{jkl.$color-stein};
-    --jkl-text-input-unit-color: #{jkl.$color-granitt};
-    --jkl-text-input-background-color: #{jkl.$color-hvit};
-    --jkl-text-input-focus-color: #{$_text-input-focus-color};
-    --jkl-text-input-error-background-color: #{jkl.$color-feil};
-    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
-    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
-    --jkl-text-input-selection-color: #{$_text-input-selection-color};
-    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
-    --jkl-text-area-counter-count-color: #{jkl.$color-stein};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-text-input-border-color: #{jkl.$color-svaberg};
-    --jkl-text-input-text-color: #{jkl.$color-snohvit};
-    --jkl-text-input-placeholder-color: #{jkl.$color-svaberg};
-    --jkl-text-input-unit-color: #{jkl.$color-snohvit};
-    --jkl-text-input-background-color: #{jkl.$color-skifer};
-    --jkl-text-input-focus-color: #{$_text-input-focus-color--inverted};
-    --jkl-text-input-selection-color: #{$_text-input-selection-color--inverted};
-    --jkl-text-input-error-background-color: #{jkl.$color-feil};
-    --jkl-text-input-error-text-color: #{jkl.$color-granitt};
-    --jkl-text-input-error-placeholder-color: #{jkl.$color-stein};
-    --jkl-text-input-error-selection-color: #{$_text-input-selection-color};
-    --jkl-text-area-counter-count-color: #{jkl.$color-svaberg};
-}
-
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-text-input", "body");
 
@@ -95,6 +53,11 @@ $_text-input-selection-color--inverted: color.scale(
 }
 
 @mixin wrapper-styles {
+    --text-color: var(--jkl-color-text-default);
+    --background-color: var(--jkl-color-background-input-base);
+    --border-color: var(--jkl-color-border-input);
+    --placeholder-color: var(--jkl-color-text-subdued);
+
     border-radius: jkl.rem(3px);
     box-sizing: border-box;
     max-width: 100%;
@@ -108,30 +71,34 @@ $_text-input-selection-color--inverted: color.scale(
     @include jkl.motion;
     transition-property: color, box-shadow, background-color;
 
-    color: var(--jkl-text-input-text-color);
-    box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-border-color),
+    background-color: var(--background-color);
+    color: var(--text-color);
+    box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
         0 0 0 jkl.rem(1px) transparent;
-    background-color: transparent;
 
-    &[data-invalid="true"] {
-        background-color: var(--jkl-text-input-error-background-color);
-        color: var(--jkl-text-input-error-text-color);
+    &:focus-within {
+        --background-color: var(--jkl-color-background-input-focus);
+    }
+
+    &[data-invalid="true"]:not(:focus-within) {
+        --background-color: var(--jkl-color-background-alert-error);
+        --text-color: var(--jkl-color-text-on-alert);
+        // Vi har ingen god måte å få tak i kun light mode-versjon av subdued
+        // så vi bruker tekstfargen med litt gjennomsiktighet
+        --placeholder-color: color(from currentColor sRGB r g b / 0.75);
     }
 
     &:hover {
-        box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
-            0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
-        border-color: var(--jkl-text-input-focus-color);
+        --border-color: var(--jkl-color-border-input-focus);
+
+        box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
+            0 0 0 jkl.rem(1px) var(--border-color);
 
         @include jkl.forced-colors-mode {
             border: jkl.rem(2px) solid ButtonText;
         }
     }
 
-    &:focus-within {
-        background-color: var(--jkl-text-input-background-color);
-    }
-
     @include jkl.keyboard-navigation {
         &:has(.jkl-text-input__input:focus-visible),
         &:has(.jkl-text-area__text-area:focus-visible) {
@@ -143,7 +110,7 @@ $_text-input-selection-color--inverted: color.scale(
         @include jkl.focus-outline($offset: -8px);
 
         @include jkl.forced-colors-mode {
-            --jkl-color-border-action: ButtonText;
+            --border-color: ButtonText;
         }
     }
 
@@ -168,7 +135,7 @@ $_text-input-selection-color--inverted: color.scale(
         }
 
         &:hover {
-            color: var(--jkl-text-input-focus-color);
+            color: var(--jkl-color-text-interactive-hover);
 
             @include jkl.forced-colors-mode {
                 border: jkl.rem(2px) inset ButtonText;
@@ -184,7 +151,7 @@ $_text-input-selection-color--inverted: color.scale(
 @mixin input-styles {
     background: none;
     -webkit-appearance: none;
-    color: var(--jkl-color);
+    color: inherit;
 
     @include jkl.use-font-variables("jkl-text-input");
     @include jkl.reset-outline;
@@ -202,50 +169,11 @@ $_text-input-selection-color--inverted: color.scale(
     // Placeholder text style
     &::placeholder {
         opacity: 1;
-        color: var(--jkl-text-input-placeholder-color);
+        color: var(--placeholder-color);
     }
 
     // Color of text selection
     &::selection {
-        background-color: var(--jkl-text-input-selection-color);
-
-        [data-theme="dark"] & {
-            background-color: var(--jkl-text-input-selection-color);
-        }
-    }
-
-    //  Invalid state
-    &[aria-invalid="true"] {
-        color: var(--jkl-text-input-error-text-color);
-
-        &::placeholder {
-            color: var(--jkl-text-input-error-placeholder-color);
-        }
-
-        // Color of text selection
-        &::selection {
-            background-color: var(--jkl-text-input-error-selection-color);
-        }
-
-        & ~ .jkl-text-input-action-button {
-            color: var(--jkl-color-text-on-alert);
-
-            &:hover {
-                color: var(--jkl-text-input-error-text-color);
-            }
-
-            &:focus {
-                @include jkl.keyboard-navigation {
-                    &::after {
-                        box-shadow: inset 0 0 0 jkl.rem(2px)
-                            var(--jkl-text-input-error-text-color);
-                    }
-                }
-            }
-        }
-
-        & ~ .jkl-text-input__unit {
-            color: var(--jkl-text-input-error-text-color);
-        }
+        background-color: color(from currentColor sRGB r g b / 0.25);
     }
 }