@fremtind/jokul 3.3.0 → 3.4.0

package/styles/components/combobox/combobox.css

@@ -1,80 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
-@media screen and (prefers-color-scheme: light) {
-  :root {
-    --jkl-combobox-border-color: #636060;
-    --jkl-combobox-text-color: #636060;
-    --jkl-combobox-background-color: transparent;
-    --jkl-combobox-open-color: #1b1917;
-    --jkl-combobox-open-background-color: #fff;
-    --jkl-combobox-focus-color: #1b1917;
-    --jkl-combobox-error-background-color: #f6b3b3;
-    --jkl-combobox-error-text-color: #636060;
-    --jkl-combobox-hover-option-color: #1b1917;
-    --jkl-combobox-hover-option-background-color: #f4f2ef;
-    --jkl-combobox-option-description-color: #636060;
-    --jkl-combobox-search-input-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-combobox-marked-value-border: #1b1917;
-    --jkl-combobox-marked-value-shadow: #f9f9f9;
-  }
-}
-[data-theme=light] {
-  --jkl-combobox-border-color: #636060;
-  --jkl-combobox-text-color: #636060;
-  --jkl-combobox-background-color: transparent;
-  --jkl-combobox-open-color: #1b1917;
-  --jkl-combobox-open-background-color: #fff;
-  --jkl-combobox-focus-color: #1b1917;
-  --jkl-combobox-error-background-color: #f6b3b3;
-  --jkl-combobox-error-text-color: #636060;
-  --jkl-combobox-hover-option-color: #1b1917;
-  --jkl-combobox-hover-option-background-color: #f4f2ef;
-  --jkl-combobox-option-description-color: #636060;
-  --jkl-combobox-search-input-selection-color: rgba(27, 25, 23, 0.2);
-  --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
-  --jkl-combobox-marked-value-border: #1b1917;
-  --jkl-combobox-marked-value-shadow: #f9f9f9;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --jkl-combobox-border-color: #c8c5c3;
-    --jkl-combobox-text-color: #c8c5c3;
-    --jkl-combobox-background-color: transparent;
-    --jkl-combobox-open-color: #f9f9f9;
-    --jkl-combobox-open-background-color: #313030;
-    --jkl-combobox-focus-color: #f9f9f9;
-    --jkl-combobox-error-background-color: #f6b3b3;
-    --jkl-combobox-error-text-color: #636060;
-    --jkl-combobox-hover-option-color: #f9f9f9;
-    --jkl-combobox-hover-option-background-color: #444141;
-    --jkl-combobox-option-description-color: #ece9e5;
-    --jkl-combobox-search-input-selection-color: rgba(249, 249, 249, 0.25);
-    --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
-    --jkl-combobox-marked-value-border: #f9f9f9;
-    --jkl-combobox-marked-value-shadow: #1b1917;
-  }
-}
-[data-theme=dark] {
-  --jkl-combobox-border-color: #c8c5c3;
-  --jkl-combobox-text-color: #c8c5c3;
-  --jkl-combobox-background-color: transparent;
-  --jkl-combobox-open-color: #f9f9f9;
-  --jkl-combobox-open-background-color: #313030;
-  --jkl-combobox-focus-color: #f9f9f9;
-  --jkl-combobox-error-background-color: #f6b3b3;
-  --jkl-combobox-error-text-color: #636060;
-  --jkl-combobox-hover-option-color: #f9f9f9;
-  --jkl-combobox-hover-option-background-color: #444141;
-  --jkl-combobox-option-description-color: #ece9e5;
-  --jkl-combobox-search-input-selection-color: rgba(249, 249, 249, 0.25);
-  --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
-  --jkl-combobox-marked-value-border: #f9f9f9;
-  --jkl-combobox-marked-value-shadow: #1b1917;
-}
-
 :root,
 [data-layout-density=comfortable],
 [data-density=comfortable] {
@@ -155,7 +81,7 @@
   cursor: pointer;
   padding: var(--jkl-combobox-button-padding);
   border-radius: 0.1875rem;
-  border: 0.0625rem solid var(--jkl-combobox-border-color);
+  border: 0.0625rem solid var(--jkl-color-border-input);
   box-shadow: 0 0 0 0.0625rem transparent;
   transition-timing-function: ease;
   transition-duration: 150ms;
@@ -167,15 +93,15 @@
 html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible) {
   outline: 3px solid var(--jkl-color-border-action);
   outline-offset: 3px;
-  background-color: var(--jkl-combobox-open-background-color);
+  background-color: var(--jkl-color-background-input-focus);
 }
 
 .jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible) {
   outline: none;
 }
 .jkl-combobox__wrapper:hover {
-  border-color: var(--jkl-combobox-focus-color);
-  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color);
+  border-color: var(--jkl-color-border-input-focus);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-color-border-input-focus);
 }
 .jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
   transform: translateY(calc(-50% + 0.1875rem));
