@oslokommune/punkt-css 0.18.2

package/dist/scss/base/_containers.scss

@@ -0,0 +1,75 @@
+/* 
+ * Containers
+ *
+ * Containers er en viktig brikke for å bruke Oslo Designsystem, og som holder på, 
+ * gir luft rundt og justerer innholdet innenfor en skjermstørrelse.
+ */
+
+@use 'sass:map';
+@use 'sass:math';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+
+$-gapsSmall: map.get(variables.$spacing, 'size-16');
+$-gapsMedium: map.get(variables.$spacing, 'size-32');
+
+.pkt-container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $-gapsSmall;
+  padding-right: $-gapsSmall;
+  width: 100%;
+
+  @include bp('tablet-up') {
+    padding-left: $-gapsMedium;
+    padding-right: $-gapsMedium;
+  }
+
+  @include bp('laptop-up') {
+    max-width: map.get(variables.$breakpoints, 'laptop');
+  }
+
+  // Widths
+  &--full {
+    max-width: 100%;
+  }
+  @include bp('phablet-up') {
+    &--phablet {
+      max-width: map.get(variables.$breakpoints, 'phablet');
+    }
+  }
+  @include bp('tablet-up') {
+    &--tablet {
+      max-width: map.get(variables.$breakpoints, 'tablet');
+    }
+  }
+  @include bp('tablet-big-up') {
+    &--tablet-big {
+      max-width: map.get(variables.$breakpoints, 'tablet-big');
+    }
+  }
+  @include bp('laptop-up') {
+    &--laptop {
+      max-width: map.get(variables.$breakpoints, 'laptop');
+    }
+  }
+  @include bp('desktop-up') {
+    &--desktop {
+      max-width: map.get(variables.$breakpoints, 'desktop');
+    }
+  }
+
+  // Alignment
+  &--left {
+    margin-left: 0;
+    margin-right: auto;
+  }
+  &--center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &--right {
+    margin-left: auto;
+    margin-right: 0;
+  }
+}

package/dist/scss/base/_defaults.scss

@@ -0,0 +1,48 @@
+/* 
+ * Defaults for elementer
+ *
+ */
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul,
+ol,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  font-size: 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+p {
+  display: block;
+}
+
+body {
+  min-height: 100vh;
+  overflow-y: scroll;
+  line-height: 1.5;
+  text-rendering: optimizeSpeed;
+  scroll-behavior: smooth;
+}

package/dist/scss/base/_grid.scss

