@oslokommune/punkt-css 9.3.2 → 9.4.0

package/dist/scss/elements/_checkbox-radio.scss

@@ -11,55 +11,39 @@
 
 $-module-name: 'pkt-input-check';
 
+// Color tokens
+.#{$-module-name} {
+  --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-error: var(--pkt-color-brand-red-1000);
+
+  @at-root [data-mode='dark'] .#{$-module-name} {
+    --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-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);
+  }
+}
+
 .#{$-module-name} {
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
 
-  // Choice as a check name for checkbox and radio
-  --choice-norm-bg: var(--color-white);
-  --choice-norm-bc: var(--color-blue-dark);
-  --choice-norm-txt: var(--color-blue-dark);
-  --choice-hover-txt: var(--color-active);
-  --choice-hover-checked-bg: var(--color-active);
-  --choice-focus-visible-txt: var(--color-active);
-  --choice-focus-visible-checked-bg: var(--color-active);
-  --choice-disabled-bg: var(--color-disabled-light);
-  --choice-disabled-bc: var(--color-grayscale-40);
-  --choice-disabled-txt: var(--color-disabled);
-  --choice-disabled-checked-bg: var(--color-grayscale-30);
-  --choice-disabled-checked-bc: var(--color-grayscale-30);
-  --choice-tile-norm-bc: var(--color-gray);
-  --choice-tile-checked-bc: var(--color-blue-dark);
-  --choice-tile-focus-bg: var(--color-white);
-  --choice-tile-focus-bc: var(--color-active);
-  --choice-tile-focus-ol: var(--color-focus);
-  --choice-tile-hover-bc: var(--color-active);
-  --choice-tile-active-bc: var(--color-blue-dark);
-  --choice-tile-disabled-bc: var(--color-grayscale-40);
-  --choice-error-bc: var(--color-red);
-  --choice-error-bg: var(--color-red-30);
-
-  --checkbox-hover-bg: var(--color-white);
-  --checkbox-hover-bc: var(--color-active);
-  --checkbox-focus-visible-bg: var(--color-white);
-  --checkbox-focus-visible-bc: var(--color-active);
-  --checkbox-focus-visible-ol: var(--color-focus);
-  --checkbox-active-bg: var(--color-active);
-  --checkbox-active-bc: var(--color-blue-dark);
-  --checkbox-active-ol: var(--color-blue-dark);
-  --checkbox-checked-cb-bg: var(--color-blue-dark);
-  --checkbox-checked-bc: var(--color-blue-dark);
-
-  --radio-hover-outline: var(--color-active);
-  --radio-checked-bg: var(--color-blue-dark);
-  --radio-checked-bc: var(--color-white);
-  --radio-checked-bs: var(--color-blue-dark);
-  --radio-focus-visible-bc: var(--color-active);
-  --radio-focus-visible-ol: var(--color-focus);
-  --radio-focus-visible-checked-bc: var(--color-white);
-  --radio-focus-visible-checked-bg: var(--color-active);
-  --radio-error-checked-bg: var(--color-blue-dark);
+
 
   &__input {
     display: flex;
@@ -67,24 +51,25 @@ $-module-name: 'pkt-input-check';
 
     &-label {
       @include typography.get-text('pkt-txt-16-light');
+      color: var(--pkt-color-text-body-default);
     }
 
     &-helptext {
       @include typography.get-text('pkt-txt-14-light');
       padding-top: 0.5rem;
-      color: var(--choice-norm-txt);
+      color: var(--pkt-color-text-body-default);
       max-width: 21.875rem;
     }
 
     // Input states
     &:hover>.pkt-input-check__input-checkbox:not(:disabled)+.pkt-input-check__input-label {
-      color: var(--choice-hover-txt);
+      color: var(--pkt-color-input-text-hover);
     }
 
     &-checkbox {
       appearance: none;
-      background-color: var(--choice-norm-bg);
-      border: 2px solid var(--choice-norm-bc);
+      background-color: var(--pkt-color-input-background-normal);
+      border: 2px solid var(--pkt-color-input-border-normal);
       width: 1.5rem;
       height: 1.5rem;
       flex-shrink: 0;
@@ -99,36 +84,33 @@ $-module-name: 'pkt-input-check';
         border: none;
         width: 1.25rem;
         height: 1.25rem;
-        box-shadow: 0px 0px 0px 0.125rem var(--choice-norm-bc);
+        box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
       }
 
       // Checkbox states
       &:focus-visible:not(:disabled)+.pkt-input-check__input-label {
-        color: var(--choice-focus-visible-txt);
+        color: var(--pkt-color-input-text-hover);
       }
 
-
       &[type='checkbox']:hover {
-        background-color: var(--checkbox-hover-bg);
-        border-color: var(--checkbox-hover-bc);
+        border-color: var(--pkt-color-input-border-hover);
       }
 
       &[type='checkbox']:active:not(:disabled) {
-        background-color: var(--checkbox-active-bg);
-        border-color: var(--checkbox-active-bc);
-        outline: 6px solid var(--checkbox-active-ol);
+        border-color: var(--pkt-color-input-border-active);
+        outline: 6px solid var(--pkt-color-input-border-active);
       }
 
       &[type='checkbox']:focus-visible {
-        background-color: var(--checkbox-focus-visible-bg);
-        border-color: var(--checkbox-focus-visible-bc);
-        outline: 4px solid var(--checkbox-focus-visible-ol);
+        border-color: var(--pkt-color-input-border-active);
+        outline: 4px solid var(--pkt-color-border-states-focus);
         outline-offset: 0;
       }
 
       //Radio
       &[type='radio']:hover {
-        outline-color: var(--radio-hover-outline);
+        box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
+        outline-color: var(--pkt-color-input-border-hover);
       }
 
 
@@ -136,9 +118,9 @@ $-module-name: 'pkt-input-check';
 
         // Checkbox
         &[type='checkbox'] {
-          --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/check-medium.svg);
+          --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/check-medium.svg);
           position: relative;
