@norges-domstoler/dds-design-tokens
Version:
Design tokens used in Domstolenes designsystem
432 lines (430 loc) • 35.5 kB
JavaScript
// Do not edit directly, this file was auto-generated.
const ddsFontFamilySans = "'IBM Plex Sans', Arial, sans-serif";
const ddsFontFamilyMonospace = "'IBM Plex Mono', 'Courier New', monospace"; // For kode
const ddsFontSizeX5 = "5rem";
const ddsFontSizeX5NumberRem = 5;
const ddsFontSizeX4 = "4rem";
const ddsFontSizeX4NumberRem = 4;
const ddsFontSizeX3 = "3rem";
const ddsFontSizeX3NumberRem = 3;
const ddsFontSizeX25 = "2.5rem";
const ddsFontSizeX25NumberRem = 2.5;
const ddsFontSizeX2 = "2rem";
const ddsFontSizeX2NumberRem = 2;
const ddsFontSizeX15 = "1.5rem";
const ddsFontSizeX15NumberRem = 1.5;
const ddsFontSizeX125 = "1.25rem";
const ddsFontSizeX125NumberRem = 1.25;
const ddsFontSizeX1125 = "1.125rem";
const ddsFontSizeX1125NumberRem = 1.125;
const ddsFontSizeX1 = "1rem";
const ddsFontSizeX1NumberRem = 1;
const ddsFontSizeX0875 = "0.875rem";
const ddsFontSizeX0875NumberRem = 0.875;
const ddsFontSizeX075 = "0.75rem";
const ddsFontSizeX075NumberRem = 0.75;
const ddsFontWeightLight = "300";
const ddsFontWeightNormal = "400";
const ddsFontWeightSemiBold = "500";
const ddsFontWeightBold = "600";
const ddsFontLineheightX1 = 1.5; // Brukes på mengetekst og artikler
const ddsFontLineheightX3 = 1.2;
const ddsFontLineheightX2 = 1.3; // Brukes i komponenter og overskrifter
const ddsFontLetterSpacingTight = "-0.01em"; // Brukes på str ×2.5 og større
const ddsFontLetterSpacingNormal = "0em"; // Brukes på str ×1 og opp til og med ×2
const ddsFontLetterSpacingLoose = "0.01em"; // Brukes på størrelser under ×1
const ddsFontParagraphSpacingSmall = "1em";
const ddsFontParagraphSpacingSmallNumberEm = 1; // Brukes på str ×1_25 og mindre
const ddsFontParagraphSpacingMedium = "0.66em";
const ddsFontParagraphSpacingMediumNumberEm = 0.66; // Brukes på str x1.5, ×2 og ×3
const ddsFontParagraphSpacingLarge = "0.5em";
const ddsFontParagraphSpacingLargeNumberEm = 0.5; // Brukes på str ×3 og større
const ddsFontParagraphSpacingList = "0.5em";
const ddsFontParagraphSpacingListNumberEm = 0.5; // Brukes mellom kulepunkter i lister
const ddsFontParagraphSpacingHeading = "0.4em";
const ddsFontParagraphSpacingHeadingNumberEm = 0.4; // Brukes på på alle headere (bottom)
const ddsFontStyleUnderline = "underline";
const ddsFontStyleNormal = "none";
const ddsFontStyleItalic = "italic";
const ddsSpacingPaddingTopHeading = "0.7em";
const ddsSpacingPaddingTopHeadingNumberEm = 0.7; // Ekstra spacing over dds-header. 70% av størrelsen på headeren
const ddsSpacingX0 = "0rem";
const ddsSpacingX0NumberRem = 0;
const ddsSpacingX0125 = "0.125rem";
const ddsSpacingX0125NumberRem = 0.125;
const ddsSpacingX025 = "0.25rem";
const ddsSpacingX025NumberRem = 0.25;
const ddsSpacingX05 = "0.5rem";
const ddsSpacingX05NumberRem = 0.5;
const ddsSpacingX075 = "0.75rem";
const ddsSpacingX075NumberRem = 0.75;
const ddsSpacingX1 = "1rem";
const ddsSpacingX1NumberRem = 1;
const ddsSpacingX15 = "1.5rem";
const ddsSpacingX15NumberRem = 1.5;
const ddsSpacingX2 = "2rem";
const ddsSpacingX2NumberRem = 2;
const ddsSpacingX25 = "2.5rem";
const ddsSpacingX25NumberRem = 2.5;
const ddsSpacingX3 = "3rem";
const ddsSpacingX3NumberRem = 3;
const ddsSpacingX4 = "4rem";
const ddsSpacingX4NumberRem = 4;
const ddsSpacingX6 = "6rem";
const ddsSpacingX6NumberRem = 6;
const ddsSpacingX10 = "10rem";
const ddsSpacingX10NumberRem = 10;
const ddsGridXsGutterSize = "16px";
const ddsGridXsGutterSizeNumberPx = 16;
const ddsGridXsCount = "4";
const ddsGridSmGutterSize = "16px";
const ddsGridSmGutterSizeNumberPx = 16;
const ddsGridSmCount = "8";
const ddsGridLgGutterSize = "24px";
const ddsGridLgGutterSizeNumberPx = 24;
const ddsGridLgCount = "12";
const ddsGridMdGutterSize = "24px";
const ddsGridMdGutterSizeNumberPx = 24;
const ddsGridMdCount = "12";
const ddsGridXlGutterSize = "24px";
const ddsGridXlGutterSizeNumberPx = 24;
const ddsGridXlCount = "12";
const ddsSizeIconLarge = "40px";
const ddsSizeIconLargeNumberPx = 40;
const ddsSizeIconMedium = "24px";
const ddsSizeIconMediumNumberPx = 24;
const ddsSizeIconSmall = "16px";
const ddsSizeIconSmallNumberPx = 16;
const ddsSizeIconComponent = "1.3em";
const ddsSizeIconComponentNumberEm = 1.3; // Brukes i komponenter. Relativ til tekststørrelsen
const ddsBreakpointXs = "1px";
const ddsBreakpointXsNumberPx = 1;
const ddsBreakpointSm = "600px";
const ddsBreakpointSmNumberPx = 600;
const ddsBreakpointMd = "960px";
const ddsBreakpointMdNumberPx = 960;
const ddsBreakpointLg = "1280px";
const ddsBreakpointLgNumberPx = 1280;
const ddsBreakpointXl = "1920px";
const ddsBreakpointXlNumberPx = 1920;
const ddsZindexSkiptocontent = "250"; // Brukes for dds-skiptocontent
const ddsZindexModalBackdrop = "200"; // Brukes for dds-modal
const ddsZindexDrawer = "180"; // Brukes for dds-drawer
const ddsZindexDrawerBackdrop = "180"; // Brukes for dds-drawer
const ddsZindexOverflowmenu = "160"; // Brukes for dds-overflowmenu
const ddsZindexPopover = "140"; // Brukes for dds-popover og kalender i datepicker
const ddsZindexTooltip = "120"; // Brukes for dds-tooltip
const ddsZindexDropdown = "100"; // Dropdown brukes for bl.a søkeforslag, dropdown i select
const ddsZindexSticky = "50"; // Sticky header skal dekke til flat innhold i gruppen (tabell o.l.). Den skal legge seg under elementer som stiller med egne flater
const ddsZindexAbsoluteElement = "1"; // Dekorative elementer med absolutt posisjon, som ellers hadde blitt skjult bak forelder
const ddsColorData10Default = "#196b8f";
const ddsColorData10Subtle = "#93cee6";
const ddsColorData10Border = "#196b8f";
const ddsColorDataRed100 = "#f8d2d4";
const ddsColorDataRed200 = "#f0a5a9";
const ddsColorDataRed300 = "#f4858b";
const ddsColorDataRed400 = "#e14b53";
const ddsColorDataRed500 = "#da1e28";
const ddsColorDataRed600 = "#ae1820";
const ddsColorDataRed700 = "#831218";
const ddsColorDataRed800 = "#570c10";
const ddsColorDataRed900 = "#2c0608";
const ddsColorDataMagenta100 = "#f7d9f2";
const ddsColorDataMagenta200 = "#edb5e4";
const ddsColorDataMagenta300 = "#e079d0";
const ddsColorDataMagenta400 = "#d54dc0";
const ddsColorDataMagenta500 = "#cb20b0";
const ddsColorDataMagenta600 = "#a21a8d";
const ddsColorDataMagenta700 = "#7a136a";
const ddsColorDataMagenta800 = "#510d46";
const ddsColorDataMagenta900 = "#290623";
const ddsColorDataBrown100 = "#f0ddd5";
const ddsColorDataBrown200 = "#e1bcac";
const ddsColorDataBrown300 = "#d19a82";
const ddsColorDataBrown400 = "#c27959";
const ddsColorDataBrown500 = "#b3572f";
const ddsColorDataBrown600 = "#8f4626";
const ddsColorDataBrown700 = "#6b341c";
const ddsColorDataBrown800 = "#482313";
const ddsColorDataBrown900 = "#241109";
const ddsColorDataOlive100 = "#e9e7cd";
const ddsColorDataOlive200 = "#cdc9a1";
const ddsColorDataOlive300 = "#b3ae71";
const ddsColorDataOlive400 = "#989344";
const ddsColorDataOlive500 = "#7c7518";
const ddsColorDataOlive600 = "#635e13";
const ddsColorDataOlive700 = "#4a460e";
const ddsColorDataOlive800 = "#322f0a";
const ddsColorDataOlive900 = "#191705";
const ddsColorDataGreen100 = "#d7e8cf";
const ddsColorDataGreen200 = "#aed19e";
const ddsColorDataGreen300 = "#95c280";
const ddsColorDataGreen400 = "#619947";
const ddsColorDataGreen500 = "#3a8019";
const ddsColorDataGreen600 = "#2e6614";
const ddsColorDataGreen700 = "#234d0f";
const ddsColorDataGreen800 = "#17330a";
const ddsColorDataGreen900 = "#0c1a05";
const ddsColorDataTeal100 = "#c2e2e1";
const ddsColorDataTeal200 = "#90ccc9";
const ddsColorDataTeal300 = "#5dafad";
const ddsColorDataTeal400 = "#2c9390";
const ddsColorDataTeal500 = "#007d79";
const ddsColorDataTeal600 = "#006461";
const ddsColorDataTeal700 = "#004b49";
const ddsColorDataTeal800 = "#003230";
const ddsColorDataTeal900 = "#001918";
const ddsColorDataDeepblue100 = "#c6e3f1";
const ddsColorDataDeepblue200 = "#93cee6";
const ddsColorDataDeepblue300 = "#62abcb";
const ddsColorDataDeepblue400 = "#358fb5";
const ddsColorDataDeepblue500 = "#196b8f";
const ddsColorDataDeepblue600 = "#135774";
const ddsColorDataDeepblue700 = "#0e455e";
const ddsColorDataDeepblue800 = "#0d3445";
const ddsColorDataDeepblue900 = "#05151d";
const ddsColorDataBlue100 = "#cfe0ff";
const ddsColorDataBlue200 = "#9fc0ff";
const ddsColorDataBlue300 = "#6fa1fe";
const ddsColorDataBlue400 = "#3f81fe";
const ddsColorDataBlue500 = "#0f62fe";
const ddsColorDataBlue600 = "#0c4ecb";
const ddsColorDataBlue700 = "#093b98";
const ddsColorDataBlue800 = "#062766";
const ddsColorDataBlue900 = "#031433";
const ddsColorDataPurple100 = "#e8d9fe";
const ddsColorDataPurple200 = "#d0b2fe";
const ddsColorDataPurple300 = "#b98cfd";
const ddsColorDataPurple400 = "#a165fd";
const ddsColorDataPurple500 = "#8a3ffc";
const ddsColorDataPurple600 = "#6e32ca";
const ddsColorDataPurple700 = "#532697";
const ddsColorDataPurple800 = "#371965";
const ddsColorDataPurple900 = "#1c0d32";
const ddsColorDataGray100 = "#e3e3e3";
const ddsColorDataGray200 = "#c7c7c7";
const ddsColorDataGray300 = "#aaaaaa";
const ddsColorDataGray400 = "#8e8e8e";
const ddsColorDataGray500 = "#727272";
const ddsColorDataGray600 = "#5b5b5b";
const ddsColorDataGray700 = "#444444";
const ddsColorDataGray800 = "#2e2e2e";
const ddsColorDataGray900 = "#171717";
const ddsColorData01Default = "#0f62fe";
const ddsColorData01Subtle = "#9fc0ff";
const ddsColorData01Border = "#0f62fe";
const ddsColorData02Default = "#b3572f";
const ddsColorData02Subtle = "#e1bcac";
const ddsColorData02Border = "#b3572f";
const ddsColorData03Default = "#727272";
const ddsColorData03Subtle = "#c7c7c7";
const ddsColorData03Border = "#727272";
const ddsColorData04Default = "#3a8019";
const ddsColorData04Subtle = "#aed19e";
const ddsColorData04Border = "#3a8019";
const ddsColorData05Default = "#8a3ffc";
const ddsColorData05Subtle = "#d0b2fe";
const ddsColorData05Border = "#8a3ffc";
const ddsColorData06Default = "#cb20b0";
const ddsColorData06Subtle = "#edb5e4";
const ddsColorData06Border = "#cb20b0";
const ddsColorData07Default = "#7c7518";
const ddsColorData07Subtle = "#cdc9a1";
const ddsColorData07Border = "#7c7518";
const ddsColorData08Default = "#da1e28";
const ddsColorData08Subtle = "#f0a5a9";
const ddsColorData08Border = "#da1e28";
const ddsColorData09Default = "#007d79";
const ddsColorData09Subtle = "#90ccc9";
const ddsColorData09Border = "#007d79";
const ddsMotionMicroState = "200ms linear"; // Animasjon for hover og andre states. feks. selected, pressed
const ddsMotionSurface = "200ms cubic-bezier(0.4, 0, 0.2, 1)"; // Default animasjon for fokusmarkering, åpne/lukke funksjonalitet. feks, modal, accordion etc
const ddsMotionChevron = "200ms linear"; // Animert chevron
const ddsMotionAnimationSkeleton = "800ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate"; // Skeleton animasjon
const ddsColorBgDefault = "#ffffff"; // UI shell base color
const ddsColorBgSubtle = "#f1f3f4"; // Alternative UI shell base color
const ddsColorSurfaceDefault = "#ffffff"; // Default bg
const ddsColorSurfaceSubtle = "#f1f3f4"; // Subtle surface color
const ddsColorSurfaceMedium = "#e9ebec"; // Medium surface color
const ddsColorSurfaceHoverDefault = "#e7f1f7"; // Hover on surface (default, subtle, medium)
const ddsColorSurfaceHoverSubtle = "#f1f3f4"; // Subtle hover on surface (default, medium)
const ddsColorSurfaceSelectedDefault = "#e7f1f7"; // Selected state for surface (default, subtle, medium)
const ddsColorSurfaceInverseDefault = "#354754"; // Can be used as a surface for menu, navigation, footer etc
const ddsColorSurfaceInverseHover = "#2a3943"; // Hover on surface.inverse
const ddsColorSurfaceInverseSelected = "#202b32"; // selected on surface.inverse
const ddsColorSurfaceActionResting = "#106ead"; // Primary button bg
const ddsColorSurfaceActionHover = "#0d588a"; // Hover on surface.action/selected
const ddsColorSurfaceActionSelected = "#106ead"; // Selected state for components such as togglebutton, togglebar, progress tracker, checkbox etc
const ddsColorSurfaceActionDangerResting = "#d83737"; // Danger button
const ddsColorSurfaceActionDangerHover = "#ad2c2c"; // Hover on surface.action-danger
const ddsColorSurfaceActionSelectedDisabled = "#77838c"; // bg on a selected disabled checkbox, radio etc
const ddsColorSurfaceDangerDefault = "#fbebeb"; // tag, message, errormessage
const ddsColorSurfaceDangerStrong = "#e47373"; // tag strong value
const ddsColorSurfaceSuccessDefault = "#f0f9f0"; // tag, message
const ddsColorSurfaceSuccessStrong = "#93d294"; // tag with strong value
const ddsColorSurfaceWarningDefault = "#fefced"; // tag, message
const ddsColorSurfaceWarningStrong = "#f7e982"; // tag strong value
const ddsColorSurfaceInfoDefault = "#f1f8fd"; // tag, message
const ddsColorSurfaceInfoStrong = "#9eceee"; // tag strong value
const ddsColorSurfacePaperDefault = "#ffffff"; // modal, drawer, popover etc
const ddsColorSurfaceBackdropDefault = "#0b0d0e80"; // background overlay for modals (50%)
const ddsColorSurfaceFieldDefault = "#ffffff"; // Form elements (textinput, datepicker etc)
const ddsColorSurfaceFieldDisabled = "#f1f3f4"; // disabled state on surface.field
const ddsColorSurfaceHighlightedDefault = "#fce5dd"; // bg for highlighted text on text.default. Use with $Text
const ddsColorSurfaceScrollbar = "#adb5ba"; // Used for scrollbar
const ddsColorSurfaceNotification = "#d83737"; // bg on a notification
const ddsColorSurfaceSkeleton = "#d6dadd"; // Used for skeleton
const ddsColorBorderDefault = "#77838c"; // Form components, togglebutton, secondary button, checkbox etc
const ddsColorBorderSubtle = "#d6dadd"; // Dropdown, tooltip, overflow etc
const ddsColorBorderInverse = "#acbbc6"; // Border or divider on surface.inverse
const ddsColorBorderActionDefault = "#106ead"; // Used in progress tracker
const ddsColorBorderActionHover = "#0d588a"; // Hover on secondary button etc
const ddsColorBorderSuccess = "#65be66"; // Used with tag-default
const ddsColorBorderWarning = "#f4e04d"; // Tag.default
const ddsColorBorderDanger = "#d83737"; // Tag.default, error message field
const ddsColorBorderInfo = "#75b9e6"; // Tag.default
const ddsColorBorderOnAction = "#ffffff"; // Used on primary split button
const ddsColorTextDefault = "#0b0d0e"; // default text, heading, body. on surface.hover
const ddsColorTextMedium = "#3a4146"; // Label, etc
const ddsColorTextSubtle = "#545c62"; // Disabled or less important text
const ddsColorTextOnInverse = "#ffffff"; // On surface.inverse
const ddsColorTextDanger = "#ad2c2c"; // Error text on paper, or default or subtle surafce/bg
const ddsColorTextOnAction = "#ffffff"; // On surface.action (primary and danger button)
const ddsColorTextOnStatusDefault = "#0b0d0e"; // On default status surfaces
const ddsColorTextOnStatusStrong = "#0b0d0e"; // On status surfaces with strong prop
const ddsColorTextActionResting = "#106ead"; // Link, number in progress tracker
const ddsColorTextActionHover = "#0d588a"; // Hover on text.action
const ddsColorTextRequiredfield = "#d83737"; // Asterix to indicate required field
const ddsColorTextActionVisited = "#7f29b4"; // Used for visited links
const ddsColorTextActionVisitedOnInverse = "#cca9e1"; // Used for visited links on inverse surfaces
const ddsColorTextOnNotification = "#ffffff"; // Used on surface.notification
const ddsColorTextOnPrimaryDefault = "#ffffff"; // Used on brand.primary-default
const ddsColorTextOnPrimarySubtle = "#0b0d0e"; // Used on brand.primary-subtle
const ddsColorTextOnPrimaryMedium = "#ffffff"; // Used on brand.primary-medium
const ddsColorTextOnPrimaryStrong = "#ffffff"; // Used on brand.primary-strong
const ddsColorTextOnSecondaryDefault = "#0b0d0e"; // Used on brand.secondary-default
const ddsColorTextOnSecondarySubtle = "#0b0d0e"; // Used on brand.secondary-subtle
const ddsColorTextOnSecondaryMedium = "#0b0d0e"; // Used on brand.secondary-medium
const ddsColorTextOnSecondaryStrong = "#ffffff"; // Used on brand.secondary-strong
const ddsColorTextOnTertiaryDefault = "#0b0d0e"; // Used on brand.tertiary-default
const ddsColorTextOnTertiarySubtle = "#0b0d0e"; // Used on brand.tertiary-subtle
const ddsColorTextOnTertiaryMedium = "#0b0d0e"; // Used on brand.tertiary-medium
const ddsColorTextOnTertiaryStrong = "#0b0d0e"; // Used on brand.tertiary-strong
const ddsColorTextOnDataDefault = "#ffffff"; // Used on data. with default value
const ddsColorTextOnDataSubtle = "#0b0d0e"; // Used on data. with subtle value
const ddsColorIconDefault = "#0b0d0e"; // Often used with text.default
const ddsColorIconMedium = "#3a4146"; // Often used with text.medium
const ddsColorIconSubtle = "#545c62"; // Often used with text.subtle
const ddsColorIconOnInverse = "#ffffff"; // On surface.inverse
const ddsColorIconOnAction = "#ffffff"; // On surface.action (primary and danger button)
const ddsColorIconActionResting = "#106ead"; // Often used with Text.action
const ddsColorIconActionHover = "#0d588a"; // hover on icon-action
const ddsColorIconOnSuccessDefault = "#3d723d"; // On surface.success-default
const ddsColorIconOnSuccessStrong = "#0b0d0e"; // On surface-success-strong
const ddsColorIconOnWarningDefault = "#9a8c26"; // On surface.warning-default
const ddsColorIconOnWarningStrong = "#0b0d0e"; // On surface.warning-strong
const ddsColorIconOnDangerDefault = "#ad2c2c"; // On surface.danger-default
const ddsColorIconOnDangerStrong = "#0b0d0e"; // On surface.danger-strong
const ddsColorIconOnInfoDefault = "#3e7192"; // On surface.info-default
const ddsColorIconOnInfoStrong = "#0b0d0e"; // On surface.info-strong
const ddsColorIconDanger = "#ad2c2c"; // Error icon on paper, or default or subtle surafce/bg
const ddsColorBrandPrimaryDefault = "#354754"; // Primary brand color
const ddsColorBrandPrimarySubtle = "#eaeff4"; // Primary brand color
const ddsColorBrandPrimaryMedium = "#4f6a7e"; // Primary brand color
const ddsColorBrandPrimaryStrong = "#202b32"; // Primary brand color
const ddsColorBrandSecondaryDefault = "#9ab8b7"; // Secondary brand color
const ddsColorBrandSecondarySubtle = "#e6eded"; // Secondary brand color
const ddsColorBrandSecondaryMedium = "#b8cdcd"; // Secondary brand color
const ddsColorBrandSecondaryStrong = "#4d6463"; // Secondary brand color
const ddsColorBrandTertiaryDefault = "#f27e55"; // Tertiary brand color
const ddsColorBrandTertiarySubtle = "#fce5dd"; // Tertiary brand color
const ddsColorBrandTertiaryMedium = "#f2a68f"; // Tertiary brand color
const ddsColorBrandTertiaryStrong = "#d45d32"; // Tertiary brand color
const ddsColorFocusOutside = "#2a4b61"; // Contrast to .inside
const ddsColorFocusInside = "#f1f8fd"; // Contrast to .outside
const ddsShadowLarge = "8px 16px 32px 0px rgba(11, 13, 14, 10%)"; // Dialoger. Eksempel: modal, drawer, popover
const ddsShadowMedium = "2px 4px 8px 0px rgba(11, 13, 14, 10%)"; // Dropdowns. Eksempel: overflowmenu, dropdown
const ddsShadowSmall = "1px 2px 4px 0px rgba(11, 13, 14, 10%)"; // Eksempel: tooltip
const ddsBorderRadiusButton = "2px";
const ddsBorderRadiusButtonNumberPx = 2; // For use in button component and togglebutton
const ddsBorderRadiusSurface = "4px";
const ddsBorderRadiusSurfaceNumberPx = 4; // Most surfaces, for example cards, papers, messages, backgrounds in GUI
const ddsBorderRadiusInput = "2px";
const ddsBorderRadiusInputNumberPx = 2; // All input fields, and check boxes
const ddsBorderRadiusChip = "4px";
const ddsBorderRadiusChipNumberPx = 4; // Chips and tags
const ddsBorderRadiusRounded = "9999px";
const ddsBorderRadiusRoundedNumberPx = 9999; // Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker
const ddsFontLabelMedium = "600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // Label for form components
const ddsFontBodyLongXsmall = "400 0.75rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Xsmall body text for editorial content
const ddsFontBodyLongSmall = "400 0.875rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Small body text for editorial content
const ddsFontBodyLongMedium = "400 1rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Default body text for editorial content
const ddsFontBodyLongLarge = "400 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Large body text for editorial content
const ddsFontHeadingXxsmall = "600 0.75rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // Default h6
const ddsFontHeadingXsmall = "600 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // Default h5
const ddsFontHeadingSmall = "600 1rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // Default h4
const ddsFontHeadingMedium = "600 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // Default h3
const ddsFontHeadingLarge = "400 clamp(1.25rem, 0.833rem + 1.111vw, 1.5rem)/1.3 'IBM Plex Sans', Arial, sans-serif"; // Default h2
const ddsFontHeadingXlarge = "400 clamp(1.5rem, 0.667rem + 2.222vw, 2rem)/1.3 'IBM Plex Sans', Arial, sans-serif"; // Default H1
const ddsFontHeadingXxlarge = "300 clamp(2.5rem, 1.667rem + 2.222vw, 3rem)/1.3 'IBM Plex Sans', Arial, sans-serif"; // Display or extra large page title (h1)
const ddsFontLeadMedium = "300 1.125rem/1.5 'IBM Plex Sans', Arial, sans-serif"; // Lead brukes som ingress når man skriver artikler etc
const ddsFontCodeMedium = "400 1rem/1.5 'IBM Plex Mono', 'Courier New', monospace"; // Brukes for kodesnutter etc
const ddsFontBodyShortXsmall = "400 0.75rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // used with xsmall button and input fields
const ddsFontBodyShortSmall = "400 0.875rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // used with small button and input fields
const ddsFontBodyShortMedium = "400 1rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // Used with medium button and input fields
const ddsFontBodyShortLarge = "400 1.125rem/1.3 'IBM Plex Sans', Arial, sans-serif"; // Used for large button and large search
const ddsFontHeadingXxlargeLetterSpacing = "-0.01em";
const ddsFontHeadingXxlargeParagraphSpacing = "0.4em";
const ddsFontHeadingXxlargeParagraphSpacingNumberEm = 0.4;
const ddsFontHeadingXlargeLetterSpacing = "0em";
const ddsFontHeadingXlargeParagraphSpacing = "0.4em";
const ddsFontHeadingXlargeParagraphSpacingNumberEm = 0.4;
const ddsFontHeadingLargeLetterSpacing = "0em";
const ddsFontHeadingLargeParagraphSpacing = "0.4em";
const ddsFontHeadingLargeParagraphSpacingNumberEm = 0.4;
const ddsFontHeadingMediumLetterSpacing = "0em";
const ddsFontHeadingMediumParagraphSpacing = "0.4em";
const ddsFontHeadingMediumParagraphSpacingNumberEm = 0.4;
const ddsFontHeadingSmallLetterSpacing = "0em";
const ddsFontHeadingSmallParagraphSpacing = "0.4em";
const ddsFontHeadingSmallParagraphSpacingNumberEm = 0.4;
const ddsFontHeadingXsmallLetterSpacing = "0.01em";
const ddsFontHeadingXsmallParagraphSpacing = "0.4em";
const ddsFontHeadingXsmallParagraphSpacingNumberEm = 0.4;
const ddsFontHeadingXxsmallLetterSpacing = "0.01em";
const ddsFontHeadingXxsmallParagraphSpacing = "0.4em";
const ddsFontHeadingXxsmallParagraphSpacingNumberEm = 0.4;
const ddsFontBodyLongLargeLetterSpacing = "0em";
const ddsFontBodyLongLargeParagraphSpacing = "1em";
const ddsFontBodyLongLargeParagraphSpacingNumberEm = 1;
const ddsFontBodyLongMediumLetterSpacing = "0em";
const ddsFontBodyLongMediumParagraphSpacing = "1em";
const ddsFontBodyLongMediumParagraphSpacingNumberEm = 1;
const ddsFontBodyLongSmallLetterSpacing = "0.01em";
const ddsFontBodyLongSmallParagraphSpacing = "1em";
const ddsFontBodyLongSmallParagraphSpacingNumberEm = 1;
const ddsFontBodyLongXsmallLetterSpacing = "0.01em";
const ddsFontBodyLongXsmallParagraphSpacing = "1em";
const ddsFontBodyLongXsmallParagraphSpacingNumberEm = 1;
const ddsFontLeadMediumLetterSpacing = "0em";
const ddsFontLeadMediumParagraphSpacing = "1em";
const ddsFontLeadMediumParagraphSpacingNumberEm = 1;
const ddsFontCodeMediumLetterSpacing = "0em";
const ddsFontCodeMediumParagraphSpacing = "1em";
const ddsFontCodeMediumParagraphSpacingNumberEm = 1;
const ddsFontLabelMediumLetterSpacing = "0.01em";
const ddsFontLabelMediumParagraphSpacing = "1em";
const ddsFontLabelMediumParagraphSpacingNumberEm = 1;
const ddsFontBodyShortLargeLetterSpacing = "0em";
const ddsFontBodyShortLargeParagraphSpacing = "1em";
const ddsFontBodyShortLargeParagraphSpacingNumberEm = 1;
const ddsFontBodyShortMediumLetterSpacing = "0em";
const ddsFontBodyShortMediumParagraphSpacing = "1em";
const ddsFontBodyShortMediumParagraphSpacingNumberEm = 1;
const ddsFontBodyShortSmallLetterSpacing = "0.01em";
const ddsFontBodyShortSmallParagraphSpacing = "1em";
const ddsFontBodyShortSmallParagraphSpacingNumberEm = 1;
const ddsFontBodyShortXsmallLetterSpacing = "0.01em";
const ddsFontBodyShortXsmallParagraphSpacing = "1em";
const ddsFontBodyShortXsmallParagraphSpacingNumberEm = 1;
export { ddsBorderRadiusButton, ddsBorderRadiusButtonNumberPx, ddsBorderRadiusChip, ddsBorderRadiusChipNumberPx, ddsBorderRadiusInput, ddsBorderRadiusInputNumberPx, ddsBorderRadiusRounded, ddsBorderRadiusRoundedNumberPx, ddsBorderRadiusSurface, ddsBorderRadiusSurfaceNumberPx, ddsBreakpointLg, ddsBreakpointLgNumberPx, ddsBreakpointMd, ddsBreakpointMdNumberPx, ddsBreakpointSm, ddsBreakpointSmNumberPx, ddsBreakpointXl, ddsBreakpointXlNumberPx, ddsBreakpointXs, ddsBreakpointXsNumberPx, ddsColorBgDefault, ddsColorBgSubtle, ddsColorBorderActionDefault, ddsColorBorderActionHover, ddsColorBorderDanger, ddsColorBorderDefault, ddsColorBorderInfo, ddsColorBorderInverse, ddsColorBorderOnAction, ddsColorBorderSubtle, ddsColorBorderSuccess, ddsColorBorderWarning, ddsColorBrandPrimaryDefault, ddsColorBrandPrimaryMedium, ddsColorBrandPrimaryStrong, ddsColorBrandPrimarySubtle, ddsColorBrandSecondaryDefault, ddsColorBrandSecondaryMedium, ddsColorBrandSecondaryStrong, ddsColorBrandSecondarySubtle, ddsColorBrandTertiaryDefault, ddsColorBrandTertiaryMedium, ddsColorBrandTertiaryStrong, ddsColorBrandTertiarySubtle, ddsColorData01Border, ddsColorData01Default, ddsColorData01Subtle, ddsColorData02Border, ddsColorData02Default, ddsColorData02Subtle, ddsColorData03Border, ddsColorData03Default, ddsColorData03Subtle, ddsColorData04Border, ddsColorData04Default, ddsColorData04Subtle, ddsColorData05Border, ddsColorData05Default, ddsColorData05Subtle, ddsColorData06Border, ddsColorData06Default, ddsColorData06Subtle, ddsColorData07Border, ddsColorData07Default, ddsColorData07Subtle, ddsColorData08Border, ddsColorData08Default, ddsColorData08Subtle, ddsColorData09Border, ddsColorData09Default, ddsColorData09Subtle, ddsColorData10Border, ddsColorData10Default, ddsColorData10Subtle, ddsColorDataBlue100, ddsColorDataBlue200, ddsColorDataBlue300, ddsColorDataBlue400, ddsColorDataBlue500, ddsColorDataBlue600, ddsColorDataBlue700, ddsColorDataBlue800, ddsColorDataBlue900, ddsColorDataBrown100, ddsColorDataBrown200, ddsColorDataBrown300, ddsColorDataBrown400, ddsColorDataBrown500, ddsColorDataBrown600, ddsColorDataBrown700, ddsColorDataBrown800, ddsColorDataBrown900, ddsColorDataDeepblue100, ddsColorDataDeepblue200, ddsColorDataDeepblue300, ddsColorDataDeepblue400, ddsColorDataDeepblue500, ddsColorDataDeepblue600, ddsColorDataDeepblue700, ddsColorDataDeepblue800, ddsColorDataDeepblue900, ddsColorDataGray100, ddsColorDataGray200, ddsColorDataGray300, ddsColorDataGray400, ddsColorDataGray500, ddsColorDataGray600, ddsColorDataGray700, ddsColorDataGray800, ddsColorDataGray900, ddsColorDataGreen100, ddsColorDataGreen200, ddsColorDataGreen300, ddsColorDataGreen400, ddsColorDataGreen500, ddsColorDataGreen600, ddsColorDataGreen700, ddsColorDataGreen800, ddsColorDataGreen900, ddsColorDataMagenta100, ddsColorDataMagenta200, ddsColorDataMagenta300, ddsColorDataMagenta400, ddsColorDataMagenta500, ddsColorDataMagenta600, ddsColorDataMagenta700, ddsColorDataMagenta800, ddsColorDataMagenta900, ddsColorDataOlive100, ddsColorDataOlive200, ddsColorDataOlive300, ddsColorDataOlive400, ddsColorDataOlive500, ddsColorDataOlive600, ddsColorDataOlive700, ddsColorDataOlive800, ddsColorDataOlive900, ddsColorDataPurple100, ddsColorDataPurple200, ddsColorDataPurple300, ddsColorDataPurple400, ddsColorDataPurple500, ddsColorDataPurple600, ddsColorDataPurple700, ddsColorDataPurple800, ddsColorDataPurple900, ddsColorDataRed100, ddsColorDataRed200, ddsColorDataRed300, ddsColorDataRed400, ddsColorDataRed500, ddsColorDataRed600, ddsColorDataRed700, ddsColorDataRed800, ddsColorDataRed900, ddsColorDataTeal100, ddsColorDataTeal200, ddsColorDataTeal300, ddsColorDataTeal400, ddsColorDataTeal500, ddsColorDataTeal600, ddsColorDataTeal700, ddsColorDataTeal800, ddsColorDataTeal900, ddsColorFocusInside, ddsColorFocusOutside, ddsColorIconActionHover, ddsColorIconActionResting, ddsColorIconDanger, ddsColorIconDefault, ddsColorIconMedium, ddsColorIconOnAction, ddsColorIconOnDangerDefault, ddsColorIconOnDangerStrong, ddsColorIconOnInfoDefault, ddsColorIconOnInfoStrong, ddsColorIconOnInverse, ddsColorIconOnSuccessDefault, ddsColorIconOnSuccessStrong, ddsColorIconOnWarningDefault, ddsColorIconOnWarningStrong, ddsColorIconSubtle, ddsColorSurfaceActionDangerHover, ddsColorSurfaceActionDangerResting, ddsColorSurfaceActionHover, ddsColorSurfaceActionResting, ddsColorSurfaceActionSelected, ddsColorSurfaceActionSelectedDisabled, ddsColorSurfaceBackdropDefault, ddsColorSurfaceDangerDefault, ddsColorSurfaceDangerStrong, ddsColorSurfaceDefault, ddsColorSurfaceFieldDefault, ddsColorSurfaceFieldDisabled, ddsColorSurfaceHighlightedDefault, ddsColorSurfaceHoverDefault, ddsColorSurfaceHoverSubtle, ddsColorSurfaceInfoDefault, ddsColorSurfaceInfoStrong, ddsColorSurfaceInverseDefault, ddsColorSurfaceInverseHover, ddsColorSurfaceInverseSelected, ddsColorSurfaceMedium, ddsColorSurfaceNotification, ddsColorSurfacePaperDefault, ddsColorSurfaceScrollbar, ddsColorSurfaceSelectedDefault, ddsColorSurfaceSkeleton, ddsColorSurfaceSubtle, ddsColorSurfaceSuccessDefault, ddsColorSurfaceSuccessStrong, ddsColorSurfaceWarningDefault, ddsColorSurfaceWarningStrong, ddsColorTextActionHover, ddsColorTextActionResting, ddsColorTextActionVisited, ddsColorTextActionVisitedOnInverse, ddsColorTextDanger, ddsColorTextDefault, ddsColorTextMedium, ddsColorTextOnAction, ddsColorTextOnDataDefault, ddsColorTextOnDataSubtle, ddsColorTextOnInverse, ddsColorTextOnNotification, ddsColorTextOnPrimaryDefault, ddsColorTextOnPrimaryMedium, ddsColorTextOnPrimaryStrong, ddsColorTextOnPrimarySubtle, ddsColorTextOnSecondaryDefault, ddsColorTextOnSecondaryMedium, ddsColorTextOnSecondaryStrong, ddsColorTextOnSecondarySubtle, ddsColorTextOnStatusDefault, ddsColorTextOnStatusStrong, ddsColorTextOnTertiaryDefault, ddsColorTextOnTertiaryMedium, ddsColorTextOnTertiaryStrong, ddsColorTextOnTertiarySubtle, ddsColorTextRequiredfield, ddsColorTextSubtle, ddsFontBodyLongLarge, ddsFontBodyLongLargeLetterSpacing, ddsFontBodyLongLargeParagraphSpacing, ddsFontBodyLongLargeParagraphSpacingNumberEm, ddsFontBodyLongMedium, ddsFontBodyLongMediumLetterSpacing, ddsFontBodyLongMediumParagraphSpacing, ddsFontBodyLongMediumParagraphSpacingNumberEm, ddsFontBodyLongSmall, ddsFontBodyLongSmallLetterSpacing, ddsFontBodyLongSmallParagraphSpacing, ddsFontBodyLongSmallParagraphSpacingNumberEm, ddsFontBodyLongXsmall, ddsFontBodyLongXsmallLetterSpacing, ddsFontBodyLongXsmallParagraphSpacing, ddsFontBodyLongXsmallParagraphSpacingNumberEm, ddsFontBodyShortLarge, ddsFontBodyShortLargeLetterSpacing, ddsFontBodyShortLargeParagraphSpacing, ddsFontBodyShortLargeParagraphSpacingNumberEm, ddsFontBodyShortMedium, ddsFontBodyShortMediumLetterSpacing, ddsFontBodyShortMediumParagraphSpacing, ddsFontBodyShortMediumParagraphSpacingNumberEm, ddsFontBodyShortSmall, ddsFontBodyShortSmallLetterSpacing, ddsFontBodyShortSmallParagraphSpacing, ddsFontBodyShortSmallParagraphSpacingNumberEm, ddsFontBodyShortXsmall, ddsFontBodyShortXsmallLetterSpacing, ddsFontBodyShortXsmallParagraphSpacing, ddsFontBodyShortXsmallParagraphSpacingNumberEm, ddsFontCodeMedium, ddsFontCodeMediumLetterSpacing, ddsFontCodeMediumParagraphSpacing, ddsFontCodeMediumParagraphSpacingNumberEm, ddsFontFamilyMonospace, ddsFontFamilySans, ddsFontHeadingLarge, ddsFontHeadingLargeLetterSpacing, ddsFontHeadingLargeParagraphSpacing, ddsFontHeadingLargeParagraphSpacingNumberEm, ddsFontHeadingMedium, ddsFontHeadingMediumLetterSpacing, ddsFontHeadingMediumParagraphSpacing, ddsFontHeadingMediumParagraphSpacingNumberEm, ddsFontHeadingSmall, ddsFontHeadingSmallLetterSpacing, ddsFontHeadingSmallParagraphSpacing, ddsFontHeadingSmallParagraphSpacingNumberEm, ddsFontHeadingXlarge, ddsFontHeadingXlargeLetterSpacing, ddsFontHeadingXlargeParagraphSpacing, ddsFontHeadingXlargeParagraphSpacingNumberEm, ddsFontHeadingXsmall, ddsFontHeadingXsmallLetterSpacing, ddsFontHeadingXsmallParagraphSpacing, ddsFontHeadingXsmallParagraphSpacingNumberEm, ddsFontHeadingXxlarge, ddsFontHeadingXxlargeLetterSpacing, ddsFontHeadingXxlargeParagraphSpacing, ddsFontHeadingXxlargeParagraphSpacingNumberEm, ddsFontHeadingXxsmall, ddsFontHeadingXxsmallLetterSpacing, ddsFontHeadingXxsmallParagraphSpacing, ddsFontHeadingXxsmallParagraphSpacingNumberEm, ddsFontLabelMedium, ddsFontLabelMediumLetterSpacing, ddsFontLabelMediumParagraphSpacing, ddsFontLabelMediumParagraphSpacingNumberEm, ddsFontLeadMedium, ddsFontLeadMediumLetterSpacing, ddsFontLeadMediumParagraphSpacing, ddsFontLeadMediumParagraphSpacingNumberEm, ddsFontLetterSpacingLoose, ddsFontLetterSpacingNormal, ddsFontLetterSpacingTight, ddsFontLineheightX1, ddsFontLineheightX2, ddsFontLineheightX3, ddsFontParagraphSpacingHeading, ddsFontParagraphSpacingHeadingNumberEm, ddsFontParagraphSpacingLarge, ddsFontParagraphSpacingLargeNumberEm, ddsFontParagraphSpacingList, ddsFontParagraphSpacingListNumberEm, ddsFontParagraphSpacingMedium, ddsFontParagraphSpacingMediumNumberEm, ddsFontParagraphSpacingSmall, ddsFontParagraphSpacingSmallNumberEm, ddsFontSizeX075, ddsFontSizeX075NumberRem, ddsFontSizeX0875, ddsFontSizeX0875NumberRem, ddsFontSizeX1, ddsFontSizeX1125, ddsFontSizeX1125NumberRem, ddsFontSizeX125, ddsFontSizeX125NumberRem, ddsFontSizeX15, ddsFontSizeX15NumberRem, ddsFontSizeX1NumberRem, ddsFontSizeX2, ddsFontSizeX25, ddsFontSizeX25NumberRem, ddsFontSizeX2NumberRem, ddsFontSizeX3, ddsFontSizeX3NumberRem, ddsFontSizeX4, ddsFontSizeX4NumberRem, ddsFontSizeX5, ddsFontSizeX5NumberRem, ddsFontStyleItalic, ddsFontStyleNormal, ddsFontStyleUnderline, ddsFontWeightBold, ddsFontWeightLight, ddsFontWeightNormal, ddsFontWeightSemiBold, ddsGridLgCount, ddsGridLgGutterSize, ddsGridLgGutterSizeNumberPx, ddsGridMdCount, ddsGridMdGutterSize, ddsGridMdGutterSizeNumberPx, ddsGridSmCount, ddsGridSmGutterSize, ddsGridSmGutterSizeNumberPx, ddsGridXlCount, ddsGridXlGutterSize, ddsGridXlGutterSizeNumberPx, ddsGridXsCount, ddsGridXsGutterSize, ddsGridXsGutterSizeNumberPx, ddsMotionAnimationSkeleton, ddsMotionChevron, ddsMotionMicroState, ddsMotionSurface, ddsShadowLarge, ddsShadowMedium, ddsShadowSmall, ddsSizeIconComponent, ddsSizeIconComponentNumberEm, ddsSizeIconLarge, ddsSizeIconLargeNumberPx, ddsSizeIconMedium, ddsSizeIconMediumNumberPx, ddsSizeIconSmall, ddsSizeIconSmallNumberPx, ddsSpacingPaddingTopHeading, ddsSpacingPaddingTopHeadingNumberEm, ddsSpacingX0, ddsSpacingX0125, ddsSpacingX0125NumberRem, ddsSpacingX025, ddsSpacingX025NumberRem, ddsSpacingX05, ddsSpacingX05NumberRem, ddsSpacingX075, ddsSpacingX075NumberRem, ddsSpacingX0NumberRem, ddsSpacingX1, ddsSpacingX10, ddsSpacingX10NumberRem, ddsSpacingX15, ddsSpacingX15NumberRem, ddsSpacingX1NumberRem, ddsSpacingX2, ddsSpacingX25, ddsSpacingX25NumberRem, ddsSpacingX2NumberRem, ddsSpacingX3, ddsSpacingX3NumberRem, ddsSpacingX4, ddsSpacingX4NumberRem, ddsSpacingX6, ddsSpacingX6NumberRem, ddsZindexAbsoluteElement, ddsZindexDrawer, ddsZindexDrawerBackdrop, ddsZindexDropdown, ddsZindexModalBackdrop, ddsZindexOverflowmenu, ddsZindexPopover, ddsZindexSkiptocontent, ddsZindexSticky, ddsZindexTooltip };