@oslokommune/punkt-css 0.18.2

package/dist/scss/abstracts/mixins/_typography.scss

@@ -0,0 +1,45 @@
+// Typography mixins
+
+@use 'sass:map';
+@use '../variables';
+@use '../functions';
+@use '../mixins/breakpoints' as *;
+
+// Generate text-class from settings files
+@mixin generate-text-class($name, $style) {
+  .#{$name} {
+    font-size: map.get(variables.$font-size, map.get($style, 'size'));
+    font-weight: map.get(variables.$font-weight, map.get($style, 'weight'));
+    letter-spacing: map.get(
+      variables.$letter-spacing,
+      map.get($style, 'letter-spacing')
+    );
+    line-height: map.get(
+      variables.$line-height,
+      map.get($style, 'line-height')
+    );
+  }
+}
+
+// Fetch pkt get-text from settings files
+@mixin get-text($name) {
+  font-size: map.get(
+    variables.$font-size,
+    functions.map-deep-get(variables.$pkt-styles, $name, 'size')
+  );
+  font-weight: map.get(
+    variables.$font-weight,
+    functions.map-deep-get(variables.$pkt-styles, $name, 'weight')
+  );
+  letter-spacing: map.get(
+    variables.$letter-spacing,
+    functions.map-deep-get(variables.$pkt-styles, $name, 'letter-spacing')
+  );
+  line-height: 1.5em;
+}
+
+@mixin truncate-text() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/scss/abstracts/placeholders/_index.scss

@@ -0,0 +1,19 @@
+/* 
+ * Accessibility
+ * https://kittygiraudel.com/2016/10/13/css-hide-and-seek/#undesirable-overflows-18012019
+ */
+
+// content available to screen readers only
+%sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}

package/dist/scss/abstracts/variables/_breakpoints.scss

@@ -0,0 +1,8 @@
+$breakpoints: (
+  'mobile': 0,
+  'phablet': 36rem /* ~576px */,
+  'tablet': 48rem /* ~768px */,
+  'tablet-big': 64rem /* ~1024px */,
+  'laptop': 80rem /* ~1280px */,
+  'desktop': 100rem /* ~1600px */,
+) !default;

package/dist/scss/abstracts/variables/_colors.scss

@@ -0,0 +1,55 @@
+$colors: (
+  // brand
+  color-blue: #6fe9ff,
+  color-blue-light: #b3f5ff,
+  color-blue-dark: #2a2859,
+  color-green: #43f8b6,
+  color-green-light: #c7f6c9,
+  color-green-dark: #034b45,
+  color-red: #ff8274,
+  color-yellow: #f9c66b,
+  color-beige-light: #f8f0dd,
+  color-beige-dark: #d0bfae,
+  // state
+  color-active: #1f42aa,
+  color-active-light: #b3f5ff,
+  color-hover: #1f42aa,
+  color-hover-light: #b3f5ff,
+  color-visited: #8d50b1,
+  color-visited-light: #e0adff,
+  color-disabled: #999,
+  color-disabled-light: #f9f9f9,
+  // system
+  color-info: #2a2859,
+  color-success: #034b45,
+  color-warning: #774c01,
+  color-error: #db2424,
+  // shade
+  color-blue-dark-5: #f2f9ff,
+  color-blue-dark-10: #d9e9f2,
+  color-blue-5: #f1fdff,
+  color-blue-10: #e5fcff,
+  color-green-dark-5: #f2fff3,
+  color-green-dark-10: #d9f2ef,
+  color-green-10: #e5ffe6,
+  color-red-5: #fff3f2,
+  color-red-10: #ffe8e5,
+  color-yellow-5: #fef9f0,
+  // grayscale digital
+  color-gray-light: #f9f9f9,
+  color-gray: #f2f2f2,
+  color-gray-dark: #2c2c2c,
+  //grayscale
+  color-transparent: transparent,
+  color-white: #fff,
+  color-grayscale-10: #e6e6e6,
+  color-grayscale-20: #ccc,
+  color-grayscale-30: #b3b3b3,
+  color-grayscale-40: #9a9a9a,
+  color-grayscale-50: #808080,
+  color-grayscale-60: #666,
+  color-grayscale-70: #4d4d4d,
+  color-grayscale-80: #333,
+  color-grayscale-90: #1a1a1a,
+  color-black: #000
+) !default;

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

