@fremtind/jokul 6.1.0-next.3 → 6.1.0-next.5

package/styles/components/toast/toast.scss

@@ -33,7 +33,8 @@
     .jkl-toast {
         --background-color: var(--jkl-color-background-container);
         --text-color: var(--jkl-color-text-default);
-        --border-color: transparent;
+        --icon-color: var(--jkl-color-background-contrast);
+        --border-color: var(--jkl-color-border-subdued);
         --jkl-toast-padding: var(--jkl-unit-20);
 
         color: var(--text-color);
@@ -62,6 +63,7 @@
 
         &__icon {
             @include jkl.forced-colors-svg-fallback($stroke: CanvasText);
+            color: var(--icon-color);
 
             .jkl-toast:not(:has(.jkl-toast__title)) & {
                 margin-block-start: jkl.rem(1px);
@@ -106,74 +108,18 @@
             }
         }
 
-        &--info {
-            --background-color: var(--jkl-color-info-background-container);
-            --text-color: var(--jkl-color-info-text-default);
-            --border-color: var(--jkl-color-info-border-subdued);
-
-            .jkl-countdown {
-                --bar-color: var(--jkl-color-info-background-contrast);
-            }
-
-            .jkl-toast__icon {
-                color: var(--jkl-color-info-background-contrast);
-            }
-        }
-
-        &--warning {
-            --background-color: var(--jkl-color-warning-background-container);
-            --text-color: var(--jkl-color-warning-text-default);
-            --border-color: var(--jkl-color-warning-border-subdued);
-
-            .jkl-countdown {
-                --bar-color: var(--jkl-color-warning-background-contrast);
-            }
-
-            .jkl-toast__icon {
-                color: var(--jkl-color-warning-background-contrast);
-            }
-        }
-
-        &--error {
-            --background-color: var(--jkl-color-error-background-container);
-            --text-color: var(--jkl-color-error-text-default);
-            --border-color: var(--jkl-color-error-border-subdued);
-
-            .jkl-countdown {
-                --bar-color: var(--jkl-color-error-background-contrast);
-            }
-
-            .jkl-toast__icon {
-                color: var(--jkl-color-error-background-contrast);
-            }
-        }
-
-        &--success {
-            --background-color: var(--jkl-color-success-background-container);
-            --text-color: var(--jkl-color-success-text-default);
-            --border-color: var(--jkl-color-success-border-subdued);
-
-            .jkl-countdown {
-                --bar-color: var(--jkl-color-success-background-contrast);
-            }
-
-            .jkl-toast__icon {
-                color: var(--jkl-color-success-background-contrast);
-            }
-        }
-
         @include jkl.forced-colors-mode {
             border: 2px solid CanvasText;
 
-            &--info {
+            &[data-color="info"] {
                 border-style: dotted;
             }
 
-            &--warning {
+            &[data-color="warning"] {
                 border-style: dashed;
             }
 
-            &--error {
+            &[data-color="error"] {
                 border-style: double;
                 border-width: 4px;
             }

package/styles/components/toggle-switch/toggle-switch.css

@@ -159,14 +159,19 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --knob-position: calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2);
 }
 .jkl-toggle-switch[disabled] {
-  cursor: revert;
-  --text-color: var(--jkl-color-text-subdued);
-  --switch-border-color: var(--jkl-color-border-subdued);
-  --knob-border-color: var(--jkl-color-border-subdued);
+  opacity: var(--jkl-nested-disabled-opacity, 0.5);
+  cursor: not-allowed;
 }
-.jkl-toggle-switch[disabled][aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch[disabled] {
-  --indicator-color: var(--jkl-color-border-subdued);
-  --switch-border-color: var(--indicator-color);
+.jkl-toggle-switch[disabled] * {
+  --jkl-nested-disabled-opacity: 1;
+  cursor: not-allowed;
+}
+@media screen and (forced-colors: active) {
+  .jkl-toggle-switch[disabled] {
+    opacity: 1;
+    color: GrayText;
+    border-color: GrayText;
+  }
 }
 
 .jkl-toggle-switch-widget {

package/styles/components/toggle-switch/toggle-switch.min.css

@@ -1 +1 @@
-.jkl-toggle-slider{--jkl-slider-bg:var(--jkl-color-background-page);--jkl-slider-pill:var(--jkl-color-background-container);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-strong);--jkl-slider-hover-color:var(--jkl-color-border-strong);font-size:var(--jkl-slider-font-size);line-height:var(--jkl-slider-line-height);font-weight:var(--jkl-slider-font-weight);position:relative;overflow:hidden;display:flex;align-items:flex-start;width:100%;flex-direction:column;-webkit-user-select:none;user-select:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{margin-bottom:var(--jkl-spacing-8);font-size:var(--jkl-slider-legend-font-size);line-height:var(--jkl-slider-legend-line-height);font-weight:var(--jkl-slider-legend-font-weight)}.jkl-toggle-slider__legend--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-toggle-slider__inputs{display:flex;position:relative;overflow:hidden;background-color:var(--jkl-slider-bg);border-radius:6.25rem;border:2px solid var(--jkl-slider-bg)}.jkl-toggle-slider__input{position:absolute;opacity:0}.jkl-toggle-slider__label{display:flex;align-items:center;justify-content:center;z-index:1;cursor:pointer;padding:var(--jkl-unit-02) var(--jkl-unit-20);color:var(--jkl-slider-pill-text);-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em;color:var(--jkl-slider-pill-text--active)}.jkl-toggle-slider__pill{height:100%;background-color:var(--jkl-slider-pill);position:absolute;transition-property:width,transform;border-radius:6.25rem;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive)}@media (min-width:680px){.jkl-toggle-slider{flex-direction:row;align-items:center}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--border-width:0.0625rem;--switch-padding:var(--jkl-unit-05);--knob-position:0;--switch-border-color:var(--jkl-color-border-strong);--indicator-color:var(--jkl-color-background-container);--knob-border-color:var(--jkl-color-border-strong);--knob-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-on-contrast);background:#0000;color:var(--text-color);padding:0;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row-reverse;align-items:center;gap:var(--jkl-unit-10);touch-action:none;font:var(--jkl-text-style-text-medium);border-style:none}.jkl-toggle-switch,.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{border-style:revert}.jkl-toggle-switch,.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}.jkl-toggle-switch{border-color:#0000;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-contrast);--knob-color:var(--jkl-color-text-on-contrast);--switch-border-color:var(--indicator-color);--knob-border-color:var(--knob-color);--knob-position:calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{cursor:revert;--text-color:var(--jkl-color-text-subdued);--switch-border-color:var(--jkl-color-border-subdued);--knob-border-color:var(--jkl-color-border-subdued)}.jkl-toggle-switch[disabled][aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch[disabled]{--indicator-color:var(--jkl-color-border-subdued);--switch-border-color:var(--indicator-color)}.jkl-toggle-switch-widget{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;height:var(--jkl-toggle-switch-height);width:var(--jkl-toggle-switch-width);border-radius:9999px;border:var(--border-width) solid var(--switch-border-color);overflow:hidden;-webkit-user-select:none;user-select:none;padding:var(--switch-padding);background-color:var(--indicator-color);pointer-events:none}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-toggle-switch-widget__slider{position:relative;box-sizing:border-box;height:var(--jkl-toggle-switch-knob-size);width:var(--jkl-toggle-switch-knob-size);color:var(--icon-color);font-size:var(--jkl-font-size-1);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;translate:var(--knob-position)}.jkl-toggle-switch-widget__knob{position:absolute;inset:0;border-radius:9999px;border:var(--border-width) solid var(--knob-border-color);background-color:var(--knob-color)}.jkl-toggle-switch-widget__indicator{position:absolute;top:50%;right:100%;font-size:var(--jkl-unit-20);transform:translateY(-50%)}
+.jkl-toggle-slider{--jkl-slider-bg:var(--jkl-color-background-page);--jkl-slider-pill:var(--jkl-color-background-container);--jkl-slider-text:var(--jkl-color-text-default);--jkl-slider-text--active:var(--jkl-color-text-default);--jkl-slider-focus-color:var(--jkl-color-border-strong);--jkl-slider-hover-color:var(--jkl-color-border-strong);font-size:var(--jkl-slider-font-size);line-height:var(--jkl-slider-line-height);font-weight:var(--jkl-slider-font-weight);position:relative;overflow:hidden;display:flex;align-items:flex-start;width:100%;flex-direction:column;-webkit-user-select:none;user-select:none}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:focus-within .jkl-toggle-slider__pill{box-shadow:inset 0 0 0 .125rem var(--jkl-slider-focus-color)}.jkl-toggle-slider__legend{margin-bottom:var(--jkl-spacing-8);font-size:var(--jkl-slider-legend-font-size);line-height:var(--jkl-slider-legend-line-height);font-weight:var(--jkl-slider-legend-font-weight)}.jkl-toggle-slider__legend--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.jkl-toggle-slider__inputs{display:flex;position:relative;overflow:hidden;background-color:var(--jkl-slider-bg);border-radius:6.25rem;border:2px solid var(--jkl-slider-bg)}.jkl-toggle-slider__input{position:absolute;opacity:0}.jkl-toggle-slider__label{display:flex;align-items:center;justify-content:center;z-index:1;cursor:pointer;padding:var(--jkl-unit-02) var(--jkl-unit-20);color:var(--jkl-slider-pill-text);-webkit-tap-highlight-color:transparent;min-width:30px}.jkl-toggle-slider__label:hover{color:var(--jkl-slider-hover-color)}.jkl-toggle-slider__label--selected{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em;color:var(--jkl-slider-pill-text--active)}.jkl-toggle-slider__pill{height:100%;background-color:var(--jkl-slider-pill);position:absolute;transition-property:width,transform;border-radius:6.25rem;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive)}@media (min-width:680px){.jkl-toggle-slider{flex-direction:row;align-items:center}.jkl-toggle-slider__legend{margin-bottom:0;margin-right:1.2em}}@media screen and (forced-colors:active){.jkl-toggle-slider .jkl-toggle-slider__inputs{background-color:Canvas}.jkl-toggle-slider .jkl-toggle-slider__pill{background-color:ButtonFace}}.jkl-toggle-switch{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);--border-width:0.0625rem;--switch-padding:var(--jkl-unit-05);--knob-position:0;--switch-border-color:var(--jkl-color-border-strong);--indicator-color:var(--jkl-color-background-container);--knob-border-color:var(--jkl-color-border-strong);--knob-color:var(--jkl-color-background-container);--text-color:var(--jkl-color-text-default);--icon-color:var(--jkl-color-text-on-contrast);background:transparent;color:var(--text-color);padding:0;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:row-reverse;align-items:center;gap:var(--jkl-unit-10);touch-action:none;font:var(--jkl-text-style-text-medium);outline:0;border-style:none;outline-style:none}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-toggle-switch{outline:revert;border-style:revert;outline-style:revert}.jkl-toggle-switch:active,.jkl-toggle-switch:focus,.jkl-toggle-switch:hover{outline:revert;outline-style:revert}}@media screen and (forced-colors:active){.jkl-toggle-switch{border-color:transparent;border-style:none}}.jkl-toggle-switch[aria-pressed=true],[aria-checked=true]>.jkl-toggle-switch{--indicator-color:var(--jkl-color-background-contrast);--knob-color:var(--jkl-color-text-on-contrast);--switch-border-color:var(--indicator-color);--knob-border-color:var(--knob-color);--knob-position:calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding)*2)}.jkl-toggle-switch[disabled]{opacity:var(--jkl-nested-disabled-opacity,.5);cursor:not-allowed}.jkl-toggle-switch[disabled] *{--jkl-nested-disabled-opacity:1;cursor:not-allowed}@media screen and (forced-colors:active){.jkl-toggle-switch[disabled]{opacity:1;color:GrayText;border-color:GrayText}}.jkl-toggle-switch-widget{--jkl-toggle-switch-height:var(--jkl-unit-40);--jkl-toggle-switch-width:var(--jkl-unit-60);--jkl-toggle-switch-knob-size:var(--jkl-unit-30);position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;height:var(--jkl-toggle-switch-height);width:var(--jkl-toggle-switch-width);border-radius:9999px;border:var(--border-width) solid var(--switch-border-color);overflow:hidden;-webkit-user-select:none;user-select:none;padding:var(--switch-padding);background-color:var(--indicator-color);pointer-events:none}@media screen and (forced-colors:active){.jkl-toggle-switch-widget{border:.0625rem solid ButtonText}}.jkl-toggle-switch:focus-visible .jkl-toggle-switch-widget{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-toggle-switch-widget__slider{position:relative;box-sizing:border-box;height:var(--jkl-toggle-switch-knob-size);width:var(--jkl-toggle-switch-knob-size);color:var(--icon-color);font-size:var(--jkl-font-size-1);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:translate;translate:var(--knob-position)}.jkl-toggle-switch-widget__knob{position:absolute;inset:0;border-radius:9999px;border:var(--border-width) solid var(--knob-border-color);background-color:var(--knob-color)}.jkl-toggle-switch-widget__indicator{position:absolute;top:50%;right:100%;font-size:var(--jkl-unit-20);transform:translateY(-50%)}

package/styles/components/toggle-switch/toggle-switch.scss

@@ -45,17 +45,7 @@
     }
 
     &[disabled] {
-        cursor: revert;
-
-        --text-color: var(--jkl-color-text-subdued);
-        --switch-border-color: var(--jkl-color-border-subdued);
-        --knob-border-color: var(--jkl-color-border-subdued);
-
-        &[aria-pressed="true"],
-        [aria-checked="true"] > & {
-            --indicator-color: var(--jkl-color-border-subdued);
-            --switch-border-color: var(--indicator-color);
-        }
+        @include jkl.disabled-control;
     }
 }
 

