@helsenorge/designsystem-react 1.0.0-beta.7 → 1.0.0-beta101

package/{dist/scss → scss}/_palette.scss

@@ -1,133 +1,136 @@
-$black: #000000;
-$white: #ffffff;
-
-$banana50: #fcf2bf;
-$banana100: #f9ea9f;
-$banana200: #f5e080;
-$banana300: #f1d460;
-$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;
-$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;
-
-$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,
-);
+$black: #000000;
+$white: #ffffff;
+
+$banana50: #fcf2bf;
+$banana100: #f9ea9f;
+$banana200: #f5e080;
+$banana300: #f1d460;
+$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;
+$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: #ffffff0d;
+$transparentGrey: rgba(102, 102, 102, 0.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,
+);

package/scss/_print.scss

@@ -0,0 +1,176 @@
+@media print {
+  *,
+  *::before,
+  *::after {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  @page {
+    size: a3;
+  }
+
+  body {
+    min-width: map-get($grid-breakpoints, lg) !important;
+  }
+  .container {
+    min-width: map-get($grid-breakpoints, lg) !important;
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid $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.33333%;
+  }
+  .col-print-2 {
+    max-width: 16.66667%;
+  }
+  .col-print-3 {
+    max-width: 25%;
+  }
+  .col-print-4 {
+    max-width: 33.33333%;
+  }
+  .col-print-5 {
+    max-width: 41.66667%;
+  }
+  .col-print-6 {
+    max-width: 50%;
+  }
+  .col-print-7 {
+    max-width: 58.33333%;
+  }
+  .col-print-8 {
+    max-width: 66.66667%;
+  }
+  .col-print-9 {
+    max-width: 75%;
+  }
+  .col-print-10 {
+    max-width: 83.33333%;
+  }
+  .col-print-11 {
+    max-width: 91.66667%;
+  }
+  .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.33333%;
+  }
+  .offset-print-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-print-3 {
+    margin-left: 25%;
+  }
+  .offset-print-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-print-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-print-6 {
+    margin-left: 50%;
+  }
+  .offset-print-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-print-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-print-9 {
+    margin-left: 75%;
+  }
+  .offset-print-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-print-11 {
+    margin-left: 91.66667%;
+  }
+}

package/scss/_reset.scss

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

package/scss/_spacers.scss

@@ -0,0 +1,40 @@
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * 0.125,
+  2: $spacer * 0.25,
+  3: $spacer * 0.5,
+  4: $spacer * 0.75,
+  5: $spacer * 1,
+  6: $spacer * 1.5,
+  7: $spacer * 2,
+  8: $spacer * 3,
+  9: $spacer * 4,
+  10: $spacer * 5,
+  11: $spacer * 6,
+  12: $spacer * 7,
+  13: $spacer * 8,
+);
+
+@function getSpacer($spacerSize) {
+  $spacerValue: map-get(
+    (
+      4xs: map-get($spacers, 1),
+      3xs: map-get($spacers, 2),
+      2xs: map-get($spacers, 3),
+      xs: map-get($spacers, 4),
+      s: map-get($spacers, 5),
+      m: map-get($spacers, 6),
+      l: map-get($spacers, 7),
+      xl: map-get($spacers, 8),
+      2xl: map-get($spacers, 9),
+      3xl: map-get($spacers, 10),
+      4xl: map-get($spacers, 11),
+      5xl: map-get($spacers, 12),
+      6xl: map-get($spacers, 13),
+    ),
+    $spacerSize
+  );
+
+  @return $spacerValue;
+}

package/scss/_title.scss

@@ -0,0 +1,59 @@
+@import './spacers';
+@import './breakpoints';
+@import './font-settings';
+
+@mixin title-feature {
+  font-size: 2.375rem;
+  line-height: 2.875rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 4rem;
+    line-height: 5rem;
+  }
+}
+
+@mixin title1 {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 3.25rem;
+    line-height: 3.75rem;
+  }
+}
+
+@mixin title2 {
+  font-size: 1.625rem;
+  line-height: 2.125rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 2rem;
+    line-height: 2.75rem;
+  }
+}
+
+@mixin title3 {
+  font-size: 1.375rem;
+  line-height: 1.875rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+@mixin title4 {
+  font-size: $font-size-md;
+  line-height: $lineheight-size-sm;
+  font-weight: 700;
+}
+
+@mixin title5 {
+  font-size: $spacer;
+  line-height: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-sm;
+  }
+}

package/{dist/scss → scss}/helsenorge.scss

@@ -1,9 +1,8 @@
-@import 'variables';
-@import 'reset';
-@import 'spacers';
-@import 'breakpoints';
-@import 'grid';
-
-@import 'palette';
-@import 'fonts';
-@import 'body';
+@import 'reset';
+@import 'spacers';
+@import 'breakpoints';
+@import 'grid';
+@import 'palette';
+@import 'fonts';
+@import 'body';
+@import 'print';