@@ -0,0 +1,114 @@
+/* 
+ * CSS Grid layouts
+ */
+@use 'sass:map';
+@use 'sass:math';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+
+$gapsSmall: map.get(variables.$spacing, 'size-16');
+$gapsMedium: map.get(variables.$spacing, 'size-32');
+
+.pkt-grid {
+  display: grid;
+  gap: $gapsSmall;
+  grid-template-columns: repeat(12, 1fr);
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+
+  @include bp('tablet-up') {
+    gap: $gapsMedium;
+  }
+  // Widths
+  &--full {
+    max-width: 100%;
+  }
+  @include bp('phablet-up') {
+    &--phablet {
+      max-width: map.get(variables.$breakpoints, 'phablet');
+    }
+  }
+  @include bp('tablet-up') {
+    &--tablet {
+      max-width: map.get(variables.$breakpoints, 'tablet');
+    }
+  }
+  @include bp('tablet-big-up') {
+    &--tablet-big {
+      max-width: map.get(variables.$breakpoints, 'tablet-big');
+    }
+  }
+  @include bp('laptop-up') {
+    &--laptop {
+      max-width: map.get(variables.$breakpoints, 'laptop');
+    }
+  }
+  @include bp('desktop-up') {
+    &--desktop {
+      max-width: map.get(variables.$breakpoints, 'desktop');
+    }
+  }
+
+  // Alignment
+  &--left {
+    margin-left: 0;
+    margin-right: auto;
+  }
+  &--center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &--right {
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  // Gap
+  @each $sp-name, $sp-value in variables.$spacing {
+    &--gap-#{$sp-name} {
+      gap: $sp-value;
+    }
+    &--colgap-#{$sp-name} {
+      column-gap: $sp-value;
+    }
+    &--rowgap-#{$sp-name} {
+      row-gap: $sp-value;
+    }
+  }
+
+  @each $bp-name, $bp-value in variables.$breakpoints {
+    @include bp('#{$bp-value}') {
+      @each $sp-name, $sp-value in variables.$spacing {
+        &--gap-#{$sp-name}-#{$bp-name}-up {
+          gap: $sp-value;
+        }
+        &--colgap-#{$sp-name}-#{$bp-name}-up {
+          column-gap: $sp-value;
+        }
+        &--rowgap-#{$sp-name}-#{$bp-name}-up {
+          row-gap: $sp-value;
+        }
+      }
+    }
+  }
+
+  // grid cell
+  & > .pkt-cell {
+    @for $i from 2 through 12 {
+      &.pkt-cell--span#{$i} {
+        grid-column-end: span $i;
+      }
+    }
+
+    @each $bp-name, $bp-value in variables.$breakpoints {
+      @include bp('#{$bp-value}') {
+        @for $i from 2 through 12 {
+          &.pkt-cell--span#{$i}-#{$bp-name}-up {
+            grid-column-end: span $i;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/base/_index.scss

@@ -0,0 +1,9 @@
+@forward 'oslo-sans';
+@forward 'colors';
+@forward 'defaults';
+@forward 'spacing';
+@forward 'containers';
+@forward 'grid';
+@forward 'typography';
+@forward 'visibility';
+@forward 'accessibility';

package/dist/scss/base/_oslo-sans.scss

@@ -0,0 +1,21 @@
+/* 
+ * Oslo-sans
+ */
+
+@use "sass:map";
+@use "../abstracts/variables";
+
+@mixin font-face($font) {
+  @font-face {
+    font-display: swap;
+    font-family: map.get($font, 'family');
+    font-style: map.get($font, 'style');
+    font-weight: map.get($font, 'weight');
+    src: url(map.get($font, 'src-woff2')) format('woff2'),
+      url(map.get($font, 'src-woff')) format('woff');
+  }
+}
+
+@each $name, $attr in variables.$font-face {
+  @include font-face($attr);
+}

package/dist/scss/base/_spacing.scss

@@ -0,0 +1,109 @@
+/* 
+ * Spacing
+ */
+
+@use "sass:map";
+@use "../abstracts/variables";
+@use "../abstracts/mixins/breakpoints" as *;
+
+@each $sp-name, $sp-value in variables.$spacing {
+  .m-#{$sp-name} {
+    margin: $sp-value !important;
+  }
+  .mt-#{$sp-name} {
+    margin-top: $sp-value !important;
+  }
+  .mr-#{$sp-name} {
+    margin-right: $sp-value !important;
+  }
+  .mb-#{$sp-name} {
+    margin-bottom: $sp-value !important;
+  }
+  .ml-#{$sp-name} {
+    margin-left: $sp-value !important;
+  }
+  .mx-#{$sp-name} {
+    margin-right: $sp-value !important;
+    margin-left: $sp-value !important;
+  }
+  .my-#{$sp-name} {
+    margin-top: $sp-value !important;
+    margin-bottom: $sp-value !important;
+  }
+
+  .p-#{$sp-name} {
+    padding: $sp-value !important;
+  }
+  .pt-#{$sp-name} {
+    padding-top: $sp-value !important;
+  }
+  .pr-#{$sp-name} {
+    padding-right: $sp-value !important;
+  }
+  .pb-#{$sp-name} {
+    padding-bottom: $sp-value !important;
+  }
+  .pl-#{$sp-name} {
+    padding-left: $sp-value !important;
+  }
+  .px-#{$sp-name} {
+    padding-right: $sp-value !important;
+    padding-left: $sp-value !important;
+  }
+  .py-#{$sp-name} {
+    padding-top: $sp-value !important;
+    padding-bottom: $sp-value !important;
+  }
+
+  @each $bp-name, $bp-value in variables.$breakpoints {
+    @include bp('#{$bp-value}') {
+      .m-#{$sp-name}--#{$bp-name}-up {
+        margin: $sp-value !important;
+      }
+      .mt-#{$sp-name}--#{$bp-name}-up {
+        margin-top: $sp-value !important;
+      }
+      .mr-#{$sp-name}--#{$bp-name}-up {
+        margin-right: $sp-value !important;
+      }
+      .mb-#{$sp-name}--#{$bp-name}-up {
+        margin-bottom: $sp-value !important;
+      }
+      .ml-#{$sp-name}--#{$bp-name}-up {
+        margin-left: $sp-value !important;
+      }
+      .mx-#{$sp-name}--#{$bp-name}-up {
+        margin-right: $sp-value !important;
+        margin-left: $sp-value !important;
+      }
+      .my-#{$sp-name}--#{$bp-name}-up {
+        margin-top: $sp-value !important;
+        margin-bottom: $sp-value !important;
+      }
+
+      .p-#{$sp-name}--#{$bp-name}-up {
+        padding: $sp-value !important;
+      }
+      .pt-#{$sp-name}--#{$bp-name}-up {
+        padding-top: $sp-value !important;
+      }
+      .pr-#{$sp-name}--#{$bp-name}-up {
+        padding-right: $sp-value !important;
+      }
+      .pb-#{$sp-name}--#{$bp-name}-up {
+        padding-bottom: $sp-value !important;
+      }
+      .pl-#{$sp-name}--#{$bp-name}-up {
+        padding-left: $sp-value !important;
+      }
+      .px-#{$sp-name}--#{$bp-name}-up {
+        padding-right: $sp-value !important;
+        padding-left: $sp-value !important;
+      }
+      .py-#{$sp-name}--#{$bp-name}-up {
+        padding-top: $sp-value !important;
+        padding-bottom: $sp-value !important;
+      }
+    }
+  }
+}

