Theme tokens

Every token the kit defines: the CSS custom property a style reads, and its value in each mode of the theme the kit ships. A theme changes these values; a product never overrides a component's styles.

The values are the Default theme's. A value that does not change between modes shows in both columns.

Colors

Token	Light	Dark
`--nol-window`	`#F8F8F8`	`#181818`
`--nol-panel`	`#FFFFFF`	`#1F1F1F`
`--nol-raised`	`#F8F8F8`	`#2B2B2B`
`--nol-code`	`#F8F8F8`	`#181818`
`--nol-code-header`	`#F2F2F2`	`#2B2B2B`
`--nol-code-header-raised`	`#F2F2F2`	`#343434`
`--nol-attachment`	`#F2F2F2`	`#2B2B2B`
`--nol-code-comment`	`#008000`	`#6A9955`
`--nol-code-keyword`	`#0000FF`	`#569CD6`
`--nol-code-control`	`#AF00DB`	`#C586C0`
`--nol-code-string`	`#A31515`	`#CE9178`
`--nol-code-number`	`#098154`	`#B5CEA8`
`--nol-code-type`	`#247A93`	`#4EC9B0`
`--nol-code-function`	`#795E26`	`#DCDCAA`
`--nol-code-variable`	`#001080`	`#9CDCFE`
`--nol-code-regex`	`#811F3F`	`#D16969`
`--nol-code-meta`	`#800000`	`#D7BA7D`
`--nol-text-selection`	`#ADD6FF`	`#264F78`
`--nol-text-selection-foreground`	`#3B3B3B`	`#CCCCCC`
`--nol-terminal-background`	`#FFFFFF`	`#1F1F1F`
`--nol-terminal-foreground`	`#3B3B3B`	`#CCCCCC`
`--nol-terminal-cursor`	`#005FB8`	`#CCCCCC`
`--nol-terminal-selection`	`#ADD6FF`	`#264F78`
`--nol-terminal-selection-foreground`	`#3B3B3B`	`#CCCCCC`
`--nol-terminal-ansi-black`	`#000000`	`#000000`
`--nol-terminal-ansi-red`	`#CD3131`	`#CD3131`
`--nol-terminal-ansi-green`	`#107C10`	`#0DBC79`
`--nol-terminal-ansi-yellow`	`#949800`	`#E5E510`
`--nol-terminal-ansi-blue`	`#0451A5`	`#2472C8`
`--nol-terminal-ansi-magenta`	`#BC05BC`	`#BC3FBC`
`--nol-terminal-ansi-cyan`	`#0598BC`	`#11A8CD`
`--nol-terminal-ansi-white`	`#555555`	`#E5E5E5`
`--nol-terminal-ansi-bright-black`	`#666666`	`#666666`
`--nol-terminal-ansi-bright-red`	`#F14C4C`	`#F14C4C`
`--nol-terminal-ansi-bright-green`	`#14CE14`	`#23D18B`
`--nol-terminal-ansi-bright-yellow`	`#B5BA00`	`#F5F543`
`--nol-terminal-ansi-bright-blue`	`#3B8EEA`	`#3B8EEA`
`--nol-terminal-ansi-bright-magenta`	`#D670D6`	`#D670D6`
`--nol-terminal-ansi-bright-cyan`	`#29B8DB`	`#29B8DB`
`--nol-terminal-ansi-bright-white`	`#A5A5A5`	`#E5E5E5`
`--nol-text`	`#3B3B3B`	`#BDBDBD`
`--nol-text-strong`	`#3B3B3B`	`#CCCCCC`
`--nol-text-muted`	`#616161`	`#9D9D9D`
`--nol-icon-color`	`#3B3B3B`	`#CCCCCC`
`--nol-card-border`	`#E5E5E5`	`#252525`
`--nol-border`	`#E5E5E5`	`#2B2B2B`
`--nol-accent`	`#005FB8`	`#4DAAFC`
`--nol-sash-active`	`#005FB8`	`#4DAAFC`
`--nol-link`	`#005FB8`	`#4DAAFC`
`--nol-mention`	`#005FB8`	`#4DAAFC`
`--nol-hover`	`#F2F2F2`	`#2C2C2C`
`--nol-selected`	`#E6E6E6`	`#383838`
`--nol-toolbar-hover`	`#B8B8B850`	`#5A5D5E50`
`--nol-scrollbar`	`#64646466`	`#79797966`
`--nol-scrollbar-active`	`#646464B3`	`#646464B3`
`--nol-title-bar`	`#F8F8F8`	`#181818`
`--nol-title-bar-text`	`#1E1E1E`	`#CCCCCC`
`--nol-input`	`#FFFFFF`	`#313131`
`--nol-input-border`	`#858585`	`#858585`
`--nol-input-text`	`#3B3B3B`	`#CCCCCC`
`--nol-placeholder`	`#767676`	`#9A9A9A`
`--nol-button`	`#005FB8`	`#0078D4`
`--nol-button-text`	`#FFFFFF`	`#FFFFFF`
`--nol-button-hover`	`#0258A8`	`#026EC1`
`--nol-button-secondary`	`#E5E5E5`	`#00000000`
`--nol-button-secondary-text`	`#3B3B3B`	`#CCCCCC`
`--nol-button-secondary-hover`	`#CCCCCC`	`#2B2B2B`
`--nol-button-danger-text`	`#FFFFFF`	`#1F1F1F`
`--nol-dropdown`	`#FFFFFF`	`#313131`
`--nol-dropdown-border`	`#858585`	`#858585`
`--nol-dropdown-list`	`#FFFFFF`	`#1F1F1F`
`--nol-list-active`	`#D4D4D4`	`#4A4A4A`
`--nol-list-active-text`	`#000000`	`#FFFFFF`
`--nol-list-highlight`	`#0066BF`	`#2AAAFF`
`--nol-button-border`	`#0000001A`	`#FFFFFF1A`
`--nol-setting-title`	`#1F1F1F`	`#FFFFFF`
`--nol-hover-widget`	`#F8F8F8`	`#202020`
`--nol-hover-widget-border`	`#3B3B3B33`	`#CCCCCC33`
`--nol-quick-input`	`#F8F8F8`	`#222222`
`--nol-quick-input-key-border`	`#CECECE`	`#454545`
`--nol-menu-separator`	`#3B3B3B33`	`#454545`
`--nol-widget-shadow`	`#00000029`	`#0000005C`
`--nol-widget-border`	`#E5E5E5`	`#313131`
`--nol-dialog`	`#F8F8F8`	`#202020`
`--nol-menu`	`#FFFFFF`	`#1F1F1F`
`--nol-menu-text`	`#3B3B3B`	`#CCCCCC`
`--nol-menu-border`	`#CECECE`	`#454545`
`--nol-checkbox`	`#F8F8F8`	`#313131`
`--nol-checkbox-border`	`#858585`	`#858585`
`--nol-switch-knob`	`#FFFFFF`	`#1F1F1F`
`--nol-badge`	`#CCCCCC`	`#616161`
`--nol-badge-text`	`#3B3B3B`	`#F8F8F8`
`--nol-progress`	`#005FB8`	`#4DAAFC`
`--nol-notification`	`#FFFFFF`	`#1F1F1F`
`--nol-notification-border`	`#E5E5E5`	`#454545`
`--nol-error`	`#A1260D`	`#F48771`
`--nol-removed`	`#A1260D`	`#F48771`
`--nol-added`	`#3F6212`	`#B5CEA8`
`--nol-status-ok`	`#1A7F37`	`#3FB950`
`--nol-status-failed`	`#CF222E`	`#F85149`
`--nol-warning`	`#8A5800`	`#E3A33B`
`--nol-docking-preview`	`#E6E6E6`	`#383838`
`--nol-docking-preview-border`	`#005FB8`	`#4DAAFC`
`--nol-author-1`	`#2F78CA`	`#76A7DF`
`--nol-author-2`	`#1F8582`	`#2AB5B0`
`--nol-author-3`	`#20882E`	`#2CBB3F`
`--nol-author-4`	`#977023`	`#CF9A30`
`--nol-author-5`	`#B75E2B`	`#DB9267`
`--nol-author-6`	`#D3424C`	`#E48A90`
`--nol-author-7`	`#CF31A5`	`#E283C9`
`--nol-author-8`	`#9358D8`	`#B992E5`
`--nol-avatar-default`	`#DBEAFE`	`#1E3A5F`
`--nol-avatar-default-text`	`#1E40AF`	`#BFDBFE`
`--nol-avatar-teal`	`#CCFBF1`	`#134E4A`
`--nol-avatar-teal-text`	`#115E59`	`#99F6E4`
`--nol-avatar-green`	`#DCFCE7`	`#14532D`
`--nol-avatar-green-text`	`#166534`	`#BBF7D0`
`--nol-avatar-lime`	`#ECFCCB`	`#365314`
`--nol-avatar-lime-text`	`#3F6212`	`#D9F99D`
`--nol-avatar-amber`	`#FEF3C7`	`#78350F`
`--nol-avatar-amber-text`	`#92400E`	`#FDE68A`
`--nol-avatar-orange`	`#FFEDD5`	`#7C2D12`
`--nol-avatar-orange-text`	`#9A3412`	`#FED7AA`
`--nol-avatar-red`	`#FEE2E2`	`#7F1D1D`
`--nol-avatar-red-text`	`#991B1B`	`#FECACA`
`--nol-avatar-rose`	`#FFE4E6`	`#881337`
`--nol-avatar-rose-text`	`#9F1239`	`#FECDD3`
`--nol-avatar-pink`	`#FCE7F3`	`#831843`
`--nol-avatar-pink-text`	`#9D174D`	`#FBCFE8`
`--nol-avatar-purple`	`#F3E8FF`	`#581C87`
`--nol-avatar-purple-text`	`#6B21A8`	`#E9D5FF`
`--nol-avatar-violet`	`#EDE9FE`	`#4C1D95`
`--nol-avatar-violet-text`	`#5B21B6`	`#DDD6FE`
`--nol-avatar-indigo`	`#E0E7FF`	`#312E81`
`--nol-avatar-indigo-text`	`#3730A3`	`#C7D2FE`
`--nol-avatar-cyan`	`#CFFAFE`	`#164E63`
`--nol-avatar-cyan-text`	`#155E75`	`#A5F3FC`
`--nol-backdrop`	`rgb(0 0 0 / 50%)`	`rgb(0 0 0 / 50%)`
`--nol-overlay`	`rgb(0 0 0 / 70%)`	`rgb(0 0 0 / 70%)`
`--nol-overlay-text`	`#FFFFFF`	`#FFFFFF`
`--nol-overlay-control`	`#FFFFFF1A`	`#FFFFFF1A`
`--nol-overlay-control-hover`	`#FFFFFF14`	`#FFFFFF14`
`--nol-overlay-control-text`	`#EEEEEE`	`#EEEEEE`

