@helsenorge/designsystem-react 0.0.3-dev.6 → 1.0.0-alpha-nye-spacers

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 / 8,
+  2: $spacer / 4,
+  3: $spacer / 2,
+  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,55 @@
+@import './spacers';
+@import './breakpoints';
+@import './font-settings';
+
+@mixin title-feature {
+  font-size: getSpacer(xl);
+  line-height: getSpacer(2xl);
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: getSpacer(2xl);
+    line-height: getSpacer(3xl);
+  }
+}
+
+@mixin title1 {
+  font-size: 2.75rem;
+  line-height: 3.25rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 3.25rem;
+    line-height: 3.75rem;
+  }
+}
+
+@mixin title2 {
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: getSpacer(l);
+    line-height: 2.75rem;
+  }
+}
+
+@mixin title3 {
+  font-size: getSpacer(m);
+  line-height: getSpacer(l);
+  font-weight: 600;
+}
+
+@mixin title4 {
+  font-size: $font-size-md;
+  line-height: $lineheight-size-sm;
+  font-weight: 700;
+}
+
+@mixin title5 {
+  font-size: $spacer;
+  line-height: getSpacer(m);
+  font-weight: 700;
+  text-transform: uppercase;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-sm;
+  }
+}

package/scss/helsenorge.scss

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

package/scss/typography.module.scss

@@ -0,0 +1,154 @@
+@import './spacers';
+@import './breakpoints';
+@import './fonts.scss';
+@import './palette';
+@import './title.scss';
+
+/*
+Denne filen er ment til å importeres som en css module:
+import designsystemtypography from './scss/_typography.scss'
+<div className={designsystemtypography.title1}></div>
+*/
+
+.title-feature {
+  @include title-feature;
+}
+
+.focused-content {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+}
+
+.title1 {
+  @include title1;
+}
+
+.title2 {
+  @include title2;
+}
+
+.title3 {
+  @include title3;
+}
+
+.title4 {
+  @include title4;
+}
+
+.title5 {
+  @include title5;
+}
+
+.preamble {
+  font-size: 1.375rem;
+  line-height: getSpacer(l);
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: getSpacer(m);
+  }
+}
+
+.legend {
+  font-size: $font-size-md;
+  line-height: 1.625rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: getSpacer(m);
+    line-height: $lineheight-size-md;
+  }
+}
+
+.label {
+  font-size: $font-size-sm;
+  line-height: getSpacer(m);
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-sm;
+  }
+}
+
+.table {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+  }
+}
+
+.strong {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+}
+
+.form {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+  }
+}
+
+.time {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+}
+
+.image-caption {
+  font-size: $spacer;
+  line-height: getSpacer(m);
+}
+
+.image-credit {
+  font-size: 0.75rem;
+  line-height: $spacer;
+}
+
+.anchorlink-wrapper {
+  a {
+    display: inline;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    text-align: left;
+    text-decoration: none;
+    color: $blueberry600;
+    padding: 0.15rem;
+    border-bottom: 1px solid $neutral300;
+
+    font-size: 1.125rem;
+    line-height: 1.875rem;
+    font-weight: 400;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: 1.25rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+      color: $blueberry700;
+      background-color: $blueberry50;
+      border-bottom-color: $blueberry600;
+    }
+    &:focus {
+      padding: 0 0 0.15rem 0;
+      outline: none;
+      border: 0.15rem solid $black;
+    }
+
+    &[target='_blank'] {
+      /* external styling legge til icon*/
+      &:after {
+        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='38px' height='38px' viewBox='0 0 48 48' fill='%2308667c'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
+        display: inline-block;
+        vertical-align: bottom;
+        margin-right: -0.4rem;
+        margin-top: -2rem;
+        margin-bottom: -0.8rem;
+      }
+    }
+  }
+}

package/scss/typography.module.scss.d.ts