package/dist/scss/base/_typography.scss

@@ -0,0 +1,102 @@
+/* 
+ * Typografi
+ * 
+ * Setter Oslo kommune-stiler
+ * 
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/typography';
+
+body {
+  color: var(--color-blue-dark);
+  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');
+}
+
+em {
+  font-style: italic;
+}
+
+small {
+  font-size: map.get(variables.$font-size, 'size-14');
+  opacity: 0.8;
+}
+
+strong {
+  font-weight: map.get(variables.$font-weight, 'medium');
+}
+
+a {
+  color: var(--color-blue-dark);
+  text-decoration: underline;
+  word-wrap: break-word;
+
+  &:visited {
+    color: var(--color-visited);
+  }
+  &:focus {
+    color: var(--color-active);
+  }
+  &:hover {
+    color: var(--color-hover);
+    text-decoration: underline;
+  }
+  &:active {
+    color: var(--color-active);
+  }
+
+  @at-root [data-mode='dark'] a {
+    color: var(--color-white);
+
+    &:visited {
+      color: var(--color-visited-light);
+    }
+    &:focus {
+      color: var(--color-active-light);
+    }
+    &:hover {
+      color: var(--color-hover-light);
+    }
+    &:active {
+      color: var(--color-active-light);
+    }
+  }
+}
+
+/*
+ * origo typography
+ * prefix pkt
+ */
+
+@each $name, $style in variables.$pkt-styles {
+  @include typography.generate-text-class($name, $style);
+}
+
+@each $name, $style in variables.$pkt-font-weight {
+  @include typography.generate-text-class($name, $style);
+}
+/*
+ * Alignment
+ */
+.text-start {
+  text-align: left !important;
+}
+.text-end {
+  text-align: right !important;
+}
+.text-center {
+  text-align: center !important;
+}
+
+/* 
+ * Truncate text
+ * requires inline-block or block
+ */
+.truncate-text {
+  @include typography.truncate-text();
+}

package/dist/scss/base/_visibility.scss

@@ -0,0 +1,28 @@
+/* 
+ * Visibility
+ */
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins/breakpoints' as *;
+
+.pkt-hide {
+  display: none !important;
+}
+.pkt-show {
+  display: block !important;
+}
+
+@each $name, $value in $breakpoints {
+  .pkt-hide-#{$name}-up {
+    @include bp($value) {
+      display: none !important;
+    }
+  }
+
+  .pkt-show-#{$name}-up {
+    @include bp('#{$value}') {
+      display: block !important;
+    }
+    display: none !important;
+  }
+}

package/dist/scss/components/_alert.scss