package/styles/components/tooltip/tooltip.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-paragraph-small);background-color:var(--background-color);color:var(--jkl-color-text-on-contrast);display:inline-block;border-radius:var(--jkl-border-radius-s);min-width:-webkit-min-content;min-width:min-content;max-width:min(19.375rem,100%);padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{transition-timing-function:var(--jkl-motion-easing-exit);transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;cursor:pointer;position:relative;background-color:initial;padding:0;display:inline-flex;align-items:baseline;color:var(--jkl-color-text-default);transform:translateY(min(.25em,.375rem));border-radius:9999px;outline:0;border-style:none;outline-style:none}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert}.jkl-tooltip-question-button,.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;min-width:44px;min-height:44px}}
+@layer jokul.components{.jkl-tooltip-trigger{all:unset}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:400;font-weight:var(--jkl-font-weight-bold);letter-spacing:-.014em}.jkl-tooltip-content{--content-padding:var(--jkl-unit-15);--background-color:var(--jkl-color-background-contrast);font:var(--jkl-text-style-paragraph-small);background-color:var(--background-color);color:var(--jkl-color-text-on-contrast);display:inline-block;border-radius:var(--jkl-border-radius-s);min-width:-webkit-min-content;min-width:min-content;max-width:min(19.375rem,100%);padding:var(--content-padding);position:absolute;z-index:10000}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-question-button{transition-timing-function:var(--jkl-motion-easing-exit);transition-duration:var(--jkl-motion-timing-snappy);transition-property:color;cursor:pointer;position:relative;background-color:transparent;padding:0;display:inline-flex;align-items:baseline;color:var(--jkl-color-text-default);transform:translateY(min(.25em,.375rem));border-radius:9999px;outline:0;border-style:none;outline-style:none}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{outline:revert;border-style:revert;outline-style:revert}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{color:var(--jkl-color-text-subdued)}.jkl-tooltip-question-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);outline-offset:0}.jkl-tooltip-question-button:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;min-width:44px;min-height:44px}}