@oslokommune/punkt-css 9.3.2 → 9.4.0

package/dist/scss/elements/_input.scss

@@ -4,22 +4,55 @@
 @use '../abstracts/functions';
 @use '../abstracts/mixins/typography';
 
+// Color tokens
+.pkt-input,
+.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);
+}
+
+@at-root [data-mode='dark'] .pkt-input, [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 {
   @include typography.get-text('pkt-txt-18-light');
   display: flex;
   align-items: center;
   appearance: none; // Fix appearance on date inputs in Safari
-  background-color: var(--color-white);
-  border: 2px solid var(--color-blue-dark);
+  background-color: var(--pkt-color-input-background-normal);
+  border: 2px solid var(--pkt-color-input-border-normal);
   border-radius: 0;
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
 
   &:not(textarea[cols]):not(input[size]):not(&--fullwidth),
-  &__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(
-      :is(:has(&--fullwidth))
-    ) {
+  &__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not( :is(:has(&--fullwidth))) {
     width: min(100%, 31rem);
   }
 
@@ -38,7 +71,7 @@
     padding-right: 3rem;
 
     &:not([multiple]) {
-      --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/chevron-thin-down.svg);
+      --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/chevron-thin-down.svg);
       background-image: var(--svg);
       background-repeat: no-repeat;
       background-position: right 0.7rem top 50%;
@@ -46,47 +79,47 @@
     }
 
     option {
-      background-color: var(--color-white);
-      color: var(--color-blue-dark);
+      background-color: var(--pkt-color-input-background-normal);
+      color: var(--pkt-color-input-text-normal);
       font-weight: normal;
     }
   }
 
   // 1. Override Firefox's default opacity
   &::placeholder {
-    color: var(--color-grayscale-50);
+    color: var(--pkt-color-text-placeholder);
     opacity: 1; // 1
   }
 
   // states
   &:hover,
   &.pkt-input--hover {
-    border-color: var(--color-hover);
+    border-color: var(--pkt-color-input-border-hover);
   }
 
   &:focus-visible,
   &.pkt-input__textinput--focus {
-    border-color: var(--color-active);
+    box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+    border-color: var(--pkt-color-input-border-active);
   }
 
   &:focus {
     outline: none;
-    --focus-outline: var(--color-active);
-    box-shadow: 0 0 0 2px var(--focus-outline);
-    border-color: var(--color-active);
+    box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+    border-color: var(--pkt-color-input-border-active);
   }
 
   &:disabled,
   &:disabled::placeholder,
   &[readonly] {
     opacity: 1;
-    background-color: var(--color-disabled-light);
-    border-color: var(--color-disabled);
+    background-color: var(--pkt-color-surface-default-gray);
+    border-color: var(--pkt-color-input-border-disabled);
     cursor: inherit;
   }
 
   &:disabled:active {
-    border: 2px solid var(--color-disabled);
+    border: 2px solid var(--pkt-color-input-border-disabled);
   }
 
   &-prefix,
@@ -97,8 +130,10 @@
     align-items: center;
     width: auto;
     height: 3rem;
-    border: 2px solid var(--color-blue-dark);
+    border: 2px solid var(--pkt-color-input-border-normal);
     flex-shrink: 0;
+    color: var(--pkt-color-brand-dark-blue-1000);
+    background-color: var(--pkt-color-input-background-normal);
   }
 
   &-prefix {
@@ -109,7 +144,7 @@
       width: 1px;
       margin-left: 0.5rem;
       height: 100%;
-      background-color: var(--color-blue-dark);
+      background-color: var(--pkt-color-brand-dark-blue-1000);
     }
   }
 
@@ -127,7 +162,7 @@
       width: 1px;
       margin-right: 0.5rem;
       height: 1.5rem;
-      background-color: var(--color-blue-dark);
+      background-color: var(--pkt-color-brand-dark-blue-1000);
     }
   }
 
@@ -144,13 +179,12 @@
 
   &--counter-error,
   &--counter-error:focus {
-    border-color: var(--color-red);
-    background-color: var(--color-red-30);
+    border-color: var(--pkt-color-input-border-error);
+    background-color: var(--pkt-color-surface-default-faded-red);
   }
 
   &--counter-error:focus {
-    --focus-outline: var(--color-red);
-    box-shadow: 0 0 0 2px var(--focus-outline);
+    box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
   }
 
   &__container {
@@ -190,19 +224,17 @@
     &:hover .pkt-input-prefix,
     &:hover .pkt-input-suffix,
     &:hover .pkt-input-icon {
-      border-color: var(--color-hover);
+      border-color: var(--pkt-color-input-border-active);
     }
 
     &:focus-within {
-      --focus-outline: var(--color-active);
-      box-shadow: 0 0 0 2px var(--focus-outline);
+      outline: 2px solid var(--pkt-color-input-border-active);
 
       .pkt-input,
       .pkt-input-prefix,
       .pkt-input-suffix,
       .pkt-input-icon {
-        outline: 0;
-        border-color: var(--color-active);
+        border-color: var(--pkt-color-input-border-active);
       }
     }
   }
@@ -214,17 +246,7 @@
 
     &--error {
       @include typography.get-text('pkt-txt-14-medium');
-      color: var(--color-red);
+      color: var(--pkt-color-input-text-error);
     }
   }
 }
