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

package/scss/_figma-tokens.scss

@@ -0,0 +1,68 @@
+// Do not edit directly
+// Generated on Wed, 05 Oct 2022 11:38:01 GMT
+
+$palette-white: #fff;
+$palette-black: #000;
+$palette-plum900: #3c1471;
+$palette-plum800: #4c1b8c;
+$palette-plum700: #5b22a6;
+$palette-plum600: #6a2abf;
+$palette-plum500: #7a33d7;
+$palette-plum400: #9153e2;
+$palette-plum300: #a875eb;
+$palette-plum200: #bf98f3;
+$palette-plum100: #d7bdf9;
+$palette-plum50: #efe4fd;
+$palette-neutral900: #2b2c2b;
+$palette-neutral800: #474745;
+$palette-neutral700: #62625f;
+$palette-neutral600: #7d7c79;
+$palette-neutral500: #989693;
+$palette-neutral400: #aaa8a6;
+$palette-neutral300: #bdbab9;
+$palette-neutral200: #d6d4d3;
+$palette-neutral100: #eae7e7;
+$palette-neutral50: #f5f3f3;
+$palette-kiwi900: #078141;
+$palette-kiwi800: #099150;
+$palette-kiwi700: #0ca161;
+$palette-kiwi600: #10b172;
+$palette-kiwi500: #33be84;
+$palette-kiwi400: #56ca96;
+$palette-kiwi300: #79d6aa;
+$palette-kiwi200: #9de2bf;
+$palette-kiwi100: #c2edd6;
+$palette-kiwi50: #e6f8ee;
+$palette-cherry900: #7e1c0e;
+$palette-cherry800: #912112;
+$palette-cherry700: #a31f0e;
+$palette-cherry600: #b62e1c;
+$palette-cherry500: #c83521;
+$palette-cherry400: #d56147;
+$palette-cherry300: #e39376;
+$palette-cherry200: #eec0a5;
+$palette-cherry100: #f7e1d2;
+$palette-cherry50: #fff2ea;
+$palette-blueberry900: #084350;
+$palette-blueberry800: #06596c;
+$palette-blueberry700: #08667c;
+$palette-blueberry600: #126f87;
+$palette-blueberry500: #188097;
+$palette-blueberry400: #58aabb;
+$palette-blueberry300: #7abecc;
+$palette-blueberry200: #afdae3;
+$palette-blueberry100: #cae7ed;
+$palette-blueberry50: #e4f7f9;
+$palette-banana900: #764f00;
+$palette-banana800: #916500;
+$palette-banana700: #ab7c00;
+$palette-banana600: #c59302;
+$palette-banana500: #ddab06;
+$palette-banana400: #ebc840;
+$palette-banana300: #f1d460;
+$palette-banana200: #f5e080;
+$palette-banana100: #f9ea9f;
+$palette-banana50: #fcf2bf;
+$font-main: $palette-white;
+$backgrounds-destructive: $palette-cherry600;
+$backgrounds-main: $palette-blueberry600;

package/scss/_font-mixins.scss

