@oslokommune/punkt-css 13.16.0 → 13.18.0

package/dist/css/pkt.css

@@ -380,6 +380,22 @@ input[type=search]::-webkit-search-decoration {
   --pkt-color-text-action-active: #1f42aa;
   --pkt-color-text-action-hover: #1f42aa;
   --pkt-color-text-action-normal: #2a2859;
+  --pkt-color-input-background-normal: #ffffff;
+  --pkt-color-input-border-active: #1f42aa;
+  --pkt-color-input-border-disabled: #b3b3b3;
+  --pkt-color-input-border-error: #ff8274;
+  --pkt-color-input-border-hover: #1f42aa;
+  --pkt-color-input-border-normal: #2a2859;
+  --pkt-color-input-text-active: #1f42aa;
+  --pkt-color-input-text-disabled: #808080;
+  --pkt-color-input-text-hover: #1f42aa;
+  --pkt-color-input-text-normal: #2a2859;
+  --pkt-color-input-text-error: #ff8274;
+  --pkt-color-input-text-open: #ffffff;
+  --pkt-color-input-check-background: #ffffff;
+  --pkt-color-input-check-border: #2a2859;
+  --pkt-color-input-check-text-active: #1f42aa;
+  --pkt-color-input-check-text-hover: #1f42aa;
   --color-blue: #6fe9ff;
   --color-blue-light: #b3f5ff;
   --color-blue-dark: #2a2859;
@@ -1188,6 +1204,150 @@ input[type=search]::-webkit-search-decoration {
 :root .pkt-color-border-text-action-normal {
   border-color: var(--pkt-color-text-action-normal) !important;
 }
+:root .pkt-color-bg-input-background-normal {
+  background-color: var(--pkt-color-input-background-normal) !important;
+}
+:root .pkt-color-txt-input-background-normal {
+  color: var(--pkt-color-input-background-normal) !important;
+}
+:root .pkt-color-border-input-background-normal {
+  border-color: var(--pkt-color-input-background-normal) !important;
+}
+:root .pkt-color-bg-input-border-active {
+  background-color: var(--pkt-color-input-border-active) !important;
+}
+:root .pkt-color-txt-input-border-active {
+  color: var(--pkt-color-input-border-active) !important;
+}
+:root .pkt-color-border-input-border-active {
+  border-color: var(--pkt-color-input-border-active) !important;
+}
+:root .pkt-color-bg-input-border-disabled {
+  background-color: var(--pkt-color-input-border-disabled) !important;
+}
+:root .pkt-color-txt-input-border-disabled {
+  color: var(--pkt-color-input-border-disabled) !important;
+}
+:root .pkt-color-border-input-border-disabled {
+  border-color: var(--pkt-color-input-border-disabled) !important;
+}
+:root .pkt-color-bg-input-border-error {
+  background-color: var(--pkt-color-input-border-error) !important;
+}
+:root .pkt-color-txt-input-border-error {
+  color: var(--pkt-color-input-border-error) !important;
+}
+:root .pkt-color-border-input-border-error {
+  border-color: var(--pkt-color-input-border-error) !important;
+}
+:root .pkt-color-bg-input-border-hover {
+  background-color: var(--pkt-color-input-border-hover) !important;
+}
+:root .pkt-color-txt-input-border-hover {
+  color: var(--pkt-color-input-border-hover) !important;
+}
+:root .pkt-color-border-input-border-hover {
+  border-color: var(--pkt-color-input-border-hover) !important;
+}
+:root .pkt-color-bg-input-border-normal {
+  background-color: var(--pkt-color-input-border-normal) !important;
+}
+:root .pkt-color-txt-input-border-normal {
+  color: var(--pkt-color-input-border-normal) !important;
+}
+:root .pkt-color-border-input-border-normal {
+  border-color: var(--pkt-color-input-border-normal) !important;
+}
+:root .pkt-color-bg-input-text-active {
+  background-color: var(--pkt-color-input-text-active) !important;
+}
+:root .pkt-color-txt-input-text-active {
+  color: var(--pkt-color-input-text-active) !important;
+}
+:root .pkt-color-border-input-text-active {
+  border-color: var(--pkt-color-input-text-active) !important;
+}
+:root .pkt-color-bg-input-text-disabled {
+  background-color: var(--pkt-color-input-text-disabled) !important;
+}
+:root .pkt-color-txt-input-text-disabled {
+  color: var(--pkt-color-input-text-disabled) !important;
+}
+:root .pkt-color-border-input-text-disabled {
+  border-color: var(--pkt-color-input-text-disabled) !important;
+}
+:root .pkt-color-bg-input-text-hover {
+  background-color: var(--pkt-color-input-text-hover) !important;
+}
+:root .pkt-color-txt-input-text-hover {
+  color: var(--pkt-color-input-text-hover) !important;
+}
+:root .pkt-color-border-input-text-hover {
+  border-color: var(--pkt-color-input-text-hover) !important;
+}
+:root .pkt-color-bg-input-text-normal {
+  background-color: var(--pkt-color-input-text-normal) !important;
+}
+:root .pkt-color-txt-input-text-normal {
+  color: var(--pkt-color-input-text-normal) !important;
+}
+:root .pkt-color-border-input-text-normal {
+  border-color: var(--pkt-color-input-text-normal) !important;
+}
+:root .pkt-color-bg-input-text-error {
+  background-color: var(--pkt-color-input-text-error) !important;
+}
+:root .pkt-color-txt-input-text-error {
+  color: var(--pkt-color-input-text-error) !important;
+}
+:root .pkt-color-border-input-text-error {
+  border-color: var(--pkt-color-input-text-error) !important;
+}
+:root .pkt-color-bg-input-text-open {
+  background-color: var(--pkt-color-input-text-open) !important;
+}
+:root .pkt-color-txt-input-text-open {
+  color: var(--pkt-color-input-text-open) !important;
+}
+:root .pkt-color-border-input-text-open {
+  border-color: var(--pkt-color-input-text-open) !important;
+}
+:root .pkt-color-bg-input-check-background {
+  background-color: var(--pkt-color-input-check-background) !important;
+}
+:root .pkt-color-txt-input-check-background {
+  color: var(--pkt-color-input-check-background) !important;
+}
+:root .pkt-color-border-input-check-background {
+  border-color: var(--pkt-color-input-check-background) !important;
+}
+:root .pkt-color-bg-input-check-border {
+  background-color: var(--pkt-color-input-check-border) !important;
+}
+:root .pkt-color-txt-input-check-border {
+  color: var(--pkt-color-input-check-border) !important;
+}
+:root .pkt-color-border-input-check-border {
+  border-color: var(--pkt-color-input-check-border) !important;
+}
+:root .pkt-color-bg-input-check-text-active {
+  background-color: var(--pkt-color-input-check-text-active) !important;
+}
+:root .pkt-color-txt-input-check-text-active {
+  color: var(--pkt-color-input-check-text-active) !important;
+}
+:root .pkt-color-border-input-check-text-active {
+  border-color: var(--pkt-color-input-check-text-active) !important;
+}
+:root .pkt-color-bg-input-check-text-hover {
+  background-color: var(--pkt-color-input-check-text-hover) !important;
+}
+:root .pkt-color-txt-input-check-text-hover {
+  color: var(--pkt-color-input-check-text-hover) !important;
+}
+:root .pkt-color-border-input-check-text-hover {
+  border-color: var(--pkt-color-input-check-text-hover) !important;
+}
 :root .bg-color-blue {
   background-color: #6fe9ff !important;
 }
@@ -1540,6 +1700,22 @@ input[type=search]::-webkit-search-decoration {
   --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
   --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
   --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
 }
 
 /*
@@ -14218,7 +14394,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.16/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.18/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -18151,33 +18327,6 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
  *
  *
  */
-.pkt-input-check, .pkt-input-check__input, .pkt-input-check__input-checkbox, .pkt-input-check__input--tile {
-  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
-  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
-  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
-  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
-  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
-}
-[data-mode=dark] .pkt-input-check, [data-mode=dark] .pkt-input-check__input, [data-mode=dark] .pkt-input-check__input-checkbox, [data-mode=dark] .pkt-input-check__input--tile {
-  --pkt-color-input-background-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
-  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
-  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
-  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
-  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
-  --pkt-color-input-text-active: var(--pkt-color-brand-blue-500);
-  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
-  --pkt-color-input-text-hover: var(--pkt-color-brand-blue-500);
-  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
-}
-
 .pkt-input-check {
   display: flex;
   flex-direction: column;
@@ -18208,11 +18357,11 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   line-height: 1.375rem;
 }
 .pkt-input-check__input:hover > .pkt-input-check__input-checkbox:not(:disabled) + .pkt-input-check__input-label {
-  color: var(--pkt-color-input-text-hover);
+  color: var(--pkt-color-input-check-text-hover);
 }
 .pkt-input-check__input-checkbox {
   appearance: none;
-  background-color: var(--pkt-color-input-background-normal);
+  background-color: var(--pkt-color-input-check-background);
   border: 2px solid var(--pkt-color-input-check-border);
   width: 1.5rem;
   height: 1.5rem;
@@ -18232,7 +18381,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   display: block;
   content: "";
   border: 2px solid var(--pkt-color-input-check-border);
-  background-color: var(--pkt-color-input-background-normal);
+  background-color: var(--pkt-color-input-check-background);
   position: absolute;
   top: -1px;
   bottom: -1px;
@@ -18249,7 +18398,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:focus-visible:not(:disabled) + .pkt-input-check__input-label {
-  color: var(--pkt-color-input-text-hover);
+  color: var(--pkt-color-input-check-text-hover);
 }
 .pkt-input-check__input-checkbox[type=checkbox]:hover {
   --pkt-color-input-check-border: var(--pkt-color-input-border-hover);
@@ -18267,8 +18416,34 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
   outline-color: var(--pkt-color-input-border-hover);
 }
+.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.18/icons/minus-sign.svg);
+  position: relative;
+  background-color: var(--pkt-color-input-border-normal);
+}
+.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+.pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]):after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 24px;
+  background-image: var(--svg);
+  background-repeat: no-repeat;
+  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
+}
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.16/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.18/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18301,7 +18476,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
 }
 .pkt-input-check__input-checkbox:checked[type=radio] {
   background-color: var(--pkt-color-input-border-normal);
-  border: 3px solid var(--pkt-color-input-background-normal);
+  border: 3px solid var(--pkt-color-input-check-background);
   box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox]:focus-visible {
@@ -18312,7 +18487,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
 }
 .pkt-input-check__input-checkbox:checked[type=radio]:focus-visible {
   background-color: var(--pkt-color-input-border-active);
-  border: 3px solid var(--pkt-color-input-background-normal);
+  border: 3px solid var(--pkt-color-input-check-background);
   outline: none;
   box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
 }
@@ -18326,7 +18501,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.16/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.18/icons/check-medium.svg);
   --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
   filter: grayscale(100%) brightness(400%);
 }
@@ -18483,46 +18658,6 @@ pkt-select {
   display: block;
 }
 
-.pkt-input, .pkt-textinput__input, .pkt-select select,
-.pkt-select:is(select),
-.pkt-input-prefix,
-.pkt-input-suffix,
-.pkt-input-icon,
-.pkt-input__container {
-  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
-  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
-  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
-  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
-  --pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
-}
-
-[data-mode=dark] .pkt-input, [data-mode=dark] .pkt-textinput__input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
-[data-mode=dark] .pkt-select:is(select),
-[data-mode=dark] .pkt-input-prefix,
-[data-mode=dark] .pkt-input-suffix,
-[data-mode=dark] .pkt-input-icon,
-[data-mode=dark] .pkt-input__container {
-  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
-  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
-  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
-  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
-  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
-  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
-  --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
-}
-
 .pkt-input, .pkt-textinput__input, .pkt-select select,
 .pkt-select:is(select) {
   display: flex;
@@ -18581,7 +18716,7 @@ pkt-select {
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.16/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.18/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;