Text roles and fonts

Token	Light	Dark
`--nol-font-sans`	`"Noldova Sans", system-ui, "Segoe UI", Roboto, sans-serif`	`"Noldova Sans", system-ui, "Segoe UI", Roboto, sans-serif`
`--nol-font-mono`	`"Noldova Mono", ui-monospace, "Cascadia Mono", Consolas, monospace`	`"Noldova Mono", ui-monospace, "Cascadia Mono", Consolas, monospace`
`--nol-text-panel`	`0.8125rem`	`0.8125rem`
`--nol-text-message`	`0.8125rem`	`0.8125rem`
`--nol-text-code`	`0.75rem`	`0.75rem`
`--nol-text-terminal`	`0.8125rem`	`0.8125rem`
`--nol-text-label`	`max(12px, calc(var(--nol-text-panel) - 0.0625rem))`	`max(12px, calc(var(--nol-text-panel) - 0.0625rem))`
`--nol-text-small`	`max(12px, 0.75rem)`	`max(12px, 0.75rem)`
`--nol-text-title`	`calc(var(--nol-text-panel) + 0.125rem)`	`calc(var(--nol-text-panel) + 0.125rem)`
`--nol-text-heading`	`calc(var(--nol-text-panel) * 2)`	`calc(var(--nol-text-panel) * 2)`
`--nol-text-reference-title`	`var(--nol-text-message)`	`var(--nol-text-message)`
`--nol-text-avatar-byline`	`0.625rem`	`0.625rem`
`--nol-line-panel`	`max(1.125rem, calc(var(--nol-text-panel) + 0.3125rem))`	`max(1.125rem, calc(var(--nol-text-panel) + 0.3125rem))`
`--nol-line-title`	`calc(var(--nol-text-title) + 0.3125rem)`	`calc(var(--nol-text-title) + 0.3125rem)`
`--nol-line-label`	`calc(var(--nol-text-label) + 0.25rem)`	`calc(var(--nol-text-label) + 0.25rem)`
`--nol-line-tooltip`	`calc(var(--nol-text-label) + 0.4375rem)`	`calc(var(--nol-text-label) + 0.4375rem)`
`--nol-line-heading`	`calc(var(--nol-text-heading) * 1.25)`	`calc(var(--nol-text-heading) * 1.25)`
`--nol-line-message`	`1.6`	`1.6`
`--nol-line-code`	`1.5`	`1.5`
`--nol-line-terminal`	`1.3`	`1.3`
`--nol-line-reference-title`	`1.45`	`1.45`
`--nol-weight-emphasis`	`500`	`500`
`--nol-weight-strong`	`600`	`600`
`--nol-letter-spacing-caps`	`0.05em`	`0.05em`