-          background-color: var(--checkbox-checked-cb-bg);
+          background-color: var(--pkt-color-input-border-normal);
         }
 
         &[type='checkbox']::before {
@@ -148,15 +130,9 @@ $-module-name: 'pkt-input-check';
           left: 0;
           width: 100%;
           height: 100%;
-          background-color: blue;
           z-index: -1;
         }
 
-        &[type='checkbox']:checked::before {
-          background-color: blue;
-          border: 6px solid var(--checkbox-checked-cb-bc);
-        }
-
         &[type='checkbox']::after {
           content: '';
           position: absolute;
@@ -172,64 +148,63 @@ $-module-name: 'pkt-input-check';
 
         // Radio
         &[type='radio'] {
-          background-color: var(--radio-checked-bg);
-          border: 3px solid var(--radio-checked-bc);
-          box-shadow: 0px 0px 0px 0.125rem var(--radio-checked-bs);
+          background-color: var(--pkt-color-input-border-normal);
+          border: 3px solid var(--pkt-color-input-background-normal);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-normal);
         }
 
         // Checked states
         &[type="checkbox"]:focus-visible {
-          background-color: var(--choice-focus-visible-checked-bg);
+          background-color: var(--pkt-color-input-border-active);
         }
 
         &[type="checkbox"]:hover {
-          background-color: var(--choice-hover-checked-bg);
+          background-color: var(--pkt-color-input-border-hover);
         }
 
         &[type="radio"]:focus-visible {
-          background-color: var(--radio-focus-visible-checked-bg);
-          border: 3px solid var(--radio-focus-visible-checked-bc);
+          background-color: var(--pkt-color-input-border-active);
+          border: 3px solid var(--pkt-color-input-background-normal);
           outline: none;
-          box-shadow: 0px 0px 0px 0.125rem var(--radio-focus-visible-bc), 0px 0px 0px 0.375rem var(--radio-focus-visible-ol);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
         }
 
         &[type="radio"]:hover {
-          box-shadow: 0px 0px 0px 0.125rem var(--radio-focus-visible-bc);
-          background-color: var(--choice-hover-checked-bg);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
+          background-color: var(--pkt-color-input-border-hover);
         }
       }
 
       // Disabled styles
       &:disabled {
         &[type='checkbox'] {
-          background-color: var(--choice-disabled-bg);
-          border-color: var(--choice-disabled-bc);
+          background-color: var(--pkt-color-surface-default-gray);
+          border-color: var(--pkt-color-input-border-disabled);
           cursor: not-allowed;
-          outline-color: var(--choice-disabled-bc);
         }
 
         &[type='radio'] {
-          box-shadow: 0px 0px 0px 0.125rem var(--choice-disabled-bc);
-          background-color: var(--choice-disabled-bg);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
+          background-color: var(--pkt-color-surface-default-gray);
           cursor: not-allowed;
-          outline-color: var(--choice-disabled-bc);
+          outline-color: var(--pkt-color-input-border-disabled);
         }
       }
 
       &:disabled:checked {
         &[type='checkbox'] {
-          background-color: var(--choice-disabled-checked-bg);
-          border-color: var(--choice-disabled-checked-bc);
+          background-color: var(--pkt-color-input-border-disabled);
+          border-color: var(--pkt-color-input-border-disabled);
         }
 
         &[type='radio'] {
-          box-shadow: 0px 0px 0px 0.125rem var(--choice-disabled-checked-bc);
-          background-color: var(--choice-disabled-checked-bg);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-disabled);
+          background-color: var(--pkt-color-input-border-disabled);
         }
       }
 
       &:disabled+.pkt-inputwrapper {
-        color: var(--choice-disabled-txt);
+        color: var(--pkt-color-input-text-disabled);
         cursor: not-allowed;
       }
 
