@helsenorge/designsystem-react 13.0.0-workspaces-beta.1 → 13.0.0-workspaces-beta.3

package/scss/bootstrap/scss/vendor/_rfs.scss

@@ -0,0 +1,233 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+// stylelint-disable property-blacklist, scss/dollar-variable-default, scss/comment-no-empty, scss/no-global-function-names, scss/at-mixin-pattern
+
+// SCSS RFS mixin
+//
+// Automated responsive font sizes
+//
+// Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE)
+
+// Configuration
+
+// Base font size
+$rfs-base-font-size: 1.25rem !default;
+$rfs-font-size-unit: rem !default;
+
+@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
+  @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
+}
+
+// Breakpoint at where font-size starts decreasing if screen width is smaller
+$rfs-breakpoint: 1200px !default;
+$rfs-breakpoint-unit: px !default;
+
+@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+  @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+}
+
+// Resize font size based on screen height and width
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if meta.type-of($rfs-factor) != 'number' or $rfs-factor <= 1 {
+  @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
+}
+
+// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
+$rfs-class: false !default;
+
+// 1 rem = $rfs-rem-value px
+$rfs-rem-value: 16 !default;
+
+// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
+$rfs-safari-iframe-resize-bug-fix: false !default;
+
+// Disable RFS by setting $enable-responsive-font-sizes to false
+$enable-responsive-font-sizes: true !default;
+
+// Cache $rfs-base-font-size unit
+$rfs-base-font-size-unit: math.unit($rfs-base-font-size);
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
+
+  @if $dividend == 0 {
+    @return 0;
+  }
+
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+
+  @while $remainder > 0 and $precision >= 0 {
+    $quotient: 0;
+
+    @while $remainder >= $divisor {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+
+    $result: $result * 10 + $quotient;
+    $factor: $factor * 0.1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+
+    @if $precision < 0 and $remainder >= $divisor * 5 {
+      $result: $result + 1;
+    }
+  }
+
+  $result: $result * $factor * $sign;
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
+  $unit-map: (
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%,
+  );
+
+  @if $dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit) {
+    $result: $result * map.get($unit-map, $dividend-unit);
+  }
+
+  @return $result;
+}
+
+// Remove px-unit from $rfs-base-font-size for calculations
+@if $rfs-base-font-size-unit == 'px' {
+  $rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
+} @else if $rfs-base-font-size-unit == 'rem' {
+  $rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 0 + 1, $rfs-rem-value));
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
+
+// Remove unit from $rfs-breakpoint for calculations
+@if $rfs-breakpoint-unit-cache == 'px' {
+  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
+} @else if $rfs-breakpoint-unit-cache == 'rem' or $rfs-breakpoint-unit-cache == 'em' {
+  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
+}
+
+// Internal mixin that adds disable classes to the selector if needed.
+@mixin _rfs-disable-class {
+  @if $rfs-class == 'disable' {
+    // Adding an extra class increases specificity, which prevents the media query to override the font size
+    &,
+    .disable-responsive-font-size &,
+    &.disable-responsive-font-size {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Internal mixin that adds enable classes to the selector if needed.
+@mixin _rfs-enable-class {
+  @if $rfs-class == 'enable' {
+    .enable-responsive-font-size &,
+    &.enable-responsive-font-size {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Internal mixin used to determine which media query needs to be used
+@mixin _rfs-media-query($mq-value) {
+  @if $rfs-two-dimensional {
+    @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
+      @content;
+    }
+  } @else {
+    @media (max-width: #{$mq-value}) {
+      @content;
+    }
+  }
+}
+
+// Responsive font size mixin
+@mixin rfs($fs, $important: false) {
+  // Cache $fs unit
+  $fs-unit: if(type-of($fs) == 'number', math.unit($fs), false);
+
+  // Add !important suffix if needed
+  $rfs-suffix: if($important, ' !important', '');
+
+  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+  @if not $fs-unit or $fs-unit != '' and $fs-unit != 'px' and $fs-unit != 'rem' or $fs == 0 {
+    font-size: #{$fs}#{$rfs-suffix};
+  } @else {
+    // Remove unit from $fs for calculations
+    @if $fs-unit == 'px' {
+      $fs: divide($fs, $fs * 0 + 1);
+    } @else if $fs-unit == 'rem' {
+      $fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value));
+    }
+
+    // Set default font size
+    $rfs-static: if($rfs-font-size-unit == rem, #{divide($fs, $rfs-rem-value)}rem, #{$fs}px);
+
+    // Only add the media query if the font size is bigger than the minimum font size
+    @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
+      font-size: #{$rfs-static}#{$rfs-suffix};
+    } @else {
+      // Calculate the minimum font size for $fs
+      $fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor);
+
+      // Calculate difference between $fs and the minimum font size
+      $fs-diff: $fs - $fs-min;
+
+      // Base font-size formatting
+      $min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
+
+      // Use `vmin` if two-dimensional is enabled
+      $variable-unit: if($rfs-two-dimensional, vmin, vw);
+
+      // Calculate the variable width between 0 and $rfs-breakpoint
+      $variable-width: #{divide($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
+
+      // Set the calculated font-size
+      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
+
+      // Breakpoint formatting
+      $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+
+      @include _rfs-disable-class {
+        font-size: #{$rfs-static}#{$rfs-suffix};
+      }
+
+      @include _rfs-media-query($mq-value) {
+        @include _rfs-enable-class {
+          font-size: $rfs-fluid;
+        }
+
+        // Include safari iframe resize fix if needed
+        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
+      }
+    }
+  }
+}
+
+// The font-size & responsive-font-size mixins use RFS to rescale the font size
+@mixin font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}
+
+@mixin responsive-font-size($fs, $important: false) {
+  @include rfs($fs, $important);
+}

package/scss/helsenorge.scss

@@ -0,0 +1,10 @@
+@forward 'reset';
+@forward 'spacers';
+@forward 'breakpoints';
+@forward 'palette';
+@forward 'fonts';
+@forward 'body';
+@forward 'print';
+@import './bootstrap/scss/bootstrap-grid';
+@import './supernova/styles/colors.css';
+@import './supernova/styles/spacers.css';

package/scss/layout.module.scss

@@ -0,0 +1,14 @@
+@use './breakpoints' as *;
+
+/*
+Denne filen er ment til å importeres som en css module:
+import designsystemlayout from './scss/layout.scss'
+<div className={designsystemlayout['container-breakout']}></div>
+*/
+
+.container-breakout {
+  // This is a copy of how bootstrap's row class sets margins inside a container
+  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_scss#L16C1-L17C30
+  margin-right: -$grid-gutter-width * 0.5;
+  margin-left: -$grid-gutter-width * 0.5;
+}

package/scss/layout.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  'container-breakout': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/scss/supernova/index.css

@@ -0,0 +1,4 @@
+/* Base tokens */
+@import './styles/spacers.css';
+@import './styles/colors.css';
+@import './styles/typography.css';

package/scss/supernova/styles/colors.css

@@ -0,0 +1,258 @@
+/* stylelint-disable color-hex-length */
+/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable scss/operator-no-unspaced */
+
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --color-action-graphics-onlight: #188097;
+  --color-action-graphics-onlight-hover: #126f87;
+  --core-color-banana-50: #fdf8df;
+  --core-color-banana-100: #fcf2bf;
+  --core-color-banana-200: #f9ea9f;
+  --core-color-banana-300: #f5e080;
+  --core-color-banana-400: #ebc840;
+  --core-color-banana-500: #ddab06;
+  --core-color-banana-600: #c59302;
+  --core-color-banana-700: #ab7c00;
+  --core-color-banana-800: #916500;
+  --core-color-banana-900: #764f00;
+  --core-color-blueberry-50: #e4f7f9;
+  --core-color-blueberry-100: #cae7ed;
+  --core-color-blueberry-200: #afdae3;
+  --core-color-blueberry-300: #7abecc;
+  --core-color-blueberry-400: #58aabb;
+  --core-color-blueberry-500: #188097;
+  --core-color-blueberry-600: #126f87;
+  --core-color-blueberry-700: #08667c;
+  --core-color-blueberry-800: #06596c;
+  --core-color-blueberry-900: #084350;
+  --core-color-cherry-50: #fff2ea;
+  --core-color-cherry-100: #f7e1d2;
+  --core-color-cherry-200: #eec0a5;
+  --core-color-cherry-300: #e39376;
+  --core-color-cherry-400: #d56147;
+  --core-color-cherry-500: #c83521;
+  --core-color-cherry-600: #b62e1c;
+  --core-color-cherry-700: #a31f0e;
+  --core-color-cherry-800: #912112;
+  --core-color-cherry-900: #7e1c0e;
+  --core-color-kiwi-50: #e6f8ee;
+  --core-color-kiwi-100: #c2edd6;
+  --core-color-kiwi-200: #9de2bf;
+  --core-color-kiwi-300: #79d6aa;
+  --core-color-kiwi-400: #56ca96;
+  --core-color-kiwi-500: #33be84;
+  --core-color-kiwi-600: #10b172;
+  --core-color-kiwi-700: #0ca161;
+  --core-color-kiwi-800: #099150;
+  --core-color-kiwi-900: #078141;
+  --core-color-neutral-50: #f5f3f3;
+  --core-color-neutral-100: #eae7e7;
+  --core-color-neutral-200: #d6d4d3;
+  --core-color-neutral-300: #bdbab9;
+  --core-color-neutral-400: #aaa8a6;
+  --core-color-neutral-500: #989693;
+  --core-color-neutral-600: #7d7c79;
+  --core-color-neutral-700: #62625f;
+  --core-color-neutral-800: #474745;
+  --core-color-neutral-900: #2b2c2b;
+  --core-color-plum-50: #f4ecfe;
+  --core-color-plum-100: #e5d5fb;
+  --core-color-plum-200: #cfb1f6;
+  --core-color-plum-300: #b388ec;
+  --core-color-plum-400: #9862df;
+  --core-color-plum-500: #7c3fcb;
+  --core-color-plum-600: #6c36b3;
+  --core-color-plum-700: #5c27a1;
+  --core-color-plum-800: #4c1b8c;
+  --core-color-plum-900: #3c1471;
+  --core-color-black: #000000;
+  --core-color-white: #ffffff;
+  --color-action-border-ondark: #ffffff;
+  --color-action-text-ondark: #ffffff;
+  --color-action-graphics-ondark: #ffffff;
+  --color-notification-background-info: #e4f7f9;
+  --color-notification-background-error: #fff2ea;
+  --color-notification-background-warning: #fdf8df;
+  --color-notification-background-success: #e6f8ee;
+  --color-notification-border-info: #08667c;
+  --color-notification-border-error: #a31f0e;
+  --color-notification-border-warning: #ab7c00;
+  --color-notification-border-success: #078141;
+  --color-notification-graphics-info: #08667c;
+  --color-notification-graphics-error: #a31f0e;
+  --color-notification-graphics-warning: #ab7c00;
+  --color-notification-graphics-success: #078141;
+  --color-notification-status-info: #188097;
+  --color-notification-status-error: #c83521;
+  --color-notification-status-warning: #ebc840;
+  --color-notification-status-success: #099150;
+  --color-disabled-background: #d6d4d3;
+  --color-disabled-text: #62625f;
+  --color-disabled-border: #7d7c79;
+  --color-destructive-background-emphasized: #f7e1d2;
+  --color-destructive-background-normal: #fff2ea;
+  --color-destructive-graphics-normal: #c83521;
+  --color-destructive-graphics-hover: #b62e1c;
+  --color-destructive-text-normal: #b62e1c;
+  --color-destructive-text-hover: #a31f0e;
+  --color-help-background-normal: #f4ecfe;
+  --color-help-graphics-normal: #5c27a1;
+  --color-help-border-normal: #5c27a1;
+  --color-disabled-graphics: #62625f;
+  --color-destructive-border-normal: #c83521;
+  --color-action-border-ondark-hover: #e4f7f9;
+  --color-action-graphics-ondark-hover: #e4f7f9;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
+  --color-action-background-transparent-onlight-hover: #126f8721;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
+  --color-action-background-transparent-onlight-hoverselected: #126f872b;
+  --color-action-border-ondark-focus: #ffffff;
+  --color-disabled-border-ondark: #d6d4d3;
+  --color-disabled-graphics-ondark: #d6d4d3;
+  --color-disabled-text-ondark: #ffffff;
+  --color-action-text-onlight: #126f87;
+  --color-action-text-onlight-hover: #08667c;
+  --color-action-border-onlight: #188097;
+  --color-action-border-onlight-hover: #08667c;
+  --color-action-border-onlight-focus: #000000;
+  --color-action-background-ondark: #ffffff;
+  --color-action-background-ondark-hover: #e4f7f9;
+  --color-action-background-ondark-selected: #cae7ed;
+  --color-action-background-ondark-hoverselected: #afdae3;
+  --color-action-background-onlight: #188097;
+  --color-action-background-onlight-hover: #08667c;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
+  --color-action-background-transparent-ondark-hover: #00000026;
+
+  /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
+  --color-action-background-transparent-ondark-hoverselected: #000000bf;
+  --color-base-background-blueberry: #e4f7f9;
+  --color-base-background-cherry: #fff2ea;
+  --color-base-background-neutral: #f5f3f3;
+  --color-base-background-white: #ffffff;
+  --color-base-background-dark-blueberry: #188097;
+  --color-base-background-dark-cherry: #c83521;
+  --color-base-background-dark-neutral: #2b2c2b;
+  --color-base-text-onlight: #000000;
+  --color-base-text-ondark: #ffffff;
+  --color-base-border-ondark: #d6d4d3;
+  --color-base-border-onlight: #7d7c79;
+  --color-base-border-onlight-emphasized: #62625f;
+  --color-base-graphics-onlight: #000000;
+  --color-base-graphics-ondark: #ffffff;
+  --brandcolor-white: #ffffff;
+  --brandcolor-black: #000000;
+  --brandcolor-neutral-verylight: #f5f3f3;
+  --brandcolor-neutral-light: #eae7e7;
+  --brandcolor-neutral-mediumlight: #d6d4d3;
+  --brandcolor-neutral-medium: #989693;
+  --brandcolor-neutral-dark: #62625f;
+  --brandcolor-neutral-verydark: #2b2c2b;
+  --brandcolor-blueberry-verylight: #e4f7f9;
+  --brandcolor-blueberry-light: #cae7ed;
+  --brandcolor-blueberry-mediumlight: #afdae3;
+  --brandcolor-blueberry-medium: #188097;
+  --brandcolor-blueberry-mediumdark: #126f87;
+  --brandcolor-blueberry-dark: #08667c;
+  --brandcolor-cherry-verylight: #fff2ea;
+  --brandcolor-cherry-light: #f7e1d2;
+  --brandcolor-cherry-medium: #c83521;
+  --brandcolor-cherry-mediumdark: #b62e1c;
+  --brandcolor-cherry-dark: #a31f0e;
+
+  /* Placeholdertext in input- and textarea-controls */
+  --color-placeholder-text-onlight: #62625f;
+  --color-base-border-onlight-subtle: #d6d4d3;
+  --color-base-border-neutral: #d6d4d3;
+  --color-base-border-blueberry: #afdae3;
+  --color-base-border-cherry: #eec0a5;
+
+  /* In a few cases where coloured text is required to stress the semantics of an information notification text */
+  --color-notification-text-info: #08667c;
+
+  /* In a few cases where coloured text is required to stress the semantics of an error notification text */
+  --color-notification-text-error: #a31f0e;
+  --color-notification-text-warning: #916500;
+  --color-notification-text-success: #078141;
+  --color-base-border-neutral-emphasized: #bdbab9;
+  --color-notification-status-draft: #7d7c79;
+
+  /* hoverstate on help components on white background */
+  --color-help-background-transparent-onlight-hover: #6c36b31a;
+  --color-help-background-transparent-onlight-hover-selected: #6c38b333;
+  --color-help-background-transparent-onlight-active: #6c38b34d;
+  --color-action-background-transparent-onlight-active: #126f874d;
+
+  /* Background outside of modal and bottomsheet to mask inactive screen-area */
+  --color-shadow-pagemask: #2c2b2cb8;
+  --color-help-border-subtle-wcag: #9862df;
+  --color-help-graphics-dark: #4c1b8c;
+  --color-help-border-dark: #4c1b8c;
+  --color-help-graphics-verydark: #3c1471;
+  --color-help-border-verydark: #3c1471;
+  --color-action-background-onlight-active: #06596c;
+  --color-action-background-like-transparent-but-opaque-onlight-hover: #e0ecef;
+  --color-action-background-like-transparent-but-opaque-onlight-hoverselected: #d7e7eb;
+  --color-action-background-stroke-onlight: #126f87;
+  --component-stickynote-background-normal-light: #fdf8df;
+  --component-stickynote-background-normal-medium: #fcf2bf;
+  --component-stickynote-background-normal-dark: #f9ea9f;
+  --component-stickynote-border-normal: #916500;
+  --component-stickynote-border-error: #d56147;
+  --component-stickynote-background-error-dark: #eec0a5;
+  --component-stickynote-background-error-medium: #f7e1d2;
+  --component-stickynote-background-error-light: #fff2ea;
+  --color-base-text-onlight-subdued: #474745;
+  --component-stickynote-background-fold-error-dark: #e39376;
+  --component-stickynote-background-fold-error-light: #f7e1d2;
+  --component-stickynote-background-fold-error-medium: #eec0a5;
+  --component-stickynote-background-fold-normal-light: #fcf2bf;
+  --component-stickynote-background-fold-normal-medium: #f9ea9f;
+  --component-stickynote-background-fold-normal-dark: #ebc840;
+  --component-stickynote-background-transparent-onlight-hover: #ebc84021;
+  --component-stickynote-background-transparent-onlight-active: #ebc8404d;
+  --component-stickynote-background-transparent-error-hover: #d5614721;
+  --component-stickynote-background-transparent-error-active: #d5614740;
+  --component-listelements-background-neutral-light: #f5f3f3;
+  --component-listelements-background-neutral-medium: #eae7e7;
+  --component-listelements-background-neutral-dark: #d6d4d3;
+  --component-listelements-border-neutral-light: #eae7e7;
+  --component-listelements-background-blueberry-light: #e4f7f9;
+  --component-listelements-background-blueberry-medium: #cae7ed;
+  --component-listelements-border-blueberry-light: #cae7ed;
+  --component-listelements-background-blueberry-dark: #afdae3;
+  --component-listelements-border-blueberry-normal: #188097;
+  --component-listelements-background-cherry-light: #fff2ea;
+  --component-listelements-background-cherry-medium: #f7e1d2;
+  --component-listelements-border-cherry-light: #f7e1d2;
+  --component-listelements-background-cherry-dark: #eec0a5;
+  --component-listelements-border-cherry-normal: #d56147;
+  --component-listelements-border-neutral-normal: #7d7c79;
+  --component-statusdot-graphics-banana-ondark: #f5e080;
+  --component-statusdot-graphics-banana-onlight: #ab7c00;
+  --component-statusdot-graphics-blueberry-ondark: #afdae3;
+  --component-statusdot-graphics-blueberry-onlight: #188097;
+  --component-statusdot-graphics-cherry-ondark: #f7e1d2;
+  --component-statusdot-graphics-cherry-onlight: #a31f0e;
+  --component-statusdot-graphics-kiwi-ondark: #9de2bf;
+  --component-statusdot-graphics-kiwi-onlight: #078141;
+  --component-statusdot-graphics-neutral-ondark: #f5f3f3;
+  --component-statusdot-graphics-neutral-onlight: #7d7c79;
+  --color-action-graphics-emphasized-onlight: #08667c;
+  --color-base-background-stroke-dark-cherry: #b62e1c;
+  --color-base-background-stroke-dark-blueberry: #126f87;
+  --color-base-background-stroke-dark-neutral: #000000;
+  --color-destructive-graphics-emphasized-onlight: #a31f0e;
+  --component-listelements-background-neutral-verydark: #bdbab9;
+  --component-listelements-background-blueberry-verydark: #7abecc;
+  --component-listelements-border-neutral-ondark: #ffffff;
+  --component-listelements-background-cherry-verydark: #e39376;
+}

