@oslokommune/punkt-css 4.3.2 → 5.0.1

package/dist/scss/base/_typography.scss

@@ -75,7 +75,6 @@ a {
   }
 
   @at-root [data-mode='dark'] a {
-
     // link
     &:link,
     &.pkt-link--link {
@@ -118,12 +117,6 @@ a {
   }
 }
 
-@mixin icon-new-window-small($fg-color: #2a2859, $bg-color: null) {
-  $svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="new-window-small" fill="none" data-category="ui" viewBox="0 0 32 32"><g fill="#{$fg-color}"><path d="M23.03 21.11v2.06H8.97V9.18h2.06v-2H8.97v-.01h-2v18h18.06v-4.06h-2Z"/><path d="M18 7.16v2h3.62l-7.26 7.28 1.38 1.39 7.27-7.29v3.63h2.02V7.16H18Z"/></g></svg>');
-  background-image: functions.escape-svg($svg);
-  background-repeat: no-repeat;
-}
-
 .pkt-link {
   display: inline-flex;
   text-align: left;
@@ -149,25 +142,32 @@ a {
 
   &--external::after {
     content: ' ';
-    @include icon-new-window-small(#2a2859, null);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/5.0/icons/new-window-small.svg);
+    background-image: var(--svg);
+    background-repeat: no-repeat;
     background-size: 18px 18px;
     width: 1.125rem;
     height: 1.125rem;
   }
 
   &--external:hover::after {
-    @include icon-new-window-small(#1f42aa, null);
+    // #1f42aa
+    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%)
+      hue-rotate(222deg) brightness(93%) contrast(90%);
   }
 }
 
 @at-root [data-mode='dark'] {
   .pkt-link {
     &--external::after {
-      @include icon-new-window-small(white, null);
+      // white
+      filter: brightness(0) saturate(100%) invert(100%);
     }
 
     &--external:hover::after {
-      @include icon-new-window-small(#b3f5ff, null);
+      // #b3f5ff
+      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%)
+        hue-rotate(173deg) brightness(109%) contrast(105%);
     }
   }
 }
@@ -177,13 +177,11 @@ a {
  * prefix pkt
  */
 
-@each $name,
-$style in variables.$pkt-styles {
+@each $name, $style in variables.$pkt-styles {
   @include typography.generate-text-class($name, $style);
 }
 
-@each $name,
-$style in variables.$pkt-font-weight {
+@each $name, $style in variables.$pkt-font-weight {
   @include typography.generate-text-class($name, $style);
 }
 

package/dist/scss/components/_backlink.scss

@@ -18,6 +18,10 @@
       map.get(variables.$spacing, 'size-64');
   }
 
+  &__list {
+    list-style-type: none;
+  }
+
   &__link {
     display: flex;
     align-items: center;
@@ -41,7 +45,6 @@
   &__icon {
     flex-basis: 1rem;
     flex-shrink: 0;
-    padding-bottom: 4px;
   }
 
   &__text {

package/dist/scss/components/_breadcrumbs.scss

@@ -123,8 +123,4 @@
     height: 1rem;
     margin-right: map.get(variables.$spacing, 'size-12');
   }
-
-  &__icon-svg {
-    vertical-align: top;
-  }
 }

package/dist/scss/components/_footer.scss

@@ -15,14 +15,16 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
 
 .pkt-footer {
   @include typography.get-text('pkt-txt-18-light');
-  padding: map.get(variables.$spacing, 'size-40') map.get(variables.$spacing, 'size-24');
+  padding: map.get(variables.$spacing, 'size-40')
+    map.get(variables.$spacing, 'size-24');
   background-color: $-footer-bg-color;
   color: $-footer-color;
   display: flex;
   align-items: center;
 
   @include bp('laptop-up') {
-    padding: map.get(variables.$spacing, 'size-56') map.get(variables.$spacing, 'size-24');
+    padding: map.get(variables.$spacing, 'size-56')
+      map.get(variables.$spacing, 'size-24');
     justify-content: center;
   }
 
@@ -66,7 +68,6 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
     }
   }
 
-
   &__link {
     display: flex;
     text-decoration: none !important;
@@ -114,7 +115,6 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
 
     &-icon {
       --fg-color: currentColor;
-      flex-shrink: 0;
       width: 24px;
       height: 24px;
     }
@@ -129,7 +129,8 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
 
 .pkt-footer-simple {
   @include typography.get-text('pkt-txt-18-light');
-  padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-24');
+  padding: map.get(variables.$spacing, 'size-32')
+    map.get(variables.$spacing, 'size-24');
   background-color: $-footer-bg-color;
   color: $-footer-color;
   display: flex;

package/dist/scss/components/_icon.scss

@@ -9,20 +9,20 @@
 
 .pkt-icon {
   display: inline-flex;
-  height: 2rem;
-  width: 2rem;
+  min-height: 1rem;
+  min-width: 1rem;
 
-  &.small {
+  &--small {
     height: 1rem;
     width: 1rem;
   }
 
-  &.medium {
+  &--medium {
     height: 1.5rem;
     width: 1.5rem;
   }
 
-  &.large {
+  &--large {
     height: 4rem;
     width: 4rem;
   }

package/dist/scss/components/_linkcard.scss

@@ -29,18 +29,21 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
     text-decoration: underline;
   }
 
-
   &:hover .pkt-link--external {
     &::after {
-      filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
+      filter: brightness(0) saturate(100%) invert(16%) sepia(99%)
+        saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
     }
   }
 
-
   &__title {
     @include get-text('pkt-txt-24-medium');
     margin-bottom: 0.5rem;
 
+    & > p {
+      margin: 0;
+    }
+
     &.pkt-link--external::after {
       height: 1.5rem;
       width: 1.5rem;
@@ -49,6 +52,12 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
     }
   }
 
+  &.pkt-link {
+    .pkt-icon.pkt-link__icon {
+      margin-top: 0.375rem;
+    }
+  }
+
   &__text {
     p:first-of-type {
       margin-top: 0;
@@ -59,10 +68,6 @@ $-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');
     }
   }
 
-  & svg {
-    margin-top: 0.313rem;
-  }
-
   // Modifiers
   &--beige {
     background-color: var(--color-beige-light);

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

@@ -0,0 +1,130 @@
+/* 
+ * Choices - checkbox and radio
+ * https://css-tricks.com/html-inputs-and-labels-a-love-story/
+ * 
+ * TODO: Dette er ikke ferdigstilt, og må refaktoreres ved anledning.
+ * Mangler gjennomgang av farger, focus-state og ikke minst et 
+ * element som wrapper for label og input.
+ * 
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+
+$-module-name: 'pkt-form-check-input';
+
+.#{$-module-name} {
+  // Choice as a group name for checkbox and radio
+  --choice-norm-bg: var(--color-white);
+  --choice-norm-bc: var(--color-blue-dark);
+  --choice-hover-bg: var(--color-white);
+  --choice-hover-bc: var(--color-active);
+  --choice-focus-bg: var(--color-white);
+  --choice-focus-bc: var(--color-active);
+  --choice-focus-ol: var(--color-focus);
+  --choice-active-bg: var(--color-active);
+  --choice-active-bc: var(--color-active);
+  --choice-active-ol: var(--color-active);
+  --choice-checked-rb-bg: var(--color-white);
+  --choice-checked-rb-bc: var(--color-active);
+  --choice-checked-cb-bg: var(--color-active);
+  --choice-checked-cb-bc: var(--color-active);
+  --choice-disabled-bg: var(--color-white);
+  --choice-disabled-bc: var(--color-grayscale-30);
+  --choice-disabled-txt: var(--color-grayscale-30);
+  --choice-disabled-checked-bg: var(--color-grayscale-30);
+  --choice-disabled-checked-bc: var(--color-grayscale-30);
+
+  appearance: none;
+  background-color: var(--choice-norm-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: 2px solid var(--choice-norm-bc);
+  display: inline-block;
+  margin: 0.125rem 0.25rem 0 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: all 0.3s ease-out;
+  vertical-align: top;
+
+  &[type='checkbox'] {
+    border-radius: 0;
+  }
+
+  &[type='radio'] {
+    border-radius: 50%;
+  }
+
+  &:hover {
+    background-color: var(--choice-hover-bg);
+    border-color: var(--choice-hover-bc);
+  }
+
+  &:focus {
+    background-color: var(--choice-focus-bg);
+    border-color: var(--choice-focus-bc);
+    outline: 2px solid var(--choice-focus-ol);
+  }
+
+  &:active {
+    background-color: var(--choice-active-bg);
+    border-color: var(--choice-active-bc);
+    outline: 6px solid var(--choice-active-ol);
+  }
+
+  &:checked {
+    &[type='radio'] {
+      background-color: var(--choice-checked-rb-bg);
+      border: 6px solid var(--choice-checked-rb-bc);
+    }
+    &[type='checkbox'] {
+      --svg: url(https://punkt-cdn.oslo.kommune.no/5.0/components/checkbox.svg);
+      background-color: var(--choice-checked-cb-bg);
+      border-color: var(--choice-checked-cb-bc);
+      -webkit-mask-image: var(--svg);
+      mask-image: var(--svg);
+    }
+  }
+
+  // Disabled styles
+  &:disabled {
+    background-color: var(--choice-disabled-bg);
+    border-color: var(--choice-disabled-bc);
+    cursor: not-allowed;
+  }
+  &:disabled:checked {
+    &[type='checkbox'] {
+      background-color: var(--choice-disabled-checked-bg);
+      border-color: var(--choice-disabled-checked-bc);
+    }
+  }
+
+  &:disabled ~ .pkt-form-label {
+    color: var(--choice-disabled-txt);
+    cursor: not-allowed;
+  }
+}
+
+[data-mode='dark'] .#{$-module-name} {
+  --choice-norm-bg: var(--color-blue-dark);
+  --choice-norm-bc: var(--color-blue-light);
+  --choice-hover-bg: var(--color-white);
+  --choice-hover-bc: var(--color-active-light);
+  --choice-focus-bg: var(--color-white);
+  --choice-focus-bc: var(--color-active-light);
+  --choice-focus-ol: var(--color-hover);
+  --choice-active-bg: var(--color-active-light);
+  --choice-active-bc: var(--color-active-light);
+  --choice-active-ol: var(--color-active-light);
+  --choice-checked-rb-bg: var(--color-white);
+  --choice-checked-rb-bc: var(--color-active-light);
+  --choice-checked-cb-bg: var(--color-active-light);
+  --choice-checked-cb-bc: var(--color-active-light);
+  --choice-disabled-bg: var(--color-gray-dark);
+  --choice-disabled-bc: var(--color-grayscale-30);
+  --choice-disabled-txt: var(--color-disabled);
+  --choice-disabled-checked-bg: var(--color-grayscale-30);
+  --choice-disabled-checked-bc: var(--color-grayscale-30);
+}

package/dist/scss/elements/_form.scss

@@ -8,8 +8,6 @@
 @use '../abstracts/variables';
 @use '../abstracts/functions';
 
-$-checkbox-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
-
 /* TODO: move to animation.scss */
 @keyframes enter {
   from {
@@ -126,64 +124,4 @@ $-checkbox-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
       // TODO
     }
   }
-
-  &-check-input {
-    appearance: none;
-    background-color: var(--color-white);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    border: 2px solid var(--color-blue-dark);
-    display: inline-block;
-    margin: 0.125rem 0.25rem 0 0;
-    width: 1.25rem;
-    height: 1.25rem;
-    transition: all 0.3s ease-out;
-    vertical-align: top;
-
-    &[type='checkbox'] {
-      border-radius: 0;
-    }
-
-    &[type='radio'] {
-      border-radius: 50%;
-    }
-
-    &:hover {
-      border-color: var(--color-active);
-    }
-
-    &:active {
-      border-color: var(--color-active);
-      outline: 2px solid var(--color-active);
-    }
-
-    &:focus {
-      border-color: var(--color-active);
-      outline: 2px solid var(--color-hover);
-    }
-
-    &:checked {
-      &[type='radio'] {
-        background-color: var(--color-white);
-        border: 6px solid var(--color-active);
-      }
-      &[type='checkbox'] {
-        background-color: var(--color-active);
-        background-image: functions.escape-svg($-checkbox-img);
-        border-color: var(--color-active);
-      }
-    }
-
-    // Disabled styles
-    &:disabled {
-      border-color: var(--color-grayscale-30);
-      cursor: not-allowed;
-    }
-
-    &:disabled ~ .pkt-form-label {
-      color: var(--color-grayscale-30);
-      cursor: not-allowed;
-    }
-  }
 }

package/dist/scss/elements/_index.scss

@@ -1,8 +1,9 @@
-@forward "button";
-@forward "form";
-@forward "hr";
-@forward "image";
-@forward "list";
-@forward "section";
-@forward "select";
-@forward "table";
+@forward 'button';
+@forward 'form';
+@forward 'checkbox-radio';
+@forward 'hr';
+@forward 'image';
+@forward 'list';
+@forward 'section';
+@forward 'select';
+@forward 'table';

package/dist/scss/elements/_select.scss

@@ -9,20 +9,12 @@
 @use '../abstracts/variables';
 @use '../abstracts/functions';
 
-@mixin -icon-arrow($status: enabled) {
-  $svg-color: #2a2859;
-  @if $status != enabled {
-    $svg-color: #b9b9b9;
-  }
-
-  $arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='#{$svg-color}' /></svg>") !default;
-  background-image: functions.escape-svg($arrow);
-}
-
 .pkt-select {
+  --svg: url(https://punkt-cdn.oslo.kommune.no/5.0/icons/chevron-thin-down.svg);
+
   display: block;
   background-color: var(--color-white);
-  @include -icon-arrow('enabled');
+  background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
   background-size: 2rem auto, 100%;
@@ -69,9 +61,8 @@
   }
 
   &:disabled {
-    @include -icon-arrow('disabled');
-    border-color: var(--color-grayscale-30);
-    color: var(--color-grayscale-30);
+    filter: grayscale(1) brightness(4.16);
+    font-weight: 500;
   }
 
   option {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "4.3.2",
+  "version": "5.0.1",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^4.3.2",
+    "@oslokommune/punkt-assets": "^5.0.1",
     "astro": "^2.0.2",
     "edit-json-file": "^1.7.0",
     "fs-extra": "^11.1.0",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "e241cba34504540a74742463c48466ec4ccd7259"
+  "gitHead": "41429621015d5754f8d2cadc7f2ac627a48dc12e"
 }