Spacing

Token	Light	Dark
`--nol-space-1`	`0.25rem`	`0.25rem`
`--nol-space-2`	`0.5rem`	`0.5rem`
`--nol-space-3`	`0.75rem`	`0.75rem`
`--nol-space-4`	`1rem`	`1rem`
`--nol-space-6`	`1.5rem`	`1.5rem`

Radius

Token	Light	Dark
`--nol-radius-hover`	`0.1875rem`	`0.1875rem`
`--nol-radius-small`	`0.25rem`	`0.25rem`
`--nol-radius-medium`	`0.375rem`	`0.375rem`
`--nol-radius-large`	`0.5rem`	`0.5rem`

Shadows

Token	Light	Dark
`--nol-shadow-large`	`0 0 0.75rem rgb(0 0 0 / 14%)`	`0 0 0.75rem rgb(0 0 0 / 14%)`
`--nol-shadow-xlarge`	`0 0 1.25rem rgb(0 0 0 / 15%)`	`0 0 1.25rem rgb(0 0 0 / 15%)`

Metrics

Token	Light	Dark
`--nol-pill-padding`	`0.375rem`	`0.375rem`
`--nol-border-width`	`1px`	`1px`
`--nol-panel-card-gap`	`0.25rem`	`0.25rem`
`--nol-panel-card-margin`	`0.25rem`	`0.25rem`
`--nol-dock-left-width`	`26rem`	`26rem`
`--nol-dock-right-width`	`25rem`	`25rem`
`--nol-dock-bottom-height`	`16.25rem`	`16.25rem`
`--nol-dock-min-size`	`10rem`	`10rem`
`--nol-dock-strip-size`	`2.75rem`	`2.75rem`
`--nol-document-min-size`	`13.75rem`	`13.75rem`
`--nol-group-min-width`	`10rem`	`10rem`
`--nol-group-min-height`	`6.25rem`	`6.25rem`
`--nol-tab-height`	`2rem`	`2rem`
`--nol-tab-pill`	`1.5rem`	`1.5rem`
`--nol-tab-inset`	`0.125rem`	`0.125rem`
`--nol-tab-max-width`	`16rem`	`16rem`
`--nol-scrollbar-size`	`0.375rem`	`0.375rem`
`--nol-tab-action-slot`	`1.5rem`	`1.5rem`
`--nol-tab-close`	`1.25rem`	`1.25rem`
`--nol-tab-image`	`0.875rem`	`0.875rem`
`--nol-tab-image-radius`	`0.1875rem`	`0.1875rem`
`--nol-tab-part-gap`	`0.375rem`	`0.375rem`
`--nol-tab-spinner`	`0.75rem`	`0.75rem`
`--nol-tab-spinner-stroke`	`0.09375rem`	`0.09375rem`
`--nol-tab-underline`	`0.125rem`	`0.125rem`
`--nol-icon`	`1rem`	`1rem`
`--nol-icon-button`	`1.375rem`	`1.375rem`
`--nol-sash`	`var(--nol-panel-card-gap)`	`var(--nol-panel-card-gap)`
`--nol-sash-grip`	`0.125rem`	`0.125rem`
`--nol-sash-grip-spacing`	`0.3125rem`	`0.3125rem`
`--nol-docking-guide`	`2.5rem`	`2.5rem`
`--nol-docking-guide-icon`	`1.5rem`	`1.5rem`
`--nol-docking-plate-gap`	`0.125rem`	`0.125rem`
`--nol-view-badge`	`1rem`	`1rem`
`--nol-view-badge-dot`	`0.5rem`	`0.5rem`
`--nol-view-badge-padding`	`0.25rem`	`0.25rem`
`--nol-view-badge-text`	`0.625rem`	`0.625rem`
`--nol-file-badge-text`	`0.5625rem`	`0.5625rem`
`--nol-file-badge-glyph`	`0.75rem`	`0.75rem`
`--nol-chip`	`1.25rem`	`1.25rem`
`--nol-chip-padding`	`0.375rem`	`0.375rem`
`--nol-chip-dot`	`0.375rem`	`0.375rem`
`--nol-spinner`	`1rem`	`1rem`
`--nol-spinner-ring`	`0.75rem`	`0.75rem`
`--nol-spinner-stroke`	`calc(var(--nol-border-width) * 2)`	`calc(var(--nol-border-width) * 2)`
`--nol-meter`	`4rem`	`4rem`
`--nol-meter-height`	`0.25rem`	`0.25rem`
`--nol-meter-gap`	`0.5rem`	`0.5rem`
`--nol-avatar`	`1.75rem`	`1.75rem`
`--nol-avatar-small`	`1.5rem`	`1.5rem`
`--nol-avatar-byline`	`1.25rem`	`1.25rem`
`--nol-choice-pill`	`1.375rem`	`1.375rem`
`--nol-choice-pill-gap`	`0.25rem`	`0.25rem`
`--nol-menu-padding`	`0.25rem`	`0.25rem`
`--nol-menu-label-padding`	`0.5rem 0.75rem 0.25rem`	`0.5rem 0.75rem 0.25rem`
`--nol-menu-item-height`	`1.625rem`	`1.625rem`
`--nol-menu-item-inset`	`0.25rem`	`0.25rem`
`--nol-menu-item-padding`	`0.5rem`	`0.5rem`
`--nol-menu-trail-gap`	`2rem`	`2rem`
`--nol-band-gap`	`var(--nol-sash)`	`var(--nol-sash)`
`--nol-toolbar-button`	`1.5rem`	`1.5rem`
`--nol-toolbar-gap`	`0.5rem`	`0.5rem`
`--nol-toolbar-grip-gap`	`0.2rem`	`0.2rem`
`--nol-menu-separator-spacing`	`0.3125rem`	`0.3125rem`
`--nol-tooltip-width`	`43.75rem`	`43.75rem`
`--nol-tooltip-padding`	`0.125rem 0.5rem`	`0.125rem 0.5rem`
`--nol-tooltip-description-width`	`18rem`	`18rem`
`--nol-tooltip-description-padding`	`0.5rem 0.75rem`	`0.5rem 0.75rem`
`--nol-popover-width`	`27.5rem`	`27.5rem`
`--nol-dialog-width`	`27.5rem`	`27.5rem`
`--nol-dialog-title-padding`	`1.375rem 2rem 0.75rem 1.25rem`	`1.375rem 2rem 0.75rem 1.25rem`
`--nol-dialog-body-padding`	`0 1.25rem`	`0 1.25rem`
`--nol-dialog-actions-padding`	`1.25rem 1.25rem 0.5rem`	`1.25rem 1.25rem 0.5rem`
`--nol-dialog-large-width`	`80vw`	`80vw`
`--nol-dialog-large-height`	`80vh`	`80vh`
`--nol-dialog-large-min-width`	`30rem`	`30rem`
`--nol-dialog-large-min-height`	`20rem`	`20rem`
`--nol-dialog-large-header-padding`	`0.5rem 1.25rem`	`0.5rem 1.25rem`
`--nol-quick-input-width`	`40rem`	`40rem`
`--nol-quick-input-margin`	`0.25rem`	`0.25rem`
`--nol-quick-input-padding`	`0.375rem`	`0.375rem`
`--nol-quick-input-gap`	`0.375rem`	`0.375rem`
`--nol-quick-input-field-height`	`1.875rem`	`1.875rem`
`--nol-quick-input-field-padding`	`0.5rem`	`0.5rem`
`--nol-quick-input-glyph`	`0.875rem`	`0.875rem`
`--nol-quick-input-row-height`	`1.75rem`	`1.75rem`
`--nol-quick-input-row-padding`	`0.625rem`	`0.625rem`
`--nol-quick-input-key-text`	`0.6875rem`	`0.6875rem`
`--nol-quick-input-list-height`	`60vh`	`60vh`
`--nol-quick-input-label-line`	`normal`	`normal`
`--nol-mention-list-height`	`16rem`	`16rem`
`--nol-mention-row-height`	`2.5rem`	`2.5rem`
`--nol-field-height`	`1.625rem`	`1.625rem`
`--nol-field-padding`	`0.375rem`	`0.375rem`
`--nol-window-row-height`	`calc(var(--nol-icon-button-target) + 2 * var(--nol-band-gap))`	`calc(var(--nol-icon-button-target) + 2 * var(--nol-band-gap))`
`--nol-message-collapsed-height`	`24rem`	`24rem`
`--nol-message-picture-height`	`24rem`	`24rem`
`--nol-status-bar-height`	`1.5rem`	`1.5rem`
`--nol-status-bar-item-height`	`1.25rem`	`1.25rem`
`--nol-status-bar-item-gap`	`0.25rem`	`0.25rem`
`--nol-button-height`	`1.625rem`	`1.625rem`
`--nol-button-compact-height`	`var(--nol-icon-button-target)`	`var(--nol-icon-button-target)`
`--nol-button-padding`	`0.5rem`	`0.5rem`
`--nol-checkbox-size`	`1.125rem`	`1.125rem`
`--nol-switch-width`	`1.75rem`	`1.75rem`
`--nol-switch-height`	`1rem`	`1rem`
`--nol-switch-knob-size`	`0.75rem`	`0.75rem`
`--nol-toast-width`	`22.5rem`	`22.5rem`
`--nol-text-field-width`	`12.5rem`	`12.5rem`
`--nol-select-width`	`20rem`	`20rem`
`--nol-number-field-width`	`5rem`	`5rem`
`--nol-setting-marker`	`0.625rem`	`0.625rem`
`--nol-tree-row-height`	`1.625rem`	`1.625rem`
`--nol-tree-indent`	`1.75rem`	`1.75rem`
`--nol-row-gap`	`calc(2 * var(--nol-tab-inset))`	`calc(2 * var(--nol-tab-inset))`
`--nol-section-header-height`	`1.75rem`	`1.75rem`
`--nol-content-padding-inline`	`calc(3 * var(--nol-tab-inset) + var(--nol-pill-padding))`	`calc(3 * var(--nol-tab-inset) + var(--nol-pill-padding))`
`--nol-document-padding-block`	`1rem`	`1rem`
`--nol-view-padding-block`	`0.5rem`	`0.5rem`
`--nol-settings-pages-width`	`12.5rem`	`12.5rem`
`--nol-settings-content-width`	`50rem`	`50rem`
`--nol-modules-list-width`	`20rem`	`20rem`
`--nol-modules-detail-width`	`45rem`	`45rem`
`--nol-dropdown-padding`	`0.25rem`	`0.25rem`
`--nol-dropdown-row-height`	`1.625rem`	`1.625rem`
`--nol-dropdown-row-padding`	`0.5rem`	`0.5rem`
`--nol-settings-item-padding-inline`	`0.875rem`	`0.875rem`
`--nol-settings-item-padding`	`0.75rem var(--nol-settings-item-padding-inline) 1.125rem`	`0.75rem var(--nol-settings-item-padding-inline) 1.125rem`
`--nol-settings-item-description-gap`	`0.1875rem`	`0.1875rem`
`--nol-settings-item-control-gap`	`0.5625rem`	`0.5625rem`
`--nol-settings-heading-space`	`0.625rem`	`0.625rem`
`--nol-settings-content-inset`	`0.9375rem`	`0.9375rem`
`--nol-code-header-height`	`1.625rem`	`1.625rem`
`--nol-reference-mark`	`0.875rem`	`0.875rem`
`--nol-reference-mark-slot-radius`	`0.1875rem`	`0.1875rem`
`--nol-reference-chip-max-width`	`27.5rem`	`27.5rem`
`--nol-reference-card-width`	`27.5rem`	`27.5rem`
`--nol-reference-card-radius`	`0.75rem`	`0.75rem`
`--nol-reference-card-padding`	`1rem 1.125rem`	`1rem 1.125rem`
`--nol-reference-card-top-gap`	`0.625rem`	`0.625rem`
`--nol-reference-badge-height`	`1.625rem`	`1.625rem`
`--nol-reference-item-gap`	`0.375rem`	`0.375rem`
`--nol-reference-pill-height`	`1.75rem`	`1.75rem`
`--nol-reference-pill-padding`	`0.625rem`	`0.625rem`
`--nol-reference-dot`	`0.4375rem`	`0.4375rem`
`--nol-reference-dot-gap`	`0.3rem`	`0.3rem`
`--nol-pointer-target`	`24px`	`24px`

