@oslokommune/punkt-css 17.0.7 → 17.0.10

package/dist/scss/base/_defaults.scss

@@ -39,3 +39,8 @@ body {
   text-rendering: optimizeSpeed;
   scroll-behavior: smooth;
 }
+
+// Slot-omslag i komponentene: skal ikke lage en boks av seg selv.
+.pkt-contents {
+  display: contents;
+}

package/dist/scss/base/_index.scss

@@ -5,6 +5,7 @@
 
 @forward 'defaults';
 @forward 'typography';
+@forward 'link';
 
 @forward 'containers';
 @forward 'grid';

package/dist/scss/base/_link.scss

@@ -0,0 +1,136 @@
+/*
+ * Link
+ */
+
+@use '../abstracts/variables';
+
+a,
+.pkt-link-button {
+  // Order of pseudoclasses is important for specificity:
+  // link, visited, hover, focus, active
+  // but we don't use visited, so we can skip :link
+
+  color: var(--pkt-color-text-action-normal);
+  text-decoration: underline;
+  word-wrap: break-word;
+  cursor: pointer;
+
+  span {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  // visited
+  &:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
+    color: inherit;
+  }
+
+  // hover
+  &:hover,
+  &.pkt-link--hover {
+    color: var(--pkt-color-text-action-active);
+    text-decoration: underline;
+    svg {
+      --fg-color: currentColor;
+    }
+  }
+
+  // focus
+  &:focus-visible,
+  &.pkt-link--focus {
+    box-shadow:
+      0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
+      0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
+    outline: none;
+    color: var(--pkt-color-text-action-active);
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0.125rem solid var(--pkt-color-text-action-active);
+    color: var(--pkt-color-text-action-active);
+  }
+
+  // active
+  &:active,
+  &.pkt-link--active {
+    color: var(--pkt-color-text-action-active);
+  }
+}
+
+.pkt-link {
+  display: inline;
+  text-align: left;
+  align-items: baseline;
+}
+
+.pkt-link {
+  &__icon {
+    --fg-color: currentColor;
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+    margin-inline: 0.25rem;
+    align-self: center;
+  }
+
+  &--icon-left,
+  &--icon-right {
+    display: inline-flex;
+    text-decoration: none;
+    align-items: baseline;
+  }
+
+  &--icon-left {
+    flex-direction: row;
+  }
+
+  &--icon-right {
+    flex-direction: row-reverse;
+  }
+
+  &--external::after {
+    display: inline-block;
+    content: ' ';
+    --svg: url(#{variables.$icon-path}/new-window-small.svg);
+    background-image: var(--svg);
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    width: 1.125rem;
+    height: 1.125rem;
+    vertical-align: middle;
+    align-self: center;
+  }
+
+  &--external:hover::after {
+    // #1f42aa
+    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
+      contrast(90%);
+  }
+}
+
+button.pkt-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+  font-weight: inherit;
+}
+
+@at-root [data-mode='dark'] {
+  .pkt-link {
+    &--external::after {
+      // white
+      filter: brightness(0) saturate(100%) invert(100%);
+    }
+
+    &--external:hover::after,
+    &:hover:not(.pkt-btn) pkt-icon,
+    &:hover:not(.pkt-btn) .pkt-icon {
+      // #b3f5ff
+      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
+        contrast(105%);
+    }
+  }
+}

package/dist/scss/base/_typography.scss

@@ -36,137 +36,6 @@ strong {
   font-weight: map.get(variables.$font-weight, 'medium');
 }
 
