@helsenorge/designsystem-react 13.0.0-workspaces-beta.0 → 13.0.0-workspaces-beta.2

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;
+    }
+  }
+}

package/scss/_palette.scss

@@ -0,0 +1,146 @@
+$black: #000;
+$white: #fff;
+$banana50: #fdf8df;
+$banana100: #fcf2bf;
+$banana200: #f9ea9f;
+$banana300: #f5e080;
+$banana400: #ebc840;
+$banana500: #ddab06;
+$banana600: #c59302;
+$banana700: #ab7c00;
+$banana800: #916500;
+$banana900: #764f00;
+$blueberry50: #e4f7f9;
+$blueberry100: #cae7ed;
+$blueberry200: #afdae3;
+$blueberry300: #7abecc;
+$blueberry400: #58aabb;
+$blueberry500: #188097;
+$blueberry600: #126f87;
+$blueberry60010: #126f8710;
+$blueberry700: #08667c;
+$blueberry800: #06596c;
+$blueberry900: #084350;
+$cherry50: #fff2ea;
+$cherry100: #f7e1d2;
+$cherry200: #eec0a5;
+$cherry300: #e39376;
+$cherry400: #d56147;
+$cherry500: #c83521;
+$cherry600: #b62e1c;
+$cherry700: #a31f0e;
+$cherry800: #912112;
+$cherry900: #7e1c0e;
+$kiwi50: #e6f8ee;
+$kiwi100: #c2edd6;
+$kiwi200: #9de2bf;
+$kiwi300: #79d6aa;
+$kiwi400: #56ca96;
+$kiwi500: #33be84;
+$kiwi600: #10b172;
+$kiwi700: #0ca161;
+$kiwi800: #099150;
+$kiwi900: #078141;
+$neutral50: #f5f3f3;
+$neutral100: #eae7e7;
+$neutral200: #d6d4d3;
+$neutral300: #bdbab9;
+$neutral400: #aaa8a6;
+$neutral500: #989693;
+$neutral600: #7d7c79;
+$neutral700: #62625f;
+$neutral800: #474745;
+$neutral900: #2b2c2b;
+$plum50: #efe4fd;
+$plum100: #d7bdf9;
+$plum200: #bf98f3;
+$plum300: #a875eb;
+$plum400: #9153e2;
+$plum500: #7a33d7;
+$plum600: #6a2abf;
+$plum700: #5b22a6;
+$plum800: #4c1b8c;
+$plum900: #3c1471;
+$inverted-hover-old: #ffffff0d;
+$inverted-hover: #ffffff1a;
+$transparent-grey: rgb(102 102 102 / 75%);
+$palette-map: (
+  'banana50': $banana50,
+  'banana100': $banana100,
+  'banana200': $banana200,
+  'banana300': $banana300,
+  'banana400': $banana400,
+  'banana500': $banana500,
+  'banana600': $banana600,
+  'banana700': $banana700,
+  'banana800': $banana800,
+  'banana900': $banana900,
+  'blueberry50': $blueberry50,
+  'blueberry100': $blueberry100,
+  'blueberry200': $blueberry200,
+  'blueberry300': $blueberry300,
+  'blueberry400': $blueberry400,
+  'blueberry500': $blueberry500,
+  'blueberry600': $blueberry600,
+  'blueberry700': $blueberry700,
+  'blueberry800': $blueberry800,
+  'blueberry900': $blueberry900,
+  'cherry50': $cherry50,
+  'cherry100': $cherry100,
+  'cherry200': $cherry200,
+  'cherry300': $cherry300,
+  'cherry400': $cherry400,
+  'cherry500': $cherry500,
+  'cherry600': $cherry600,
+  'cherry700': $cherry700,
+  'cherry800': $cherry800,
+  'cherry900': $cherry900,
+  'kiwi50': $kiwi50,
+  'kiwi100': $kiwi100,
+  'kiwi200': $kiwi200,
+  'kiwi300': $kiwi300,
+  'kiwi400': $kiwi400,
+  'kiwi500': $kiwi500,
+  'kiwi600': $kiwi600,
+  'kiwi700': $kiwi700,
+  'kiwi800': $kiwi800,
+  'kiwi900': $kiwi900,
+  'neutral50': $neutral50,
+  'neutral100': $neutral100,
+  'neutral200': $neutral200,
+  'neutral300': $neutral300,
+  'neutral400': $neutral400,
+  'neutral500': $neutral500,
+  'neutral600': $neutral600,
+  'neutral700': $neutral700,
+  'neutral800': $neutral800,
+  'neutral900': $neutral900,
+  'plum50': $plum50,
+  'plum100': $plum100,
+  'plum200': $plum200,
+  'plum300': $plum300,
+  'plum400': $plum400,
+  'plum500': $plum500,
+  'plum600': $plum600,
+  'plum700': $plum700,
+  'plum800': $plum800,
+  'plum900': $plum900,
+  'black': $black,
+  'white': $white,
+);
+
+/**
+* Konverter en gjennomsiktig farge til en ugjennomsiktig farge ved å simulere fargen plassert
+* på en bakgrunnsfarge (f.eks. 50% gjennomsiktig $blueberry200 på hvit bakgrunn).
+* 
+* Fra https://makandracards.com/makandra/42500-sass-how-to-convert-an-rgba-color-to-its-rgb-look-alike
+* 
+* @param $rgba Farge med alpha-verdi, f.eks. rgba(black, 0.67)
+* @param $background Bakgrunnsfarge. Default: $white
+* 
+* @returns Farge uten gjennomsiktighet
+*/
+@function rgba-to-rgb($rgba, $background: $white) {
+  /* stylelint-disable-next-line scss/no-global-function-names */
+  @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
+}