package/scss/supernova/styles/spacers.css

@@ -0,0 +1,24 @@
+/* stylelint-disable color-hex-length */
+/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable scss/operator-no-unspaced */
+
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  --core-space-4xs: 0.125rem;
+  --core-space-3xs: 0.25rem;
+  --core-space-2xs: 0.5rem;
+  --core-space-xs: 0.75rem;
+  --core-space-s: 1rem;
+  --core-space-m: 1.5rem;
+  --core-space-l: 2rem;
+  --core-space-xl: 3rem;
+  --core-space-2xl: 4rem;
+  --core-space-3xl: 5rem;
+  --core-space-4xl: 6rem;
+  --core-space-5xl: 7rem;
+  --core-space-6xl: 8rem;
+}

package/scss/supernova/styles/typography.css

@@ -0,0 +1,110 @@
+/* stylelint-disable color-hex-length */
+/* stylelint-disable comment-empty-line-before */
+/* stylelint-disable scss/operator-no-unspaced */
+
+/**
+ * This file was generated automatically by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+:root {
+  /* Hovedtittel H1 */
+  --desktop-h1-title1: 600 3rem/120% 'Source Sans Pro';
+
+  /* Sekundærtittel H2 */
+  --desktop-h2-title2: 600 2rem/120% 'Source Sans Pro';
+
+  /* Tertiærtittel H3 */
+  --desktop-h3-title3: 600 1.625rem/120% 'Source Sans Pro';
+  --desktop-h4-title4: 600 1.375rem/130% 'Source Sans Pro';
+  --desktop-h5-title5: 700 1.125rem/140% 'Source Sans Pro';
+  --desktop-preamble: 400 1.5rem/130% 'Source Sans Pro';
+  --desktop-legend: 600 1.5rem/130% 'Source Sans Pro';
+  --desktop-label: 600 1.25rem/130% 'Source Sans Pro';
+  --desktop-body: 400 1.25rem/150% 'Source Sans Pro';
+
+  /* Display of condensed textual data, such as metadata or information that is useful, but perhaps not essential for the use of a service. */
+  --desktop-compact-data: 400 1.125rem/140% 'Source Sans Pro';
+
+  /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
+  --desktop-tablecell: 400 1.125rem/130% 'Source Sans Pro';
+  --desktop-body-strong: 600 1.25rem/150% 'Source Sans Pro';
+
+  /* Text inside input-fields, textarea fields and numeric steppers, etc. Not to be used as the Label for Radiogroup or Checkbox - use Label. */
+  --desktop-form-input: 400 1.25rem/140% 'Source Sans Pro';
+
+  /* Bildetekst - plasseres nedenfor bilde eller figur */
+  --desktop-image-caption: 400 1rem/150% 'Source Sans Pro';
+
+  /* Supply copyright information for images */
+  --desktop-image-credit: 400 0.75rem/130% 'Source Sans Pro';
+
+  /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
+  --desktop-status-time-stamp-time: 400 1.125rem/110% 'Source Sans Pro';
+
+  /* Hovedtittel H1 */
+  --mobile-h1-title1: 600 2rem/120% 'Source Sans Pro';
+
+  /* Sekundærtittel H2 */
+  --mobile-h2-title2: 600 1.625rem/120% 'Source Sans Pro';
+
+  /* Tertiærtittel H3 */
+  --mobile-h3-title3: 600 1.375rem/136% 'Source Sans Pro';
+  --mobile-h4-title4: 600 1.25rem/130% 'Source Sans Pro';
+  --mobile-preamble: 400 1.25rem/130% 'Source Sans Pro';
+  --mobile-legend: 600 1.125rem/130% 'Source Sans Pro';
+  --mobile-label: 600 1.125rem/120% 'Source Sans Pro';
+  --mobile-body: 400 1.125rem/150% 'Source Sans Pro';
+
+  /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
+  --mobile-tablecell: 400 1.125rem/128% 'Source Sans Pro';
+
+  /* Text in Input and Textarea - widgets */
+  --mobile-form-input: 400 1.125rem/150% 'Source Sans Pro';
+  --mobile-image-caption: 400 1rem/150% 'Source Sans Pro';
+  --mobile-image-credit: 400 0.75rem/133% 'Source Sans Pro';
+
+  /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
+  --mobile-status-time-stamp-time: 400 1rem/110% 'Source Sans Pro';
+  --mobile-h5-title5: 700 1rem/140% 'Source Sans Pro';
+  --desktop-h6-title6: 600 1.125rem/140% 'Source Sans Pro';
+  --desktop-label-subdued: 400 1.25rem/130% 'Source Sans Pro';
+  --desktop-sublabel: 600 1.125rem/130% 'Source Sans 3';
+  --desktop-sublabel-subdued: 400 1.125rem/130% 'Source Sans 3';
+  --mobile-h6-title6: 600 1rem/140% 'Source Sans Pro';
+  --mobile-label-subdued: 400 1.125rem/120% 'Source Sans Pro';
+  --mobile-sublabel: 600 1rem/120% 'Source Sans 3';
+
+  /* <label> */
+  --mobile-sublabel-subdued: 400 1rem/120% 'Source Sans 3';
+  --mobile-body-strong: 600 1.125rem/150% 'Source Sans Pro';
+  --mobile-compact-data: 400 1rem/150% 'Source Sans Pro';
+
+  /* Name-value pairs as rendered by an HTML <DT>-tag */
+  --desktop-definitionlist-type: 600 1.25rem/130% 'Source Sans Pro';
+
+  /* Data-value in Name-Value-pairs as rendered by a <DD>-tag (definition-data) */
+  --desktop-definition-list-data: 400 1.25rem/130% 'Source Sans Pro';
+
+  /* Use for inherent "chunking" of text in hmtl lists <LI>, ie. bullet-lists and ordered lists. */
+  --desktop-textlist: 400 1.25rem/130% 'Source Sans Pro';
+
+  /* Use for the Name part in name-value pairs, the equivalent of html <DT> */
+  --mobile-definitionlist-type: 600 1.125rem/120% 'Source Sans Pro';
+  --mobile-definitionlist-data: 400 1.125rem/120% 'Source Sans Pro';
+
+  /* Renders clumping in ordinary clumps */
+  --mobile-textlist: 400 1.125rem/120% 'Source Sans Pro';
+
+  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
+  --desktop-help-text: 400 1.125rem/140% 'Source Sans Pro';
+
+  /* For use in Help trigger components */
+  --desktop-help-trigger-text: 600 1.125rem/130% 'Source Sans 3';
+
+  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
+  --mobile-help-text: 400 1rem/150% 'Source Sans Pro';
+
+  /* For use in Help trigger components */
+  --mobile-help-trigger-text: 600 1rem/120% 'Source Sans 3';
+}