@@ -0,0 +1,24 @@
+// All design tokens in Punkt
+
+@forward 'colors';
+@forward 'typography';
+@forward 'breakpoints';
+@forward 'spacing';
+
+// Borders
+$border-width: (
+  'thin': 1px,
+) !default;
+
+$border-radius: (
+  'small': 0.25rem,
+  'medium': 0.5rem,
+  'large': 1rem,
+) !default;
+
+// Shadows
+$box-shadow: (
+  'small': 0 1px 1px rgba(0, 0, 0, 0.1),
+  'medium': 0 1px 3px rgba(0, 0, 0, 0.2),
+  'large': 0 1px 5px rgba(0, 0, 0, 0.4),
+) !default;

package/dist/scss/abstracts/variables/_spacing.scss

@@ -0,0 +1,22 @@
+$spacing: (
+  'size-0': 0rem,
+  'size-2': 0.125rem,
+  'size-4': 0.25rem,
+  'size-8': 0.5rem,
+  'size-12': 0.75rem,
+  'size-16': 1rem,
+  'size-24': 1.5rem,
+  'size-32': 2rem,
+  'size-40': 2.5rem,
+  'size-64': 4rem,
+  'size-104': 6.5rem,
+  'size-5': 0.3125rem /* deprecated */,
+  'size-10': 0.625rem /* deprecated */,
+  'size-15': 0.9375rem /* deprecated */,
+  'size-20': 1.25rem /* deprecated */,
+  'size-30': 1.875rem /* deprecated */,
+  'size-50': 3.125rem /* deprecated */,
+  'size-60': 3.75rem /* deprecated */,
+  'size-75': 4.6875rem /* deprecated */,
+  'size-100': 6.25rem /* deprecated */,
+) !default;

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