Built from other tokens

Token	Light	Dark
`--nol-icon-button-target`	`max(var(--nol-pointer-target), var(--nol-icon-button))`	`max(var(--nol-pointer-target), var(--nol-icon-button))`
`--nol-inline-code`	`color-mix(in srgb, var(--nol-text) 12%, transparent)`	`color-mix(in srgb, var(--nol-text) 12%, transparent)`
`--nol-text-tab`	`var(--nol-text-muted)`	`var(--nol-text-muted)`
`--nol-text-placeholder`	`var(--nol-text-muted)`	`var(--nol-text-muted)`
`--nol-added-background`	`color-mix(in srgb, var(--nol-added) 10%, transparent)`	`color-mix(in srgb, var(--nol-added) 10%, transparent)`
`--nol-removed-background`	`color-mix(in srgb, var(--nol-removed) 10%, transparent)`	`color-mix(in srgb, var(--nol-removed) 10%, transparent)`
`--nol-added-change`	`light-dark(color-mix(in srgb, var(--nol-added) 22%, var(--nol-code)), color-mix(in srgb, var(--nol-added) 30%, var(--nol-code)))`	`light-dark(color-mix(in srgb, var(--nol-added) 22%, var(--nol-code)), color-mix(in srgb, var(--nol-added) 30%, var(--nol-code)))`
`--nol-removed-change`	`light-dark(color-mix(in srgb, var(--nol-removed) 22%, var(--nol-code)), color-mix(in srgb, var(--nol-removed) 30%, var(--nol-code)))`	`light-dark(color-mix(in srgb, var(--nol-removed) 22%, var(--nol-code)), color-mix(in srgb, var(--nol-removed) 30%, var(--nol-code)))`
`--nol-button-danger-hover`	`color-mix(in srgb, var(--nol-error) 90%, var(--nol-button-danger-text))`	`color-mix(in srgb, var(--nol-error) 90%, var(--nol-button-danger-text))`