-a,
-.pkt-link-button {
-  // Order of pseudoclasses is important for specificity:
-  // link, visited, hover, focus, active
-  // but we don't use visited, so we can skip :link
-
-  color: var(--pkt-color-text-action-normal);
-  text-decoration: underline;
-  word-wrap: break-word;
-  cursor: pointer;
-
-  span {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  // visited
-  &:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
-    color: inherit;
-  }
-
-  // hover
-  &:hover,
-  &.pkt-link--hover {
-    color: var(--pkt-color-text-action-active);
-    text-decoration: underline;
-    svg {
-      --fg-color: currentColor;
-    }
-  }
-
-  // focus
-  &:focus-visible,
-  &.pkt-link--focus {
-    box-shadow:
-      0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
-      0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
-    outline: none;
-    color: var(--pkt-color-text-action-active);
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0.125rem solid var(--pkt-color-text-action-active);
-    color: var(--pkt-color-text-action-active);
-  }
-
-  // active
-  &:active,
-  &.pkt-link--active {
-    color: var(--pkt-color-text-action-active);
-  }
-}
-
-.pkt-link {
-  display: inline;
-  text-align: left;
-  align-items: baseline;
-}
-
-.pkt-link {
-  &__icon {
-    --fg-color: currentColor;
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-    margin-inline: 0.25rem;
-    align-self: center;
-  }
-
-  &--icon-left,
-  &--icon-right {
-    display: inline-flex;
-    text-decoration: none;
-    align-items: baseline;
-  }
-
-  &--icon-left {
-    flex-direction: row;
-  }
-
-  &--icon-right {
-    flex-direction: row-reverse;
-  }
-
-  &--external::after {
-    display: inline-block;
-    content: ' ';
-    --svg: url(#{variables.$icon-path}/new-window-small.svg);
-    background-image: var(--svg);
-    background-repeat: no-repeat;
-    background-size: 18px 18px;
-    width: 1.125rem;
-    height: 1.125rem;
-    vertical-align: middle;
-    align-self: center;
-  }
-
-  &--external:hover::after {
-    // #1f42aa
-    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
-      contrast(90%);
-  }
-}
-
-button.pkt-link {
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: inherit;
-  cursor: pointer;
-  font-weight: inherit;
-}
-
-@at-root [data-mode='dark'] {
-  .pkt-link {
-    &--external::after {
-      // white
-      filter: brightness(0) saturate(100%) invert(100%);
-    }
-
-    &--external:hover::after,
-    &:hover:not(.pkt-btn) pkt-icon,
-    &:hover:not(.pkt-btn) .pkt-icon {
-      // #b3f5ff
-      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
-        contrast(105%);
-    }
-  }
-}
-
 /*
  * origo typography
  * prefix pkt
@@ -213,11 +82,3 @@ button.pkt-link {
 .pkt-truncate-text {
   @include typography.truncate-text();
 }
-
-/*
- * Display contents and disregard layout
- */
-.pkt-display-contents,
-.pkt-contents {
-  display: contents;
-}

package/dist/scss/components/_combobox.scss

@@ -228,56 +228,55 @@ pkt-combobox,
   .pkt-listbox__open {
     margin-block-start: $-box-separator;
   }
-}
-
-.pkt-inputwrapper:not([data-navtype='pointer']) .pkt-combobox__input:focus-within {
-  outline: 4px solid var(--pkt-color-border-states-focus);
-}
+  &.pkt-inputwrapper:not([data-navtype='pointer']) .pkt-combobox__input:focus-within {
+    outline: 4px solid var(--pkt-color-border-states-focus);
+  }
 