@@ -245,12 +220,13 @@ $-module-name: 'pkt-input-check';
         &[type=checkbox]:hover,
         &[type=checkbox]:focus-visible,
         &[type=checkbox]:checked,
+        &[type=checkbox]:checked:focus-visible,
         &[type=checkbox]:checked:hover,
         &[type=checkbox]:active:not(:disabled),
         &:checked[type=checkbox]:checked::before {
-          background-color: var(--choice-error-bg);
-          border-color: var(--choice-error-bc);
-          outline-color: var(--choice-error-bc);
+          background-color: var(--pkt-color-surface-default-faded-red);
+          border-color: var(--pkt-color-input-border-error);
+          outline-color: var(--pkt-color-input-border-error);
         }
 
         // Radio
@@ -259,28 +235,28 @@ $-module-name: 'pkt-input-check';
         &[type=radio]:focus-visible,
         &[type=radio]:hover,
         &[type=radio]:active:not(:disabled) {
-          box-shadow: 0px 0px 0px 0.125rem var(--choice-error-bc);
-          background-color: var(--choice-error-bg);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
+          background-color: var(--pkt-color-surface-default-faded-red);
         }
 
         &[type=radio]:checked,
         &[type=radio]:checked:focus-visible,
         &[type=radio]:checked:hover,
         &[type=radio]:checked:focus-visible+.pkt-input-check__input--tile {
-          box-shadow: 0px 0px 0px 0.125rem var(--choice-error-bc);
-          background-color: var(--radio-error-checked-bg);
+          box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-error);
+          background-color: var(--pkt-color-input-border-active);
         }
 
         &[type=radio]:checked:hover,
         &[type=radio]:checked:focus-visible {
-          background-color: var(--choice-hover-checked-bg);
+          background-color: var(--pkt-color-input-border-active);
         }
       }
     }
 
     // Modifiers input 
     &--tile {
-      border: 2px solid var(--choice-tile-norm-bc);
+      border: 2px solid var(--pkt-color-border-subtle);
       padding: 1rem;
       width: 21.875rem;
       position: relative;
@@ -300,7 +276,7 @@ $-module-name: 'pkt-input-check';
         right: -2px;
         bottom: -2px;
         top: -2px;
-        border: 2px solid var(--choice-tile-checked-bc);
+        border: 2px solid var(--pkt-color-border-default);
         pointer-events: none;
       }
 
