Skip to main content

Nextcloud variables and thematiq

This page lists every CSS custom property that Nextcloud 34.0.0.12 and @conduction/nextcloud-vue 2.57.1 declare or read, and what thematiq does with each one.

  • mapped: a house style sets it.
  • settable: a house style can set it; unset, Nextcloud keeps its own value.
  • excluded: thematiq leaves it alone, for the reason given.

Totals​

ClassVariablesMappedSettableExcluded
component380123644
conduction5103318
icon48400484
runtime360036
slot8305627
theme11167440
unread100010

Theme variables​

Declared by Nextcloud's theming app. Stock values are Nextcloud's own, for the default and the dark theme.

Animations​

VariableStatusTokenDefaultDarkNote
--animation-quickmapped--nldesign-animation-quick100ms100msQuick animation duration (100ms)
--animation-slowmapped--nldesign-animation-slow300ms300msSlow animation duration (300ms)
--filter-background-blursettable--nldesign-nc-filter-background-blurblur(25px)blur(25px)Background blur filter; Nextcloud handles browser compat

Assistant (AI)​

VariableStatusTokenDefaultDarkNote
--color-background-assistantsettable--nldesign-nc-color-background-assistant#F6F5FF#221D2BAI assistant background; NC-specific feature
--color-border-assistantsettable--nldesign-nc-color-border-assistantlinear-gradient(125deg, #7398FE…linear-gradient(125deg, #0C3A65…AI assistant border gradient; NC-specific
--color-element-assistantsettable--nldesign-nc-color-element-assistantlinear-gradient(214deg, #A569D3…linear-gradient(214deg, #C8A3E8…AI assistant element gradient; NC-specific
--color-element-assistant-iconsettable--nldesign-nc-color-element-assistant-iconlinear-gradient(214deg, #9669D3…linear-gradient(214deg, #CDACE7…AI assistant icon gradient; NC-specific

Background States​

VariableStatusTokenDefaultDarkNote
--color-background-darkmapped--nldesign-color-background-dark#ededed#292929Darker background variant
--color-background-darkermapped--nldesign-color-background-darker#dbdbdb#3b3b3bDarkest background variant
--color-background-hovermapped--nldesign-color-background-hover#f5f5f5#212121Hover state background

Border Radius​

VariableStatusTokenDefaultDarkNote
--border-radiusmapped--nldesign-border-radiusvar(--border-radius-small)var(--border-radius-small)Deprecated; default border radius
--border-radius-containersettable--nldesign-nc-border-radius-container12px12pxContainers (12px); intentionally not overridden for layout consistency
--border-radius-container-largesettable--nldesign-nc-border-radius-container-large16px16pxLarge containers (16px); intentionally not overridden
--border-radius-elementmapped--nldesign-border-radius8px8pxInteractive elements (8px default)
--border-radius-largemapped--nldesign-border-radius-largevar(--border-radius-element)var(--border-radius-element)Deprecated alias for element radius
--border-radius-pillmapped--nldesign-border-radius-pill100px100pxPill shape (100px)
--border-radius-roundedmapped--nldesign-border-radius-rounded28px28pxRounded elements (28px default)
--border-radius-smallmapped--nldesign-border-radius-small4px4pxSmall elements (4px default)

Borders​

VariableStatusTokenDefaultDarkNote
--border-width-inputsettable--nldesign-nc-border-width-input1px1pxInput border width (1px); standard across all themes
--border-width-input-focusedsettable--nldesign-nc-border-width-input-focused2px2pxFocused input border width (2px); standard
--color-bordermapped--nldesign-color-border#ededed#292929Standard border color
--color-border-darkmapped--nldesign-color-border-dark#dbdbdb#3b3b3bDark border variant
--color-border-maxcontrastmapped--nldesign-color-border-dark#7d7d7d#7d7d7dMax contrast border; maps to dark border

Filters & Inversion​

VariableStatusTokenDefaultDarkNote
--background-image-invert-if-brightmappednonoBackground image inversion; NC theme dependent
--background-invert-if-brightsettable--nldesign-nc-background-invert-if-brightinvert(100%)noBright mode inversion; NC theme dependent
--background-invert-if-darksettable--nldesign-nc-background-invert-if-darknoinvert(100%)Dark mode image inversion; NC theme dependent
--primary-invert-if-brightmappednoinvert(100%)Primary color inversion; NC auto-calculates
--primary-invert-if-darkmappedinvert(100%)noPrimary dark inversion; NC auto-calculates

Gradients​

VariableStatusTokenDefaultDarkNote
--gradient-main-backgroundmappedvar(--color-main-background) 0%…var(--color-main-background) 0%…Main background gradient; depends on main-background vars
--gradient-primary-backgroundmappedlinear-gradient(40deg, var(--co…linear-gradient(40deg, var(--co…Primary gradient; depends on primary color

Images & Resources​

VariableStatusTokenDefaultDarkNote
--image-backgroundmappedurl('/apps/theming/img/backgrou…url('/apps/theming/img/backgrou…Background image; admin/user configured

Layout & Dimensions​

VariableStatusTokenDefaultDarkNote
--body-container-marginsettable--nldesign-nc-body-container-margincalc(var(--default-grid-baselin…calc(var(--default-grid-baselin…Body container margin; NC layout dependent
--body-container-radiussettable--nldesign-nc-body-container-radiusvar(--border-radius-container-l…var(--border-radius-container-l…Body container radius; depends on border-radius-container-large
--body-heightsettable--nldesign-nc-body-heightcalc(100% - env(safe-area-inset…calc(100% - env(safe-area-inset…Body height calculation; NC layout dependent
--breakpoint-mobilesettable--nldesign-nc-breakpoint-mobile1024px1024pxMobile breakpoint (1024px); NC responsive design
--header-heightsettable--nldesign-nc-header-height50px50pxHeader height (50px); overriding breaks NC layout
--header-menu-icon-maskmappedlinear-gradient(var(--color-bac…linear-gradient(var(--color-bac…Icon mask gradient; NC internal
--header-menu-item-heightsettable--nldesign-nc-header-menu-item-height44px44pxHeader menu item height; NC layout dependent
--navigation-widthsettable--nldesign-nc-navigation-width300px300pxNavigation panel width (300px); NC layout dependent
--sidebar-max-widthsettable--nldesign-nc-sidebar-max-width500px500pxSidebar max width; NC layout dependent
--sidebar-min-widthsettable--nldesign-nc-sidebar-min-width300px300pxSidebar min width; NC layout dependent

Main Background​

VariableStatusTokenDefaultDarkNote
--color-background-plainmapped#00679e#00679eAdmin/user configured background; should respect user settings
--color-background-plain-textsettable--nldesign-nc-color-background-plain-text#ffffff#ffffffText on plain background; auto-calculated by Nextcloud
--color-main-backgroundsettable--nldesign-nc-color-main-background#ffffff#171717Core page background; overriding breaks dark mode and accessibility themes
--color-main-background-blurmappedrgba(var(--color-main-backgroun…rgba(var(--color-main-backgroun…Blur variant; depends on --color-main-background-rgb
--color-main-background-rgbmapped255,255,25523,23,23RGB variant for rgba() usage; depends on --color-main-background
--color-main-background-translucentmappedrgba(var(--color-main-backgroun…rgba(var(--color-main-backgroun…Translucent variant; depends on --color-main-background-rgb

Placeholder Colors​

VariableStatusTokenDefaultDarkNote
--color-placeholder-darkmapped--nldesign-color-placeholder-dark#cccccc#4a4a4aDark placeholder
--color-placeholder-lightmapped--nldesign-color-placeholder-light#e6e6e6#313131Light placeholder (e.g., empty states)

Primary Colors​

VariableStatusTokenDefaultDarkNote
--color-primarymapped--nldesign-color-primary#00679e#00679eMain brand color
--color-primary-elementmapped--nldesign-color-primary#00679e#0091f2Interactive element colour: checked boxes, switches, icons. Not the main button, which a set's action colour may move
--color-primary-element-hovermapped--nldesign-color-primary-hover#00507a#17a2ffInteractive element hover
--color-primary-element-lightmapped--nldesign-color-primary-lightvar(--color-primary-light)var(--color-primary-light)Deprecated alias for primary-light
--color-primary-element-light-hovermapped--nldesign-color-primary-light-hovervar(--color-primary-light-hover)var(--color-primary-light-hover)Deprecated alias
--color-primary-element-light-textmapped--nldesign-color-primary-light-textvar(--color-primary-light-text)var(--color-primary-light-text)Deprecated alias
--color-primary-element-textmapped--nldesign-color-primary-text#ffffff#000000Text on primary element
--color-primary-element-text-darkmapped#ededed#121212Dark variant of primary element text; no NL Design equivalent
--color-primary-hovermapped--nldesign-color-primary-hover#3285b1#045783Primary hover state
--color-primary-lightmapped--nldesign-color-primary-light#e5eff5#14232cLight variant of primary
--color-primary-light-hovermapped--nldesign-color-primary-light-hover#d9e3e8#1f2e36Light primary hover
--color-primary-light-textmapped--nldesign-color-primary-light-text#00293f#99c2d8Text on light primary; uses brand color
--color-primary-textmapped--nldesign-color-primary-text#ffffff#ffffffText on primary background

Shadows​

VariableStatusTokenDefaultDarkNote
--color-box-shadowsettable--nldesign-nc-color-box-shadowrgba(var(--color-box-shadow-rgb…#000000Box shadow color; depends on --color-box-shadow-rgb
--color-box-shadow-rgbsettable--nldesign-nc-color-box-shadow-rgb77,77,770,0,0Box shadow RGB; auto-calculated from background

Spacing & Clickable Areas​

VariableStatusTokenDefaultDarkNote
--clickable-area-largesettable--nldesign-nc-clickable-area-large48px48pxLarge touch target (48px); accessibility standard
--clickable-area-smallsettable--nldesign-nc-clickable-area-small24px24pxSmall touch target (24px); accessibility standard
--default-clickable-areasettable--nldesign-nc-default-clickable-area34px34pxTouch target (34px); accessibility standard
--default-grid-baselinesettable--nldesign-nc-default-grid-baseline4px4pxBase grid unit (4px); core layout building block

Special Colors​

VariableStatusTokenDefaultDarkNote
--color-background-selectionmappedrgb(from var(--color-primary-el…rgb(from var(--color-primary-el…Selection wash; new in NC 33/34. Derived from --color-primary-element at 20% alpha, and that variable is mapped
--color-favoritemapped--nldesign-color-favorite#A37200#ffde00Favorite/star color
--color-loading-darksettable--nldesign-nc-color-loading-dark#444444#CCCLoading animation dark; NC internal
--color-loading-lightsettable--nldesign-nc-color-loading-light#cccccc#777Loading animation light; NC internal
--color-marksettable--nldesign-nc-color-mark#fff0c7#4d3800\<mark\> highlight tint (#fff0c7); new in NC 33/34. No NL Design highlight token, and the tint has to stay legible unde…
--color-scrollbarsettable--nldesign-nc-color-scrollbarvar(--color-border-maxcontrast)…var(--color-border-maxcontrast)…Scrollbar color; depends on border-maxcontrast
--color-text-selectionsettable--nldesign-nc-color-text-selectionvar(--color-main-text)var(--color-main-text)Selected text; new in NC 33/34. Derived from --color-main-text, which is mapped

Status: Error​

VariableStatusTokenDefaultDarkNote
--color-border-errormapped--nldesign-color-errorvar(--color-element-error)var(--color-element-error)Error border; uses error color
--color-element-errormapped--nldesign-color-error#c90000#FF5050Error element accent
--color-errormapped--nldesign-color-error#FFE7E7#552121Error background/accent
--color-error-hovermapped--nldesign-color-error-hover#ffc3c3#7a2f2fError hover state
--color-error-rgbmapped--nldesign-color-error-rgb255,231,23185,33,33Deprecated; RGB for rgba()
--color-error-textsettable--nldesign-nc-color-error-text#8A0000#FFCCCCError text color; NC auto-calculates for contrast

Status: Info​

VariableStatusTokenDefaultDarkNote
--color-element-infomapped--nldesign-color-info#0077C7#0099E0Info element accent
--color-infomapped--nldesign-color-info#D5F1FA#003553Info background/accent
--color-info-hoversettable--nldesign-nc-color-info-hover#b5e6f6#005686Info hover; no NL Design equivalent
--color-info-rgbmapped--nldesign-color-info-rgb213,241,2500,53,83Deprecated; RGB for rgba()
--color-info-textsettable--nldesign-nc-color-info-text#0066AC#00AEFFInfo text; NC auto-calculates for contrast

Status: Success​

VariableStatusTokenDefaultDarkNote
--color-border-successmapped--nldesign-color-successvar(--color-element-success)var(--color-element-success)Success border; uses success color
--color-element-successmapped--nldesign-color-success#099f05#40A330Success element accent
--color-successmapped--nldesign-color-success#D8F3DA#11321ASuccess background/accent
--color-success-hoversettable--nldesign-nc-color-success-hover#bdebc0#1e582eSuccess hover; no NL Design equivalent
--color-success-rgbmapped--nldesign-color-success-rgb216,243,21817,50,26Deprecated; RGB for rgba()
--color-success-textsettable--nldesign-nc-color-success-text#005416#D5F2DCSuccess text; NC auto-calculates for contrast

Status: Warning​

VariableStatusTokenDefaultDarkNote
--color-element-warningmapped--nldesign-color-warning#BF7900#FFCC00Warning element accent
--color-warningmapped--nldesign-color-warning#FFEEC5#3D3010Warning background/accent
--color-warning-hoversettable--nldesign-nc-color-warning-hover#ffe4a1#65501bWarning hover; no NL Design equivalent
--color-warning-rgbmapped--nldesign-color-warning-rgb255,238,19761,48,16Deprecated; RGB for rgba()
--color-warning-textsettable--nldesign-nc-color-warning-text#664700#FFEEC5Warning text; NC auto-calculates for contrast

Text Colors​

VariableStatusTokenDefaultDarkNote
--color-main-textmapped--nldesign-color-text#222222#EBEBEBMain body text color
--color-text-errormapped--nldesign-color-error#bf0000#ff6f6fError message text
--color-text-maxcontrastmapped--nldesign-color-text-muted#6b6b6b#999999Muted/secondary text
--color-text-maxcontrast-background-blurmapped#595959#a8a8a8Blur-adjusted maxcontrast; Nextcloud calculates per background
--color-text-maxcontrast-defaultsettable--nldesign-nc-color-text-maxcontrast-default#6b6b6b#999999Default maxcontrast; auto-calculated by Nextcloud per theme
--color-text-successmapped--nldesign-color-success#066e03#49bb37Success message text
--color-text-warningmapped--nldesign-color-warningWarning message text

Typography​

VariableStatusTokenDefaultDarkNote
--default-font-sizesettable--nldesign-nc-default-font-size15px15pxBase font size (15px); standard across themes
--default-line-heightsettable--nldesign-nc-default-line-height1.51.5Line height (1.5); standard
--font-facemapped--nldesign-font-familysystem-ui, -apple-system, 'Sego…system-ui, -apple-system, 'Sego…Font stack
--font-size-smallsettable--nldesign-nc-font-size-small13px13pxSmall font size (13px); standard
--font-weight-defaultmapped--nldesign-font-weight-default400400Body weight; new in NC 33/34
--font-weight-elementmapped--nldesign-font-weight-element500500Weight of controls and button labels; new in NC 33/34. NcButton in @nextcloud/vue 9 reads it on .button-vue__text, wh…
--font-weight-headingmapped--nldesign-font-weight-heading600600Heading weight; new in NC 33/34. The per-level --nldesign-component-heading-N-font-weight tokens resolve through it

Component variables​

Declared and read by one Nextcloud component.

VariableFamilyStatusTokenValue
--account-menu-outlineaccountsettable--nldesign-nc-account-menu-outlinevar(--border-width-input) solid color-m…
--alt-text-active-bg-coloraltsettable--nldesign-nc-alt-text-active-bg-colorrgb(91 91 102 / var(--alt-text-opacity))
--alt-text-active-border-coloraltsettable--nldesign-nc-alt-text-active-border-colorvar(--alt-text-hover-bg-color)
--alt-text-active-fg-coloraltsettable--nldesign-nc-alt-text-active-fg-colorvar(--alt-text-fg-color)
--alt-text-bg-coloraltsettable--nldesign-nc-alt-text-bg-colorrgb(43 42 51 / var(--alt-text-opacity))
--alt-text-border-coloraltsettable--nldesign-nc-alt-text-border-colorvar(--alt-text-bg-color)
--alt-text-fg-coloraltsettable--nldesign-nc-alt-text-fg-color#fbfbfe
--alt-text-focus-border-coloraltsettable--nldesign-nc-alt-text-focus-border-color#f0f0f4
--alt-text-focus-outline-coloraltsettable--nldesign-nc-alt-text-focus-outline-color#0060df
--alt-text-hover-bg-coloraltsettable--nldesign-nc-alt-text-hover-bg-colorrgb(82 82 94 / var(--alt-text-opacity))
--alt-text-hover-border-coloraltsettable--nldesign-nc-alt-text-hover-border-colorvar(--alt-text-hover-bg-color)
--alt-text-hover-fg-coloraltsettable--nldesign-nc-alt-text-hover-fg-colorvar(--alt-text-fg-color)
--alt-text-opacityaltsettable--nldesign-nc-alt-text-opacity0.8
--alt-text-shadowaltsettable--nldesign-nc-alt-text-shadow0 2px 6px 0 rgb(28 27 34 / 0.5)
--alt-text-tooltip-bgaltsettable--nldesign-nc-alt-text-tooltip-bg#f0f0f4
--alt-text-tooltip-borderaltsettable--nldesign-nc-alt-text-tooltip-border#8f8f9d
--alt-text-tooltip-fgaltsettable--nldesign-nc-alt-text-tooltip-fg#15141a
--alt-text-tooltip-shadowaltsettable--nldesign-nc-alt-text-tooltip-shadow0px 2px 6px 0px rgb(58 57 68 / 0.2)
--app-item-circle-sizeappsettable--nldesign-nc-app-item-circle-sizecalc(var(--default-grid-baseline) * 10)
--app-item-col-widthappsettable--nldesign-nc-app-item-col-width69px
--app-item-icon-sizeappsettable--nldesign-nc-app-item-icon-size22px
--app-item-row-heightappsettable--nldesign-nc-app-item-row-height64px
--app-navigation-item-child-offsetappsettable--nldesign-nc-app-navigation-item-child-offset10px
--app-navigation-max-widthappsettable--nldesign-nc-app-navigation-max-widthcalc(100vw - (var(--app-navigation-padd…
--app-navigation-paddingappsettable--nldesign-nc-app-navigation-paddingcalc(var(--default-grid-baseline, 4px) …
--app-navigation-quota-marginappsettable--nldesign-nc-app-navigation-quota-margincalc((var(--default-clickable-area) - 2…
--app-settings-section-content-gapappsettable--nldesign-nc-app-settings-section-content-gapcalc(6 * var(--default-grid-baseline))
--app-settings-section-text-offsetappsettable--nldesign-nc-app-settings-section-text-offsetvar(--form-element-label-offset)
--app-sidebar-close-button-offsetappsettable--nldesign-nc-app-sidebar-close-button-offsetcalc(var(--default-clickable-area) + va…
--app-sidebar-paddingappsettable--nldesign-nc-app-sidebar-paddingcalc(var(--default-grid-baseline, 4px) …
--app-sidebar-widthappsettable--nldesign-nc-app-sidebar-widthclamp(300px, 27vw, 500px)
--assistant-button-background-colorassistantsettable--nldesign-nc-assistant-button-background-colorvar(--color-background-assistant, #F6F5…
--assistant-button-colorassistantsettable--nldesign-nc-assistant-button-colorvar(--color-element-assistant, linear-g…
--auto-complete-result-avatar-sizeautosettable--nldesign-nc-auto-complete-result-avatar-sizevar(--default-clickable-area)
--auto-complete-result-status-icon-positionautosettable--nldesign-nc-auto-complete-result-status-icon-positioncalc(var(--auto-complete-result-avatar-…
--auto-complete-result-status-icon-sizeautosettable--nldesign-nc-auto-complete-result-status-icon-sizeclamp(14px, var(--auto-complete-result-…
--avatar-cell-widthavatarsettable--nldesign-nc-avatar-cell-width48px
--avatar-status-icon-positionavatarsettable--nldesign-nc-avatar-status-icon-positionmin(0px, (var(--avatar-status-size-orbi…
--avatar-status-sizeavatarsettable--nldesign-nc-avatar-status-sizemax(var(--avatar-status-size-orbital), …
--avatar-status-size-minavatarsettable--nldesign-nc-avatar-status-size-minvar(--font-size-small)
--avatar-status-size-orbitalavatarsettable--nldesign-nc-avatar-status-size-orbitalcalc(var(--avatar-size) * (1 - 1 / sqrt…
--backdrop-colorbackdropsettable--nldesign-nc-backdrop-color0, 0, 0
--background-blurbackgroundsettable--nldesign-nc-background-blurblur(10px)
--body-bg-colorbodysettable--nldesign-nc-body-bg-colorrgb(212 212 215)
--button-cancel-bg-colorbuttonsettable--nldesign-nc-button-cancel-bg-color#f0f0f4
--button-cancel-border-colorbuttonsettable--nldesign-nc-button-cancel-border-colorvar(--button-cancel-bg-color)
--button-cancel-fg-colorbuttonsettable--nldesign-nc-button-cancel-fg-colorvar(--text-primary-color)
--button-cancel-hover-bg-colorbuttonsettable--nldesign-nc-button-cancel-hover-bg-colorvar(--button-cancel-bg-color)
--button-cancel-hover-border-colorbuttonsettable--nldesign-nc-button-cancel-hover-border-colorvar(--button-cancel-hover-bg-color)
--button-cancel-hover-fg-colorbuttonsettable--nldesign-nc-button-cancel-hover-fg-colorvar(--button-cancel-fg-color)
--button-hover-colorbuttonsettable--nldesign-nc-button-hover-colorrgb(221 222 223)
--button-inner-sizebuttonsettable--nldesign-nc-button-inner-sizecalc(var(--button-size) - 4px)
--button-paddingbuttonsettable--nldesign-nc-button-paddingvar(--default-grid-baseline) var(--butt…
--button-padding-defaultbuttonsettable--nldesign-nc-button-padding-defaultcalc(var(--default-grid-baseline) + var…
--button-radiusbuttonsettable--nldesign-nc-button-radiuscalc(var(--avatar-size) / 2)
--button-save-bg-colorbuttonsettable--nldesign-nc-button-save-bg-color#0060df
--button-save-fg-colorbuttonsettable--nldesign-nc-button-save-fg-color#fbfbfe
--button-save-hover-bg-colorbuttonsettable--nldesign-nc-button-save-hover-bg-colorvar(--button-save-bg-color)
--button-save-hover-border-colorbuttonsettable--nldesign-nc-button-save-hover-border-colorvar(--button-save-hover-bg-color)
--button-save-hover-fg-colorbuttonsettable--nldesign-nc-button-save-hover-fg-colorvar(--button-save-fg-color)
--button-sizebuttonsettable--nldesign-nc-button-sizecalc(var(--default-clickable-area) - 2 …
--callout-bordercalloutsettable--nldesign-nc-callout-bordervar(--color-element-info, #006aa3)
--cell-margincellsettable--nldesign-nc-cell-margin14px
--cell-paddingcellsettable--nldesign-nc-cell-padding7px
--cell-widthcellsettable--nldesign-nc-cell-width200px
--cell-width-groupscellsettable--nldesign-nc-cell-width-groups380px
--cell-width-largecellsettable--nldesign-nc-cell-width-large300px
--checkbox-container-sizecheckboxsettable--nldesign-nc-checkbox-container-size44px
--checkbox-paddingcheckboxsettable--nldesign-nc-checkbox-paddingcalc((var(--row-height) - var(--checkbo…
--checkbox-radio-switch--border-radiuscheckboxsettable--nldesign-nc-checkbox-radio-switch--border-radiusvar(--border-radius-element)
--checkbox-radio-switch--border-radius-outercheckboxsettable--nldesign-nc-checkbox-radio-switch--border-radius-outercalc(var(--checkbox-radio-switch--borde…
--checkbox-sizecheckboxsettable--nldesign-nc-checkbox-size24px
--chip-radiuschipsettable--nldesign-nc-chip-radiuscalc(var(--chip-size) / 2)
--chip-sizechipsettable--nldesign-nc-chip-size24px
--clickable-areaclickablesettable--nldesign-nc-clickable-areavar(--default-clickable-area)
--color-headercolorsettable--nldesign-nc-color-headerrgba(24, 24, 24, 1)
--color-primary-element-extra-lightcolorsettable--nldesign-nc-color-primary-element-extra-lighthsl(from var(--color-primary-element-li…
--color-primary-element-extra-light-hovercolorsettable--nldesign-nc-color-primary-element-extra-light-hoverhsl(from var(--color-primary-element-li…
--color-text-lightcolormapped--nldesign-component-text-light-colorvar(--color-main-text)
--color-text-lightercolormapped--nldesign-component-text-lighter-colorvar(--color-text-maxcontrast)
--confetti-iconfettiexcluded${h-1
--contenteditable-block-offsetcontenteditablesettable--nldesign-nc-contenteditable-block-offsetcalc(2 * var(--default-grid-baseline))
--contenteditable-inline-end-offsetcontenteditablesettable--nldesign-nc-contenteditable-inline-end-offsetcalc(2 * var(--default-grid-baseline))
--contenteditable-inline-start-offsetcontenteditablesettable--nldesign-nc-contenteditable-inline-start-offsetcalc(2 * var(--default-grid-baseline))
--counter-bubble-heightcountersettable--nldesign-nc-counter-bubble-height22px
--dark-link-colordarksettable--nldesign-nc-dark-link-color#249ee8
--dark-text-colordarksettable--nldesign-nc-dark-text-color#c1c1c1
--dialog-bg-colordialogsettable--nldesign-nc-dialog-bg-colorwhite
--dialog-border-colordialogsettable--nldesign-nc-dialog-border-colorwhite
--dialog-button-bg-colordialogsettable--nldesign-nc-dialog-button-bg-colorrgb(12 12 13 / 0.1)
--dialog-button-borderdialogsettable--nldesign-nc-dialog-button-bordernone
--dialog-button-hover-bg-colordialogsettable--nldesign-nc-dialog-button-hover-bg-colorrgb(12 12 13 / 0.3)
--dialog-button-hover-colordialogsettable--nldesign-nc-dialog-button-hover-colorButtonFace
--dialog-shadowdialogsettable--nldesign-nc-dialog-shadow0 2px 14px 0 rgb(58 57 68 / 0.2)
--dir-factordirsettable--nldesign-nc-dir-factor1
--doorhanger-bg-colordoorhangersettable--nldesign-nc-doorhanger-bg-colorrgb(255 255 255)
--doorhanger-border-colordoorhangersettable--nldesign-nc-doorhanger-border-colorrgb(12 12 13 / 0.2)
--doorhanger-border-color-whcmdoorhangersettable--nldesign-nc-doorhanger-border-color-whcm1px solid ButtonText
--doorhanger-hover-bg-colordoorhangersettable--nldesign-nc-doorhanger-hover-bg-colorrgb(237 237 237)
--doorhanger-hover-colordoorhangersettable--nldesign-nc-doorhanger-hover-colorrgb(12 12 13)
--doorhanger-icon-opacitydoorhangersettable--nldesign-nc-doorhanger-icon-opacity0.9
--doorhanger-separator-colordoorhangersettable--nldesign-nc-doorhanger-separator-colorrgb(222 222 222)
--doorhanger-triangle-opacity-whcmdoorhangersettable--nldesign-nc-doorhanger-triangle-opacity-whcm0
--dp-action-button-heightdpsettable--nldesign-nc-dp-action-button-heightvar(--clickable-area-small)
--dp-action-buttons-paddingdpsettable--nldesign-nc-dp-action-buttons-padding1px 6px
--dp-action-row-paddingdpsettable--nldesign-nc-dp-action-row-padding8px
--dp-action-row-transitiondpsettable--nldesign-nc-dp-action-row-transitionall 0.2s ease-in
--dp-action-row-transtiondpsettable--nldesign-nc-dp-action-row-transtionall 0.2s ease-in
--dp-animation-durationdpsettable--nldesign-nc-dp-animation-durationvar(--animation-quick)
--dp-background-colordpsettable--nldesign-nc-dp-background-color#212121
--dp-border-colordpsettable--nldesign-nc-dp-border-color#2d2d2d
--dp-border-color-focusdpsettable--nldesign-nc-dp-border-color-focus#aaaeb7
--dp-border-color-hoverdpsettable--nldesign-nc-dp-border-color-hover#aaaeb7
--dp-border-radiusdpsettable--nldesign-nc-dp-border-radiusvar(--border-radius-element)
--dp-button-heightdpsettable--nldesign-nc-dp-button-heightvar(--default-clickable-area)
--dp-button-icon-heightdpsettable--nldesign-nc-dp-button-icon-height20px
--dp-calendar-header-cell-paddingdpsettable--nldesign-nc-dp-calendar-header-cell-padding0.5rem
--dp-cell-border-radiusdpsettable--nldesign-nc-dp-cell-border-radiusvar(--border-radius-small)
--dp-cell-paddingdpsettable--nldesign-nc-dp-cell-padding5px
--dp-cell-sizedpsettable--nldesign-nc-dp-cell-sizevar(--default-clickable-area)
--dp-common-paddingdpsettable--nldesign-nc-dp-common-padding10px
--dp-common-transitiondpsettable--nldesign-nc-dp-common-transitionall var(--animation-quick) ease-in
--dp-danger-colordpsettable--nldesign-nc-dp-danger-color#e53935
--dp-directiondpsettable--nldesign-nc-dp-directionltr
--dp-disabled-colordpsettable--nldesign-nc-dp-disabled-color#737373
--dp-disabled-color-textdpsettable--nldesign-nc-dp-disabled-color-text#d0d0d0
--dp-font-familydpsettable--nldesign-nc-dp-font-familyvar(--font-face)
--dp-font-sizedpsettable--nldesign-nc-dp-font-size1rem
--dp-highlight-colordpsettable--nldesign-nc-dp-highlight-colorrgb(0 92 178 / 20%)
--dp-hover-colordpsettable--nldesign-nc-dp-hover-color#484848
--dp-hover-icon-colordpsettable--nldesign-nc-dp-hover-icon-color#959595
--dp-hover-text-colordpsettable--nldesign-nc-dp-hover-text-color#fff
--dp-icon-colordpsettable--nldesign-nc-dp-icon-color#959595
--dp-input-icon-paddingdpsettable--nldesign-nc-dp-input-icon-paddingvar(--default-clickable-area)
--dp-input-not-clearable-paddingdpsettable--nldesign-nc-dp-input-not-clearable-padding12px
--dp-input-paddingdpsettable--nldesign-nc-dp-input-padding6px 12px
--dp-loaderdpsettable--nldesign-nc-dp-loader5px solid #005cb2
--dp-marker-colordpsettable--nldesign-nc-dp-marker-color#e53935
--dp-menu-border-colordpsettable--nldesign-nc-dp-menu-border-color#2d2d2d
--dp-menu-min-widthdpsettable--nldesign-nc-dp-menu-min-width260px
--dp-menu-paddingdpsettable--nldesign-nc-dp-menu-padding6px 8px
--dp-month-year-row-button-sizedpsettable--nldesign-nc-dp-month-year-row-button-sizevar(--clickable-area-small)
--dp-month-year-row-heightdpsettable--nldesign-nc-dp-month-year-row-heightvar(--default-clickable-area)
--dp-multi-calendars-spacingdpsettable--nldesign-nc-dp-multi-calendars-spacing10px
--dp-overlay-col-paddingdpsettable--nldesign-nc-dp-overlay-col-padding3px
--dp-preview-font-sizedpsettable--nldesign-nc-dp-preview-font-sizevar(--font-size-small)
--dp-primary-colordpsettable--nldesign-nc-dp-primary-color#005cb2
--dp-primary-disabled-colordpsettable--nldesign-nc-dp-primary-disabled-color#61a8ea
--dp-primary-text-colordpsettable--nldesign-nc-dp-primary-text-color#fff
--dp-range-between-border-colordpsettable--nldesign-nc-dp-range-between-border-colorvar(--dp-hover-color, #fff)
--dp-range-between-dates-background-colordpsettable--nldesign-nc-dp-range-between-dates-background-colorvar(--dp-hover-color, #484848)
--dp-range-between-dates-text-colordpsettable--nldesign-nc-dp-range-between-dates-text-colorvar(--dp-hover-text-color, #fff)
--dp-row-margindpsettable--nldesign-nc-dp-row-margin5px 0
--dp-scroll-bar-backgrounddpsettable--nldesign-nc-dp-scroll-bar-background#212121
--dp-scroll-bar-colordpsettable--nldesign-nc-dp-scroll-bar-color#484848
--dp-secondary-colordpsettable--nldesign-nc-dp-secondary-color#a9a9a9
--dp-success-colordpsettable--nldesign-nc-dp-success-color#00701a
--dp-text-colordpsettable--nldesign-nc-dp-text-color#fff
--dp-time-font-sizedpsettable--nldesign-nc-dp-time-font-size2rem
--dp-time-inc-dec-button-sizedpsettable--nldesign-nc-dp-time-inc-dec-button-sizevar(--default-clickable-area)
--dp-tooltip-colordpsettable--nldesign-nc-dp-tooltip-color#3e3e3e
--dp-transition-lengthdpsettable--nldesign-nc-dp-transition-length22px
--dp-transition-timingdpsettable--nldesign-nc-dp-transition-timingease-out
--dp-transition-timing-generaldpsettable--nldesign-nc-dp-transition-timing-generalvar(--animation-quick)
--dropdown-btn-bg-colordropdownsettable--nldesign-nc-dropdown-btn-bg-colorrgb(215 215 219)
--dropdown-btn-borderdropdownsettable--nldesign-nc-dropdown-btn-bordernone
--editorFreeText-editing-cursoreditorFreeTextsettable--nldesign-nc-editorFreeText-editing-cursortext
--field-bg-colorfieldsettable--nldesign-nc-field-bg-colorrgb(255 255 255)
--field-border-colorfieldsettable--nldesign-nc-field-border-colorrgb(187 187 188)
--field-colorfieldsettable--nldesign-nc-field-colorrgb(6 6 6)
--figure-sizefiguresettable--nldesign-nc-figure-sizecalc(52px + var(--app-sidebar-padding))
--fixed-block-start-positionfixedsettable--nldesign-nc-fixed-block-start-positioncalc(var(--clickable-area-small) + var(…
--focus-outlinefocussettable--nldesign-nc-focus-outlinesolid var(--outline-width) var(--outlin…
--focus-outline-aroundfocussettable--nldesign-nc-focus-outline-aroundsolid var(--outline-around-width) var(-…
--focus-ring-colorfocussettable--nldesign-nc-focus-ring-color#0060df
--focus-ring-outlinefocussettable--nldesign-nc-focus-ring-outline2px solid var(--focus-ring-color)
--form-element-label-offsetformsettable--nldesign-nc-form-element-label-offsetcalc(var(--border-radius-element) + var…
--form-element-label-paddingformsettable--nldesign-nc-form-element-label-paddingcalc(var(--form-element-label-offset) -…
--form-group-content-gapformsettable--nldesign-nc-form-group-content-gapcalc(2 * var(--default-grid-baseline))
--freetext-line-heightfreetextsettable--nldesign-nc-freetext-line-height1.35
--freetext-paddingfreetextsettable--nldesign-nc-freetext-padding2px
--gapgapsettable--nldesign-nc-gap30px
--highlight-bg-colorhighlightsettable--nldesign-nc-highlight-bg-colorrgb(180 0 170)
--highlight-selected-bg-colorhighlightsettable--nldesign-nc-highlight-selected-bg-colorrgb(0 100 0)
--hljs-background-colorhljssettable--nldesign-nc-hljs-background-colorvar(--color-background-dark, #ffffff)
--hljs-colorhljssettable--nldesign-nc-hljs-colorvar(--color-main-text, #24292e)
--hljs-syntax-comment-colorhljssettable--nldesign-nc-hljs-syntax-comment-color#6a737d
--hljs-syntax-constant-colorhljssettable--nldesign-nc-hljs-syntax-constant-color#005cc5
--hljs-syntax-entity-colorhljssettable--nldesign-nc-hljs-syntax-entity-color#6f42c1
--hljs-syntax-entity-tag-colorhljssettable--nldesign-nc-hljs-syntax-entity-tag-color#22863a
--hljs-syntax-keyword-colorhljssettable--nldesign-nc-hljs-syntax-keyword-color#d73a49
--hljs-syntax-markup-bold-colorhljssettable--nldesign-nc-hljs-syntax-markup-bold-color#24292e
--hljs-syntax-markup-deleted-background-colorhljssettable--nldesign-nc-hljs-syntax-markup-deleted-background-color#ffeef0
--hljs-syntax-markup-deleted-colorhljssettable--nldesign-nc-hljs-syntax-markup-deleted-color#b31d28
--hljs-syntax-markup-heading-colorhljssettable--nldesign-nc-hljs-syntax-markup-heading-color#005cc5
--hljs-syntax-markup-inserted-background-colorhljssettable--nldesign-nc-hljs-syntax-markup-inserted-background-color#f0fff4
--hljs-syntax-markup-inserted-colorhljssettable--nldesign-nc-hljs-syntax-markup-inserted-color#22863a
--hljs-syntax-markup-italic-colorhljssettable--nldesign-nc-hljs-syntax-markup-italic-color#24292e
--hljs-syntax-markup-list-colorhljssettable--nldesign-nc-hljs-syntax-markup-list-color#735c0f
--hljs-syntax-storage-modifier-import-colorhljssettable--nldesign-nc-hljs-syntax-storage-modifier-import-color#24292e
--hljs-syntax-string-colorhljssettable--nldesign-nc-hljs-syntax-string-color#032f62
--hljs-syntax-variable-colorhljssettable--nldesign-nc-hljs-syntax-variable-color#e36209
--hover-filterhoversettable--nldesign-nc-hover-filterbrightness(0.9)
--hover-outlinehoversettable--nldesign-nc-hover-outlinesolid var(--outline-width) var(--hover-…
--hover-outline-aroundhoversettable--nldesign-nc-hover-outline-aroundsolid var(--outline-around-width) var(-…
--hover-outline-around-colorhoversettable--nldesign-nc-hover-outline-around-colorvar(--outline-around-color)
--hover-outline-colorhoversettable--nldesign-nc-hover-outline-color#8f8f9d
--inline-endinlinesettable--nldesign-nc-inline-endright
--inline-startinlinesettable--nldesign-nc-inline-startleft
--input-border-box-shadowinputsettable--nldesign-nc-input-border-box-shadowvar(--input-border-box-shadow-light)
--input-border-box-shadow-darkinputsettable--nldesign-nc-input-border-box-shadow-dark0 1px var(--vs-border-color), 0 0 0 1px…
--input-border-box-shadow-lightinputsettable--nldesign-nc-input-border-box-shadow-light0 -1px var(--vs-border-color), 0 0 0 1p…
--input-border-colorinputmapped--nldesign-component-textarea-focus-border-colorvar(--color-border-maxcontrast)
--input-border-radiusinputsettable--nldesign-nc-input-border-radiusvar(--border-radius-element)
--input-border-width-offsetinputsettable--nldesign-nc-input-border-width-offsetcalc(var(--border-width-input-focused, …
--input-disabled-border-colorinputsettable--nldesign-nc-input-disabled-border-colortransparent
--input-focus-border-colorinputsettable--nldesign-nc-input-focus-border-colorHighlight
--input-focus-outlineinputsettable--nldesign-nc-input-focus-outline1px solid Canvas
--input-hover-border-colorinputsettable--nldesign-nc-input-hover-border-colorblack
--input-label-font-sizeinputsettable--nldesign-nc-input-label-font-sizevar(--default-font-size)
--input-padding-endinputsettable--nldesign-nc-input-padding-endvar(--border-radius-element)
--input-padding-startinputsettable--nldesign-nc-input-padding-startvar(--border-radius-element)
--input-unfocused-border-colorinputsettable--nldesign-nc-input-unfocused-border-colortransparent
--item-paddingitemsettable--nldesign-nc-item-padding16px
--level-paddinglevelsettable--nldesign-nc-level-padding12px
--link-outlinelinksettable--nldesign-nc-link-outlinenone
--list-item-border-radiuslistsettable--nldesign-nc-list-item-border-radiusvar(--border-radius-element, 32px)
--list-item-heightlistsettable--nldesign-nc-list-item-height2lh
--list-item-paddinglistsettable--nldesign-nc-list-item-paddingvar(--default-grid-baseline)
--loading-icon-delayloadingsettable--nldesign-nc-loading-icon-delay400ms
--local-search-widthlocalexcludedmin(calc(250px + var(--dfb017de)), 95vw)
--main-colormainsettable--nldesign-nc-main-colorrgb(12 12 13)
--max-icon-sizemaxsettable--nldesign-nc-max-icon-sizecalc(var(--default-clickable-area) - 2 …
--member-list-gapmembersettable--nldesign-nc-member-list-gapcalc(1.5 * var(--default-grid-baseline))
--mermaid-font-familymermaidexcluded${e.fontFamily
--min-sizeminsettable--nldesign-nc-min-size32px
--mtime-heightmtimesettable--nldesign-nc-mtime-heightcalc(var(--font-size-small) + var(--def…
--name-heightnamesettable--nldesign-nc-name-heightvar(--default-clickable-area)
--nav-tintnavsettable--nldesign-nc-nav-tinthsl(from var(--color-primary-element-li…
--nav-tint-strongnavsettable--nldesign-nc-nav-tint-strongvar(--color-primary-element-light)
--nc-form-box-item-border-widthncsettable--nldesign-nc-nc-form-box-item-border-width1px
--nc-form-box-item-min-heightncsettable--nldesign-nc-nc-form-box-item-min-height40px
--note-backgroundnotemappedvar(--color-success)
--note-card-icon-sizenotesettable--nldesign-nc-note-card-icon-size20px
--note-card-paddingnotesettable--nldesign-nc-note-card-paddingcalc(2 * var(--default-grid-baseline))
--note-themenotemappedvar(--color-success-text)
--open-background-coloropensettable--nldesign-nc-open-background-colorvar(--color-background-hover, $action-b…
--outline-around-coloroutlinesettable--nldesign-nc-outline-around-color#f0f0f4
--outline-around-widthoutlinesettable--nldesign-nc-outline-around-width1px
--outline-coloroutlinesettable--nldesign-nc-outline-color#0060df
--outline-widthoutlinesettable--nldesign-nc-outline-width2px
--paddingpaddingsettable--nldesign-nc-paddingcalc((var(--default-clickable-area) - 2…
--padding-inline-startpaddingsettable--nldesign-nc-padding-inline-startcalc(0 * var(--level-padding))
--page-borderpagesettable--nldesign-nc-page-border9px solid transparent
--page-marginpagesettable--nldesign-nc-page-margin1px auto -8px
--panel-widthpanelsettable--nldesign-nc-panel-width300px
--pdfViewer-padding-bottompdfViewersettable--nldesign-nc-pdfViewer-padding-bottom0
--photos-face-widthphotossettable--nldesign-nc-photos-face-width128px
--plyr-audio-control-colorplyrsettable--nldesign-nc-plyr-audio-control-colorvar(--color-main-text)
--plyr-audio-controls-backgroundplyrsettable--nldesign-nc-plyr-audio-controls-backgroundvar(--color-main-background)
--plyr-button-sizeplyrsettable--nldesign-nc-plyr-button-size44px
--plyr-color-mainplyrsettable--nldesign-nc-plyr-color-mainvar(--color-primary-element)
--plyr-control-icon-sizeplyrsettable--nldesign-nc-plyr-control-icon-size18px
--plyr-menu-backgroundplyrsettable--nldesign-nc-plyr-menu-backgroundvar(--color-main-background)
--plyr-menu-colorplyrsettable--nldesign-nc-plyr-menu-colorvar(--color-main-text)
--plyr-range-fill-backgroundplyrsettable--nldesign-nc-plyr-range-fill-backgroundvar(--color-primary-element)
--progress-bar-colorprogressexcludedvar(--3a86fec2)
--progressBar-bg-colorprogressBarsettable--nldesign-nc-progressBar-bg-colorrgb(221 221 222)
--progressBar-blend-colorprogressBarsettable--nldesign-nc-progressBar-blend-colorrgb(116 177 239)
--progressBar-colorprogressBarsettable--nldesign-nc-progressBar-colorrgb(10 132 255)
--radio-bg-colorradiosettable--nldesign-nc-radio-bg-color#f0f0f4
--radio-border-colorradiosettable--nldesign-nc-radio-border-color#8f8f9d
--radio-checked-bg-colorradiosettable--nldesign-nc-radio-checked-bg-color#fbfbfe
--radio-checked-border-colorradiosettable--nldesign-nc-radio-checked-border-color#0060df
--radio-group-button--background-colorradiosettable--nldesign-nc-radio-group-button--background-colorvar(--color-primary-element-light)
--radio-group-button--background-color-hoverradiosettable--nldesign-nc-radio-group-button--background-color-hovervar(--color-primary-element-light-hover)
--radio-group-button--border-radiusradiosettable--nldesign-nc-radio-group-button--border-radiusvar(--border-radius-small)
--radio-group-button--border-widthradiosettable--nldesign-nc-radio-group-button--border-width1px
--radio-group-button--colorradiosettable--nldesign-nc-radio-group-button--colorvar(--color-primary-element-light-text)
--radio-group-button--icon-sizeradiosettable--nldesign-nc-radio-group-button--icon-sizecalc(var(--default-clickable-area) - 4p…
--radio-group-button--paddingradiosettable--nldesign-nc-radio-group-button--padding1px
--ratioratiosettable--nldesign-nc-ratio16
--resizer-bg-colorresizersettable--nldesign-nc-resizer-bg-colorvar(--outline-color)
--resizer-shiftresizersettable--nldesign-nc-resizer-shiftcalc( 0px - (var(--outline-width) +…
--resizer-sizeresizersettable--nldesign-nc-resizer-size6px
--resource-box-sizeresourcesettable--nldesign-nc-resource-box-sizevar(--default-clickable-area)
--resources-list-gapresourcessettable--nldesign-nc-resources-list-gapcalc(2 * var(--default-grid-baseline))
--row-widthrowsettable--nldesign-nc-row-widthcalc(var(--icon-preview-size) + var(--i…
--scrollbar-bg-colorscrollbarsettable--nldesign-nc-scrollbar-bg-colorauto
--scrollbar-colorscrollbarsettable--nldesign-nc-scrollbar-colorauto
--secondary-marginsecondarysettable--nldesign-nc-secondary-margin18px
--separator-colorseparatorsettable--nldesign-nc-separator-colorrgb(0 0 0 / 0.3)
--session-max-widthsessionsettable--nldesign-nc-session-max-width280px
--sidebar-narrow-bg-colorsidebarsettable--nldesign-nc-sidebar-narrow-bg-colorrgb(212 212 215 / 0.9)
--sidebar-toolbar-bg-colorsidebarsettable--nldesign-nc-sidebar-toolbar-bg-colorrgb(245 246 247)
--sidebar-transition-durationsidebarsettable--nldesign-nc-sidebar-transition-duration200ms
--sidebar-transition-timing-functionsidebarsettable--nldesign-nc-sidebar-transition-timing-functionease
--sidebar-widthsidebarsettable--nldesign-nc-sidebar-width200px
--sizesizesettable--nldesign-nc-sizevar(--default-clickable-area)
--spreadHorizontalWrapped-margin-LRspreadHorizontalWrappedsettable--nldesign-nc-spreadHorizontalWrapped-margin-LR-3.5px
--sticky-column-z-indexstickysettable--nldesign-nc-sticky-column-z-indexcalc(var(--vs-dropdown-z-index) + 1)
--table-border-radiustablesettable--nldesign-nc-table-border-radiusvar(--border-radius)
--table-color-backgroundtablesettable--nldesign-nc-table-color-backgroundvar(--color-main-background)
--table-color-background-hovertablesettable--nldesign-nc-table-color-background-hovervar(--color-primary-element-light)
--table-color-bordertablesettable--nldesign-nc-table-color-bordervar(--color-border)
--table-color-headingtablesettable--nldesign-nc-table-color-headingvar(--color-text-maxcontrast)
--table-color-heading-bordertablesettable--nldesign-nc-table-color-heading-bordervar(--color-border-dark)
--text-primary-colortextsettable--nldesign-nc-text-primary-color#15141a
--text-secondary-colortextsettable--nldesign-nc-text-secondary-color#5b5b66
--textarea-bg-colortextareasettable--nldesign-nc-textarea-bg-colorwhite
--textarea-border-colortextareasettable--nldesign-nc-textarea-border-color#8f8f9d
--textarea-fg-colortextareasettable--nldesign-nc-textarea-fg-colorvar(--text-secondary-color)
--thumbnail-hover-colorthumbnailsettable--nldesign-nc-thumbnail-hover-colorrgb(0 0 0 / 0.1)
--thumbnail-selected-colorthumbnailsettable--nldesign-nc-thumbnail-selected-colorrgb(0 0 0 / 0.2)
--toggled-btn-bg-colortoggledsettable--nldesign-nc-toggled-btn-bg-colorrgb(0 0 0 / 0.3)
--toggled-btn-colortoggledsettable--nldesign-nc-toggled-btn-colorrgb(0 0 0)
--toggled-hover-active-btn-colortoggledsettable--nldesign-nc-toggled-hover-active-btn-colorrgb(0 0 0 / 0.4)
--toggled-hover-btn-outlinetoggledsettable--nldesign-nc-toggled-hover-btn-outlinenone
--toolbar-bg-colortoolbarsettable--nldesign-nc-toolbar-bg-colorrgb(249 249 250)
--toolbar-border-bottomtoolbarsettable--nldesign-nc-toolbar-border-bottomnone
--toolbar-border-colortoolbarsettable--nldesign-nc-toolbar-border-colorrgb(184 184 184)
--toolbar-box-shadowtoolbarsettable--nldesign-nc-toolbar-box-shadow0 1px 0 var(--toolbar-border-color)
--toolbar-icon-bg-colortoolbarsettable--nldesign-nc-toolbar-icon-bg-colorrgb(0 0 0)
--toolbar-icon-hover-bg-colortoolbarsettable--nldesign-nc-toolbar-icon-hover-bg-colorrgb(0 0 0)
--toolbar-icon-opacitytoolbarsettable--nldesign-nc-toolbar-icon-opacity0.7
--toolbarSidebar-border-bottomtoolbarSidebarsettable--nldesign-nc-toolbarSidebar-border-bottomnone
--toolbarSidebar-box-shadowtoolbarSidebarsettable--nldesign-nc-toolbarSidebar-box-shadowinset calc(-1px * var(--dir-factor)) 0 …
--treeitem-bg-colortreeitemsettable--nldesign-nc-treeitem-bg-colorrgb(0 0 0 / 0.15)
--treeitem-colortreeitemsettable--nldesign-nc-treeitem-colorrgb(0 0 0 / 0.8)
--treeitem-hover-colortreeitemsettable--nldesign-nc-treeitem-hover-colorrgb(0 0 0 / 0.9)
--treeitem-selected-bg-colortreeitemsettable--nldesign-nc-treeitem-selected-bg-colorrgb(0 0 0 / 0.25)
--treeitem-selected-colortreeitemsettable--nldesign-nc-treeitem-selected-colorrgb(0 0 0 / 0.9)
--unfocus-outlineunfocussettable--nldesign-nc-unfocus-outlinesolid var(--outline-width) transparent
--user-status-color-awayusersettable--nldesign-nc-user-status-color-away#C88800
--user-status-color-busyusersettable--nldesign-nc-user-status-color-busy#DB0606
--user-status-color-offlineusersettable--nldesign-nc-user-status-color-offline#6B6B6B
--user-status-color-onlineusermapped--nldesign-component-avatar-online-status-color#2D7B41
--vs-actions-paddingvssettable--nldesign-nc-vs-actions-padding0 8px 0 4px
--vs-border-colorvsmapped--nldesign-component-form-select-border-colorvar(--color-border-maxcontrast)
--vs-border-radiusvsmapped--nldesign-component-form-select-border-radiusvar(--border-radius-element)
--vs-border-stylevssettable--nldesign-nc-vs-border-stylesolid
--vs-border-widthvssettable--nldesign-nc-vs-border-widthvar(--border-width-input, 2px) !importa…
--vs-colors--darkvssettable--nldesign-nc-vs-colors--dark#333
--vs-colors--darkestvssettable--nldesign-nc-vs-colors--darkestrgba(0,0,0,.15)
--vs-colors--lightvssettable--nldesign-nc-vs-colors--lightrgba(60,60,60,.5)
--vs-colors--lightestvssettable--nldesign-nc-vs-colors--lightestrgba(60,60,60,.26)
--vs-controls--deselect-text-shadowvssettable--nldesign-nc-vs-controls--deselect-text-shadow0 1px 0 #fff
--vs-controls-colorvssettable--nldesign-nc-vs-controls-colorvar(--color-main-text)
--vs-controls-sizevssettable--nldesign-nc-vs-controls-size1
--vs-disabled-bgvssettable--nldesign-nc-vs-disabled-bgvar(--color-background-hover)
--vs-disabled-cursorvssettable--nldesign-nc-vs-disabled-cursornot-allowed
--vs-dropdown-bgvssettable--nldesign-nc-vs-dropdown-bgvar(--color-main-background)
--vs-dropdown-box-shadowvssettable--nldesign-nc-vs-dropdown-box-shadow0px 2px 2px 0px var(--color-box-shadow)
--vs-dropdown-colorvsmapped--nldesign-component-form-select-option-colorvar(--color-main-text)
--vs-dropdown-max-heightvssettable--nldesign-nc-vs-dropdown-max-height350px
--vs-dropdown-min-widthvssettable--nldesign-nc-vs-dropdown-min-width160px
--vs-dropdown-option--active-bgvsmapped--nldesign-component-form-select-option-hover-background-colorvar(--color-background-hover)
--vs-dropdown-option--active-colorvsmapped--nldesign-component-form-select-option-hover-colorvar(--color-main-text)
--vs-dropdown-option--deselect-bgvssettable--nldesign-nc-vs-dropdown-option--deselect-bgvar(--color-error)
--vs-dropdown-option--deselect-colorvssettable--nldesign-nc-vs-dropdown-option--deselect-color#fff
--vs-dropdown-option--kb-focus-box-shadowvssettable--nldesign-nc-vs-dropdown-option--kb-focus-box-shadowinset 0px 0px 0px 2px var(--vs-border-c…
--vs-dropdown-option-colorvssettable--nldesign-nc-vs-dropdown-option-colorvar(--vs-dropdown-color)
--vs-dropdown-option-paddingvssettable--nldesign-nc-vs-dropdown-option-padding8px 20px
--vs-dropdown-z-indexvssettable--nldesign-nc-vs-dropdown-z-index9999
--vs-font-sizevssettable--nldesign-nc-vs-font-sizevar(--default-font-size)
--vs-line-heightvssettable--nldesign-nc-vs-line-heightvar(--default-line-height)
--vs-search-input-bgvssettable--nldesign-nc-vs-search-input-bgvar(--color-main-background)
--vs-search-input-colorvssettable--nldesign-nc-vs-search-input-colorvar(--color-main-text)
--vs-search-input-placeholder-colorvssettable--nldesign-nc-vs-search-input-placeholder-colorvar(--color-text-maxcontrast)
--vs-selected-bgvssettable--nldesign-nc-vs-selected-bgvar(--color-background-hover)
--vs-selected-border-colorvssettable--nldesign-nc-vs-selected-border-colorvar(--vs-border-color)
--vs-selected-border-stylevssettable--nldesign-nc-vs-selected-border-stylevar(--vs-border-style)
--vs-selected-border-widthvssettable--nldesign-nc-vs-selected-border-widthvar(--vs-border-width)
--vs-selected-colorvsmapped--nldesign-component-form-select-colorvar(--color-main-text)
--vs-state-disabled-bgvssettable--nldesign-nc-vs-state-disabled-bgvar(--color-background-hover)
--vs-state-disabled-colorvssettable--nldesign-nc-vs-state-disabled-colorvar(--color-text-maxcontrast)
--vs-state-disabled-cursorvssettable--nldesign-nc-vs-state-disabled-cursornot-allowed
--vs-transition-durationvssettable--nldesign-nc-vs-transition-duration0ms
--vs-transition-timing-functionvssettable--nldesign-nc-vs-transition-timing-functioncubic-bezier(1,-.115,.975,.855)
--xfa-focus-outlinexfasettable--nldesign-nc-xfa-focus-outlineauto

Fallback slots​

Read by a component with its own fallback, declared nowhere.

VariableFamilyStatusTokenValue
--a475b540a475b540excluded
--a8212066a8212066excluded
--a843d9d2a843d9d2excluded
--ab21a194ab21a194excluded
--adec40c8adec40c8excluded
--afe18836afe18836excluded
--animation-durationanimationexcluded
--be84d992be84d992excluded
--callout-backgroundcalloutsettable--nldesign-nc-callout-background
--cf2ff408cf2ff408excluded
--colorcolorexcluded
--color-norder-errorcolorsettable--nldesign-nc-color-norder-error
--color-textcolorexcluded
--d7eb5974d7eb5974excluded
--d87c3654d87c3654excluded
--d98ce684d98ce684excluded
--dad67fa8dad67fa8excluded
--dc9c258cdc9c258cexcluded
--dfb017dedfb017deexcluded
--e2fa5f72e2fa5f72excluded
--fb515064fb515064excluded
--font-familyfontexcluded
--font-sizefontexcluded
--image-logoimageexcluded
--image-logoheaderimageexcluded
--image-logoheader-customimageexcluded
--invert-if-darkinvertexcluded
--photos-navigation-heightphotossettable--nldesign-nc-photos-navigation-height
--plyr-audio-control-background-hoverplyrsettable--nldesign-nc-plyr-audio-control-background-hover
--plyr-audio-control-color-hoverplyrsettable--nldesign-nc-plyr-audio-control-color-hover
--plyr-audio-progress-buffered-backgroundplyrsettable--nldesign-nc-plyr-audio-progress-buffered-background
--plyr-audio-range-thumb-active-shadow-colorplyrsettable--nldesign-nc-plyr-audio-range-thumb-active-shadow-color
--plyr-audio-range-track-backgroundplyrsettable--nldesign-nc-plyr-audio-range-track-background
--plyr-badge-backgroundplyrsettable--nldesign-nc-plyr-badge-background
--plyr-badge-border-radiusplyrsettable--nldesign-nc-plyr-badge-border-radius
--plyr-badge-text-colorplyrsettable--nldesign-nc-plyr-badge-text-color
--plyr-captions-backgroundplyrsettable--nldesign-nc-plyr-captions-background
--plyr-captions-text-colorplyrsettable--nldesign-nc-plyr-captions-text-color
--plyr-control-radiusplyrsettable--nldesign-nc-plyr-control-radius
--plyr-control-spacingplyrsettable--nldesign-nc-plyr-control-spacing
--plyr-control-toggle-checked-backgroundplyrsettable--nldesign-nc-plyr-control-toggle-checked-background
--plyr-focus-visible-colorplyrsettable--nldesign-nc-plyr-focus-visible-color
--plyr-font-familyplyrsettable--nldesign-nc-plyr-font-family
--plyr-font-size-badgeplyrsettable--nldesign-nc-plyr-font-size-badge
--plyr-font-size-baseplyrsettable--nldesign-nc-plyr-font-size-base
--plyr-font-size-largeplyrsettable--nldesign-nc-plyr-font-size-large
--plyr-font-size-menuplyrsettable--nldesign-nc-plyr-font-size-menu
--plyr-font-size-smallplyrsettable--nldesign-nc-plyr-font-size-small
--plyr-font-size-timeplyrsettable--nldesign-nc-plyr-font-size-time
--plyr-font-size-xlargeplyrsettable--nldesign-nc-plyr-font-size-xlarge
--plyr-font-weight-regularplyrsettable--nldesign-nc-plyr-font-weight-regular
--plyr-line-heightplyrsettable--nldesign-nc-plyr-line-height
--plyr-menu-arrow-colorplyrsettable--nldesign-nc-plyr-menu-arrow-color
--plyr-menu-arrow-sizeplyrsettable--nldesign-nc-plyr-menu-arrow-size
--plyr-menu-back-border-colorplyrsettable--nldesign-nc-plyr-menu-back-border-color
--plyr-menu-back-border-shadow-colorplyrsettable--nldesign-nc-plyr-menu-back-border-shadow-color
--plyr-menu-item-arrow-sizeplyrsettable--nldesign-nc-plyr-menu-item-arrow-size
--plyr-menu-radiusplyrsettable--nldesign-nc-plyr-menu-radius
--plyr-menu-shadowplyrsettable--nldesign-nc-plyr-menu-shadow
--plyr-progress-loading-backgroundplyrsettable--nldesign-nc-plyr-progress-loading-background
--plyr-progress-loading-sizeplyrsettable--nldesign-nc-plyr-progress-loading-size
--plyr-progress-marker-backgroundplyrsettable--nldesign-nc-plyr-progress-marker-background
--plyr-progress-marker-widthplyrsettable--nldesign-nc-plyr-progress-marker-width
--plyr-range-thumb-active-shadow-widthplyrsettable--nldesign-nc-plyr-range-thumb-active-shadow-width
--plyr-range-thumb-backgroundplyrsettable--nldesign-nc-plyr-range-thumb-background
--plyr-range-thumb-heightplyrsettable--nldesign-nc-plyr-range-thumb-height
--plyr-range-thumb-shadowplyrsettable--nldesign-nc-plyr-range-thumb-shadow
--plyr-range-track-heightplyrsettable--nldesign-nc-plyr-range-track-height
--plyr-tooltip-arrow-sizeplyrsettable--nldesign-nc-plyr-tooltip-arrow-size
--plyr-tooltip-backgroundplyrsettable--nldesign-nc-plyr-tooltip-background
--plyr-tooltip-colorplyrsettable--nldesign-nc-plyr-tooltip-color
--plyr-tooltip-radiusplyrsettable--nldesign-nc-plyr-tooltip-radius
--plyr-tooltip-shadowplyrsettable--nldesign-nc-plyr-tooltip-shadow
--plyr-video-backgroundplyrsettable--nldesign-nc-plyr-video-background
--plyr-video-control-background-hoverplyrsettable--nldesign-nc-plyr-video-control-background-hover
--plyr-video-control-colorplyrsettable--nldesign-nc-plyr-video-control-color
--plyr-video-control-color-hoverplyrsettable--nldesign-nc-plyr-video-control-color-hover
--plyr-video-controls-backgroundplyrsettable--nldesign-nc-plyr-video-controls-background
--plyr-video-progress-buffered-backgroundplyrsettable--nldesign-nc-plyr-video-progress-buffered-background
--plyr-video-range-track-backgroundplyrsettable--nldesign-nc-plyr-video-range-track-background
--v6c51c3dav6c51c3daexcluded
--v6ca826eav6ca826eaexcluded
--vs-controls--spinner-sizevssettable--nldesign-nc-vs-controls--spinner-size

Conduction library variables​

The --cn-* variables of @conduction/nextcloud-vue.

VariableFamilyStatusTokenValue
--cn-ai-pointer-offsetcnsettable--nldesign-cn-ai-pointer-offset19px
--cn-card-active-bordercnexcluded
--cn-color-picker-checkercnsettable--nldesign-cn-color-picker-checkerlinear-gradient(45deg, var(--color-back…
--cn-color-swatch-checkercnsettable--nldesign-cn-color-swatch-checkerlinear-gradient(45deg, var(--color-back…
--cn-ctx-menu-xcnexcluded
--cn-ctx-menu-ycnexcluded
--cn-detail-grid-label-widthcnexcluded
--cn-email-accentcnsettable--nldesign-cn-email-accent
--cn-forms-accentcnsettable--nldesign-cn-forms-accent
--cn-forms-statuscnsettable--nldesign-cn-forms-statusvar(--color-success, #46ba61)
--cn-grid-colscnexcluded
--cn-grid-cscnexcluded
--cn-grid-cspancnexcluded
--cn-grid-cspan-mdcnexcluded
--cn-grid-rscnexcluded
--cn-grid-rspancnexcluded
--cn-iw-accentcnexcluded
--cn-iwg-columnscnexcluded
--cn-iwg-min-heightcnexcluded
--cn-kpi-accentcnsettable--nldesign-cn-kpi-accentvar(--color-primary-element)
--cn-kpi-gapcnsettable--nldesign-cn-kpi-gap8px
--cn-kpi-gap-horizontalcnsettable--nldesign-cn-kpi-gap-horizontal16px
--cn-kpi-grid-gapcnsettable--nldesign-cn-kpi-grid-gap16px
--cn-kpi-icon-sizecnsettable--nldesign-cn-kpi-icon-size44px
--cn-kpi-icon-size-smcnsettable--nldesign-cn-kpi-icon-size-sm36px
--cn-kpi-icon-tintcnsettable--nldesign-cn-kpi-icon-tint12%
--cn-kpi-label-colorcnsettable--nldesign-cn-kpi-label-colorvar(--color-text-maxcontrast)
--cn-kpi-label-sizecnsettable--nldesign-cn-kpi-label-size13px
--cn-kpi-paddingcnsettable--nldesign-cn-kpi-padding16px
--cn-kpi-padding-flatcnsettable--nldesign-cn-kpi-padding-flat8px
--cn-kpi-radiuscnsettable--nldesign-cn-kpi-radiusvar(--border-radius-large, 10px)
--cn-kpi-section-title-sizecnsettable--nldesign-cn-kpi-section-title-size14px
--cn-kpi-stack-gapcnsettable--nldesign-cn-kpi-stack-gap12px
--cn-kpi-title-sizecnsettable--nldesign-cn-kpi-title-size14px
--cn-kpi-title-weightcnsettable--nldesign-cn-kpi-title-weight600
--cn-kpi-value-linecnsettable--nldesign-cn-kpi-value-line1.1
--cn-kpi-value-sizecnsettable--nldesign-cn-kpi-value-size1.75rem
--cn-kpi-value-size-compactcnsettable--nldesign-cn-kpi-value-size-compact1.25rem
--cn-kpi-value-size-stackedcnsettable--nldesign-cn-kpi-value-size-stacked2rem
--cn-kpi-value-text-sizecnsettable--nldesign-cn-kpi-value-text-size
--cn-kpi-value-weightcnsettable--nldesign-cn-kpi-value-weight700
--cn-links-widget-colscnexcluded
--cn-quicklinks-icon-sizecnexcluded
--cn-sidebar-tab-min-widthcnsettable--nldesign-cn-sidebar-tab-min-width
--cn-spacing-mcnsettable--nldesign-cn-spacing-m
--cn-table-cell-max-widthcnsettable--nldesign-cn-table-cell-max-width
--cn-tile-bgcnexcluded
--cn-tile-textcnexcluded
--cn-widget-icon-colorcnexcluded
--cn-xwiki-accentcnsettable--nldesign-cn-xwiki-accent
--cn-xwiki-accent-softcnsettable--nldesign-cn-xwiki-accent-soft

Excluded classes​

  • icon (484): image URLs, not design tokens.
  • runtime (36): written by Nextcloud's JavaScript at render time. --avatar-size, --border, --color-circle-icon, --color-content, --default-cell-min-width, --dp-arrow-left, --dp-menu-width, --dp-overlay-height, --fallback-icon, --footer-height, --fullwidth, --hcm-highligh-filter, --height, --margin, --mouse-pos-x, --mouse-pos-y, --preview-arrow-offset, --progress-bar-height, --progressBar-end-offset, --progressBar-percent, --row-height, --scale-factor, --slideshow-duration, --systemtag-color, --text-editor-max-width, --thumbnail-height, --thumbnail-width, --tpl-glow-1, --tpl-glow-2, --tpl-glow-3, --tpl-glow-4, --tpl-preview-height, --value, --viewer-container-height, --widget-full-width, --width
  • unread (10): declared by Nextcloud, read by nothing it ships. --app-sidebar-offset, --cell-min-width, --dp-calendar-wrap-padding, --dp-menu-appear-transition-timing, --dp-success-color-disabled, --members-list-gap, --mermaid-alt-font-family, --vs-disabled-color, --vs-dropdown-option-bg, --vs-state-disabled-controls-color