@helsenorge/designsystem-react 10.1.0 → 10.2.1-beta.0

package/scss/typography.module.scss

@@ -1,9 +1,10 @@
 @use 'sass:map';
-@import './spacers';
-@import './breakpoints';
-@import './fonts';
-@import './palette';
-@import './font-mixins';
+@use './spacers' as spacers;
+@use './palette' as palette;
+@use './font-mixins' as fonts;
+@use './font-settings' as font-settings;
+@use './breakpoints' as breakpoints;
+@use './fonts' as *;
 
 /*
 Denne filen er ment til å importeres som en css module:
@@ -12,99 +13,123 @@ import designsystemtypography from './scss/typography.scss'
 */
 
 .title-feature {
-  @include title-feature;
+  @include fonts.title-feature;
 }
 
 .focused-content {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 }
 
 .title1 {
-  @include title1;
+  @include fonts.title1;
 }
 
 .title2 {
-  @include title2;
+  @include fonts.title2;
 }
 
 .title3 {
-  @include title3;
+  @include fonts.title3;
 }
 
 .title4 {
-  @include title4;
+  @include fonts.title4;
 }
 
 .title5 {
-  @include title5;
+  @include fonts.title5;
 }
 
 .title6 {
-  @include title6;
+  @include fonts.title6;
 }
 
 .body {
-  @include body;
+  @include fonts.body;
 }
 
 .preamble {
-  @include preamble;
+  @include fonts.preamble;
 }
 
 .legend {
-  @include legend;
+  @include fonts.legend;
 }
 
 .label {
-  @include label;
+  @include fonts.label;
+}
+
+.label-subdued {
+  @include fonts.label-subdued;
+}
+
+.sublabel {
+  @include fonts.sublabel;
+}
+
+.sublabel-subdued {
+  @include fonts.sublabel-subdued;
 }
 
 .compact-data {
-  @include compact-data;
+  @include fonts.compact-data;
 }
 
 .table-cell {
-  @include table-cell;
+  @include fonts.table-cell;
 }
 
 .strong {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
   }
 }
 
 .form {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: font-settings.$font-size-md;
   }
 }
 
 .status-timestamp {
-  @include status-timestamp;
+  @include fonts.status-timestamp;
 }
 
 .image-caption {
-  @include image-caption;
+  @include fonts.image-caption;
 }
 
 .image-credit {
-  @include image-credit;
+  @include fonts.image-credit;
 }
 
 .input-text {
-  @include input-text;
+  @include fonts.input-text;
 }
 
 .input-text-large {
-  @include input-text-large;
+  @include fonts.input-text-large;
+}
+
+.text-list {
+  @include fonts.text-list;
+}
+
+.definition-list-type {
+  @include fonts.definition-list-type;
+}
+
+.definition-list-data {
+  @include fonts.definition-list-data;
 }
 
 .anchorlink-wrapper {
@@ -114,24 +139,24 @@ import designsystemtypography from './scss/typography.scss'
     overflow-wrap: break-word;
     word-break: break-word;
     text-align: left;
-    color: $blueberry600;
+    color: palette.$blueberry600;
     border: 0.15rem solid transparent;
     text-decoration: underline;
     text-underline-offset: 0.16rem;
-    text-decoration-color: $blueberry400;
+    text-decoration-color: palette.$blueberry400;
     text-decoration-thickness: 0.0625rem;
     padding: 0.1rem;
 
     &:hover {
       cursor: pointer;
-      color: $blueberry700;
-      background-color: $blueberry50;
-      text-decoration-color: $blueberry600;
+      color: palette.$blueberry700;
+      background-color: palette.$blueberry50;
+      text-decoration-color: palette.$blueberry600;
     }
 
     &:focus {
       outline: none;
-      border: 0.15rem solid $black;
+      border: 0.15rem solid palette.$black;
     }
 
     &[target='_blank'] {

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

@@ -2,6 +2,8 @@ export type Styles = {
   'anchorlink-wrapper': string;
   body: string;
   'compact-data': string;
+  'definition-list-data': string;
+  'definition-list-type': string;
   'focused-content': string;
   form: string;
   'image-caption': string;
@@ -9,11 +11,15 @@ export type Styles = {
   'input-text': string;
   'input-text-large': string;
   label: string;
+  'label-subdued': string;
   legend: string;
   preamble: string;
   'status-timestamp': string;
   strong: string;
+  sublabel: string;
+  'sublabel-subdued': string;
   'table-cell': string;
+  'text-list': string;
   'title-feature': string;
   title1: string;
   title2: string;

package/scss/typography.stories.tsx

@@ -65,6 +65,18 @@ export const Label: Story = {
   render: args => <div className={designsystemtypography.label}>{args.tekst}</div>,
 };
 
+export const LabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['label-subdued']}>{args.tekst}</div>,
+};
+
+export const Sublabel: Story = {
+  render: args => <div className={designsystemtypography.sublabel}>{args.tekst}</div>,
+};
+
+export const SublabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['sublabel-subdued']}>{args.tekst}</div>,
+};
+
 export const CompactData: Story = {
   render: args => <div className={designsystemtypography['compact-data']}>{args.tekst}</div>,
 };
@@ -97,6 +109,18 @@ export const InputTextLarge: Story = {
   render: args => <div className={designsystemtypography['input-text-large']}>{args.tekst}</div>,
 };
 
+export const TextList: Story = {
+  render: args => <div className={designsystemtypography['text-list']}>{args.tekst}</div>,
+};
+
+export const DefinitionListType: Story = {
+  render: args => <div className={designsystemtypography['definition-list-type']}>{args.tekst}</div>,
+};
+
+export const DefinitionListData: Story = {
+  render: args => <div className={designsystemtypography['definition-list-data']}>{args.tekst}</div>,
+};
+
 export const AnchorlinkWrapper: Story = {
   render: args => (
     <div className={designsystemtypography['anchorlink-wrapper']}>

package/theme/index.js

@@ -1,6 +1,6 @@
-import { screen, breakpoints } from "./grid.js";
+import { breakpoints, screen } from "./grid.js";
 import { palette } from "./palette.js";
-import { spacer, spacers } from "./spacers.js";
+import { spacers, spacer } from "./spacers.js";
 const theme = {
   spacer,
   spacers,