@norges-domstoler/dds-design-tokens 6.0.1 → 7.0.0

package/README.md

@@ -2,31 +2,30 @@
 
 [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-design-tokens)](https://www.npmjs.com/package/@norges-domstoler/dds-design-tokens)
 
-Biblioteket inneholder design tokens brukt i [Domstolenes designsystem Elsa](https://design.domstol.no/): farger, typografi, avstander, grid, brekkpunker og skygger. Design tokens kan brukes i domstolenes tjenester i bl.a. global styling og custom elementer. Ellers er det obligatorisk å bruke komponentbiblioteket [dds-components](https://www.npmjs.com/package/@norges-domstoler/dds-components).
+Biblioteket inneholder design tokens brukt i [Elsa - domstolenes designsystem](https://design.domstol.no/): farger, typografi, avstander, grid, brekkpunker, størrelser, broder-radius og skygger. Design tokens kan brukes i domstolenes tjenester i bl.a. global styling og custom elementer. Ellers er det obligatorisk å bruke komponentbiblioteket [dds-components](https://www.npmjs.com/package/@norges-domstoler/dds-components).
+
+Design tokens kommer i to temaer: Core og Public. Valg av tema styres med `<ThemeProvider>` komponent som ligger i `dds-components`.
 
 Les mer om [design tokens i dokumentasjonen](https://design.domstol.no/987b33f71/p/50f2cd-design-tokens).
 
 ## 🔍 Oversikt
 
-Design tokens består av base-tokens og semantiske tokens. Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.
-
-Tanken med semantiske tokens er å innbake i navnet hva token brukes til og kunne benytte seg av themes. Semantiske tokens bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter og andre elementer. F.eks., semantiske tokens kan spesifisere hva fokusfargen skal være, eller font og farger for knapper.
+Design tokens består av base-tokens og semantiske tokens.
 
-### 📃 Tilgjengelige samantiske tokens
+Base-tokens er variabler genererte fra Figma styles og tilsvarer identiteten til domstolene definert i designprofilen.
 
-> [!NOTE]
-> Semantiske tokens er under arbeid. Flere typer tokens blir tilgjengelige over tid.
+Tanken med semantiske tokens er å innbake i navnet hva token brukes til og kunne benytte seg av temaer. Semantiske tokens bruker base-tokens til å definere logikk for hvordan base-tokens skal brukes videre i komponenter og andre elementer. F.eks., semantiske tokens kan spesifisere hva fokusfargen skal være, eller font og farger for knapper.
 
-- color
+Enkelte typer tokens er tilgjengelige kun i base-variant, da de brukes i ulike kontekster og ikke har snevret bruksområde. Dette inkluderer avstander, brekkpunkter og skygger.
 
-### 📃 Tilgjengelige base-tokens
+### 📃 Tilgjengelige tokens
 
-- borderRadius
+- border-radius
 - breakpoint
+- color
 - font
-- fontPackages (kun JS)
 - grid
-- iconSize
+- icon-size
 - shadow
 - spacing
 
@@ -38,51 +37,86 @@ pnpm add @norges-domstoler/dds-design-tokens
 
 ## 🔨 Bruk
 
-Design tokens er eksportert som JS-konstanter, CSS-variabler og SCSS-variabler.
+Design tokens er eksportert som JS-konstanter, CSS-variabler og SCSS-variabler. De brukes i kombinasjon med `<ThemeProvider>` komponent fra `@norges-domstoler/dds-components` biblioteket for å sette riktig tema. CSS-variabler brukes direkte fra `@norges-domstoler/dds-components` - se [README](https://github.com/domstolene/designsystem/blob/main/packages/components/README.md).
+
+### CSS
+
+> [!TIP]
+> Vi anbefaler VS Code plugin [CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables) for sømløs bruk av tokens i CSS.
+
+```css
+/* styles.css */
+@import '@norges-domstoler/dds-components/index.css';
+
+.panel {
+  background-color: var(--dds-color-bg-default);
+}
+```
+
+```js
+import { ThemeProvider } from '@norges-domstoler/dds-components';
+import './styles.css';
+
+const Panel = <div className="panel"> tekst </div>;
+
+const App = () => (
+  <ThemeProvider>
+    <Panel />;
+  </ThemeProvider>
+);
+```
 
 ### JS
 
 ```js
 import * as React from 'react';
-import { render } from 'react-dom';
 import { ddsTokens } from '@norges-domstoler/dds-design-tokens';
+import { ThemeProvider, useTheme } from '@norges-domstoler/dds-components';
+
+const { theme } = useTheme();
 
 const style = {
-  backgroundColor: ddsTokens.ddsColorBgDefault,
-  padding: ddsTokens.ddsSpacingX075,
+  backgroundColor: theme.ddsColorBgDefault,
+  padding: theme.ddsSpacingX075,
 };
 
-const App = () => <div style={style}>Tekst</div>;
-
-render(<App />, document.getElementById('root'));
+const App = () => (
+  <ThemeProvider>
+    <div style={style}>Tekst</div>;
+  </ThemeProvider>
+);
 ```
 
-### CSS
+### SCSS
 
-> [!TIP]
-> Vi anbefaler VS Code plugin [CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables) for sømløs bruk av tokens i CSS.
+SCSS-variabler refererer til CSS-variabler; theming skjer dermed utenfor SCSS og du kan importere .
 
-```css
-@import '@norges-domstoler/dds-design-tokens/dist/css/ddsTokens.css';
+```scss
+/* _styles.scss */
+@import '@norges-domstoler/dds-components/index.css';
+@import '@norges-domstoler/dds-design-tokens/dist/scss/_ddsTokens.scss';
 
-body {
-  background-color: var(--dds-color-bg-default);
+.panel {
+  background-color: $dds-color-bg-default;
 }
 ```
 
-### SCSS
+```js
+import { ThemeProvider } from '@norges-domstoler/dds-components';
+import './_styles.scss';
 
-```scss
-@use '@norges-domstoler/dds-design-tokens/dist/scss/ddsTokens' as ddsTokens;
+const Panel = <div className="panel"> tekst </div>;
 
-body {
-  background-color: ddsTokens.$dds-color-bg-default;
-}
+const App = () => (
+  <ThemeProvider>
+    <Panel />;
+  </ThemeProvider>
+);
 ```
 
 ## ⌨️ For bidragsytere
 
-Bilioteket ligger under `packages/tokens`.
+Bilioteket ligger under `packages/tokens`. Selve design tokens ligger i JSON-filer hentet fra Figma.
 
 ### Installasjon
 
@@ -92,16 +126,14 @@ Installer style-dictionary:
 pnpm --filter "@norges-domstoler/dds-design-tokens" add -D style-dictionary
 ```
 
-### Generere design tokens i kode
+### Generere variabler fra design tokens
 
-Biblioteket bruker [Style-dictionary](https://amzn.github.io/style-dictionary) for å generere design tokens som JS-konstanter, CSS-variabler og SCSS-variabler fra en eller flere JSON-filer. JSON-filen(e) ligger i `packages/tokens/dds/properties`. For å generere variabler fra JSON kjør følgende kommando fra `/dds`:
+Biblioteket bruker [Style-dictionary](https://amzn.github.io/style-dictionary) for å generere JS-konstanter, CSS-variabler og SCSS-variabler fra en eller flere JSON-filer. JSON-filen(e) ligger i `dds/properties`. For å generere variabler fra JSON kjør følgende kommando fra `/dds`:
 
 ```
 node build.js
 ```
 
-Genererte variabler ligger i `packages/tokens/dds/build` organisert etter plattform.
-
-### Build
+Genererte variabler ligger i `dds/build` organisert etter plattform.
 
-Det brukes custom build for generering av variabler, den ligger i `/dds/build.js`. I tillegg spesifiserer `/dds/config.json` hva output skal være og mappestruktur for den etter `node build.js` kjøres.
+Vi bruker custom build, den ligger i `/dds/build.js`.

package/dist/cjs/dds/build/js/Core/ddsTokens.d.ts

@@ -0,0 +1,275 @@
+export declare const ddsFontFamilySans = "'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontFamilyMonospace = "'IBM Plex Mono', 'Courier New', monospace";
+export declare const ddsFontSizeX5 = "5rem";
+export declare const ddsFontSizeX5NumberRem = 5;
+export declare const ddsFontSizeX4 = "4rem";
+export declare const ddsFontSizeX4NumberRem = 4;
+export declare const ddsFontSizeX3 = "3rem";
+export declare const ddsFontSizeX3NumberRem = 3;
+export declare const ddsFontSizeX25 = "2.5rem";
+export declare const ddsFontSizeX25NumberRem = 2.5;
+export declare const ddsFontSizeX2 = "2rem";
+export declare const ddsFontSizeX2NumberRem = 2;
+export declare const ddsFontSizeX15 = "1.5rem";
+export declare const ddsFontSizeX15NumberRem = 1.5;
+export declare const ddsFontSizeX125 = "1.25rem";
+export declare const ddsFontSizeX125NumberRem = 1.25;
+export declare const ddsFontSizeX1125 = "1.125rem";
+export declare const ddsFontSizeX1125NumberRem = 1.125;
+export declare const ddsFontSizeX1 = "1rem";
+export declare const ddsFontSizeX1NumberRem = 1;
+export declare const ddsFontSizeX0875 = "0.875rem";
+export declare const ddsFontSizeX0875NumberRem = 0.875;
+export declare const ddsFontSizeX075 = "0.75rem";
+export declare const ddsFontSizeX075NumberRem = 0.75;
+export declare const ddsFontSizeXxlarge = "3rem";
+export declare const ddsFontSizeXxlargeNumberRem = 3;
+export declare const ddsFontSizeXlarge = "2rem";
+export declare const ddsFontSizeXlargeNumberRem = 2;
+export declare const ddsFontSizeLarge = "1.5rem";
+export declare const ddsFontSizeLargeNumberRem = 1.5;
+export declare const ddsFontSizeMedium = "1.25rem";
+export declare const ddsFontSizeMediumNumberRem = 1.25;
+export declare const ddsFontSizeSmall = "1.125rem";
+export declare const ddsFontSizeSmallNumberRem = 1.125;
+export declare const ddsFontSizeXsmall = "1rem";
+export declare const ddsFontSizeXsmallNumberRem = 1;
+export declare const ddsFontSizeXxsmall = "0.875rem";
+export declare const ddsFontSizeXxsmallNumberRem = 0.875;
+export declare const ddsFontSizeXxxsmall = "0.75rem";
+export declare const ddsFontSizeXxxsmallNumberRem = 0.75;
+export declare const ddsFontWeightLight = "300";
+export declare const ddsFontWeightNormal = "400";
+export declare const ddsFontWeightBold = "600";
+export declare const ddsFontLineheightX1 = 1.5;
+export declare const ddsFontLineheightX2 = 1.35;
+export declare const ddsFontLineheightX3 = 1.2;
+export declare const ddsFontLineheightList = 2.5;
+export declare const ddsFontLetterSpacingTight = "-0.01em";
+export declare const ddsFontLetterSpacingNormal = "0em";
+export declare const ddsFontLetterSpacingLoose = "0.01em";
+export declare const ddsFontParagraphSpacingSmall = "1em";
+export declare const ddsFontParagraphSpacingSmallNumberEm = 1;
+export declare const ddsFontParagraphSpacingMedium = "0.66em";
+export declare const ddsFontParagraphSpacingMediumNumberEm = 0.66;
+export declare const ddsFontParagraphSpacingLarge = "0.5em";
+export declare const ddsFontParagraphSpacingLargeNumberEm = 0.5;
+export declare const ddsFontParagraphSpacingHeading = "0.4em";
+export declare const ddsFontParagraphSpacingHeadingNumberEm = 0.4;
+export declare const ddsFontStyleUnderline = "underline";
+export declare const ddsFontStyleNormal = "none";
+export declare const ddsFontStyleItalic = "italic";
+export declare const ddsSpacingPaddingTopHeading = "0.7em";
+export declare const ddsSpacingPaddingTopHeadingNumberEm = 0.7;
+export declare const ddsSpacingX0 = "0rem";
+export declare const ddsSpacingX0NumberRem = 0;
+export declare const ddsSpacingX0125 = "0.125rem";
+export declare const ddsSpacingX0125NumberRem = 0.125;
+export declare const ddsSpacingX025 = "0.25rem";
+export declare const ddsSpacingX025NumberRem = 0.25;
+export declare const ddsSpacingX05 = "0.5rem";
+export declare const ddsSpacingX05NumberRem = 0.5;
+export declare const ddsSpacingX075 = "0.75rem";
+export declare const ddsSpacingX075NumberRem = 0.75;
+export declare const ddsSpacingX1 = "1rem";
+export declare const ddsSpacingX1NumberRem = 1;
+export declare const ddsSpacingX15 = "1.5rem";
+export declare const ddsSpacingX15NumberRem = 1.5;
+export declare const ddsSpacingX2 = "2rem";
+export declare const ddsSpacingX2NumberRem = 2;
+export declare const ddsSpacingX25 = "2.5rem";
+export declare const ddsSpacingX25NumberRem = 2.5;
+export declare const ddsSpacingX3 = "3rem";
+export declare const ddsSpacingX3NumberRem = 3;
+export declare const ddsSpacingX4 = "4rem";
+export declare const ddsSpacingX4NumberRem = 4;
+export declare const ddsSpacingX6 = "6rem";
+export declare const ddsSpacingX6NumberRem = 6;
+export declare const ddsSpacingX10 = "10rem";
+export declare const ddsSpacingX10NumberRem = 10;
+export declare const ddsShadow1 = "1px 2px 4px 0px rgba(11, 13, 14, 10%)";
+export declare const ddsShadow2 = "2px 4px 8px 0px rgba(11, 13, 14, 10%)";
+export declare const ddsShadow3 = "4px 8px 16px 0px rgba(11, 13, 14, 10%)";
+export declare const ddsShadow4 = "8px 16px 32px 0px rgba(11, 13, 14, 10%)";
+export declare const ddsGridXsGutterSize = "16px";
+export declare const ddsGridXsGutterSizeNumberPx = 16;
+export declare const ddsGridXsCount = "4";
+export declare const ddsGridSmGutterSize = "16px";
+export declare const ddsGridSmGutterSizeNumberPx = 16;
+export declare const ddsGridSmCount = "8";
+export declare const ddsGridLgGutterSize = "24px";
+export declare const ddsGridLgGutterSizeNumberPx = 24;
+export declare const ddsGridLgCount = "12";
+export declare const ddsGridMdGutterSize = "24px";
+export declare const ddsGridMdGutterSizeNumberPx = 24;
+export declare const ddsGridMdCount = "12";
+export declare const ddsGridXlGutterSize = "24px";
+export declare const ddsGridXlGutterSizeNumberPx = 24;
+export declare const ddsGridXlCount = "12";
+export declare const ddsIconSizeLarge = "40px";
+export declare const ddsIconSizeLargeNumberPx = 40;
+export declare const ddsIconSizeMedium = "24px";
+export declare const ddsIconSizeMediumNumberPx = 24;
+export declare const ddsIconSizeSmall = "16px";
+export declare const ddsIconSizeSmallNumberPx = 16;
+export declare const ddsBreakpointXs = "1px";
+export declare const ddsBreakpointXsNumberPx = 1;
+export declare const ddsBreakpointSm = "600px";
+export declare const ddsBreakpointSmNumberPx = 600;
+export declare const ddsBreakpointMd = "960px";
+export declare const ddsBreakpointMdNumberPx = 960;
+export declare const ddsBreakpointLg = "1280px";
+export declare const ddsBreakpointLgNumberPx = 1280;
+export declare const ddsBreakpointXl = "1920px";
+export declare const ddsBreakpointXlNumberPx = 1920;
+export declare const ddsColorBgDefault = "#ffffff";
+export declare const ddsColorBgSubtle = "#f8f9f9";
+export declare const ddsColorSurfaceDefault = "#ffffff";
+export declare const ddsColorSurfaceSubtle = "#f8f9f9";
+export declare const ddsColorSurfaceMedium = "#ebecee";
+export declare const ddsColorSurfaceHoverDefault = "#e7f1f7";
+export declare const ddsColorSurfaceHoverSubtle = "#f8f9f9";
+export declare const ddsColorSurfaceSelectedDefault = "#e7f1f7";
+export declare const ddsColorSurfaceInverseDefault = "#354754";
+export declare const ddsColorSurfaceInverseHover = "#313d45";
+export declare const ddsColorSurfaceInverseSelected = "#202b32";
+export declare const ddsColorSurfaceActionResting = "#106ead";
+export declare const ddsColorSurfaceActionHover = "#0d588a";
+export declare const ddsColorSurfaceActionSelected = "#106ead";
+export declare const ddsColorSurfaceActionDangerResting = "#d83737";
+export declare const ddsColorSurfaceActionDangerHover = "#ad2c2c";
+export declare const ddsColorSurfaceActionSelectedDisabled = "#77838c";
+export declare const ddsColorSurfaceDangerDefault = "#fbebeb";
+export declare const ddsColorSurfaceDangerStrong = "#e47373";
+export declare const ddsColorSurfaceSuccessDefault = "#f0f9f0";
+export declare const ddsColorSurfaceSuccessStrong = "#93d294";
+export declare const ddsColorSurfaceWarningDefault = "#fefced";
+export declare const ddsColorSurfaceWarningStrong = "#f7e982";
+export declare const ddsColorSurfaceInfoDefault = "#f1f8fd";
+export declare const ddsColorSurfaceInfoStrong = "#9eceee";
+export declare const ddsColorSurfacePaperDefault = "#ffffff";
+export declare const ddsColorSurfaceBackdropDefault = "#0b0d0e80";
+export declare const ddsColorSurfaceFieldDefault = "#ffffff";
+export declare const ddsColorSurfaceFieldDisabled = "#f8f9f9";
+export declare const ddsColorSurfaceHighlightedDefault = "#ffe6df";
+export declare const ddsColorSurfaceScrollbar = "#adb5ba";
+export declare const ddsColorSurfaceNotification = "#d83737";
+export declare const ddsColorSurfaceSkeleton = "#cfd4d7";
+export declare const ddsColorBorderDefault = "#77838c";
+export declare const ddsColorBorderSubtle = "#cfd4d7";
+export declare const ddsColorBorderInverse = "#acbbc6";
+export declare const ddsColorBorderActionDefault = "#106ead";
+export declare const ddsColorBorderActionHover = "#0d588a";
+export declare const ddsColorBorderSuccess = "#65be66";
+export declare const ddsColorBorderWarning = "#f4e04d";
+export declare const ddsColorBorderDanger = "#d83737";
+export declare const ddsColorBorderInfo = "#75b9e6";
+export declare const ddsColorBorderOnAction = "#ffffff";
+export declare const ddsColorTextDefault = "#0b0d0e";
+export declare const ddsColorTextMedium = "#3a4146";
+export declare const ddsColorTextSubtle = "#545c62";
+export declare const ddsColorTextOnInverse = "#ffffff";
+export declare const ddsColorTextOnAction = "#ffffff";
+export declare const ddsColorTextOnStatusDefault = "#0b0d0e";
+export declare const ddsColorTextOnStatusStrong = "#0b0d0e";
+export declare const ddsColorTextActionResting = "#106ead";
+export declare const ddsColorTextActionHover = "#0d588a";
+export declare const ddsColorTextRequiredfield = "#d83737";
+export declare const ddsColorTextActionVisited = "#7f29b4";
+export declare const ddsColorTextActionVisitedOnInverse = "#cca9e1";
+export declare const ddsColorTextOnNotification = "#ffffff";
+export declare const ddsColorIconDefault = "#0b0d0e";
+export declare const ddsColorIconMedium = "#3a4146";
+export declare const ddsColorIconSubtle = "#545c62";
+export declare const ddsColorIconOnInverse = "#ffffff";
+export declare const ddsColorIconOnAction = "#ffffff";
+export declare const ddsColorIconActionResting = "#106ead";
+export declare const ddsColorIconActionHover = "#0d588a";
+export declare const ddsColorIconOnSuccessDefault = "#3d723d";
+export declare const ddsColorIconOnSuccessStrong = "#0b0d0e";
+export declare const ddsColorIconOnWarningDefault = "#92862e";
+export declare const ddsColorIconOnWarningStrong = "#0b0d0e";
+export declare const ddsColorIconOnDangerDefault = "#ad2c2c";
+export declare const ddsColorIconOnDangerStrong = "#0b0d0e";
+export declare const ddsColorIconOnInfoDefault = "#466f8a";
+export declare const ddsColorIconOnInfoStrong = "#0b0d0e";
+export declare const ddsColorBrandPrimaryDefault = "#354754";
+export declare const ddsColorBrandPrimarySubtle = "#eaeff4";
+export declare const ddsColorBrandPrimaryMedium = "#4f6a7e";
+export declare const ddsColorBrandPrimaryStrong = "#202b32";
+export declare const ddsColorBrandSecondaryDefault = "#9ab8b7";
+export declare const ddsColorBrandSecondarySubtle = "#e6eded";
+export declare const ddsColorBrandSecondaryMedium = "#b8cdcd";
+export declare const ddsColorBrandSecondaryStrong = "#4d6463";
+export declare const ddsColorBrandTertiaryDefault = "#f2a68f";
+export declare const ddsColorBrandTertiarySubtle = "#ffe6df";
+export declare const ddsColorBrandTertiaryMedium = "#f6c1b1";
+export declare const ddsColorBrandTertiaryStrong = "#f27e55";
+export declare const ddsColorFocusOutside = "#2f4a5c";
+export declare const ddsColorFocusInside = "#f1f8fd";
+export declare const ddsFontLabelMedium = "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontBodyXsmall = "400 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontBodySmall = "400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontBodyMedium = "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontBodyLarge = "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontHeadingXxsmall = "600 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontHeadingXsmall = "600 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontHeadingSmall = "600 1rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontHeadingMedium = "600 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontHeadingLarge = "400 clamp(1.25rem, 0.833rem + 1.111vw, 1.5rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontHeadingXlarge = "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.35 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontHeadingXxlarge = "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.2 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontLeadMedium = "300 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif";
+export declare const ddsFontCodeMedium = "400 1rem/1.5 'IBM Plex Mono', 'Courier New', monospace";
+export declare const ddsBorderRadiusButton = "2px";
+export declare const ddsBorderRadiusButtonNumberPx = 2;
+export declare const ddsBorderRadiusSurface = "4px";
+export declare const ddsBorderRadiusSurfaceNumberPx = 4;
+export declare const ddsBorderRadiusInput = "2px";
+export declare const ddsBorderRadiusInputNumberPx = 2;
+export declare const ddsBorderRadiusChip = "4px";
+export declare const ddsBorderRadiusChipNumberPx = 4;
+export declare const ddsBorderRadiusRounded = "9999px";
+export declare const ddsBorderRadiusRoundedNumberPx = 9999;
+export declare const ddsFontHeadingXxlargeLetterSpacing = "-0.01em";
+export declare const ddsFontHeadingXxlargeParagraphSpacing = "0.4em";
+export declare const ddsFontHeadingXxlargeParagraphSpacingNumberEm = 0.4;
+export declare const ddsFontHeadingXlargeLetterSpacing = "0em";
+export declare const ddsFontHeadingXlargeParagraphSpacing = "0.4em";
+export declare const ddsFontHeadingXlargeParagraphSpacingNumberEm = 0.4;
+export declare const ddsFontHeadingLargeLetterSpacing = "0em";
+export declare const ddsFontHeadingLargeParagraphSpacing = "0.4em";
+export declare const ddsFontHeadingLargeParagraphSpacingNumberEm = 0.4;
+export declare const ddsFontHeadingMediumLetterSpacing = "0em";
+export declare const ddsFontHeadingMediumParagraphSpacing = "0.4em";
+export declare const ddsFontHeadingMediumParagraphSpacingNumberEm = 0.4;
+export declare const ddsFontHeadingSmallLetterSpacing = "0em";
+export declare const ddsFontHeadingSmallParagraphSpacing = "0.4em";
+export declare const ddsFontHeadingSmallParagraphSpacingNumberEm = 0.4;
+export declare const ddsFontHeadingXsmallLetterSpacing = "0.01em";
+export declare const ddsFontHeadingXsmallParagraphSpacing = "0.4em";
+export declare const ddsFontHeadingXsmallParagraphSpacingNumberEm = 0.4;
+export declare const ddsFontHeadingXxsmallLetterSpacing = "0.01em";
+export declare const ddsFontHeadingXxsmallParagraphSpacing = "0.4em";
+export declare const ddsFontHeadingXxsmallParagraphSpacingNumberEm = 0.4;
+export declare const ddsFontBodyLargeLetterSpacing = "0em";
+export declare const ddsFontBodyLargeParagraphSpacing = "1em";
+export declare const ddsFontBodyLargeParagraphSpacingNumberEm = 1;
+export declare const ddsFontBodyMediumLetterSpacing = "0em";
+export declare const ddsFontBodyMediumParagraphSpacing = "1em";
+export declare const ddsFontBodyMediumParagraphSpacingNumberEm = 1;
+export declare const ddsFontBodySmallLetterSpacing = "0.01em";
+export declare const ddsFontBodySmallParagraphSpacing = "1em";
+export declare const ddsFontBodySmallParagraphSpacingNumberEm = 1;
+export declare const ddsFontBodyXsmallLetterSpacing = "0.01em";
+export declare const ddsFontBodyXsmallParagraphSpacing = "1em";
+export declare const ddsFontBodyXsmallParagraphSpacingNumberEm = 1;
+export declare const ddsFontLeadMediumLetterSpacing = "0em";
+export declare const ddsFontLeadMediumParagraphSpacing = "1em";
+export declare const ddsFontLeadMediumParagraphSpacingNumberEm = 1;
+export declare const ddsFontCodeMediumLetterSpacing = "0em";
+export declare const ddsFontCodeMediumParagraphSpacing = "1em";
+export declare const ddsFontCodeMediumParagraphSpacingNumberEm = 1;
+export declare const ddsFontLabelMediumLetterSpacing = "0.01em";
+export declare const ddsFontLabelMediumParagraphSpacing = "1em";
+export declare const ddsFontLabelMediumParagraphSpacingNumberEm = 1;