@@ -190,8 +116,8 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: var(--jkl-combobox-background-color);
-  color: var(--jkl-combobox-text-color);
+  background-color: var(--jkl-color-background-input-base);
+  color: var(--jkl-color-text-default);
   cursor: pointer;
   text-align: left;
   display: flex;
@@ -230,12 +156,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   top: 100%;
   overflow-y: auto;
   position: absolute;
-  color: var(--jkl-combobox-text-color);
+  color: var(--jkl-color-text-default);
   z-index: 7000;
   left: -0.0625rem;
   right: -0.0625rem;
-  background-color: var(--jkl-combobox-open-background-color);
-  border: 0.125rem solid var(--jkl-combobox-focus-color);
+  background-color: var(--jkl-color-background-container-high);
+  border: 0.125rem solid var(--jkl-color-border-input-focus);
   border-radius: 0 0 0.1875rem 0.1875rem;
   box-sizing: border-box;
   max-height: calc((var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
@@ -249,18 +175,16 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   display: flex;
   align-items: center;
   border: 0;
-  background-color: var(--jkl-combobox-open-background-color);
+  background-color: var(--jkl-color-background-interactive);
   transition-property: color, background-color;
   cursor: pointer;
   padding: var(--jkl-combobox-option-padding);
-  color: var(--jkl-combobox-open-color);
   width: 100%;
   text-align: left;
   line-height: var(--jkl-combobox-option-line-height);
 }
 .jkl-combobox__option:focus, .jkl-combobox__option:hover {
-  color: var(--jkl-combobox-hover-option-color);
-  background-color: var(--jkl-combobox-hover-option-background-color);
+  background-color: var(--jkl-color-background-interactive-hover);
 }
 .jkl-combobox__option-description {
   font-size: 1rem;
@@ -269,16 +193,13 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
   --jkl-icon-weight: 300;
   --jkl-icon-size: 1.25rem;
   --jkl-icon-opsz: 20;
-  color: var(--jkl-combobox-option-description-color);
+  color: var(--jkl-color-text-subdued);
   display: block;
   width: 100%;
 }
 .jkl-combobox__option--selected {
   justify-content: space-between;
 }
-.jkl-combobox__option--selected:hover {
-  background-color: var(--jkl-combobox-hover-option-background-color);
-}
 .jkl-combobox__no-option {
   padding: var(--jkl-combobox-option-padding);
 }
@@ -297,24 +218,17 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
 .jkl-combobox__chips .jkl-chip {
   white-space: break-spaces;
 }
-.jkl-combobox__chips .jkl-chip__marked {
-  border-radius: 6px;
-  box-shadow: 0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;
-  box-sizing: border-box;
-  border: 1px solid var(--jkl-combobox-marked-value-border);
-  margin: 4px;
-}
 .jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger {
   font-weight: 700;
 }
 .jkl-combobox--invalid .jkl-combobox__search-input,
 .jkl-combobox--invalid .jkl-combobox__wrapper {
-  background-color: var(--jkl-combobox-error-background-color);
+  background-color: var(--jkl-color-background-alert-error);
 }
 .jkl-combobox--invalid .jkl-combobox__search-input,
 .jkl-combobox--invalid .jkl-combobox__button,
 .jkl-combobox--invalid .jkl-combobox__wrapper {
-  color: var(--jkl-combobox-error-text-color);
+  color: var(--jkl-color-text-on-alert);
 }
 .jkl-combobox--menu-closed .jkl-combobox__search-input {
   position: absolute;

package/styles/components/combobox/combobox.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:#1b191733;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}}[data-theme=light]{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:#1b191733;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:#f9f9f940;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}}[data-theme=dark]{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:#f9f9f940;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-font-size:var(--jkl-body-font-size);--jkl-combobox-line-height:var(--jkl-body-line-height);--jkl-combobox-font-weight:var(--jkl-body-font-weight);--jkl-combobox-button-padding:0.5rem;--jkl-combobox-button-active-value-padding:0.5rem;--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:0.5rem;--jkl-combobox-actions-top:0.25rem;--jkl-combobox-chips-gap:4px;--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-combobox-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-combobox-option-line-height:2rem;--jkl-combobox-input-padding:3.75rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-input-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-combobox-font-size:var(--jkl-small-font-size);--jkl-combobox-line-height:var(--jkl-small-line-height);--jkl-combobox-font-weight:var(--jkl-small-font-weight);--jkl-combobox-button-padding:calc(var(--jkl-unit-10)*0.5);--jkl-combobox-button-active-value-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-input-height:2rem;--jkl-combobox-actions-right:0;--jkl-combobox-actions-top:0.0625rem;--jkl-combobox-chips-gap:1px;--jkl-combobox-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-native-padding:calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-combobox-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-option-line-height:1.5rem;--jkl-combobox-input-padding:calc(var(--jkl-unit-10)*1.5);--jkl-combobox-search-input-height:1.25rem}.jkl-combobox{border-style:none;position:relative}.jkl-combobox,.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert}.jkl-combobox,.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{border:.0625rem solid var(--jkl-combobox-border-color);border-radius:.1875rem;box-shadow:0 0 0 .0625rem #0000;cursor:pointer;display:flex;gap:1ch;max-width:100%;padding:var(--jkl-combobox-button-padding);position:relative;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease}.jkl-combobox__wrapper--active-value{padding:var(--jkl-combobox-button-active-value-padding)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible){background-color:var(--jkl-combobox-open-background-color);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible){outline:none}.jkl-combobox__wrapper:hover{border-color:var(--jkl-combobox-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-combobox-focus-color)}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__button{padding:0}.jkl-combobox__button,.jkl-combobox__search-input{background-color:var(--jkl-combobox-background-color);color:var(--jkl-combobox-text-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-font-size);font-weight:var(--jkl-combobox-font-weight);line-height:var(--jkl-combobox-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;width:100%}.jkl-combobox__search-input{align-self:end;border:none;flex:1 1 1ch;max-height:var(--jkl-combobox-search-input-height);outline:none}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-combobox__menu{border:.125rem solid var(--jkl-combobox-focus-color);border-radius:0 0 .1875rem .1875rem;box-sizing:border-box;color:var(--jkl-combobox-text-color);left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__menu,.jkl-combobox__option{background-color:var(--jkl-combobox-open-background-color)}.jkl-combobox__option{align-items:center;border:0;color:var(--jkl-combobox-open-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-text-font-size);font-weight:var(--jkl-combobox-text-font-weight);line-height:var(--jkl-combobox-text-line-height);line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-combobox-hover-option-background-color);color:var(--jkl-combobox-hover-option-color)}.jkl-combobox__option-description{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;color:var(--jkl-combobox-option-description-color);display:block;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__option--selected:hover{background-color:var(--jkl-combobox-hover-option-background-color)}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__actions{display:flex;gap:calc(var(--jkl-unit-10)*.5);-webkit-margin-before:var(--jkl-combobox-actions-top);margin-block-start:var(--jkl-combobox-actions-top)}.jkl-combobox__chips{align-items:center;display:flex;flex-wrap:wrap;gap:var(--jkl-combobox-chips-gap);width:100%}.jkl-combobox__chips .jkl-chip{white-space:break-spaces}.jkl-combobox__chips .jkl-chip__marked{border:1px solid var(--jkl-combobox-marked-value-border);border-radius:6px;box-shadow:0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;box-sizing:border-box;margin:4px}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-combobox-error-background-color)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-combobox-error-text-color)}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:initial;padding-right:0;position:absolute;width:94%}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions{transform:translateY(-.1875rem)}.jkl-combobox--menu-open .jkl-combobox__search-input{cursor:text}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-font-size:var(--jkl-body-font-size);--jkl-combobox-line-height:var(--jkl-body-line-height);--jkl-combobox-font-weight:var(--jkl-body-font-weight);--jkl-combobox-button-padding:0.5rem;--jkl-combobox-button-active-value-padding:0.5rem;--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:0.5rem;--jkl-combobox-actions-top:0.25rem;--jkl-combobox-chips-gap:4px;--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 calc(var(--jkl-unit-10)*5) 0 0.5rem;--jkl-combobox-option-padding:0.5rem calc(var(--jkl-unit-10)*1.5);--jkl-combobox-option-line-height:2rem;--jkl-combobox-input-padding:3.75rem;--jkl-combobox-search-input-height:1.75rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-input-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-combobox-font-size:var(--jkl-small-font-size);--jkl-combobox-line-height:var(--jkl-small-line-height);--jkl-combobox-font-weight:var(--jkl-small-font-weight);--jkl-combobox-button-padding:calc(var(--jkl-unit-10)*0.5);--jkl-combobox-button-active-value-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-input-height:2rem;--jkl-combobox-actions-right:0;--jkl-combobox-actions-top:0.0625rem;--jkl-combobox-chips-gap:1px;--jkl-combobox-search-input-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-native-padding:calc(var(--jkl-unit-10)*3) calc(var(--jkl-unit-10)*0.5) calc(var(--jkl-unit-10)*0.5);--jkl-combobox-option-padding:calc(var(--jkl-unit-10)*0.5) 0.5rem;--jkl-combobox-option-line-height:1.5rem;--jkl-combobox-input-padding:calc(var(--jkl-unit-10)*1.5);--jkl-combobox-search-input-height:1.25rem}.jkl-combobox{border-style:none;position:relative}.jkl-combobox,.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert}.jkl-combobox,.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox .jkl-combobox__option:focus{outline:none}.jkl-combobox__wrapper{border:.0625rem solid var(--jkl-color-border-input);border-radius:.1875rem;box-shadow:0 0 0 .0625rem #0000;cursor:pointer;display:flex;gap:1ch;max-width:100%;padding:var(--jkl-combobox-button-padding);position:relative;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease}.jkl-combobox__wrapper--active-value{padding:var(--jkl-combobox-button-active-value-padding)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrapper:has(:focus-visible){background-color:var(--jkl-color-background-input-focus);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-combobox__wrapper:has(.jkl-icon-button:focus-visible){outline:none}.jkl-combobox__wrapper:hover{border-color:var(--jkl-color-border-input-focus);box-shadow:0 0 0 .0625rem var(--jkl-color-border-input-focus)}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__button{padding:0}.jkl-combobox__button,.jkl-combobox__search-input{background-color:var(--jkl-color-background-input-base);color:var(--jkl-color-text-default);cursor:pointer;display:flex;font-size:var(--jkl-combobox-font-size);font-weight:var(--jkl-combobox-font-weight);line-height:var(--jkl-combobox-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;width:100%}.jkl-combobox__search-input{align-self:end;border:none;flex:1 1 1ch;max-height:var(--jkl-combobox-search-input-height);outline:none}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{fill:CanvasText;stroke:CanvasText}}.jkl-combobox__menu{background-color:var(--jkl-color-background-container-high);border:.125rem solid var(--jkl-color-border-input-focus);border-radius:0 0 .1875rem .1875rem;box-sizing:border-box;color:var(--jkl-color-text-default);left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__option{align-items:center;background-color:var(--jkl-color-background-interactive);border:0;cursor:pointer;display:flex;font-size:var(--jkl-combobox-text-font-size);font-weight:var(--jkl-combobox-text-font-weight);line-height:var(--jkl-combobox-text-line-height);line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-color-background-interactive-hover)}.jkl-combobox__option-description{font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;color:var(--jkl-color-text-subdued);display:block;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__actions{display:flex;gap:calc(var(--jkl-unit-10)*.5);-webkit-margin-before:var(--jkl-combobox-actions-top);margin-block-start:var(--jkl-combobox-actions-top)}.jkl-combobox__chips{align-items:center;display:flex;flex-wrap:wrap;gap:var(--jkl-combobox-chips-gap);width:100%}.jkl-combobox__chips .jkl-chip{white-space:break-spaces}.jkl-combobox__chips .jkl-chip .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-color-background-alert-error)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-color-text-on-alert)}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:initial;padding-right:0;position:absolute;width:94%}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover .jkl-combobox__actions{transform:translateY(-.1875rem)}.jkl-combobox--menu-open .jkl-combobox__search-input{cursor:text}

package/styles/components/combobox/combobox.scss

@@ -3,54 +3,6 @@
 @use "../../core/jkl";
 @use "../../core/jkl/colors";
 
-$_combobox-focus-color: jkl.$color-granitt;
-$_combobox-search-input-selection-color: color.scale(
-    $color: $_combobox-focus-color,
-    $alpha: -80%,
-);
-
-$_combobox-focus-color--inverted: jkl.$color-snohvit;
-$_combobox-search-input-selection-color--inverted: color.scale(
-    $color: $_combobox-focus-color--inverted,
-    $alpha: -75%,
-);
-
-@include jkl.light-mode-variables {
-    --jkl-combobox-border-color: #{jkl.$color-stein};
-    --jkl-combobox-text-color: #{jkl.$color-stein};
-    --jkl-combobox-background-color: transparent;
-    --jkl-combobox-open-color: #{jkl.$color-granitt};
-    --jkl-combobox-open-background-color: #{jkl.$color-hvit};
-    --jkl-combobox-focus-color: #{$_combobox-focus-color};
-    --jkl-combobox-error-background-color: #{jkl.$color-feil};
-    --jkl-combobox-error-text-color: #{jkl.$color-stein};
-    --jkl-combobox-hover-option-color: #{jkl.$color-granitt};
-    --jkl-combobox-hover-option-background-color: #{jkl.$color-sand};
-    --jkl-combobox-option-description-color: #{jkl.$color-stein};
-    --jkl-combobox-search-input-selection-color: #{$_combobox-search-input-selection-color};
-    --jkl-combobox-search-input-error-selection-color: #{$_combobox-search-input-selection-color};
-    --jkl-combobox-marked-value-border: #{jkl.$color-granitt};
-    --jkl-combobox-marked-value-shadow: #{jkl.$color-snohvit};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-combobox-border-color: #{jkl.$color-svaberg};
-    --jkl-combobox-text-color: #{jkl.$color-svaberg};
-    --jkl-combobox-background-color: transparent;
-    --jkl-combobox-open-color: #{jkl.$color-snohvit};
-    --jkl-combobox-open-background-color: #{jkl.$color-skifer};
-    --jkl-combobox-focus-color: #{$_combobox-focus-color--inverted};
-    --jkl-combobox-error-background-color: #{jkl.$color-feil};
-    --jkl-combobox-error-text-color: #{jkl.$color-stein};
-    --jkl-combobox-hover-option-color: #{jkl.$color-snohvit};
-    --jkl-combobox-hover-option-background-color: #{jkl.$color-fjellgra};
-    --jkl-combobox-option-description-color: #{jkl.$color-dis};
-    --jkl-combobox-search-input-selection-color: #{$_combobox-search-input-selection-color--inverted};
-    --jkl-combobox-search-input-error-selection-color: #{$_combobox-search-input-selection-color};
-    --jkl-combobox-marked-value-border: #{jkl.$color-snohvit};
-    --jkl-combobox-marked-value-shadow: #{jkl.$color-granitt};
-}
-
 @include jkl.comfortable-density-variables {
     @include jkl.declare-font-variables("jkl-combobox", "body");
 
@@ -107,7 +59,7 @@ $_combobox-search-input-selection-color--inverted: color.scale(
 
         padding: var(--jkl-combobox-button-padding);
         border-radius: jkl.rem(3px);
-        border: jkl.rem(1px) solid var(--jkl-combobox-border-color);
+        border: jkl.rem(1px) solid var(--jkl-color-border-input);
         box-shadow: 0 0 0 jkl.rem(1px) transparent;
 
         @include jkl.motion;
@@ -120,7 +72,7 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         @include jkl.keyboard-navigation {
             &:has(:focus-visible) {
                 @include jkl.focus-outline;
-                background-color: var(--jkl-combobox-open-background-color);
+                background-color: var(--jkl-color-background-input-focus);
             }
         }
 
@@ -129,8 +81,8 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         }
 
         &:hover {
-            border-color: var(--jkl-combobox-focus-color);
-            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-combobox-focus-color);
+            border-color: var(--jkl-color-border-input-focus);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
 
             & ~ .jkl-combobox__arrow {
                 transform: translateY(calc(-50% + #{jkl.rem(3px)}));
@@ -149,8 +101,8 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         overflow: hidden;
         text-overflow: ellipsis;
 
-        background-color: var(--jkl-combobox-background-color);
-        color: var(--jkl-combobox-text-color);
+        background-color: var(--jkl-color-background-input-base);
+        color: var(--jkl-color-text-default);
         cursor: pointer;
         text-align: left;
         display: flex;
@@ -174,10 +126,8 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         @include jkl.motion;
         transition-property: transform, color;
 
-        @include jkl.forced-colors-svg-fallback(
-            $stroke: CanvasText,
-            $fill: CanvasText
-        );
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText,
+            $fill: CanvasText);
     }
 
     &__menu {
@@ -186,18 +136,15 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         top: 100%;
         overflow-y: auto;
         position: absolute;
-        color: var(--jkl-combobox-text-color);
+        color: var(--jkl-color-text-default);
         z-index: jkl.$z-index--dropdown;
         left: jkl.rem(-1px);
         right: jkl.rem(-1px);
-        background-color: var(--jkl-combobox-open-background-color);
-        border: jkl.rem(2px) solid var(--jkl-combobox-focus-color);
+        background-color: var(--jkl-color-background-container-high);
+        border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
         border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
         box-sizing: border-box;
-        max-height: calc(
-            calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) *
-                var(--jkl-combobox-input-height)
-        );
+        max-height: calc(calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
     }
 
     &__option {
@@ -206,24 +153,22 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         display: flex;
         align-items: center;
         border: 0;
-        background-color: var(--jkl-combobox-open-background-color);
+        background-color: var(--jkl-color-background-interactive);
         transition-property: color, background-color;
         cursor: pointer;
         padding: var(--jkl-combobox-option-padding);
-        color: var(--jkl-combobox-open-color);
         width: 100%;
         text-align: left;
         line-height: var(--jkl-combobox-option-line-height);
 
         &:focus,
         &:hover {
-            color: var(--jkl-combobox-hover-option-color);
-            background-color: var(--jkl-combobox-hover-option-background-color);
+            background-color: var(--jkl-color-background-interactive-hover);
         }
 
         &-description {
             @include jkl.text-style("small");
-            color: var(--jkl-combobox-option-description-color);
+            color: var(--jkl-color-text-subdued);
             display: block;
             width: 100%;
         }
@@ -231,10 +176,6 @@ $_combobox-search-input-selection-color--inverted: color.scale(
 
     &__option--selected {
         justify-content: space-between;
-
-        &:hover {
-            background-color: var(--jkl-combobox-hover-option-background-color);
-        }
     }
 
     &__no-option {
@@ -257,15 +198,6 @@ $_combobox-search-input-selection-color--inverted: color.scale(
         .jkl-chip {
             white-space: break-spaces;
 
-            &__marked {
-                border-radius: 6px;
-                box-shadow: 0 0 0 2px var(--jkl-combobox-marked-value-shadow)
-                    inset;
-                box-sizing: border-box;
-                border: 1px solid var(--jkl-combobox-marked-value-border);
-                margin: 4px;
-            }
-
             .jkl-tooltip-trigger {
                 font-weight: 700;
             }
@@ -275,13 +207,13 @@ $_combobox-search-input-selection-color--inverted: color.scale(
     &--invalid {
         .jkl-combobox__search-input,
         .jkl-combobox__wrapper {
-            background-color: var(--jkl-combobox-error-background-color);
+            background-color: var(--jkl-color-background-alert-error);
         }
 
         .jkl-combobox__search-input,
         .jkl-combobox__button,
         .jkl-combobox__wrapper {
-            color: var(--jkl-combobox-error-text-color);
+            color: var(--jkl-color-text-on-alert);
         }
     }
 
@@ -303,4 +235,4 @@ $_combobox-search-input-selection-color--inverted: color.scale(
             cursor: text;
         }
     }
-}
+}

package/styles/components/countdown/countdown.css

@@ -26,10 +26,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-upfgrrk var(--duration) linear forwards;
+    animation: jkl-downcount-ukoxa7c var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-upfgrrk {
+  @keyframes jkl-downcount-ukoxa7c {
     from {
       width: 100%;
     }

package/styles/components/countdown/countdown.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-upfgrrk var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-upfgrrk{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-ukoxa7c var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-ukoxa7c{0%{width:100%}to{width:0}}}

package/styles/components/datepicker/_calendar-date-button.scss

@@ -1,21 +1,5 @@
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --jkl-calendar-adjacent-month-color: #{jkl.$color-stein};
-    --jkl-calendar-disabled-day-color: #{jkl.$color-svaberg};
-    --jkl-calendar-active-day-color: #{jkl.$color-hvit};
-    --jkl-calendar-hover-date-background-color: #{jkl.$color-dis};
-    --jkl-calendar-selected-date-background-color: #{jkl.$color-granitt};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-calendar-adjacent-month-color: #{jkl.$color-svaberg};
-    --jkl-calendar-disabled-day-color: #{jkl.$color-stein};
-    --jkl-calendar-active-day-color: #{jkl.$color-svart};
-    --jkl-calendar-hover-date-background-color: #{jkl.$color-stein};
-    --jkl-calendar-selected-date-background-color: #{jkl.$color-snohvit};
-}
-
 @include jkl.comfortable-density-variables {
     --jkl-calendar-date-size: #{jkl.rem(38px)};
 
@@ -67,7 +51,7 @@
     &[data-adjacent="true"] {
         @include jkl.text-style("small");
         padding: 0; // reset vertical alignment of text
-        color: var(--jkl-calendar-adjacent-month-color);
+        color: var(--jkl-color-text-subdued);
     }
 
     &[aria-current="date"] {
@@ -76,14 +60,14 @@
 
     // Other dates
     &:hover:not(:disabled) {
-        background-color: var(--jkl-calendar-hover-date-background-color);
+        background-color: var(--jkl-color-background-interactive-hover);
         cursor: pointer;
     }
 
     // Selected date
     &[aria-pressed="true"] {
-        background-color: var(--jkl-calendar-selected-date-background-color);
-        color: var(--jkl-calendar-active-day-color);
+        background-color: var(--jkl-color-background-container-inverted);
+        color: var(--jkl-color-text-inverted);
         cursor: pointer;
 
         &:hover {
@@ -92,10 +76,10 @@
     }
 
     &:disabled {
-        color: var(--jkl-calendar-disabled-day-color);
+        color: color(from var(--jkl-color-text-subdued) srgb r g b / 70%);
     }
 
     &:focus-visible {
         @include jkl.focus-outline;
     }
-}
+}

package/styles/components/datepicker/_calendar-navigation.scss

@@ -1,15 +1,5 @@
 @use "../../core/jkl";
 
-@include jkl.light-mode-variables {
-    --jkl-calendar-disabled-day-color: #{jkl.$color-svaberg};
-    --jkl-calendar-navigation-arrow-focus-color: #{jkl.$color-stein};
-}
-
-@include jkl.dark-mode-variables {
-    --jkl-calendar-disabled-day-color: #{jkl.$color-stein};
-    --jkl-calendar-navigation-arrow-focus-color: #{jkl.$color-svaberg};
-}
-
 .jkl-calendar-navigation {
     border: 0;
     padding: 0;
@@ -19,33 +9,4 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-
-    &__arrow {
-        display: inline-flex;
-        position: relative;
-        cursor: pointer;
-        padding: 0;
-        margin: 0;
-        margin-left: jkl.rem(-8px);
-        justify-content: center;
-        align-items: center;
-        background-color: transparent;
-        color: var(--jkl-color);
-        width: jkl.rem(40px);
-        height: jkl.rem(40px);
-
-        @include jkl.reset-outline;
-
-        &:hover {
-            color: var(--jkl-calendar-navigation-arrow-focus-color);
-        }
-
-        &:focus-visible {
-            @include jkl.focus-outline($offset: -2px);
-        }
-
-        &:disabled {
-            color: var(--jkl-calendar-disabled-day-color);
-        }
-    }
-}
+}