@fremtind/jokul 5.0.0-next.6 → 5.0.0-next.8

package/styles/components.css

@@ -51,7 +51,7 @@
     display: flex;
     align-items: center;
     border: 0;
-    background-color: var(--jkl-color-background-interactive);
+    background-color: transparent;
     min-height: var(--jkl-autosuggest-option-height);
     text-align: left;
     transition-timing-function: var(--jkl-motion-easing-standard);
@@ -63,13 +63,12 @@
   }
   .jkl-autosuggest__item:focus, .jkl-autosuggest__item--active, .jkl-autosuggest__item:hover {
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
 }
 @layer jokul.components {
   .jkl-text-input-wrapper {
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -100,7 +99,8 @@
   .jkl-text-input-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
     --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
-    --placeholder-color: color(from currentColor sRGB r g b / 75%);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
   }
   .jkl-text-input-wrapper:hover, .jkl-text-input-wrapper:focus-within, .jkl-text-input-wrapper:has([data-focused=true]) {
     --border-color: var(--jkl-color-border-strong);
@@ -140,7 +140,7 @@
     width: var(--jkl-text-input-action-button-icon-size);
   }
   .jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-text-input-wrapper > .jkl-text-input-action-button:hover {
@@ -244,8 +244,8 @@
     display: block;
   }
   .jkl-icon-red-cross {
-    --red-cross-circle: var(--jkl-color-error-background-action);
-    --red-cross-path: var(--jkl-color-error-text-on-action);
+    --red-cross-circle: var(--jkl-color-error-background-contrast);
+    --red-cross-path: var(--jkl-color-error-text-on-contrast);
     width: 1.3em;
     height: 1.3em;
   }
@@ -256,8 +256,8 @@
     fill: var(--red-cross-circle);
   }
   .jkl-icon-green-check {
-    --green-check-circle: var(--jkl-color-success-background-action);
-    --green-check-path: var(--jkl-color-success-text-on-action);
+    --green-check-circle: var(--jkl-color-success-background-contrast);
+    --green-check-path: var(--jkl-color-success-text-on-contrast);
     width: 1.3em;
     height: 1.3em;
   }
