import { Meta } from '@storybook/blocks';

<Meta title="Docs/Themes" />

# Themes

The theming is based on CSS custom properties (variables).
We use [Vanilla Extract](https://vanilla-extract.style) to author the themes and styling using TypeScript.

These are the available properties (with values from the base theme):

```
  --dcs-size-mini: 0.5em;
  --dcs-size-small: 0.571em;
  --dcs-size-medium: 1.143em;
  --dcs-size-large: 1.5em;
  --dcs-size-huge: 3em;
  --dcs-fontWeights-semiLight: 300;
  --dcs-fontWeights-regular: 400;
  --dcs-fontWeights-medium: 500;
  --dcs-fontWeights-bold: 700;
  --dcs-spacing-article-gap: var(--dcs-size-medium);
  --dcs-spacing-segment-gap: var(--dcs-size-medium);
  --dcs-spacing-segment-marginTop: var(--dcs-size-small);
  --dcs-spacing-segment-marginBottom: var(--dcs-size-small);
  --dcs-spacing-subSegment-gap: var(--dcs-size-medium);
  --dcs-spacing-subSegment-marginTop: var(--dcs-size-small);
  --dcs-spacing-subSegment-marginBottom: var(--dcs-size-small);
  --dcs-spacing-list-gap: var(--dcs-size-small);
  --dcs-spacing-list-marginTop: var(--dcs-size-small);
  --dcs-spacing-list-marginBottom: var(--dcs-size-small);
  --dcs-spacing-default-gap: var(--dcs-size-small);
  --dcs-typography-base-color: var(--dcs-color-primary);
  --dcs-typography-base-fontFamily:
    Volvo Novum,
    Helvetica Neue,
    Calibri;
  --dcs-typography-base-fontWeight: var(--dcs-fontWeights-semiLight);
  --dcs-typography-base-lineHeight: 1.5714285714285714;
  --dcs-typography-base-letterSpacing: normal;
  --dcs-typography-base-fontSize: inherit;
  --dcs-typography-title-color: var(--dcs-color-primary);
  --dcs-typography-title-fontWeight: var(--dcs-fontWeights-medium);
  --dcs-typography-title-fontSize: 2.000em;
  --dcs-typography-title-lineHeight: 1.0714285714285714;
  --dcs-typography-title-letterSpacing: normal;
  --dcs-typography-subtitle-color: var(--dcs-color-primary);
  --dcs-typography-subtitle-fontWeight: var(--dcs-fontWeights-medium);
  --dcs-typography-subtitle-fontSize: 1.429em;
  --dcs-typography-subtitle-lineHeight: 1.2;
  --dcs-typography-subtitle-letterSpacing: normal;
  --dcs-typography-lead-color: var(--dcs-color-primary);
  --dcs-typography-lead-fontWeight: var(--dcs-fontWeights-semiLight);
  --dcs-typography-lead-fontSize: 1.143em;
  --dcs-typography-lead-lineHeight: inherit;
  --dcs-typography-lead-letterSpacing: normal;
  --dcs-typography-boxTitle-color: var(--dcs-color-primary);
  --dcs-typography-boxTitle-fontWeight: var(--dcs-fontWeights-medium);
  --dcs-typography-boxTitle-fontSize: 0.857em;
  --dcs-typography-boxTitle-lineHeight: 1.3333333333333333;
  --dcs-typography-body-color: var(--dcs-color-primary);
  --dcs-typography-body-fontWeight: var(--dcs-fontWeights-semiLight);
  --dcs-typography-body-fontSize: 1.000em;
  --dcs-typography-body-lineHeight: 1.5714285714285714;
  --dcs-typography-caption-color: var(--dcs-color-primary);
  --dcs-typography-caption-fontWeight: var(--dcs-fontWeights-semiLight);
  --dcs-typography-caption-fontSize: 0.857em;
  --dcs-typography-caption-lineHeight: 1.3333333333333333;
  --dcs-typography-caption-letterSpacing: 0.02em;
  --dcs-typography-link-color: var(--dcs-color-action);
  --dcs-typography-link-textDecoration: underline;
  --dcs-typography-link-colorHover: var(--dcs-color-actionSecondary);
  --dcs-typography-link-textDecorationHover: none;
  --dcs-typography-display-color: var(--dcs-color-secondary);
  --dcs-typography-display-fontWeight: var(--dcs-fontWeights-medium);
  --dcs-components-footnote-color: var(--dcs-color-action);
  --dcs-components-footnote-focusColor: var(--dcs-color-action);
  --dcs-components-footnote-beforeContent: "[";
  --dcs-components-footnote-afterContent: "]";
  --dcs-components-article-maxWidth: 100%;
  --dcs-components-article-padding: 0;
  --dcs-components-infoBox-color: var(--dcs-color-secondary);
  --dcs-components-infoBox-backgroundColor: var(--dcs-color-backgroundPrimary);
  --dcs-components-infoBox-borderColor: var(--dcs-color-ornamentSecondary);
  --dcs-components-infoBox-borderWidth: 0.036em;
  --dcs-components-infoBox-borderRadius: 0.143em;
  --dcs-components-infoBox-padding: var(--dcs-size-medium);
  --dcs-components-infoBox-ornamentSize: 0.321em;
  --dcs-components-infoBox-ornamentColor: var(--dcs-color-ornamentSecondary);
  --dcs-components-infoBox-icon: block;
  --dcs-components-infoBox-variants-tip-ornamentColor: var(--dcs-color-action);
  --dcs-components-infoBox-variants-tip-backgroundColor: inherit;
  --dcs-components-infoBox-variants-warning-ornamentColor: var(--dcs-color-warning);
  --dcs-components-infoBox-variants-warning-backgroundColor: inherit;
  --dcs-components-infoBox-variants-important-ornamentColor: #FF9400;
  --dcs-components-infoBox-variants-important-backgroundColor: inherit;
  --dcs-components-infoBox-variants-note-ornamentColor: var(--dcs-color-primary);
  --dcs-components-infoBox-variants-note-backgroundColor: inherit;
  --dcs-components-infoBox-title-textTransform: none;
  --dcs-components-infoBox-title-padding: 0;
  --dcs-components-infoBox-contentPadding: 0;
  --dcs-components-table-textColor: var(--dcs-color-primary);
  --dcs-components-table-headingForeground: var(--dcs-color-primary);
  --dcs-components-table-headingBackground: #E5E5E5;
  --dcs-components-table-borderColor: #E5E5E5;
  --dcs-components-table-cellPadding: var(--dcs-size-mini);
  --dcs-components-table-borderWidth: 1px;
  --dcs-components-media-replayButton-left: 0.500em;
  --dcs-components-media-replayButton-bottom: 0.500em;
  --dcs-components-media-replayButton-padding: 0.679em;
  --dcs-components-media-replayButton-size: 1.036em;
  --dcs-components-imageMapHotspot-overlayWidth: 19.286em;
  --dcs-components-imageMapHotspot-overlayMinWidth: 15.000em;
  --dcs-components-imageMapHotspot-empty-textColor: #fff;
  --dcs-components-imageMapHotspot-empty-borderWidth: 0.071em;
  --dcs-components-imageMapHotspot-empty-borderColor: #fff;
  --dcs-components-imageMapHotspot-empty-size: 1.286em;
  --dcs-components-imageMapHotspot-empty-backgroundColor: none;
  --dcs-components-imageMapHotspot-empty-display: block;
  --dcs-components-imageMapHotspot-numbered-textColor: #fff;
  --dcs-components-imageMapHotspot-numbered-borderWidth: 0.036em;
  --dcs-components-imageMapHotspot-numbered-borderColor: #fff;
  --dcs-components-imageMapHotspot-numbered-size: 1.571em;
  --dcs-components-imageMapHotspot-numbered-boxShadow: 0 0 0 2px rgba(0,0,0,0.5);
  --dcs-components-imageMapHotspot-numbered-backgroundColor: rgba(0,0,0,0.5);
  --dcs-components-imageMapHotspot-interactive-textColor: #fff;
  --dcs-components-imageMapHotspot-interactive-borderWidth: 0.214em;
  --dcs-components-imageMapHotspot-interactive-borderColor: #fff;
  --dcs-components-imageMapHotspot-interactive-size: 0.500em;
  --dcs-components-imageMapHotspot-interactive-backgroundColor: #1c6bba;
  --dcs-components-imageMapHotspot-interactive-activeTextColor: #fff;
  --dcs-components-imageMapHotspot-interactive-activeBorderWidth: 0.107em;
  --dcs-components-imageMapHotspot-interactive-activeBorderColor: #fff;
  --dcs-components-imageMapHotspot-interactive-activeSize: 1.500em;
  --dcs-components-imageMapHotspot-interactive-activeTop: -0.107em;
  --dcs-components-imageMapHotspot-interactive-activeLeft: -0.107em;
  --dcs-components-imageMapHotspot-interactive-activeBackgroundColor: #1c6bba;
  --dcs-components-imageMapHotspot-interactive-hitAreaColor: none;
  --dcs-components-imageMapHotspot-interactive-fontSize: inherit;
  --dcs-components-imageMapHotspot-interactive-lineHeight: 0.857em;
  --dcs-components-imageMapHotspot-interactive-hitAreaFocusedColor: none;
  --dcs-components-imageMapHotspot-interactive-boxShadow: 0 0 3px rgba(0,0,0,0.2), 0 0 3px rgba(0,0,0,0.2) inset;
  --dcs-components-imageMapHotspot-interactive-activeBorderSize: 0.500em;
  --dcs-components-imageMapHotspot-interactive-activeLineHeight: 0.857em;
  --dcs-components-imageMapHotspot-interactive-insetInlineEnd: -7%;
  --dcs-components-imageMapHotspot-interactive-activeInsetInlineEnd: -7%;
  --dcs-components-imageMapHotspot-interactive-rtlInsetInlineEnd: 49%;
  --dcs-components-imageMapHotspot-interactive-rtlActiveInsetInlineStart: -5%;
  --dcs-components-imageMapHotspot-interactive-iconDisplay: none;
  --dcs-components-imageMapHotspot-interactive-iconSize: 0;
  --dcs-components-imageMapHotspot-links-backgroundColor: #fff;
  --dcs-components-imageMapHotspot-links-borderColor: #979797;
  --dcs-components-imageMapHotspot-links-borderRadius: 0.214em;
  --dcs-components-imageMapHotspot-links-borderWidth: 0.036em;
  --dcs-components-imageMapHotspot-links-padding: 0.964em;
  --dcs-components-imageMapHotspot-links-color: #141414;
  --dcs-components-imageMapHotspot-links-textDecoration: none;
  --dcs-components-imageMapHotspot-links-chevronColor: #141414;
  --dcs-components-imageMapHotspot-links-offsetX: -0.714em;
  --dcs-components-imageMapHotspot-links-offsetY: -0.786em;
  --dcs-components-imageMapHotspot-links-numberFontSize: 1.429em;
  --dcs-components-imageMapHotspot-links-fontSize: 1.14em;
  --dcs-components-imageMapHotspot-links-chevronSize: 1em;
  --dcs-components-imageMapHotspot-links-border: solid;
  --dcs-components-imageMapHotspot-links-lastBorderStyle: none;
  --dcs-components-imageMapHotspot-links-transform: translateY(0) translateX(0);
  --dcs-components-imageMapHotspot-links-activeTransform: translateY(1em) translateX(0);
  --dcs-components-imageMapHotspot-links-counterDisplay: none;
  --dcs-components-imageMapHotspot-links-counterColor: inherit;
  --dcs-components-procedureRoot-paddingInlineStart: 0;
  --dcs-components-procedureRoot-marginInlineStart: 2.000em;
  --dcs-components-procedureRoot-gap: var(--dcs-size-medium);
  --dcs-components-procedureRoot-color: inherit;
  --dcs-components-procedureStep-gap: var(--dcs-size-medium);
  --dcs-components-procedureStep-fontWeight: var(--dcs-fontWeights-medium);
  --dcs-components-procedureStep-paddingInlineStart: 0.5em;
  --dcs-components-procedureResult-paddingInlineStart: 0;
  --dcs-components-list-gap: var(--dcs-size-small);
  --dcs-components-legendPosition-lineHeight: 1.571em;
  --dcs-color-primary: var(--color-primary, #141414);
  --dcs-color-secondary: var( --color-secondary, #707070);
  --dcs-color-action: var(--color-action, #1c6bba);
  --dcs-color-actionSecondary: var(--color-action-secondary, #1c6bba);
  --dcs-color-brand: var(--color-brand, #284e80);
  --dcs-color-backgroundPrimary: var(--color-background-primary, #fff);
  --dcs-color-backgroundSecondary: var(--color-background-secondary, #fafafa);
  --dcs-color-backgroundSecondaryTransparent: var(--color-background-secondary, #fafafa)00;
  --dcs-color-ornamentPrimary: var(--color-ornament-primary, #ebebeb);
  --dcs-color-ornamentSecondary: var(--color-ornament-secondary, #d5d5d5);
  --dcs-color-warning: var(--color-negative, #bf2012);
```

***

Next: [Advanced](/story/docs-advanced-usage--page)