@oslokommune/punkt-css 13.2.3 → 13.3.0

package/dist/scss/abstracts/mixins/_breakpoints.scss

@@ -6,52 +6,97 @@
 //         the verbose thing
 // - TODO: reflect current media queries for use in javascript.
 //         https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
-
 @mixin bp($name) {
   @if $name== 'mobile' {
+    // 0px to 575px
     @media screen and (min-width: 0rem) and (max-width: 35.938rem) {
       @content;
     }
   } @else if $name== 'mobile-up' {
+    // 0px and up
     @media screen and (min-width: 0rem) {
       @content;
     }
   } @else if $name== 'phablet' {
+    // 575px to 767px
     @media screen and (min-width: 35.938rem) and (max-width: 47.938rem) {
       @content;
     }
   } @else if $name== 'phablet-up' {
+    // 575px and up
     @media screen and (min-width: 35.938rem) {
       @content;
     }
   } @else if $name== 'tablet' {
+    // 768px to 1023px
     @media screen and (min-width: 48rem) and (max-width: 63.938rem) {
       @content;
     }
   } @else if $name== 'tablet-up' {
+    // 768px and up
     @media screen and (min-width: 48rem) {
       @content;
     }
   } @else if $name== 'tablet-big' {
+    // 1024px to 1279px
     @media screen and (min-width: 64rem) and (max-width: 79.938rem) {
       @content;
     }
   } @else if $name== 'tablet-big-up' {
+    // 1024px and up
     @media screen and (min-width: 64rem) {
       @content;
     }
   } @else if $name== 'laptop' {
+    // 1280px to 1599px
     @media screen and (min-width: 80rem) and (max-width: 99.938rem) {
       @content;
     }
   } @else if $name== 'laptop-up' {
+    // 1280px and up
     @media screen and (min-width: 80rem) {
       @content;
     }
   } @else if $name== 'desktop-up' {
+    // 1600px and up
     @media screen and (min-width: 100rem) {
       @content;
     }
+  } @else if $name== 'mobile-to-phablet' {
+    // 0px to 575px
+    @media screen and (min-width: 0rem) and (max-width: 35.938rem) {
+      @content;
+    }
+  } @else if $name== 'mobile-to-laptop' {
+    // 0px to 1279px
+    @media screen and (min-width: 0rem) and (max-width: 79.938rem) {
+      @content;
+    }
+  } @else if $name== 'mobile-to-tablet' {
+    // 0px to 767px
+    @media screen and (min-width: 0rem) and (max-width: 47.938rem) {
+      @content;
+    }
+  } @else if $name== 'tablet-to-tablet-big' {
+    // 768px to 1023px
+    @media screen and (min-width: 48rem) and (max-width: 63.938rem) {
+      @content;
+    }
+  } @else if $name== 'phablet-to-tablet-big' {
+    // 575px to 1023px
+    @media screen and (min-width: 35.938rem) and (max-width: 63.938rem) {
+      @content;
+    }
+  } @else if $name== 'tablet-to-laptop' {
+    // 768px to 1279px
+    @media screen and (min-width: 48rem) and (max-width: 79.938rem) {
+      @content;
+    }
+  } @else if $name== 'tablet-big-to-laptop' {
+    // 1024px to 1279px
+    @media screen and (min-width: 64rem) and (max-width: 79.938rem) {
+      @content;
+    }
   } @else {
     @media screen and (min-width: $name) {
       @content;

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/13.2/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/13.3/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/abstracts/variables/_typography.scss

@@ -78,7 +78,7 @@ $font-weight: (
 ) !default;
 
 $line-height: (
-  'body': 1.5rem,
+  'body': 1.75rem,
   'lh-82': 5.125rem,
   'lh-60': 3.75rem,
   'lh-54': 3.375rem,

package/dist/scss/base/_defaults.scss

@@ -1,4 +1,4 @@
-/* 
+/*
  * Defaults for elementer
  *
  */
@@ -35,7 +35,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   overflow-y: auto;
-  line-height: 1.5;
+  line-height: 1.75;
   text-rendering: optimizeSpeed;
   scroll-behavior: smooth;
 }

package/dist/scss/base/_grid.scss

@@ -104,7 +104,8 @@ $gapsMedium: map.get(variables.$spacing, 'size-32');
   }
 
   // grid cell
-  & > .pkt-cell {
+  & > .pkt-cell,
+  & > * > .pkt-cell {
     // Alignment
     &--left {
       justify-self: start;

package/dist/scss/base/_typography.scss

@@ -12,13 +12,16 @@
 @use '../abstracts/functions';
 
 body {
-  color: var(--pkt-color-text-body-default);
   font-family: #{map.get(variables.$font-family, 'normal')};
   font-size: map.get(variables.$font-size, 'size-16');
   font-weight: map.get(variables.$font-weight, 'light');
   letter-spacing: map.get(variables.$letter-spacing, 'normal');
   line-height: map.get(variables.$line-height, 'body');
 }
+body,
+[data-mode='dark'] {
+  color: var(--pkt-color-text-body-default);
+}
 
 em {
   font-style: italic;
@@ -92,7 +95,7 @@ a,
 
 .pkt-link {
   &__icon {
-    --fg-color: currentColor;
+    --fg-color: var(--pkt-color-text-action-normal);
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;

package/dist/scss/components/_accordion.scss

@@ -32,6 +32,11 @@ pkt-accordion-item {
   display: block;
 }
 
+pkt-accordion,
+pkt-accordion-item {
+  display: block;
+}
+
 .pkt-accordion,
 pkt-accordion::part(container) {
   display: grid;
@@ -49,7 +54,10 @@ pkt-accordion::part(container) {
 .pkt-accordion--borderless,
 pkt-accordion[skin='borderless'] {
   .pkt-accordion-item {
+    color: var(--pkt-color-text-body-default);
     border: none;
+    background-color: var(--pkt-color-background-default);
+
 
     &[open] {
       .pkt-accordion-item__title {
@@ -62,7 +70,9 @@ pkt-accordion[skin='borderless'] {
 .pkt-accordion--outlined,
 pkt-accordion[skin='outlined'] {
   .pkt-accordion-item {
+    color: var(--pkt-color-text-body-default);
     border: 2px solid var(--pkt-color-border-subtle);
+    background-color: var(--pkt-color-background-default);
   }
 }
 

package/dist/scss/components/_heading.scss

@@ -21,15 +21,15 @@ pkt-heading {
   }
 
   &--medium {
-    @include typography.get-text('pkt-txt-30');
+    @include typography.get-text('pkt-txt-30-medium');
   }
 
   &--small {
-    @include typography.get-text('pkt-txt-24');
+    @include typography.get-text('pkt-txt-24-medium');
   }
 
   &--xsmall {
-    @include typography.get-text('pkt-txt-22');
+    @include typography.get-text('pkt-txt-22-medium');
   }
 
   &--noSpacing {

package/dist/scss/components/_loader.scss

@@ -8,6 +8,7 @@
 @use '../abstracts/mixins/typography';
 
 .pkt-loader {
+  color: currentColor;
   width: fit-content;
   text-align: center;
   &--inline {

package/dist/scss/components/_preview.scss

@@ -2,30 +2,65 @@
 @use '../abstracts/variables';
 @use '../abstracts/functions';
 @use '../abstracts/mixins/typography';
+@use '../abstracts/mixins/breakpoints' as *;
 
 .pkt-preview {
   position: relative;
   .pkt-tabs {
     --pkt-tabs-bg: var(--pkt-color-surface-default-gray);
   }
-  &__mode {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-  }
   &__component {
+    position: relative;
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 10rem;
     padding: 3rem 1rem;
-    margin: 1rem 0 0;
-    border: 0.25rem solid var(--pkt-color-surface-default-gray);
+    margin: 0;
     background-color: var(--pkt-color-background-default);
     transition: background-color 0.2s linear;
     &--fullwidth > div {
       width: 100%;
     }
+    &-container {
+      border: 2px solid var(--pkt-color-border-gray);
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      @include bp('tablet-big-up') {
+        flex-direction: row;
+        .pkt-preview__component {
+          flex: 1 1 0;
+          min-width: 0;
+        }
+        .pkt-preview__panel {
+          flex: 0 0 auto;
+          min-width: 20rem;
+          max-width: 25rem;
+          width: 100%;
+        }
+      }
+    }
+  }
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2rem 1.5rem;
+    justify-content: space-between;
+    align-items: stretch;
+    background-color: var(--pkt-color-surface-default-gray);
+    &__options {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+  }
+  &__options {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
   &__opts {
     padding: 1rem;
@@ -41,13 +76,52 @@
       }
     }
   }
+  .hide-code-button {
+    position: absolute;
+    top: 100%;
+    margin-top: -1.5rem;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 1rem;
+    z-index: 2;
+  }
   &__code {
+    color: var(--pkt-color-text-body-default);
     position: relative;
-    margin-bottom: 1rem;
-    font-size: 0.8rem;
-    > pre {
+    &-container {
+      position: relative;
+      padding: 2rem 2rem 0;
+      background-color: var(--pkt-color-grays-gray-800);
+      transition: max-height 0.5s ease;
+      max-height: 50rem;
+      .pkt-tabs {
+        --pkt-tabs-bg: var(--pkt-color-grays-gray-800);
+      }
+      &.hide-code {
+        overflow: hidden;
+        max-height: 11.7rem;
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: linear-gradient(180deg, transparent 0%, transparent 93%, var(--pkt-color-grays-gray-800) 100%);
+        }
+      }
+    }
+    pre {
+      max-height: 30rem;
+      overflow: auto;
       margin-top: 0 !important;
-      background-color: var(--pkt-color-surface-default-gray) !important;
+      background-color: transparent !important;
+      font-size: 1rem;
+      padding: 2rem 0;
     }
   }
   &__copy {
@@ -58,14 +132,26 @@
     gap: 0.5rem;
     align-items: center;
   }
+  &__array-item,
+  &__object-editor {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  &__add-object {
+    text-align: right;
+    margin-top: 0.5rem;
+  }
+  &__remove-object {
+    position: absolute;
+    top: -2rem;
+    right: -0.25rem;
+  }
   &__specs {
-    background-color: var(--pkt-color-surface-default-gray);
     pre {
       margin-top: 0 !important;
     }
-    h2 {
-      padding: 1rem;
-    }
   }
 }
 
@@ -75,4 +161,4 @@
 
 .preview-content {
   display: contents;
-}
+}

package/dist/scss/components/_tabs.scss

@@ -50,7 +50,7 @@
     &:focus-visible:not(:active) {
       border: 0;
       box-shadow: none;
-      background-color: var(--pkt-color-surface-default-gray);
+      background-color: var(--pkt-tabs-bg);
       outline: 0.25rem solid var(--pkt-color-border-states-focus);
       outline-offset: 0;
     }

package/dist/scss/components/_tag.scss

@@ -314,7 +314,10 @@ pkt-tag > .pkt-tag {
     &.pkt-tag--hover {
       background-color: var(--pkt-color-brand-warm-blue-1000) !important;
       color: var(--pkt-color-brand-neutrals-200) !important;
-      --fg-color: var(--pkt-color-brand-neutrals-200) !important;
+      &,
+      svg {
+        --fg-color: var(--pkt-color-brand-neutrals-200) !important;
+      }
     }
   }
 

package/dist/scss/elements/_table.scss

@@ -18,7 +18,8 @@ $-spacing-size-16: map.get(variables.$spacing, 'size-16');
   border-collapse: collapse;
 
   &__header,
-  thead {
+  thead,
+  thead.pkt-table__header th {
     text-align: left;
     vertical-align: top;
     font-size: map.get(variables.$font-size, 'size-18');

package/dist/scss/normalise/_index.scss

@@ -41,7 +41,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: Menlo, Consolas, monospace;
   font-size: 1em; /* 2 */
 }
 

package/dist/scss/pkt-docs.scss

@@ -84,9 +84,6 @@
     background-color: white;
     padding: 2.5rem;
   }
-  .pkt-card {
-    padding: 0;
-  }
 }
 
 .punkt-promo {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "13.2.3",
+  "version": "13.3.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": "60cd8b0f004380bc7a85246af4f2b8c4aa5243b9"
+  "gitHead": "82281bdd30fc0a0a1e47b3a52199e59aed83b65d"
 }