-
-// Dark mode
-@at-root [data-mode='dark'] {
-  .pkt-input-prefix,
-  .pkt-input-suffix,
-  .pkt-input-icon {
-    background-color: var(--color-white);
-    color: var(--color-blue-dark);
-  }
-}

package/dist/scss/elements/_list.scss

@@ -24,6 +24,7 @@
       grid-template-rows: auto;
     }
   }
+
   &.three-cols-laptop-up {
     @include bp('laptop-up') {
       column-gap: 1.5rem;
@@ -31,7 +32,7 @@
     }
   }
 
-  li > a {
+  li>a {
     display: grid;
     grid-template-columns: 2rem auto;
     column-gap: 1rem;
@@ -42,18 +43,22 @@
   display: flex;
   list-style: none;
   padding: 0;
+
   li {
     padding-right: map.get(variables.$spacing, 'size-16');
   }
-  li + li {
+
+  li+li {
     padding-left: map.get(variables.$spacing, 'size-16');
   }
+
   li:last-child {
     padding-right: 0;
   }
+
   &.bordered {
-    li + li {
-      border-left: 1px solid var(--color-grayscale-60);
+    li+li {
+      border-left: 1px solid var(--pkt-color-grays-gray-600);
     }
   }
 }
@@ -102,7 +107,7 @@
   }
 }
 
-.pkt-dl--narrow > .pkt-dt {
+.pkt-dl--narrow>.pkt-dt {
   @include dt-narrow;
 }
 
@@ -119,6 +124,6 @@
   }
 }
 
-.pkt-dl--narrow > .pkt-dd {
+.pkt-dl--narrow>.pkt-dd {
   @include dd-narrow;
 }

package/dist/scss/elements/_section.scss

@@ -40,7 +40,7 @@
 }
 
 .pkt-section--dark {
-  @include -section(map.get(variables.$colors, 'color-blue-dark'));
+  @include -section(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'));
   color: white;
 
   a.pkt-btn--ter {
@@ -49,7 +49,7 @@
 }
 
 .pkt-section--danger {
-  @include -section(map.get(variables.$colors, 'color-red'));
+  @include -section(map.get(variables.$pkt-colors, 'brand-red-1000'));
 
   color: black;
 
@@ -59,11 +59,11 @@
 }
 
 .pkt-section--grey {
-  @include -section(map.get(variables.$colors, 'color-gray'));
+  @include -section(map.get(variables.$pkt-colors, 'brand-neutrals-200'));
 }
 
 .pkt-section--success {
-  @include -section(map.get(variables.$colors, 'color-green'));
+  @include -section(map.get(variables.$pkt-colors, 'brand-green-1000'));
 
   color: black;
 
@@ -73,11 +73,11 @@
 }
 
 .pkt-section--warning {
-  @include -section(map.get(variables.$colors, 'color-yellow'));
+  @include -section(map.get(variables.$pkt-colors, 'brand-yellow-1000'));
 }
 
 .pkt-section--info {
-  @include -section(map.get(variables.$colors, 'color-blue-light'));
+  @include -section(map.get(variables.$pkt-colors, 'brand-blue-500'));
 
   a.pkt-btn--ter {
     color: black;
@@ -86,10 +86,10 @@
 
 .pkt-section--frame {
   @include -section(white);
-  border: 1px solid map.get(variables.$colors, 'oslo-grey-dark');
+  border: 1px solid map.get(variables.$pkt-colors, 'brand-neutrals-1000');
 }
 
-[class*='ok-section-'] > [class^='ok-title-'] {
+[class*='ok-section-']>[class^='ok-title-'] {
   margin-top: 0;
 }
 

package/dist/scss/elements/_table.scss

@@ -6,12 +6,12 @@
 @use '../abstracts/variables';
 
 $-borderRadius: 2px;
-$-boxShadow: 0 1px 3px rgba(map.get(variables.$colors, 'color-blue-dark'), 0.25);
+$-boxShadow: 0 1px 3px rgba(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'), 0.25);
 
-$-defaultColor: map.get(variables.$colors, 'color-gray');
-$-infoColor: map.get(variables.$colors, 'color-yellow');
-$-successColor: map.get(variables.$colors, 'color-green-light');
-$-strongColor: map.get(variables.$colors, 'color-blue-dark');
+$-defaultColor: map.get(variables.$pkt-colors, 'brand-neutrals-200');
+$-infoColor: map.get(variables.$pkt-colors, 'brand-yellow-1000');
+$-successColor: map.get(variables.$pkt-colors, 'brand-light-green-1000');
+$-strongColor: map.get(variables.$pkt-colors, 'brand-dark-blue-1000');
 
 .pkt-table {
   width: 100%;
@@ -48,8 +48,8 @@ $-strongColor: map.get(variables.$colors, 'color-blue-dark');
   }
 
   tbody tr:hover {
-    & > td {
-      background: rgba(map.get(variables.$colors, 'color-blue-dark'), 0.02);
+    &>td {
+      background: rgba(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'), 0.02);
     }
   }
 
@@ -72,7 +72,7 @@ $-strongColor: map.get(variables.$colors, 'color-blue-dark');
     background: white;
     box-shadow: $-boxShadow;
 
-    & > tbody tr:last-of-type td {
+    &>tbody tr:last-of-type td {
       border-bottom: none;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "9.3.2",
+  "version": "9.4.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "88edae48a7325b3091894dccbd743dd95c3408da"
+  "gitHead": "83be982bc70185235a77feda8a8628bb44964aba"
 }