-// Dropdown scale follows input wrapper size (small / xsmall combobox fields)
-.pkt-inputwrapper--small,
-.pkt-inputwrapper--xsmall {
-  .pkt-listbox {
-    .pkt-listbox__option:not(.pkt-listbox__search) {
-      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
-      @include typography.get-text('pkt-txt-16-light');
-    }
+  // Dropdown scale follows input wrapper size (small / xsmall combobox fields)
+  &.pkt-inputwrapper--small,
+  &.pkt-inputwrapper--xsmall {
+    .pkt-listbox {
+      .pkt-listbox__option:not(.pkt-listbox__search) {
+        padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
+        @include typography.get-text('pkt-txt-16-light');
+      }
 
-    .pkt-listbox__empty,
-    .pkt-listbox__banner {
-      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
-      @include typography.get-text('pkt-txt-16-light');
-    }
+      .pkt-listbox__empty,
+      .pkt-listbox__banner {
+        padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
+        @include typography.get-text('pkt-txt-16-light');
+      }
 
-    .pkt-listbox__search input {
-      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-12');
-      @include typography.get-text('pkt-txt-16-light');
+      .pkt-listbox__search input {
+        padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-12');
+        @include typography.get-text('pkt-txt-16-light');
+      }
     }
   }
-}
 
-.pkt-inputwrapper--xsmall {
-  .pkt-listbox {
-    .pkt-listbox__option:not(.pkt-listbox__search) {
-      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
-      @include typography.get-text('pkt-txt-14-light');
-    }
+  &.pkt-inputwrapper--xsmall {
+    .pkt-listbox {
+      .pkt-listbox__option:not(.pkt-listbox__search) {
+        padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
+        @include typography.get-text('pkt-txt-14-light');
+      }
 
-    .pkt-listbox__empty,
-    .pkt-listbox__banner {
-      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
-      @include typography.get-text('pkt-txt-14-light');
-    }
+      .pkt-listbox__empty,
+      .pkt-listbox__banner {
+        padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-12');
+        @include typography.get-text('pkt-txt-14-light');
+      }
 
-    .pkt-listbox__banner-icon,
-    .pkt-listbox__search-icon .pkt-icon {
-      width: 1.125rem;
-      height: 1.125rem;
-    }
+      .pkt-listbox__banner-icon,
+      .pkt-listbox__search-icon .pkt-icon {
+        width: 1.125rem;
+        height: 1.125rem;
+      }
 
-    .pkt-listbox__search input {
-      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-8');
-      @include typography.get-text('pkt-txt-14-light');
+      .pkt-listbox__search input {
+        padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-8');
+        @include typography.get-text('pkt-txt-14-light');
+      }
     }
   }
 }

package/dist/scss/components/_index.scss

@@ -24,7 +24,6 @@
 @forward 'loader';
 @forward 'modal';
 @forward 'messagebox';
-@forward 'preview';
 @forward 'progressbar';
 @forward 'searchinput';
 @forward 'skiplink';
@@ -33,6 +32,5 @@
 @forward 'tag';
 @forward 'tag';
 @forward 'teaserlist';
-@forward 'textinput';
 @forward 'textarea';
 @forward 'timepicker';

package/dist/scss/components/_tag.scss

@@ -29,8 +29,22 @@ pkt-tag > .pkt-tag {
   display: flex;
 }
 
+button.pkt-tag {
+  appearance: none;
+  border-radius: 0;
+  cursor: pointer;
+  font-family: inherit;
+  justify-content: center;
+  text-align: left;
+  text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.3em;
+  user-select: none;
+}
+
 .pkt-tag {
   width: fit-content;
+  vertical-align: middle;
   background: var(--pkt-color-surface-default-light-blue);
   padding: 0 map.get(variables.$spacing, 'size-8');
   display: inline-flex;
@@ -51,6 +65,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:hover,
+  &:is(button):hover,
   &.pkt-tag--hover {
     background-color: var(--pkt-color-surface-strong-blue);
     color: var(--pkt-color-tag-text-hover);
@@ -63,6 +78,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:focus,
+  &:is(button):focus,
   &.pkt-tag--focus {
     background-color: var(--pkt-color-surface-strong-blue);
     border-color: var(--pkt-color-text-action-active);
@@ -75,6 +91,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:active,
+  &:is(button):active,
   &.pkt-tag--active,
   &.pkt-tag--active:hover {
     background-color: var(--pkt-color-surface-strong-blue);
@@ -103,6 +120,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-strong-light-green);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-hover);
@@ -113,6 +131,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-focus);
@@ -123,6 +142,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-active);
@@ -137,6 +157,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-yellow);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-hover);
@@ -147,6 +168,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-focus);
@@ -157,6 +179,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-active);
@@ -171,6 +194,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-red);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-hover);
@@ -181,6 +205,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-focus);
@@ -191,6 +216,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-active);
@@ -205,6 +231,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-light-beige);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-hover);
@@ -215,6 +242,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-focus);
@@ -225,6 +253,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-active);
@@ -240,6 +269,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-gray);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-hover);
@@ -250,6 +280,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-active);
@@ -260,6 +291,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-active);
@@ -274,6 +306,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-subtle-light-blue);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-hover);
@@ -284,6 +317,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-focus);
@@ -294,6 +328,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-active);
@@ -310,7 +345,9 @@ pkt-tag > .pkt-tag {
     --fg-color: var(--pkt-color-brand-neutrals-200);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-brand-warm-blue-1000) !important;
       color: var(--pkt-color-brand-neutrals-200) !important;

package/dist/scss/elements/_index.scss

@@ -6,5 +6,4 @@
 @forward 'input';
 @forward 'list';
 @forward 'section';
-@forward 'select';
 @forward 'table';

package/dist/scss/pkt.layer.scss

@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@use 'sass:meta';
+
+// meta.load-css, ikke @use, fordi @use ikke kan stå inne i @layer.
+@layer punkt {
+  @include meta.load-css('pkt');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "17.0.7",
+  "version": "17.0.10",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -62,5 +62,5 @@
   "dependencies": {
     "astro": "^7.2.0"
   },
-  "gitHead": "d13f13397fd20b7d41aee384f6ae985b32d8b507"
+  "gitHead": "d7aa97ec38415ce31bd73314e4669ca2ba04a8cf"
 }