@@ -0,0 +1,430 @@
+// Typography
+$font-path: '..' !default;
+
+$font-family: (
+  'normal': "'Oslo Sans', arial, sans-serif",
+  'icon': "'Oslo Icons', sans-serif",
+) !default;
+
+$font-face: (
+  'regular': (
+    'family': Oslo Sans,
+    'style': normal,
+    'weight': 400,
+    'src-woff': '#{$font-path}/fonts/OsloSans-Regular.woff',
+    'src-woff2': '#{$font-path}/fonts/OsloSans-Regular.woff2',
+  ),
+  'regular-italic': (
+    'family': Oslo Sans,
+    'style': italic,
+    'weight': 400,
+    'src-woff': '#{$font-path}/fonts/OsloSans-RegularItalic.woff',
+    'src-woff2': '#{$font-path}/fonts/OsloSans-RegularItalic.woff2',
+  ),
+  'light': (
+    'family': Oslo Sans,
+    'style': normal,
+    'weight': 300,
+    'src-woff': '#{$font-path}/fonts/OsloSans-Light.woff',
+    'src-woff2': '#{$font-path}/fonts/OsloSans-Light.woff2',
+  ),
+  'medium': (
+    'family': Oslo Sans,
+    'style': normal,
+    'weight': 500,
+    'src-woff': '#{$font-path}/fonts/OsloSans-Medium.woff',
+    'src-woff2': '#{$font-path}/fonts/OsloSans-Medium.woff2',
+  ),
+  'bold': (
+    'family': Oslo Sans,
+    'style': normal,
+    'weight': 700,
+    'src-woff': '#{$font-path}/fonts/OsloSans-Bold.woff',
+    'src-woff2': '#{$font-path}/fonts/OsloSans-Bold.woff2',
+  ),
+  'icons': (
+    'family': Oslo Icons,
+    'style': normal,
+    'weight': 400,
+    'src-woff': '#{$font-path}/fonts/OsloIcons.woff',
+    'src-woff2': '#{$font-path}/fonts/OsloIcons.woff2',
+  ),
+) !default;
+
+$font-size-base: 16px;
+$font-size: (
+  'size-12': 0.75rem,
+  'size-14': 0.875rem,
+  'size-16': 1rem,
+  'size-18': 1.125rem,
+  'size-20': 1.25rem,
+  'size-22': 1.375rem,
+  'size-24': 1.5rem,
+  'size-26': 1.625rem,
+  'size-28': 1.75rem,
+  'size-30': 1.875rem,
+  'size-36': 2.25rem,
+  'size-40': 2.5rem,
+  'size-54': 3.375rem,
+) !default;
+
+$font-weight: (
+  'light': 300,
+  'regular': 400,
+  'medium': 500,
+  'bold': 700,
+) !default;
+
+$line-height: (
+  'body': 1.5em,
+  'lh-82': 5.125rem,
+  'lh-60': 3.75rem,
+  'lh-54': 3.375rem,
+  'lh-44': 2.75rem,
+  'lh-42': 2.25rem,
+  'lh-40': 2.5rem,
+  'lh-36': 2.25rem,
+  'lh-34': 2.125rem,
+  'lh-32': 2rem,
+  'lh-28': 1.75rem,
+  'lh-24': 1.5rem,
+  'lh-22': 1.375rem,
+  'lh-20': 1.25rem,
+) !default;
+
+$letter-spacing: (
+  'tighter': -0.4px,
+  'tight': -0.2px,
+  'normal': normal,
+) !default;
+
+$pkt-font-weight: (
+  'pkt-font-light': (
+    'weight': 'light',
+  ),
+  'pkt-font-regular': (
+    'weight': 'regular',
+  ),
+  'pkt-font-medium': (
+    'weight': 'medium',
+  ),
+  'pkt-font-bold': (
+    'weight': 'bold',
+  ),
+);
+
+// pkt specific styles
+$pkt-styles: (
+  'pkt-txt-54': (
+    'size': 'size-54',
+    'weight': 'regular',
+    'letter-spacing': 'tighter',
+    'line-height': 'lh-82',
+  ),
+  'pkt-txt-40': (
+    'size': 'size-40',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-60',
+  ),
+  'pkt-txt-36': (
+    'size': 'size-36',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-54',
+  ),
+  'pkt-txt-30': (
+    'size': 'size-30',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-44',
+  ),
+  'pkt-txt-28': (
+    'size': 'size-28',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-42',
+  ),
+  'pkt-txt-26': (
+    'size': 'size-26',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-40',
+  ),
+  'pkt-txt-24': (
+    'size': 'size-24',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-36',
+  ),
+  'pkt-txt-22': (
+    'size': 'size-22',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-34',
+  ),
+  'pkt-txt-20': (
+    'size': 'size-20',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-32',
+  ),
+  'pkt-txt-18': (
+    'size': 'size-18',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-28',
+  ),
+  'pkt-txt-16': (
+    'size': 'size-16',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-24',
+  ),
+  'pkt-txt-14': (
+    'size': 'size-14',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-22',
+  ),
+  'pkt-txt-12': (
+    'size': 'size-12',
+    'weight': 'regular',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-20',
+  ),
+  'pkt-txt-54-medium': (
+    'size': 'size-54',
+    'weight': 'medium',
+    'letter-spacing': 'tighter',
+    'line-height': 'lh-82',
+  ),
+  'pkt-txt-40-medium': (
+    'size': 'size-40',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-60',
+  ),
+  'pkt-txt-36-medium': (
+    'size': 'size-36',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-54',
+  ),
+  'pkt-txt-30-medium': (
+    'size': 'size-30',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-44',
+  ),
+  'pkt-txt-28-medium': (
+    'size': 'size-28',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-42',
+  ),
+  'pkt-txt-26-medium': (
+    'size': 'size-26',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-40',
+  ),
+  'pkt-txt-24-medium': (
+    'size': 'size-24',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-36',
+  ),
+  'pkt-txt-22-medium': (
+    'size': 'size-22',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-34',
+  ),
+  'pkt-txt-20-medium': (
+    'size': 'size-20',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-32',
+  ),
+  'pkt-txt-18-medium': (
+    'size': 'size-18',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-28',
+  ),
+  'pkt-txt-16-medium': (
+    'size': 'size-16',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-24',
+  ),
+  'pkt-txt-14-medium': (
+    'size': 'size-14',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-22',
+  ),
+  'pkt-txt-12-medium': (
+    'size': 'size-12',
+    'weight': 'medium',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-20',
+  ),
+  'pkt-txt-54-bold': (
+    'size': 'size-54',
+    'weight': 'bold',
+    'letter-spacing': 'tighter',
+    'line-height': 'lh-82',
+  ),
+  'pkt-txt-40-bold': (
+    'size': 'size-40',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-60',
+  ),
+  'pkt-txt-36-bold': (
+    'size': 'size-36',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-54',
+  ),
+  'pkt-txt-30-bold': (
+    'size': 'size-30',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-44',
+  ),
+  'pkt-txt-28-bold': (
+    'size': 'size-28',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-42',
+  ),
+  'pkt-txt-26-bold': (
+    'size': 'size-26',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-40',
+  ),
+  'pkt-txt-24-bold': (
+    'size': 'size-24',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-36',
+  ),
+  'pkt-txt-22-bold': (
+    'size': 'size-22',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-34',
+  ),
+  'pkt-txt-20-bold': (
+    'size': 'size-20',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-32',
+  ),
+  'pkt-txt-18-bold': (
+    'size': 'size-18',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-28',
+  ),
+  'pkt-txt-16-bold': (
+    'size': 'size-16',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-24',
+  ),
+  'pkt-txt-14-bold': (
+    'size': 'size-14',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-22',
+  ),
+  'pkt-txt-12-bold': (
+    'size': 'size-12',
+    'weight': 'bold',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-20',
+  ),
+  'pkt-txt-54-light': (
+    'size': 'size-54',
+    'weight': 'light',
+    'letter-spacing': 'tighter',
+    'line-height': 'lh-82',
+  ),
+  'pkt-txt-40-light': (
+    'size': 'size-40',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-60',
+  ),
+  'pkt-txt-36-light': (
+    'size': 'size-36',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-54',
+  ),
+  'pkt-txt-30-light': (
+    'size': 'size-30',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-44',
+  ),
+  'pkt-txt-28-light': (
+    'size': 'size-28',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-42',
+  ),
+  'pkt-txt-26-light': (
+    'size': 'size-26',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-40',
+  ),
+  'pkt-txt-24-light': (
+    'size': 'size-24',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-36',
+  ),
+  'pkt-txt-22-light': (
+    'size': 'size-22',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-34',
+  ),
+  'pkt-txt-20-light': (
+    'size': 'size-20',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-32',
+  ),
+  'pkt-txt-18-light': (
+    'size': 'size-18',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-28',
+  ),
+  'pkt-txt-16-light': (
+    'size': 'size-16',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-24',
+  ),
+  'pkt-txt-14-light': (
+    'size': 'size-14',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-22',
+  ),
+  'pkt-txt-12-light': (
+    'size': 'size-12',
+    'weight': 'light',
+    'letter-spacing': 'tight',
+    'line-height': 'lh-20',
+  ),
+);

package/dist/scss/base/_accessibility.scss

@@ -0,0 +1,11 @@
+/* 
+ * Accessibility
+ * 
+ */
+
+@use '../abstracts/placeholders';
+
+// content available to screen readers only
+.sr-only {
+  @extend %sr-only;
+}

package/dist/scss/base/_colors.scss

@@ -0,0 +1,24 @@
+/* 
+ * Colors
+ */
+
+@use "../abstracts/variables";
+
+:root {
+  /**
+  * @tokens Colors
+  * @presenter Color
+  */
+  @each $name, $color in variables.$colors {
+    --#{$name}: #{$color};
+  }
+}
+
+@each $name, $color in variables.$colors {
+  .bg-#{$name} {
+    background-color: $color !important;
+  }
+  .txt-#{$name} {
+    color: $color !important;
+  }
+}