@@ -0,0 +1,262 @@
+@use 'sass:map';
+@use './spacers' as spacers;
+@use './breakpoints' as breakpoints;
+
+@mixin title-feature {
+  font-size: 2.375rem;
+  line-height: 2.875rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 4rem;
+    line-height: 5rem;
+  }
+}
+
+@mixin title1 {
+  font-size: 2rem;
+  line-height: 2.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 3rem;
+    line-height: 3.625rem;
+  }
+}
+
+@mixin title2 {
+  font-size: 1.625rem;
+  line-height: 1.938rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 2rem;
+    line-height: 2.375rem;
+  }
+}
+
+@mixin title3 {
+  font-size: 1.375rem;
+  line-height: 1.813rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.625rem;
+    line-height: 2rem;
+  }
+}
+
+@mixin title4 {
+  font-size: 1.25rem;
+  line-height: 1.625rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.375rem;
+    line-height: 1.813rem;
+  }
+}
+
+@mixin title5 {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  letter-spacing: 0.03rem;
+  font-weight: 600;
+  text-transform: uppercase;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.563rem;
+  }
+}
+
+@mixin title6 {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.563rem;
+  }
+}
+
+@mixin body {
+  font-size: 1.125rem;
+  line-height: 1.688rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+  }
+}
+
+@mixin preamble {
+  font-size: 1.25rem;
+  line-height: 1.625rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 1.938rem;
+  }
+}
+
+@mixin legend {
+  font-size: 1.125rem;
+  line-height: 1.438rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 1.938rem;
+  }
+}
+
+@mixin label {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin label-subdued {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin sublabel {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin sublabel-subdued {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin compact-data {
+  font-size: 1rem;
+  line-height: 1.5rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.4375rem;
+  }
+}
+
+@mixin table-cell {
+  font-size: 1.125rem;
+  line-height: 1.4375rem;
+}
+
+@mixin image-caption {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+@mixin image-credit {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@mixin status-timestamp {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+}
+
+@mixin input-text {
+  font-size: 1.125rem;
+  line-height: 1.688rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    line-height: 1.4375rem;
+  }
+}
+
+@mixin input-text-large {
+  font-size: 1.125rem;
+  line-height: 1.563rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+@mixin text-list {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-type {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-data {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin help-text {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.575rem;
+  }
+}
+
+@mixin help-trigger-text {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}

package/scss/_font-settings.scss

@@ -0,0 +1,8 @@
+$font-size-xs: 1rem; // 16px
+$font-size-sm: 1.125rem; // 18px
+$font-size-md: 1.25rem; // 20px
+$font-size-lg: 1.5rem; // 24px
+$lineheight-size-xs: 1.5rem; // 24px
+$lineheight-size-sm: 1.75rem; // 28px
+$lineheight-size-md: 1.875rem; // 30px
+$lineheight-size-lg: 2rem; // 32px

package/scss/_fonts.scss

@@ -0,0 +1,155 @@
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Extra Light'),
+    local('SourceSansPro-ExtraLight'),
+    url('../fonts/source-sans-pro-200-extralight.woff') format('woff'),
+    url('../fonts/source-sans-pro-200-extralight.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Extra Light Italic'),
+    local('SourceSansPro-ExtraLightItalic'),
+    url('../fonts/source-sans-pro-200-extralight-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-200-extralight-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Light'),
+    local('SourceSansPro-Light'),
+    url('../fonts/source-sans-pro-300-light.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Light Italic'),
+    local('SourceSansPro-LightItalic'),
+    url('../fonts/source-sans-pro-300-light-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Regular'),
+    local('SourceSansPro-Regular'),
+    url('../fonts/source-sans-pro-400-regular.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Italic'),
+    local('SourceSansPro-Italic'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Source Sans Pro SemiBold'),
+    local('SourceSansPro-SemiBold'),
+    url('../fonts/source-sans-pro-600-semibold.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Source Sans Pro SemiBold Italic'),
+    local('SourceSansPro-SemiBoldItalic'),
+    url('../fonts/source-sans-pro-600-semibold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Bold'),
+    local('SourceSansPro-Bold'),
+    url('../fonts/source-sans-pro-700-bold.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Bold Italic'),
+    local('SourceSansPro-BoldItalic'),
+    url('../fonts/source-sans-pro-700-bold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Black'),
+    local('SourceSansPro-Black'),
+    url('../fonts/source-sans-pro-900-black.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Black Italic'),
+    local('SourceSansPro-BlackItalic'),
+    url('../fonts/source-sans-pro-900-black-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black-italic.woff2') format('woff2');
+}

package/scss/_grid.scss

@@ -0,0 +1,6 @@
+$enable-deprecation-messages: true;
+
+@import './bootstrap/scss/vendor/rfs';
+@import './bootstrap/scss/mixins/deprecate';
+@import './bootstrap/scss/mixins/breakpoints';
+@import './bootstrap/scss/mixins/grid';

package/scss/_icon.scss

@@ -0,0 +1,8 @@
+$icon-sizes: (
+  xxs: 24px,
+  xs: 38px,
+  sm: 48px,
+  md: 64px,
+  lg: 80px,
+  xl: 130px,
+);

package/scss/_input.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use './palette' as palette;
+@use './spacers' as spacers;
+@use './font-settings' as font-settings;
+@use './breakpoints' as breakpoints;
+
+@mixin input-wrapper {
+  width: 100%;
+}
+
+@mixin input-container {
+  display: flex;
+  font-size: font-settings.$font-size-sm;
+  width: 100%;
+  border: 2px solid palette.$neutral700;
+  outline: none;
+  background: palette.$white;
+
+  &:focus-within {
+    background: palette.$white;
+    border-color: palette.$neutral900;
+    box-shadow: 0 0 0 2px palette.$neutral900;
+  }
+
+  &:hover {
+    background: palette.$neutral50;
+    border-color: palette.$neutral700;
+    box-shadow: 0 0 0 1px palette.$neutral700;
+
+    &:focus-within {
+      border-color: palette.$black;
+      box-shadow: 0 0 0 2px palette.$black;
+    }
+  }
+
+  &--on-blueberry {
+    border-color: palette.$blueberry500;
+
+    &:hover {
+      background: palette.$blueberry50;
+      box-shadow: 0 0 0 1px palette.$blueberry500;
+      border-color: palette.$blueberry500;
+    }
+
+    &:focus-within {
+      background: palette.$white;
+      border-color: palette.$neutral900;
+      box-shadow: 0 0 0 2px palette.$neutral900;
+    }
+  }
+
+  &--on-dark {
+    border-color: palette.$blueberry900;
+
+    &:hover {
+      background: palette.$blueberry50;
+      border-color: palette.$blueberry900;
+      box-shadow: 0 0 0 1px palette.$blueberry900;
+    }
+
+    &:focus-within {
+      background: palette.$white;
+      border-color: palette.$neutral900;
+      box-shadow: 0 0 0 2px palette.$neutral900;
+    }
+  }
+
+  &--invalid {
+    border-color: palette.$cherry600;
+
+    &:hover {
+      background: palette.$cherry100;
+      border-color: palette.$cherry600;
+      box-shadow: 0 0 0 2px palette.$cherry600;
+    }
+
+    &:focus-within {
+      background: palette.$white;
+      border-color: palette.$neutral900;
+      box-shadow: 0 0 0 2px palette.$neutral900;
+    }
+  }
+
+  &--transparent {
+    background: transparent;
+
+    &:hover {
+      background: palette.$neutral100;
+    }
+
+    &:focus-within {
+      background: palette.$white;
+    }
+  }
+  &--transparent#{&}--on-blueberry {
+    &:hover {
+      background: palette.$blueberry100;
+    }
+
+    &:focus-within {
+      background: palette.$white;
+    }
+  }
+
+  &--disabled {
+    background: transparent;
+    border-color: palette.$neutral600;
+    border-style: dashed;
+    color: palette.$neutral700;
+
+    &:hover {
+      background: transparent;
+      border-color: palette.$neutral600;
+      box-shadow: none;
+    }
+  }
+
+  &__input {
+    line-height: 1.625rem;
+    font-family: inherit;
+    font-size: font-settings.$font-size-sm;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    width: 100%;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      font-size: font-settings.$font-size-md;
+    }
+
+    &::placeholder {
+      color: palette.$neutral500;
+    }
+
+    &--disabled {
+      color: palette.$neutral700;
+    }
+  }
+}