@@ -0,0 +1,25 @@
+export type Styles = {
+  'anchorlink-wrapper': string;
+  'focused-content': string;
+  form: string;
+  'image-caption': string;
+  'image-credit': string;
+  label: string;
+  legend: string;
+  preamble: string;
+  strong: string;
+  table: string;
+  time: string;
+  'title-feature': string;
+  title1: string;
+  title2: string;
+  title3: string;
+  title4: string;
+  title5: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/theme/currys/color.d.ts

@@ -0,0 +1,4 @@
+import { PaletteNames } from '../palette';
+export declare const getColor: (name: PaletteNames, depth?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined) => any;
+export declare const getHoverColor: (color: PaletteNames) => string;
+//# sourceMappingURL=color.d.ts.map

package/theme/currys/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/theme/currys/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAiB,MAAM,YAAY,CAAC;AAKzD,eAAO,MAAM,QAAQ,2GAA+G,CAAC;AAErI,eAAO,MAAM,aAAa,iCAA2E,CAAC"}

package/theme/currys/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './spacing';
+//# sourceMappingURL=index.d.ts.map

package/theme/currys/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/currys/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/theme/currys/spacing.d.ts

@@ -0,0 +1,4 @@
+import { SpacerSizes } from './../spacers';
+export declare const mapSpacerValue: (spacerSize: SpacerSizes) => number;
+export declare const getSpacer: (spacerSize: SpacerSizes) => string;
+//# sourceMappingURL=spacing.d.ts.map

package/theme/currys/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../src/theme/currys/spacing.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,eAAO,MAAM,cAAc,qCA+B1B,CAAC;AAEF,eAAO,MAAM,SAAS,qCAGrB,CAAC"}

package/theme/grid.d.ts

@@ -0,0 +1,21 @@
+export declare const breakpoints: {
+    null: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const containerMaxWidths: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const screen: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+//# sourceMappingURL=grid.d.ts.map

package/theme/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/theme/grid.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;CAI9B,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}

package/theme/index.d.ts

@@ -0,0 +1,99 @@
+export declare const theme: {
+    spacer: number;
+    spacers: {
+        0: number;
+        1: number;
+        2: number;
+        3: number;
+        4: number;
+        5: number;
+        6: number;
+        7: number;
+        8: number;
+        9: number;
+        10: number;
+        11: number;
+        12: number;
+        13: number;
+    };
+    palette: {
+        black: string;
+        white: string;
+        plum50: string;
+        plum100: string;
+        plum200: string;
+        plum300: string;
+        plum400: string;
+        plum500: string;
+        plum600: string;
+        plum700: string;
+        plum800: string;
+        plum900: string;
+        neutral50: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        kiwi50: string;
+        kiwi100: string;
+        kiwi200: string;
+        kiwi300: string;
+        kiwi400: string;
+        kiwi500: string;
+        kiwi600: string;
+        kiwi700: string;
+        kiwi800: string;
+        kiwi900: string;
+        cherry50: string;
+        cherry100: string;
+        cherry200: string;
+        cherry300: string;
+        cherry400: string;
+        cherry500: string;
+        cherry600: string;
+        cherry700: string;
+        cherry800: string;
+        cherry900: string;
+        blueberry50: string;
+        blueberry100: string;
+        blueberry200: string;
+        blueberry300: string;
+        blueberry400: string;
+        blueberry500: string;
+        blueberry600: string;
+        blueberry700: string;
+        blueberry800: string;
+        blueberry900: string;
+        banana50: string;
+        banana100: string;
+        banana200: string;
+        banana300: string;
+        banana400: string;
+        banana500: string;
+        banana600: string;
+        banana700: string;
+        banana800: string;
+        banana900: string;
+    };
+    screen: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    breakpoints: {
+        null: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMjB,CAAC"}

package/theme/palette.d.ts

@@ -0,0 +1,68 @@
+export declare const palette: {
+    black: string;
+    white: string;
+    plum50: string;
+    plum100: string;
+    plum200: string;
+    plum300: string;
+    plum400: string;
+    plum500: string;
+    plum600: string;
+    plum700: string;
+    plum800: string;
+    plum900: string;
+    neutral50: string;
+    neutral100: string;
+    neutral200: string;
+    neutral300: string;
+    neutral400: string;
+    neutral500: string;
+    neutral600: string;
+    neutral700: string;
+    neutral800: string;
+    neutral900: string;
+    kiwi50: string;
+    kiwi100: string;
+    kiwi200: string;
+    kiwi300: string;
+    kiwi400: string;
+    kiwi500: string;
+    kiwi600: string;
+    kiwi700: string;
+    kiwi800: string;
+    kiwi900: string;
+    cherry50: string;
+    cherry100: string;
+    cherry200: string;
+    cherry300: string;
+    cherry400: string;
+    cherry500: string;
+    cherry600: string;
+    cherry700: string;
+    cherry800: string;
+    cherry900: string;
+    blueberry50: string;
+    blueberry100: string;
+    blueberry200: string;
+    blueberry300: string;
+    blueberry400: string;
+    blueberry500: string;
+    blueberry600: string;
+    blueberry700: string;
+    blueberry800: string;
+    blueberry900: string;
+    banana50: string;
+    banana100: string;
+    banana200: string;
+    banana300: string;
+    banana400: string;
+    banana500: string;
+    banana600: string;
+    banana700: string;
+    banana800: string;
+    banana900: string;
+};
+export declare type PaletteNames = 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'black' | 'white';
+export declare type PaletteDepths = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export declare type PaletteCodes = 'banana50' | 'banana100' | 'banana200' | 'banana300' | 'banana400' | 'banana500' | 'banana600' | 'banana700' | 'banana800' | 'banana900' | 'blueberry50' | 'blueberry100' | 'blueberry200' | 'blueberry300' | 'blueberry400' | 'blueberry500' | 'blueberry600' | 'blueberry700' | 'blueberry800' | 'blueberry900' | 'cherry50' | 'cherry100' | 'cherry200' | 'cherry300' | 'cherry400' | 'cherry500' | 'cherry600' | 'cherry700' | 'cherry800' | 'cherry900' | 'kiwi50' | 'kiwi100' | 'kiwi200' | 'kiwi300' | 'kiwi400' | 'kiwi500' | 'kiwi600' | 'kiwi700' | 'kiwi800' | 'kiwi900' | 'neutral50' | 'neutral100' | 'neutral200' | 'neutral300' | 'neutral400' | 'neutral500' | 'neutral600' | 'neutral700' | 'neutral800' | 'neutral900' | 'plum50' | 'plum100' | 'plum200' | 'plum300' | 'plum400' | 'plum500' | 'plum600' | 'plum700' | 'plum800' | 'plum900' | 'white' | 'black';
+//# sourceMappingURL=palette.d.ts.map

package/theme/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/theme/palette.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASnB,CAAC;AAEF,oBAAY,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/G,oBAAY,aAAa,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAErF,oBAAY,YAAY,GACpB,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,cAAc,GACd,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,CAAC"}