@@ -0,0 +1,153 @@
+/* 
+ * Alert component
+ */
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/' as *;
+
+// Spacing
+$-alert-spacing: map.get(variables.$spacing, 'size-24');
+
+//// Colors
+$-alert-red-error: map.get(variables.$colors, 'color-error');
+$-alert-green-dark: map.get(variables.$colors, 'color-green-dark');
+$-alert-blue-dark: map.get(variables.$colors, 'color-blue-dark');
+
+// Error
+$-alert-error-border: 3px solid $-alert-red-error;
+$-alert-error-bg: map.get(variables.$colors, 'color-red-5');
+$-alert-error-color: $-alert-red-error;
+
+// Success
+$-alert-success-border: 3px solid $-alert-green-dark;
+$-alert-success-bg: map.get(variables.$colors, 'color-green-dark-5');
+$-alert-success-color: $-alert-green-dark;
+
+// Warning
+$-alert-warning-border: 3px solid map.get(variables.$colors, 'color-yellow');
+$-alert-warning-bg: map.get(variables.$colors, 'color-yellow-5');
+$-alert-warning-color: map.get(variables.$colors, 'color-warning');
+
+// Info
+$-alert-info-border: 3px solid $-alert-blue-dark;
+$-alert-info-bg: map.get(variables.$colors, 'color-blue-dark-5');
+$-alert-info-color: $-alert-blue-dark;
+
+// Close hover color
+$-alert-close-hover-color: map.get(variables.$colors, 'color-hover');
+
+.pkt-alert {
+  padding: $-alert-spacing;
+  display: block;
+  overflow: hidden;
+  position: relative;
+
+  &__text {
+    @include get-text('pkt-txt-18-light');
+    margin-bottom: 0;
+    padding: 0;
+  }
+
+  &__title {
+    @include get-text('pkt-txt-18-medium');
+    display: flex;
+    align-items: center;
+    margin-bottom: $-alert-spacing;
+  }
+
+  &__content {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__date {
+    @include get-text('pkt-txt-14-light');
+    margin-top: $-alert-spacing;
+  }
+
+  &__close {
+    display: flex;
+    float: right;
+    margin-left: $-alert-spacing;
+    height: 24px;
+    width: 24px;
+
+    svg:hover {
+      cursor: pointer;
+      background-color: $-alert-close-hover-color;
+      --fg-color: var(--color-blue-dark-5);
+    }
+    svg:focus {
+      background-color: $-alert-close-hover-color;
+      --fg-color: var(--color-blue-dark-5);
+    }
+    svg:active {
+      background-color: $-alert-close-hover-color;
+      --fg-color: var(--color-blue-dark-5);
+    }
+  }
+
+  &__icon {
+    margin-right: map.get(variables.$spacing, 'size-16');
+    height: 1.875rem;
+    width: 1.875rem;
+    flex-shrink: 0;
+  }
+
+  // skins
+  // default is "info"
+
+  &--success {
+    border-left: $-alert-success-border;
+    background-color: $-alert-success-bg;
+    color: $-alert-success-color;
+
+    &.pkt-alert .pkt-alert__icon {
+      --bg-color: var(--color-green-dark);
+      --fg-color: var(--color-green-dark-5);
+    }
+    &.pkt-alert .pkt-alert__close {
+      --fg-color: var(--color-green-dark);
+    }
+  }
+
+  &--error {
+    border-left: $-alert-error-border;
+    background-color: $-alert-error-bg;
+    color: $-alert-error-color;
+    &.pkt-alert .pkt-alert__icon {
+      --bg-color: var(--color-error);
+      --fg-color: var(--color-red-5);
+    }
+    &.pkt-alert .pkt-alert__close {
+      --fg-color: var(--color-error);
+    }
+  }
+
+  &--warning {
+    border-left: $-alert-warning-border;
+    background-color: $-alert-warning-bg;
+    color: $-alert-warning-color;
+    &.pkt-alert .pkt-alert__icon {
+      --bg-color: var(--color-yellow);
+      --fg-color: var(--color-blue-dark);
+    }
+    &.pkt-alert .pkt-alert__close {
+      --fg-color: var(--color-warning);
+    }
+  }
+
+  &--info {
+    border-left: $-alert-info-border;
+    background-color: $-alert-info-bg;
+    color: $-alert-info-color;
+    &.pkt-alert .pkt-alert__icon {
+      --bg-color: var(--color-blue);
+      --fg-color: var(--color-blue-dark);
+    }
+    &.pkt-alert .pkt-alert__close {
+      --fg-color: var(--color-blue-dark);
+    }
+  }
+}

package/dist/scss/components/_backlink.scss

@@ -0,0 +1,50 @@
+/* 
+ * Back link component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/typography';
+
+.pkt-back-link {
+  position: relative;
+  @include typography.get-text('pkt-txt-14-light');
+  padding: map.get(variables.$spacing, 'size-12')
+    map.get(variables.$spacing, 'size-16');
+
+  @include bp('laptop-up') {
+    padding: map.get(variables.$spacing, 'size-12')
+      map.get(variables.$spacing, 'size-64');
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: map.get(variables.$spacing, 'size-12');
+    text-decoration: none;
+    color: var(--color-blue-dark);
+
+    &:visited,
+    &:focus,
+    &:hover,
+    &:active {
+      color: var(--color-blue-dark);
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__icon {
+    flex-basis: 1rem;
+    flex-shrink: 0;
+    padding-bottom: 4px;
+  }
+
+  &__text {
+    flex-grow: 1;
+  }
+}