@@ -310,80 +286,40 @@ $-module-name: 'pkt-input-check';
       }*/
       // Tile states
       &:focus-within {
-        background-color: var(--choice-tile-focus-bg);
-        border-color: var(--choice-tile-focus-bc);
-        outline: 4px solid var(--choice-tile-focus-ol);
+        background-color: var(--pkt-color-input-background-normal);
+        border-color: var(--pkt-color-border-states-active);
+        outline: 4px solid var(--pkt-color-border-states-focus);
+      }
+
+      &:hover:not(.pkt-input-check__input--tile-disabled) {
+        border-color: var(--pkt-color-border-states-hover);
       }
 
       &:hover>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before {
-        border-color: var(--choice-tile-hover-bc);
+        border-color: var(--pkt-color-border-states-hover);
       }
 
       &:active:not(:disabled)>.pkt-input-check__input-checkbox:checked+.pkt-input-check__input-label:before {
-        border-color: var(--choice-tile-active-bc);
+        border-color: var(--pkt-color-border-states-active);
       }
 
       &:disabled {
-        border-color: var(--choice-tile-disabled-bc);
+        border-color: var(--pkt-color-border-states-disabled);
       }
 
 
       .pkt-input-check__input-checkbox:not(.pkt-input-check__input-checkbox--error):checked[type=radio]:focus-visible {
-        box-shadow: 0px 0px 0px 0.125rem var(--choice-tile-focus-bc);
+        box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-border-states-active);
       }
 
       .pkt-input-check__input-checkbox[type='checkbox']:focus-visible {
         outline: none;
       }
-
-
     }
   }
 }
 
 [data-mode='dark'] .#{$-module-name} {
-  --choice-norm-bg: var(--color-blue-dark);
-  --choice-norm-bc: var(--color-white);
-  --choice-norm-txt: var(--color-white);
-  --choice-hover-txt: var(--color-active-light);
-  --choice-hover-checked-bg: var(--color-active-light);
-  --choice-focus-visible-txt: var(--color-active-light);
-  --choice-focus-visible-checked-bg: var(--color-active-light);
-  --choice-disabled-bg: var(--color-white);
-  --choice-disabled-bc: var(--color-grayscale-40);
-  --choice-disabled-txt: var(--color-white);
-  --choice-disabled-checked-bg: var(--color-grayscale-30);
-  --choice-disabled-checked-bc: var(--color-grayscale-30);
-  --choice-tile-norm-bc: var(--color-grayscale-60);
-  --choice-tile-checked-bc: var(--color-white);
-  --choice-tile-focus-bg: var(--color-blue-dark);
-  --choice-tile-focus-bc: var(--color-active-light);
-  --choice-tile-focus-ol: var(--color-focus);
-  --choice-tile-hover-bc: var(--color-blue-light);
-  --choice-tile-active-bc: var(--color-blue-light);
-  --choice-tile-disabled-bc: var(--color-grayscale-40);
-
-  --checkbox-hover-bg: var(--color-blue-dark);
-  --checkbox-hover-bc: var(--color-active-light);
-  --checkbox-focus-visible-bg: var(--color-blue-dark);
-  --checkbox-focus-visible-bc: var(--color-active-light);
-  --checkbox-focus-visible-ol: var(--color-focus);
-  --checkbox-active-bg: var(--color-hover-active);
-  --checkbox-active-bc: var(--color-blue-light);
-  --checkbox-active-ol: var(--color-active-light);
-  --checkbox-checked-cb-bg: var(--color-white);
-  --checkbox-checked-bc: var(--color-blue-light);
-
-  --radio-hover-outline: var(--color-active-light);
-  --radio-checked-bg: var(--color-white);
-  --radio-checked-bc: var(--color-blue-dark);
-  --radio-checked-bs: var(--color-white);
-  --radio-focus-visible-bc: var(--color-blue-light);
-  --radio-focus-visible-ol: var(--color-focus);
-  --radio-focus-visible-checked-bc: var(--color-blue-dark);
-  --radio-focus-visible-checked-bg: var(--color-blue-light);
-  --radio-error-checked-bg: var(--color-white);
-
 
   &__input-checkbox[type='checkbox']::after {
     filter: brightness(0) saturate(100%) invert(15%) sepia(11%) saturate(5273%) hue-rotate(212deg) brightness(96%) contrast(94%);

package/dist/scss/elements/_form.scss

@@ -27,7 +27,7 @@
     margin-bottom: map.get(variables.$spacing, 'size-24');
 
     &:focus-within {
-      color: var(--color-active);
+      color: var(--pkt-color-brand-warm-blue-1000);
     }
   }
 