package/scss/_print.scss

@@ -0,0 +1,219 @@
+@use 'sass:map';
+@use 'palette' as palette;
+@use 'breakpoints' as breakpoints;
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  @page {
+    size: a3;
+  }
+
+  body {
+    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
+  }
+
+  .container {
+    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid palette.$neutral500;
+    page-break-inside: avoid;
+  }
+
+  .table {
+    border-collapse: collapse !important;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+
+  .col-print-1 {
+    max-width: 8.3333%;
+  }
+
+  .col-print-2 {
+    max-width: 16.6667%;
+  }
+
+  .col-print-3 {
+    max-width: 25%;
+  }
+
+  .col-print-4 {
+    max-width: 33.3333%;
+  }
+
+  .col-print-5 {
+    max-width: 41.6667%;
+  }
+
+  .col-print-6 {
+    max-width: 50%;
+  }
+
+  .col-print-7 {
+    max-width: 58.3333%;
+  }
+
+  .col-print-8 {
+    max-width: 66.6667%;
+  }
+
+  .col-print-9 {
+    max-width: 75%;
+  }
+
+  .col-print-10 {
+    max-width: 83.3333%;
+  }
+
+  .col-print-11 {
+    max-width: 91.6667%;
+  }
+
+  .col-print-12 {
+    max-width: 100%;
+  }
+
+  .order-print-first {
+    order: -1;
+  }
+
+  .order-print-last {
+    order: 13;
+  }
+
+  .order-print-0 {
+    order: 0;
+  }
+
+  .order-print-1 {
+    order: 1;
+  }
+
+  .order-print-2 {
+    order: 2;
+  }
+
+  .order-print-3 {
+    order: 3;
+  }
+
+  .order-print-4 {
+    order: 4;
+  }
+
+  .order-print-5 {
+    order: 5;
+  }
+
+  .order-print-6 {
+    order: 6;
+  }
+
+  .order-print-7 {
+    order: 7;
+  }
+
+  .order-print-8 {
+    order: 8;
+  }
+
+  .order-print-9 {
+    order: 9;
+  }
+
+  .order-print-10 {
+    order: 10;
+  }
+
+  .order-print-11 {
+    order: 11;
+  }
+
+  .order-print-12 {
+    order: 12;
+  }
+
+  .offset-print-0 {
+    margin-left: 0;
+  }
+
+  .offset-print-1 {
+    margin-left: 8.3333%;
+  }
+
+  .offset-print-2 {
+    margin-left: 16.6667%;
+  }
+
+  .offset-print-3 {
+    margin-left: 25%;
+  }
+
+  .offset-print-4 {
+    margin-left: 33.3333%;
+  }
+
+  .offset-print-5 {
+    margin-left: 41.6667%;
+  }
+
+  .offset-print-6 {
+    margin-left: 50%;
+  }
+
+  .offset-print-7 {
+    margin-left: 58.3333%;
+  }
+
+  .offset-print-8 {
+    margin-left: 66.6667%;
+  }
+
+  .offset-print-9 {
+    margin-left: 75%;
+  }
+
+  .offset-print-10 {
+    margin-left: 83.3333%;
+  }
+
+  .offset-print-11 {
+    margin-left: 91.6667%;
+  }
+}

package/scss/_reset.scss

@@ -0,0 +1,13 @@
+@import 'normalize.css/normalize.css';
+
+/** Fiks for iOS og Safari 15 */
+button,
+input,
+optgroup,
+select,
+textarea,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  color: black;
+}