@@ -361,7 +361,7 @@
     outline-offset: 3px;
   }
   .jkl-icon-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-icon-button {
@@ -431,7 +431,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u2z8gag forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uw6amg5 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -485,7 +485,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-u2z8gag {
+  @keyframes jkl-support-icon-entrance-uw6amg5 {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -533,10 +533,10 @@
   }
   .jkl-tooltip-content {
     --content-padding: var(--jkl-unit-15);
-    --background-color: var(--jkl-color-background-action);
+    --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-action);
+    color: var(--jkl-color-text-on-contrast);
     display: inline-block;
     min-width: min-content;
     max-width: min(19.375rem, 100%);
@@ -559,7 +559,7 @@
     padding: 0;
     display: inline-flex;
     align-items: baseline;
-    color: var(--jkl-color-text-interactive);
+    color: var(--jkl-color-text-default);
     transform: translateY(min(0.25em, 0.375rem));
     border-radius: 9999px;
   }
@@ -584,7 +584,7 @@
     }
   }
   .jkl-tooltip-question-button:hover {
-    --button-color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   .jkl-tooltip-question-button:focus-visible {
     outline: 3px solid var(--jkl-color-border-strong);
@@ -793,8 +793,8 @@
     --border-radius: 999px;
   }
   .jkl-button--primary {
-    --background-color: var(--jkl-color-background-action);
-    --text-color: var(--jkl-color-text-on-action);
+    --background-color: var(--jkl-color-background-contrast);
+    --text-color: var(--jkl-color-text-on-contrast);
   }
   @media (forced-colors: active) {
     .jkl-button--primary {
@@ -833,22 +833,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u2z8gb8;
+    animation-name: jkl-loader-left-spin-uw6amh4;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u2z8gc6;
+    animation-name: jkl-loader-middle-spin-uw6ami3;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u2z8gd5;
+    animation-name: jkl-loader-right-spin-uw6amio;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u2z8gb8 {
+  @keyframes jkl-loader-left-spin-uw6amh4 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -862,7 +862,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u2z8gc6 {
+  @keyframes jkl-loader-middle-spin-uw6ami3 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -879,7 +879,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u2z8gd5 {
+  @keyframes jkl-loader-right-spin-uw6amio {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -919,7 +919,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u2z8gdg;
+      animation: 2s ease infinite jkl-blink-uw6amj3;
     }
   }
   .jkl-skeleton-input {
@@ -967,10 +967,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u2z8gdg;
+      animation: 2s ease-in-out infinite jkl-blink-uw6amj3;
     }
   }
-  @keyframes jkl-blink-u2z8gdg {
+  @keyframes jkl-blink-uw6amj3 {
     0% {
       opacity: 1;
     }
@@ -999,7 +999,7 @@
     --border-radius: var(--jkl-border-radius-m);
     --border-color: transparent;
     --border-width: 0.0625rem;
-    --background-color: transparent;
+    --background-color: var(--jkl-color-background-container);
     position: relative;
     overflow: hidden;
     display: block;
@@ -1041,11 +1041,9 @@
   .jkl-card[data-padding=xl] {
     --padding: var(--padding-xl);
   }
-  .jkl-card--filled {
-    --background-color: var(--jkl-color-background-container);
-  }
   .jkl-card--outlined {
-    --border-color: var(--jkl-color-border-default);
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
   }
   .jkl-card[data-clickable=true] {
     cursor: pointer;
@@ -1163,12 +1161,6 @@
 
 @layer jokul.components {
   .jkl-checkbox {
-    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
-    --jkl-checkbox-error-color: #ab2e43;
-    --jkl-checkbox-error-color: light-dark(#ab2e43, #d79ba5);
-    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
-    --box-color: var(--jkl-color-border-strong);
-    --check-color: var(--jkl-color-border-strong);
     --text-color: var(--jkl-color-text-default);
     --background-color: transparent;
     font: var(--jkl-text-style-text-medium);
@@ -1251,7 +1243,7 @@
     --jkl-icon-fill: 1;
   }
   .jkl-checkbox__input[aria-invalid=true] + .jkl-checkbox__label::before {
-    color: var(--jkl-checkbox-error-color);
+    color: var(--jkl-color-error-background-contrast);
   }
   .jkl-checkbox + .jkl-checkbox {
     margin-top: 0.75em;
@@ -1333,7 +1325,7 @@
     padding-block-end: var(--jkl-unit-20);
   }
   .jkl-input-panel:has(input:hover) {
-    --outer-border-color: var(--jkl-color-border-default);
+    --outer-border-color: var(--jkl-color-border-strong);
     --outer-border-thickness: 0.125rem;
     cursor: pointer;
   }
@@ -1354,7 +1346,7 @@
   --gap: var(--jkl-unit-05);
   --text-color: var(--jkl-color-text-default);
   --border-color: var(--jkl-color-border-subdued);
-  --background-color: transparent;
+  --background-color: var(--jkl-color-background-container);
   --border-width: 0.0625rem;
   font: var(--jkl-text-style-text-small);
   font-weight: var(--jkl-font-weight-bold);
@@ -1397,9 +1389,9 @@
   opacity: 0.15;
 }
 .jkl-chip--filter[aria-pressed=true] {
-  --background-color: var(--jkl-color-background-action);
-  --text-color: var(--jkl-color-text-on-action);
-  --border-color: var(--text-color);
+  --background-color: var(--jkl-color-background-contrast);
+  --text-color: var(--jkl-color-text-on-contrast);
+  --border-color: var(--jkl-color-border-strong);
 }
 @media screen and (forced-colors: active) {
   .jkl-chip--filter[aria-pressed=true] {
@@ -1415,8 +1407,7 @@
 @layer jokul.components {
   .jkl-combobox {
     --jkl-combobox-button-padding: var(--jkl-unit-10);
-    --jkl-combobox-button-active-value-padding: var(--jkl-unit-10)
-        var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
+    --jkl-combobox-button-active-value-padding: var(--jkl-unit-10) var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
     --jkl-combobox-input-height: 3rem;
     --jkl-combobox-actions-right: var(--jkl-unit-10);
     --jkl-combobox-actions-top: var(--jkl-unit-05);
@@ -1464,8 +1455,7 @@
     display: flex;
     gap: 1ch;
     cursor: pointer;
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -1496,7 +1486,8 @@
   .jkl-combobox__wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
     --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
-    --placeholder-color: color(from currentColor sRGB r g b / 75%);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
   }
   .jkl-combobox__wrapper:hover, .jkl-combobox__wrapper:focus-within, .jkl-combobox__wrapper:has([data-focused=true]) {
     --border-color: var(--jkl-color-border-strong);
@@ -1536,7 +1527,7 @@
     width: var(--jkl-text-input-action-button-icon-size);
   }
   .jkl-combobox__wrapper > .jkl-text-input-action-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-combobox__wrapper > .jkl-text-input-action-button:hover {
@@ -1658,7 +1649,7 @@
     align-items: center;
     border: 0;
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-interactive);
+    background-color: transparent;
     transition-property: color, background-color;
     cursor: pointer;
     padding: var(--jkl-combobox-option-padding);
@@ -1667,7 +1658,7 @@
     line-height: var(--jkl-combobox-option-line-height);
   }
   .jkl-combobox__option:focus, .jkl-combobox__option:hover {
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
   .jkl-combobox__option-description {
     font: var(--jkl-text-style-text-small);
@@ -2014,10 +2005,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u2z8gf3 var(--duration) linear forwards;
+    animation: jkl-downcount-uw6amjs var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u2z8gf3 {
+  @keyframes jkl-downcount-uw6amjs {
     from {
       width: 100%;
     }
@@ -2200,12 +2191,12 @@
     font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-calendar-date-button:hover:not(:disabled) {
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true] {
-    background-color: var(--jkl-color-background-action);
-    color: var(--jkl-color-text-on-action);
+    background-color: var(--jkl-color-background-contrast);
+    color: var(--jkl-color-text-on-contrast);
     cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true]:hover {
@@ -2357,7 +2348,7 @@
 }
 @layer jokul.components {
   .jkl-expandable {
-    background-color: var(--jkl-color-background-page);
+    background-color: var(--jkl-color-background-container);
     border: 1px solid transparent;
     border-radius: var(--border-radius);
     box-sizing: border-box;
@@ -2419,6 +2410,9 @@
     inset: 0;
   }
   .jkl-expander {
+    --hover-background-color: color-mix(in srgb,
+            currentColor 15%,
+            transparent);
     box-sizing: border-box;
     background: none;
     appearance: none;
@@ -2458,7 +2452,7 @@
   }
   @media (hover: hover) {
     .jkl-expander:hover {
-      background-color: var(--jkl-color-background-interactive-selected);
+      background-color: var(--hover-background-color);
     }
   }
   .jkl-expander {
@@ -2501,12 +2495,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u2z8gfu 0.25s ease-out;
+    animation: jkl-show-uw6amk2 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u2z8gfu {
+  @keyframes jkl-show-uw6amk2 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2681,7 +2675,7 @@
     transform: translate(-50%, -50%);
   }
   .jkl-message__dismiss-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-message__dismiss-button:hover {
@@ -2719,7 +2713,7 @@
     --border-color: var(--jkl-color-success-border-subdued);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u2z8gg5 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uw6amkf var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2741,7 +2735,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-u2z8gg5 {
+  @keyframes jkl-dismiss-uw6amkf {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -2851,7 +2845,7 @@
     content: "radio_button_checked";
   }
   .jkl-radio-button__input[aria-invalid=true] + .jkl-radio-button__label::before {
-    color: var(--jkl-radio-button-error-color);
+    color: var(--jkl-color-error-text-default);
   }
   .jkl-radio-button + .jkl-radio-button, .jkl-dormant-form-support-label + .jkl-radio-button, .jkl-form-support-label + .jkl-radio-button {
     margin-top: 0.75lh;
@@ -2872,8 +2866,7 @@
 @layer jokul.components {
   .jkl-text-area-wrapper {
     overflow: hidden;
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -2904,7 +2897,8 @@
   .jkl-text-area-wrapper[data-invalid=true]:not(:focus-within):not(:has([data-focused=true])) {
     --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
-    --placeholder-color: color(from currentColor sRGB r g b / 75%);
+    --border-color: var(--jkl-color-error-border-default);
+    --placeholder-color: var(--jkl-color-error-text-subdued);
   }
   .jkl-text-area-wrapper:hover, .jkl-text-area-wrapper:focus-within, .jkl-text-area-wrapper:has([data-focused=true]) {
     --border-color: var(--jkl-color-border-strong);
@@ -2944,7 +2938,7 @@
     width: var(--jkl-text-input-action-button-icon-size);
   }
   .jkl-text-area-wrapper > .jkl-text-input-action-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-text-area-wrapper > .jkl-text-input-action-button:hover {
@@ -3380,7 +3374,7 @@
     height: min-content;
     border-radius: var(--jkl-unit-05);
     overflow: hidden;
-    background: var(--jkl-color-background-page);
+    background-color: var(--jkl-color-background-container);
   }
   .jkl-link-list ul .jkl-link-list-link {
     display: flex;
@@ -3417,7 +3411,7 @@
     transition-property: translate;
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible) {
-    background: var(--jkl-color-background-interactive-selected);
+    background-color: color-mix(in srgb, var(--text-color) 15%);
   }
   .jkl-link-list ul .jkl-link-list-link:is(:hover, :focus-visible)::after {
     translate: 4px 0;
@@ -3512,7 +3506,7 @@
   .jkl-menu-item {
     --jkl-menu-item-height: var(--jkl-unit-60);
     --jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-30);
-    --background-color: var(--jkl-color-background-interactive);
+    --background-color: transparent;
     background-color: var(--background-color);
     color: var(--jkl-color-text-default);
     text-decoration: none;
@@ -3571,7 +3565,7 @@
     flex-shrink: 0;
   }
   .jkl-menu-item:hover, .jkl-menu-item:focus-visible {
-    --background-color: var(--jkl-color-background-interactive-hover);
+    --background-color: color-mix(in srgb, currentColor 18%, transparent);
   }
 }
 @layer jokul.components {
@@ -3720,7 +3714,7 @@
   transition-property: translate;
 }
 .jkl-navlink--beta:hover, .jkl-navlink--beta:focus-visible {
-  background-color: var(--jkl-color-background-interactive-selected);
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
 }
 .jkl-navlink--beta:hover::after, .jkl-navlink--beta:focus-visible::after {
   translate: 4px 0;
@@ -3761,10 +3755,10 @@
     cursor: pointer;
     user-select: none;
     border-radius: 0.1875rem;
-    color: var(--jkl-color-text-interactive);
+    color: var(--jkl-color-text-default);
   }
   .jkl-pagination-button:hover:not(:focus) {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   .jkl-pagination-button:focus-visible {
     outline: 3px solid var(--jkl-color-border-strong);
@@ -3790,8 +3784,7 @@
     --border-radius: var(--jkl-border-radius-s);
     --min-option-height: min(var(--jkl-unit-60), 3rem);
     /* Vi må trekke fra bredden til rammen for å få riktig høyde */
-    --button-padding: calc(var(--jkl-unit-15) - var(--border-width))
-        calc(0.75em - var(--border-width));
+    --button-padding: calc(var(--jkl-unit-15) - var(--border-width)) calc(0.75em - var(--border-width));
     --option-padding: var(--jkl-unit-05) 0.75em;
     display: block;
     position: relative;
@@ -3956,7 +3949,7 @@
   }
   .jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option:hover {
     color: var(--jkl-color-text-default);
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
   }
   .jkl-select__option-description {
     color: var(--jkl-color-text-subdued);
@@ -4071,7 +4064,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u2z8ggn {
+  @keyframes jkl-downcount-uw6amkx {
     from {
       width: 100%;
     }
@@ -4359,7 +4352,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     position: relative;
     display: inline-flex;
     align-items: center;
-    background-color: var(--jkl-color-background-interactive);
+    background-color: transparent;
     border: var(--jkl-segmented-control-border-width) solid var(--jkl-color-border-subdued);
     border-radius: 0;
     margin-inline-end: calc(var(--jkl-segmented-control-border-width) * -1);
@@ -4373,7 +4366,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     padding: var(--jkl-segmented-controls-padding);
   }
   .jkl-segmented-control .jkl-segmented-control-item:hover {
-    background-color: var(--jkl-color-background-interactive-hover);
+    background-color: color-mix(in srgb, currentColor 6%, transparent);
     border-color: var(--jkl-color-border-default);
     z-index: 2;
   }
@@ -4453,8 +4446,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     --jkl-system-message-icon-padding: 0.1875rem 0 0 0;
     --jkl-system-message-content-padding: var(--jkl-unit-30);
     --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
-    --jkl-system-message-dismiss-button-margin: -0.40625rem -1.125rem -0.40625rem
-        auto;
+    --jkl-system-message-dismiss-button-margin: -0.40625rem
+    -1.125rem -0.40625rem auto;
     --jkl-system-message-message-margin: 0 var(--jkl-unit-20);
     --background-color: var(--jkl-color-background-container);
     --text-color: var(--jkl-color-text-default);
@@ -4547,7 +4540,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     }
   }
   .jkl-system-message__dismiss-button:hover {
-    color: var(--jkl-color-text-interactive-hover);
+    color: var(--jkl-color-text-subdued);
   }
   @media screen and (forced-colors: active) {
     .jkl-system-message__dismiss-button:hover {
@@ -4571,7 +4564,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u2z8ghh var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uw6amm6 var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -4609,7 +4602,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u2z8ghh {
+  @keyframes jkl-dismiss-uw6amm6 {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -4898,7 +4891,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     --jkl-table-row-border-color: var(--jkl-color-border-subdued);
     --jkl-table-row-border-none-color: transparent;
     --jkl-table-row-hover-border-color: var(--jkl-color-border-strong);
-    --jkl-table-row-highlight-color: var(--jkl-color-background-interactive-selected);
+    --jkl-table-row-highlight-color: color-mix(in srgb,
+            currentColor 15%,
+            transparent);
     border-bottom: solid 0.0625rem var(--jkl-table-row-border-color);
   }
   .jkl-table-head > .jkl-table-row {
@@ -5176,7 +5171,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-tablist {
     --padding-inline-end: var(--jkl-unit-50);
-    --text-color: var(--jkl-color-text-interactive);
+    --text-color: var(--jkl-color-text-default);
     --line-color: var(--jkl-color-border-subdued);
     --indicator-color: var(--jkl-color-border-default);
     scroll-snap-type: x proximity;
@@ -5248,7 +5243,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     }
   }
   .jkl-tab:hover {
-    --text-color: var(--jkl-color-text-interactive-hover);
+    --text-color: var(--jkl-color-text-subdued);
   }
   .jkl-tab:focus-visible {
     outline: 3px solid var(--jkl-color-border-strong);
@@ -5320,7 +5315,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-toast__progress {
-    --bar-color: var(--text-color);
+    --bar-color: var(--jkl-color-background-contrast);
     --track-color: transparent;
     border-radius: 0;
     position: absolute;
@@ -5412,12 +5407,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-u2z8gi8 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uw6ammo var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u2z8gi9 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uw6amnl var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-u2z8gi8 {
+  @keyframes jkl-entering-uw6ammo {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5427,7 +5422,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u2z8gi9 {
+  @keyframes jkl-exiting-uw6amnl {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -6898,7 +6893,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   --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-action);
+  --icon-color: var(--jkl-color-text-on-contrast);
   background: transparent;
   color: var(--text-color);
   padding: 0;
@@ -6938,14 +6933,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 .jkl-toggle-switch[aria-pressed=true], [aria-checked=true] > .jkl-toggle-switch {
-  --indicator-color: var(--jkl-color-background-action);
-  --knob-color: var(--jkl-color-text-on-action);
-  --knob-position: calc(
-      var(--jkl-toggle-switch-width) - var(
-              --jkl-toggle-switch-knob-size
-          ) - var(--switch-padding) *
-          2
-  );
+  --indicator-color: var(--jkl-color-background-contrast);
+  --knob-color: var(--jkl-color-text-on-contrast);
+  --knob-position: calc(var(--jkl-toggle-switch-width) - var(--jkl-toggle-switch-knob-size) - var(--switch-padding) * 2);
 }
 .jkl-toggle-switch[disabled] {
   cursor: revert;
@@ -7126,8 +7116,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
     padding: var(--jkl-unit-30);
     margin: var(--jkl-unit-05);
     position-anchor: --trigger;
-    background-color: var(--jkl-color-background-action);
-    color: var(--jkl-color-text-on-action);
+    background-color: var(--jkl-color-background-contrast);
+    color: var(--jkl-color-text-on-contrast);
     anchor-name: --help-box;
   }
   .jkl-help-popover[data-position=top] {