@@ -36,7 +36,8 @@
    */
   &-label {
     width: 100%;
-    > p:first-child {
+
+    >p:first-child {
       display: inline;
     }
   }
@@ -50,8 +51,8 @@
 
   &-validation {
     animation: enter 0.2s ease-in forwards;
-    background-color: var(--color-red);
-    border: 2px solid var(--color-red);
+    background-color: var(--pkt-color-brand-red-1000);
+    border: 2px solid var(--pkt-color-brand-red-1000);
     font-size: map.get(variables.$font-size, 'size-14');
     line-height: 2rem;
     margin: map.get(variables.$spacing, 'size-16') 0 0;
@@ -59,13 +60,13 @@
     transform-origin: 0 0;
 
     &--warning {
-      background-color: var(--color-yellow);
-      border-color: var(--color-yellow);
+      background-color: var(--pkt-color-brand-yellow-1000);
+      border-color: var(--pkt-color-brand-yellow-1000);
     }
 
     &--error {
-      background-color: var(--color-red);
-      border-color: var(--color-red);
+      background-color: var(--pkt-color-brand-red-1000);
+      border-color: var(--pkt-color-brand-red-1000);
     }
   }
 
@@ -73,10 +74,10 @@
   &-textarea {
     appearance: none; // Fix appearance on date inputs in Safari
     background-clip: padding-box;
-    background-color: var(--color-white);
-    border: 2px solid var(--color-blue-dark);
+    background-color: var(--pkt-color-brand-neutrals-white);
+    border: 2px solid var(--pkt-color-brand-dark-blue-1000);
     border-radius: 0;
-    color: var(--color-blue-dark);
+    color: var(--pkt-color-brand-dark-blue-1000);
     display: block;
     font-size: map.get(variables.$font-size, 'size-16');
     font-weight: map.get(variables.$font-weight, 'regular');
@@ -87,38 +88,39 @@
     width: 100%;
 
     &:focus {
-      background-color: var(--color-white);
-      border-color: var(--color-active);
-      box-shadow: 0 0 var(--color-active);
-      color: var(--color-active);
-      outline: 2px solid var(--color-active);
+      background-color: var(--pkt-color-brand-neutrals-white);
+      border-color: var(--pkt-color-brand-warm-blue-1000);
+      box-shadow: 0 0 var(--pkt-color-brand-warm-blue-1000);
+      color: var(--pkt-color-brand-warm-blue-1000);
+      outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
     }
 
     /* Placeholder
      * 1. Override Firefox's default opacity
      */
     &::placeholder {
-      color: var(--color-grayscale-30);
-      opacity: 1; /* 1 */
+      color: var(--pkt-color-grays-gray-300);
+      opacity: 1;
+      /* 1 */
     }
 
-    & + .pkt-form-validation {
+    &+.pkt-form-validation {
       display: none;
     }
 
     &:not(:placeholder-shown):invalid {
-      border-color: var(--color-red);
+      border-color: var(--pkt-color-brand-red-1000);
 
-      & + .pkt-form-validation {
+      &+.pkt-form-validation {
         display: inherit;
       }
     }
 
     &:disabled,
     &[readonly] {
-      background-color: var(--color-gray);
-      border-color: var(--color-grayscale-30);
-      color: var(--color-grayscale-30);
+      background-color: var(--pkt-color-brand-neutrals-200);
+      border-color: var(--pkt-color-grays-gray-300);
+      color: var(--pkt-color-grays-gray-300);
       cursor: inherit;
     }
 

package/dist/scss/elements/_hr.scss

@@ -4,5 +4,5 @@
 
 .pkt-hr {
   border: 0;
-  border-top: 1px solid var(--color-grayscale-20);
+  border-top: 1px solid var(--pkt-color-grays-gray-200);
 }