CSS variables

Generated from projects/ikilote/magma/src/assets/styles/css-var.css by npm run generate:css-doc. Do not edit by hand: your changes would be overwritten.

555 variables across 48 sections.

How to override

Every variable is a plain CSS custom property, so any selector with higher specificity wins. The most common cases:

/* Retint the whole library */
body {
    --primaryH: 280;
}

/* Override one component, globally */
body {
    --dialog-background: #fdfdfd;
}

/* Override one instance only */
.my-dialog {
    --dialog-background: #fdfdfd;
}

Light and dark values are set on body / body.light-mode and body.dark-mode respectively; the remaining variables are scope-independent.

Contents

• palettes light · 23
• loader-tile (light) · 1
• palettes dark · 23
• loader-tile (dark) · 1
• palettes · 59
• global · 10
• semantic layer · 11
• generic · 3
• context-menu · 12
• ellipsis-button · 4
• vision-theme · 25
• default button · 17
• primary button · 12
• warn button · 12
• link · 3
• breadcrumbs · 8
• chip · 14
• dialog · 7
• cookie-consent · 15
• input · 24
• item content-box · 12
• color-picker · 14
• datetime-picker · 15
• tabs · 6
• scrollbar · 3
• message types · 25
• message inline · 10
• message floating · 6
• grid · 1
• block · 5
• card · 9
• table · 5
• tooltip · 5
• badge · 21
• page · 5
• expansion-panel · 3
• walkthrough · 1
• click-enter · 4
• spinner · 1
• loader · 5
• loader-tile (base) · 1
• contrib-calendar · 10
• avatar · 10
• window · 22
• tag-list · 13
• status · 20
• light-dark · 15
• select2 · 24

palettes light

Lightness steps for light mode. Set on body / body.light-mode.

Scope: body.light-mode.

Variable	Default	Description
--primaryH	190	Base hue (0-360) for the whole palette. This is the single knob to retint the library.
--primaryS	15%	PrimaryS.
--primarySsoft	5%	PrimarySsoft.
--neutralH	0	NeutralH.
--neutralS	0%	NeutralS.
--alertH	0	AlertH.
--warnH	15	WarnH.
--successH	120	SuccessH.
--L000	100%	L000.
--L010	95%	L010.
--L025	90%	L025.
--L050	85%	L050.
--L100	75%	L100.
--L200	65%	L200.
--L300	55%	L300.
--L400	45%	L400.
--L500	35%	L500.
--L600	25%	L600.
--L700	20%	L700.
--L800	10%	L800.
--L900	5%	L900.
--L950	2%	L950.
--L990	0%	L990.

loader-tile (light)

Loader tile skeleton (mg-loader-tile, mg-loader-block).

Scope: body.light-mode.

Variable	Default	Description
--loading-item-animation-color	0 0 0	Loading item animation color.

palettes dark

Lightness steps for dark mode. Set on body.dark-mode.

Scope: body.dark-mode.

Variable	Default	Description
--primaryH	210	Base hue (0-360) for the whole palette. This is the single knob to retint the library.
--primaryS	15%	PrimaryS.
--primarySsoft	5%	PrimarySsoft.
--neutralH	0	NeutralH.
--neutralS	0%	NeutralS.
--alertH	0	AlertH.
--warnH	15	WarnH.
--successH	120	SuccessH.
--L000	0%	L000.
--L010	3%	L010.
--L025	4%	L025.
--L050	5%	L050.
--L100	6%	L100.
--L200	10%	L200.
--L300	20%	L300.
--L400	35%	L400.
--L500	40%	L500.
--L600	50%	L600.
--L700	60%	L700.
--L800	70%	L800.
--L900	80%	L900.
--L950	95%	L950.
--L990	100%	L990.

loader-tile (dark)

Loader tile skeleton (mg-loader-tile, mg-loader-block).

Scope: body.dark-mode.

Variable	Default	Description
--loading-item-animation-color	255 255 255	Loading item animation color.

palettes

Color palette derived from a single hue plus lightness steps. Override --primaryH to retint the whole library.

Variable	Default	Description
--primary050	hsl(var(--primaryH), var(--primarySsoft), var(--L050))	Primary050.
--primary100	hsl(var(--primaryH), var(--primaryS), var(--L100))	Primary100.
--primary200	hsl(var(--primaryH), var(--primaryS), var(--L200))	Primary200.
--primary300	hsl(var(--primaryH), var(--primaryS), var(--L300))	Primary300.
--primary400	hsl(var(--primaryH), var(--primaryS), var(--L400))	Primary400.
--primary500	hsl(var(--primaryH), var(--primaryS), var(--L500))	Primary500.
--primary600	hsl(var(--primaryH), var(--primaryS), var(--L600))	Primary600.
--primary700	hsl(var(--primaryH), var(--primaryS), var(--L700))	Primary700.
--primary800	hsl(var(--primaryH), var(--primaryS), var(--L800))	Primary800.
--primary900	hsl(var(--primaryH), var(--primaryS), var(--L900))	Primary900.
--primary950	hsl(var(--primaryH), var(--primarySsoft), var(--L950))	Primary950.
--neutral000	hsl(var(--neutralH), var(--neutralS), var(--L000))	Neutral000.
--neutral010	hsl(var(--neutralH), var(--neutralS), var(--L010))	Neutral010.
--neutral025	hsl(var(--neutralH), var(--neutralS), var(--L025))	Neutral025.
--neutral050	hsl(var(--neutralH), var(--neutralS), var(--L050))	Neutral050.
--neutral100	hsl(var(--neutralH), var(--neutralS), var(--L100))	Neutral100.
--neutral200	hsl(var(--neutralH), var(--neutralS), var(--L200))	Neutral200.
--neutral300	hsl(var(--neutralH), var(--neutralS), var(--L300))	Neutral300.
--neutral400	hsl(var(--neutralH), var(--neutralS), var(--L400))	Neutral400.
--neutral500	hsl(var(--neutralH), var(--neutralS), var(--L500))	Neutral500.
--neutral600	hsl(var(--neutralH), var(--neutralS), var(--L600))	Neutral600.
--neutral700	hsl(var(--neutralH), var(--neutralS), var(--L700))	Neutral700.
--neutral800	hsl(var(--neutralH), var(--neutralS), var(--L800))	Neutral800.
--neutral900	hsl(var(--neutralH), var(--neutralS), var(--L900))	Neutral900.
--neutral950	hsl(var(--neutralH), var(--neutralS), var(--L950))	Neutral950.
--neutral990	hsl(var(--neutralH), var(--neutralS), var(--L990))	Neutral990.
--alert050	hsl(var(--alertH), 5%, var(--L050))	Alert050.
--alert100	hsl(var(--alertH), 15%, var(--L100))	Alert100.
--alert200	hsl(var(--alertH), 25%, var(--L200))	Alert200.
--alert300	hsl(var(--alertH), 45%, var(--L300))	Alert300.
--alert400	hsl(var(--alertH), 55%, var(--L400))	Alert400.
--alert500	hsl(var(--alertH), 75%, var(--L500))	Alert500.
--alert600	hsl(var(--alertH), 65%, var(--L600))	Alert600.
--alert700	hsl(var(--alertH), 55%, var(--L700))	Alert700.
--alert800	hsl(var(--alertH), 45%, var(--L800))	Alert800.
--alert900	hsl(var(--alertH), 25%, var(--L900))	Alert900.
--alert950	hsl(var(--alertH), 5%, var(--L950))	Alert950.
--warn050	hsl(var(--warnH), 5%, var(--L050))	Warn050.
--warn100	hsl(var(--warnH), 15%, var(--L100))	Warn100.
--warn200	hsl(var(--warnH), 25%, var(--L200))	Warn200.
--warn300	hsl(var(--warnH), 45%, var(--L300))	Warn300.
--warn400	hsl(var(--warnH), 55%, var(--L400))	Warn400.
--warn500	hsl(var(--warnH), 75%, var(--L500))	Warn500.
--warn600	hsl(var(--warnH), 65%, var(--L600))	Warn600.
--warn700	hsl(var(--warnH), 55%, var(--L700))	Warn700.
--warn800	hsl(var(--warnH), 45%, var(--L800))	Warn800.
--warn900	hsl(var(--warnH), 25%, var(--L900))	Warn900.
--warn950	hsl(var(--warnH), 5%, var(--L950))	Warn950.
--success050	hsl(var(--successH), 5%, var(--L050))	Success050.
--success100	hsl(var(--successH), 15%, var(--L100))	Success100.
--success200	hsl(var(--successH), 25%, var(--L200))	Success200.
--success300	hsl(var(--successH), 45%, var(--L300))	Success300.
--success400	hsl(var(--successH), 55%, var(--L400))	Success400.
--success500	hsl(var(--successH), 55%, var(--L500))	Success500.
--success600	hsl(var(--successH), 65%, var(--L600))	Success600.
--success700	hsl(var(--successH), 55%, var(--L700))	Success700.
--success800	hsl(var(--successH), 45%, var(--L800))	Success800.
--success900	hsl(var(--successH), 25%, var(--L900))	Success900.
--success950	hsl(var(--successH), 5%, var(--L950))	Success950.

global

Cross-component values.

Variable	Default	Description
--transparency-checkerboard	conic-gradient( #ccc 0.25turn, #aaa 0.25turn 0.5turn, #ccc 0.5turn 0.75turn, #aaa 0.75turn )	Conventional grey checkerboard signalling an alpha channel. Deliberately outside the palette: retinting it would break the "this is transparent" convention. Tile size is set at the usage site.
--background	var(--neutral010)	Background.
--text-color	var(--primary950)	Text color.
--font-family	'Roboto', 'Segoe UI', Geneva, Verdana, sans-serif	Font family.
--font-mono	'Roboto Mono', 'FreeMono', 'Liberation Mono', 'Ubuntu Mono', 'Courier New', 'Droid Sans Mono', Courier, monospace	Font mono.
--font-extra	2.3em	Font extra.
--font-large	1.35em	Font large.
--font-medium	1em	Font medium.
--font-small	0.85em	Font small.
--font-very-small	0.75em	Font very small.

semantic layer

Variable	Default	Description
--color-surface	var(--neutral010)	Color surface.
--color-surface-raised	var(--neutral050)	Color surface raised.
--color-surface-sunken	var(--neutral100)	Color surface sunken.
--color-on-surface	var(--neutral990)	Color on surface.
--color-on-surface-muted	var(--neutral600)	Color on surface muted.
--color-border	var(--neutral500)	Color border.
--color-border-strong	var(--neutral700)	Color border strong.
--color-primary	var(--primary500)	Color primary.
--color-on-primary	var(--neutral000)	Color on primary.
--color-primary-hover	var(--primary700)	Color primary hover.
--color-focus-ring	var(--primary500)	Color focus ring.

generic

Variable	Default	Description
--separator-opacity	0.2	Separator opacity.
--separator-margin	16px 0	Separator margin.
--separator-color	var(--color-border)	Separator color.

context-menu

Context menu container and items (context-menu).

Variable	Default	Description
--context-menu-background	var(--color-surface-raised)	Context menu background.
--context-menu-border	none	Context menu border.
--context-menu-border-color	transparent	Context menu border color.
--context-menu-box-shadow	2px 2px 5px #0005	Context menu box shadow.
--context-menu-border-radius	6px	Context menu border radius.
--context-menu-item-background	var(--primary300)	Context menu item background.
--context-menu-item-background-hover	var(--primary400)	Context menu item background hover.
--context-menu-item-gap	10px	Context menu item gap.
--context-menu-item-margin	2px	Context menu item margin.
--context-menu-item-radius	4px	Context menu item radius.
--context-menu-item-padding	10px 20px 10px 10px	Context menu item padding.
--context-menu-item-shadow-color	#0008	Context menu item shadow color.

ellipsis-button

Ellipsis (kebab) button and its dropdown list (mg-ellipsis-button).

Variable	Default	Description
--ellipsis-list-shadow-color	#0005	Ellipsis list shadow color.
--context-button-list-background	var(--color-surface-raised)	Context button list background.
--ellipsis-item-background	var(--primary300)	Ellipsis item background.
--ellipsis-item-hover-background	var(--primary400)	Ellipsis item hover background.

vision-theme

Variable	Default	Description
--vision-theme-button-border-width	1px	Vision theme button border width.
--vision-theme-button-border-radius	20px	Vision theme button border radius.
--vision-theme-button-gap	6px	Vision theme button gap.
--vision-theme-button-padding	4px 10px	Vision theme button padding.
--vision-theme-button-compact-padding	4px 8px	Vision theme button compact padding.
--vision-theme-label-font-size	var(--font-small)	Vision theme label font size.
--vision-theme-icon-size	18px	Vision theme icon size.
--vision-theme-focus-outline-width	2px	Vision theme focus outline width.
--vision-theme-focus-outline-offset	2px	Vision theme focus outline offset.
--vision-theme-list-box-shadow	2px 2px 8px var(--ellipsis-list-shadow-color)	Vision theme list box shadow.
--vision-theme-list-border-radius	6px	Vision theme list border radius.
--vision-theme-list-padding	2px	Vision theme list padding.
--vision-theme-list-min-width	220px	Vision theme list min width.
--vision-theme-list-separator-margin	2px 0	Vision theme list separator margin.
--vision-theme-item-margin	2px	Vision theme item margin.
--vision-theme-item-border-radius	4px	Vision theme item border radius.
--vision-theme-item-padding	10px 20px 10px 10px	Vision theme item padding.
--vision-theme-item-gap	8px	Vision theme item gap.
--vision-theme-item-content-gap	2px	Vision theme item content gap.
--vision-theme-item-background	var(--primary050)	Vision theme item background.
--vision-theme-item-hover-background	var(--ellipsis-item-hover-background)	Vision theme item hover background.
--vision-theme-item-active-font-weight	600	Vision theme item active font weight.
--vision-theme-item-desc-opacity	0.7	Vision theme item desc opacity.
--vision-theme-clear-btn-opacity	0.8	Vision theme clear btn opacity.
--vision-theme-checkbox-size	26px	Vision theme checkbox size.

default button

Default button variant (button, .mg-button).

Variable	Default	Description
--button-disabled-opacity	0.25	Button disabled opacity.
--button-default-border-radius	5px	Button default border radius.
--button-default-border-width	2px	Button default border width.
--button-default-padding	10px	Button default padding.
--button-default-margin	0 5px	Button default margin.
--button-default-border-color	var(--neutral300)	Button default border color.
--button-default-background	var(--color-surface-raised)	Button default background.
--button-default-box-shadow	0 0 1px var(--neutral500)	Button default box shadow.
--button-default-color	var(--neutral950)	Button default color.
--button-default-hover-border-color	var(--neutral100)	Button default hover border color.
--button-default-hover-background	var(--neutral300)	Button default hover background.
--button-default-hover-box-shadow	0 0 6px var(--neutral300)	Button default hover box shadow.
--button-default-focus-border-color	var(--input-focus-color)	Button default focus border color.
--button-default-active-border-color	var(--neutral100)	Button default active border color.
--button-default-active-background	var(--neutral400)	Button default active background.
--button-default-active-box-shadow	0 0 6px var(--neutral500)	Button default active box shadow.
--button-default-active-padding	var(--button-default-padding)	Button default active padding.

primary button

Primary button variant.

Variable	Default	Description
--button-primary-border-color	var(--primary300)	Button primary border color.
--button-primary-background	var(--color-primary)	Button primary background.
--button-primary-box-shadow	0 0 1px var(--primary050)	Button primary box shadow.
--button-primary-color	var(--primary950)	Button primary color.
--button-primary-hover-border-color	var(--primary100)	Button primary hover border color.
--button-primary-hover-background	var(--color-primary-hover)	Button primary hover background.
--button-primary-hover-box-shadow	0 0 6px var(--primary300)	Button primary hover box shadow.
--button-primary-focus-border-color	var(--input-focus-color)	Button primary focus border color.
--button-primary-active-border-color	var(--primary100)	Button primary active border color.
--button-primary-active-background	var(--primary500)	Button primary active background.
--button-primary-active-box-shadow	0 0 6px var(--primary500)	Button primary active box shadow.
--button-primary-active-padding	var(--button-default-padding)	Button primary active padding.

warn button

Warning / destructive button variant.

Variable	Default	Description
--button-warn-border-color	var(--alert300)	Button warn border color.
--button-warn-background	var(--alert200)	Button warn background.
--button-warn-box-shadow	0 0 1px var(--alert050)	Button warn box shadow.
--button-warn-color	var(--alert950)	Button warn color.
--button-warn-hover-border-color	var(--alert100)	Button warn hover border color.
--button-warn-hover-background	var(--alert400)	Button warn hover background.
--button-warn-hover-box-shadow	0 0 6px var(--alert300)	Button warn hover box shadow.
--button-warn-focus-border-color	var(--alert500)	Button warn focus border color.
--button-warn-active-border-color	var(--alert100)	Button warn active border color.
--button-warn-active-background	var(--alert500)	Button warn active background.
--button-warn-active-box-shadow	0 0 6px var(--alert500)	Button warn active box shadow.
--button-warn-active-padding	var(--button-default-padding)	Button warn active padding.

link

Anchor and text-link styling.

Variable	Default	Description
--link-color	var(--primary700)	Link color.
--link-hover-color	var(--neutral990)	Link hover color.
--link-focus-border-color	var(--input-focus-color)	Link focus border color.

breadcrumbs

Variable	Default	Description
--breadcrumbs-gap	8px	Breadcrumbs gap.
--breadcrumbs-font-size	0.9em	Breadcrumbs font size.
--breadcrumbs-separator	'/'	Breadcrumbs separator.
--breadcrumbs-separator-color	var(--neutral600)	Breadcrumbs separator color.
--breadcrumbs-link-color	var(--link-color)	Breadcrumbs link color.
--breadcrumbs-link-hover-color	var(--link-hover-color)	Breadcrumbs link hover color.
--breadcrumbs-active-color	var(--neutral950)	Breadcrumbs active color.
--breadcrumbs-active-font-weight	600	Breadcrumbs active font weight.

chip

Variable	Default	Description
--chip-background	var(--color-surface-raised)	Chip background.
--chip-color	var(--text-color)	Chip color.
--chip-border-color	var(--color-border)	Chip border color.
--chip-border-radius	16px	Chip border radius.
--chip-padding	6px 14px	Chip padding.
--chip-font-size	var(--font-small)	Chip font size.
--chip-hover-background	var(--color-primary)	Chip hover background.
--chip-hover-color	var(--color-on-primary)	Chip hover color.
--chip-hover-border-color	var(--color-primary-hover)	Chip hover border color.
--chip-hover-padding	var(--chip-padding)	Chip hover padding.
--chip-active-background	var(--color-primary-hover)	Chip active background.
--chip-active-color	var(--color-on-primary)	Chip active color.
--chip-active-border-color	var(--color-primary-hover)	Chip active border color.
--chip-active-padding	var(--chip-padding)	Chip active padding.

dialog

Modal dialog (mg-dialog).

Variable	Default	Description
--dialog-backdrop-background	color-mix(in hsl, var(--primary050) 60%, transparent)	Dialog backdrop background.
--dialog-backdrop-background-no-filter	color-mix(in hsl, var(--primary050) 70%, transparent)	Dialog backdrop background no filter.
--dialog-background	var(--color-surface-raised)	Dialog background.
--dialog-shadow-color	color-mix(in hsl, var(--color-surface-raised) 30%, transparent)	Dialog shadow color.
--dialog-close-shadow-color	var(--neutral500)	Dialog close shadow color.
--dialog-close-background	var(--neutral300)	Dialog close background.
--dialog-close-background-hover	var(--neutral500)	Dialog close background hover.

cookie-consent

Variable	Default	Description
--cookie-consent-banner-background	var(--dialog-background)	Cookie consent banner background.
--cookie-consent-banner-padding	20px	Cookie consent banner padding.
--cookie-consent-actions-gap	8px	Cookie consent actions gap.
--cookie-consent-presentation-margin	0 0 12px	Cookie consent presentation margin.
--cookie-consent-separator-opacity	0.2	Cookie consent separator opacity.
--cookie-consent-separator-margin	16px 0	Cookie consent separator margin.
--cookie-consent-separator-color	var(--color-border)	Cookie consent separator color.
--cookie-consent-option-gap	4px 20px	Cookie consent option gap.
--cookie-consent-option-margin-bottom	16px	Cookie consent option margin bottom.
--cookie-consent-option-toggle-width	80px	Cookie consent option toggle width.
--cookie-consent-option-label-font-weight	600	Cookie consent option label font weight.
--cookie-consent-option-desc-color	var(--neutral700)	Cookie consent option desc color.
--cookie-consent-option-desc-font-size	var(--font-small)	Cookie consent option desc font size.
--cookie-consent-dialog-actions-margin-top	16px	Cookie consent dialog actions margin top.
--cookie-consent-dialog-actions-padding-bottom	16px	Cookie consent dialog actions padding bottom.

input

Shared input styling: text, number, date, password, select, textarea, checkbox, radio, range.

Variable	Default	Description
--input-border-color	var(--color-border)	Input border color.
--input-background	var(--primary050)	Input background.
--input-background-affix	var(--primary300)	Input background affix.
--input-background-transparent	color-mix(in hsl, var(--input-background) 60%, transparent)	Input background transparent.
--input-item-color	var(--primary400)	Input item color.
--input-item-active-color	var(--primary700)	Input item active color.
--input-focus-color	var(--neutral950)	Input focus color.
--input-focus-border-color	var(--input-focus-color)	Input focus border color.
--input-color-shadow	var(--neutral050)	Input color shadow.
--input-checked-color	var(--primary500)	Input checked color.
--input-textarea-min-height	33px	Input textarea min height.
--input-textarea-max-height	500px	Input textarea max height.
--input-textarea-limit-size	16px	Input textarea limit size.
--input-textarea-limit-background	var(--neutral400)	Input textarea limit background.
--input-textarea-limit-color	var(--primary600)	Input textarea limit color.
--input-textarea-limit-border	1px solid var(--neutral400)	Input textarea limit border.
--input-error-color	var(--alert700)	Input error color.
--input-border-radius	3px	Input border radius.
--input-border-width	1px	Input border width.
--input-padding	5px 3px	Input padding.
--input-font-size	16px	Input font size.
--input-line-height	21px	Input line height.
--input-mark-top	-2px	Input mark top.
--input-placeholder-color	var(--color-on-surface-muted)	Input placeholder color.

item content-box

Content-box and tile layouts.

Variable	Default	Description
--content-title-text-color	var(--neutral990)	Content title text color.
--content-box-border	var(--neutral300)	Content box border.
--content-box-background	var(--neutral200)	Content box background.
--content-box-color	var(--neutral100)	Content box color.
--content-box-text-background	#000000bf	Content box text background.
--content-box-over-text	#fff	Content box over text.
--tile-add-file-background	var(--neutral200)	Tile add file background.
--tile-add-file-color	var(--neutral700)	Tile add file color.
--tile-info-text-color	#fff	Tile info text color.
--tile-info-border-color	#fff	Tile info border color.
--tile-info-border-color2	#000	Tile info border color2.
--tile-info-background	#fff5	Tile info background.

color-picker

Color picker (color-picker), including the HSL gradient zone and the palette grid.

Variable	Default	Description
--color-picker-embedded-background	var(--color-surface-raised)	Color picker embedded background.
--color-picker-embedded-shadow-color	#0005	Color picker embedded shadow color.
--color-picker-color-view-border	1px solid var(--neutral990)	Color picker color view border.
--color-picker-color-view-background	var(--background)	Color picker color view background.
--color-picker-color-cursor-zone-outline	1px solid var(--neutral990)	Color picker color cursor zone outline.
--color-picker-color-cursor-zone-offset	-3px	Color picker color cursor zone offset.
--color-picker-color-range-track-border	1px solid var(--neutral990)	Color picker color range track border.
--color-picker-color-range-thumb-border	1px solid var(--neutral990)	Color picker color range thumb border.
--color-picker-color-palette-item-by-line	9	Color picker color palette item by line.
--color-picker-color-palette-item-height	30px	Color picker color palette item height.
--color-picker-color-palette-item-border	1px solid var(--neutral990)	Color picker color palette item border.
--color-picker-color-palette-item-border-hover	1px solid var(--neutral500)	Color picker color palette item border hover.
--color-picker-color-palette-item-outline-selected	3px solid #040404	Color picker color palette item outline selected.
--color-picker-color-palette-item-outline-offset	-1px	Color picker color palette item outline offset.

datetime-picker

Date and time picker (datetime-picker).

Variable	Default	Description
--datetime-picker-embedded-background	var(--color-surface-raised)	Datetime picker embedded background.
--datetime-picker-embedded-shadow-color	#0005	Datetime picker embedded shadow color.
--datetime-picker-head-background	var(--neutral100)	Datetime picker head background.
--datetime-picker-day-color	var(--neutral500)	Datetime picker day color.
--datetime-picker-day-background	var(--neutral100)	Datetime picker day background.
--datetime-picker-day-current-month-background	var(--neutral200)	Datetime picker day current month background.
--datetime-picker-day-current-month-color	var(--neutral800)	Datetime picker day current month color.
--datetime-picker-day-weekend-current-month-text	var(--primary600)	Datetime picker day weekend current month text.
--datetime-picker-day-today-background	var(--neutral300)	Datetime picker day today background.
--datetime-picker-day-today-text	var(--primary700)	Datetime picker day today text.
--datetime-picker-day-selected-background	var(--primary500)	Datetime picker day selected background.
--datetime-picker-day-selected-color	var(--neutral000)	Datetime picker day selected color.
--datetime-picker-day-selectable-background	var(--primary400)	Datetime picker day selectable background.
--datetime-picker-day-selectable-color	var(--neutral950)	Datetime picker day selectable color.
--datetime-picker-day-disabled-background	transparent	Datetime picker day disabled background.

tabs

Tab list and panels (mg-tabs, mg-tab-title, mg-tab-content).

Variable	Default	Description
--tabs-line-color	var(--neutral400)	Tabs line color.
--tab-border-color	var(--neutral400)	Tab border color.
--tab-text-color	var(--color-on-surface-muted)	Tab text color.
--tab-select-border-color	var(--neutral600)	Tab select border color.
--tab-text-border-color	var(--color-on-surface)	Tab text border color.
--tab-hover-border-color	var(--neutral950)	Tab hover border color.

scrollbar

Custom scrollbar appearance.

Variable	Default	Description
--scrollbar-color	var(--color-primary)	Scrollbar color.
--scrollbar-color-hover	var(--primary600)	Scrollbar color hover.
--scrollbar-width	thin	Scrollbar width.

message types

Variable	Default	Description
--info-message-color	var(--neutral900)	Info message color.
--info-message-border-color	var(--neutral700)	Info message border color.
--info-message-background	var(--neutral200)	Info message background.
--info-message-box-shadow-color	var(--neutral000)	Info message box shadow color.
--info-message-progress-background	var(--neutral900)	Info message progress background.
--success-message-color	var(--success900)	Success message color.
--success-message-border-color	var(--success500)	Success message border color.
--success-message-background	var(--success200)	Success message background.
--success-message-box-shadow-color	var(--neutral000)	Success message box shadow color.
--success-message-progress-background	var(--success500)	Success message progress background.
--warn-message-color	var(--warn900)	Warn message color.
--warn-message-border-color	var(--warn500)	Warn message border color.
--warn-message-background	var(--warn200)	Warn message background.
--warn-message-box-shadow-color	var(--neutral000)	Warn message box shadow color.
--warn-message-progress-background	var(--warn500)	Warn message progress background.
--error-message-color	var(--alert900)	Error message color.
--error-message-border-color	var(--alert500)	Error message border color.
--error-message-background	var(--alert200)	Error message background.
--error-message-box-shadow-color	var(--neutral000)	Error message box shadow color.
--error-message-progress-background	var(--alert500)	Error message progress background.
--tip-message-color	var(--primary900)	Tip message color.
--tip-message-border-color	var(--primary500)	Tip message border color.
--tip-message-background	var(--primary200)	Tip message background.
--tip-message-box-shadow-color	var(--neutral000)	Tip message box shadow color.
--tip-message-progress-background	var(--primary500)	Tip message progress background.

message inline

Variable	Default	Description
--message-color	var(--primary950)	Message color.
--message-border-color	var(--primary500)	Message border color.
--message-background	var(--primary050)	Message background.
--message-border-width	1px	Message border width.
--message-border-style	solid	Message border style.
--message-radius	3px	Message radius.
--message-shadow	0 0 12px 2px var(--neutral200)	Message shadow.
--message-margin	12px	Message margin.
--message-gap	12px	Message gap.
--message-marquee-size	20px	Message marquee size.

message floating

Variable	Default	Description
--floating-message-border-color	var(--info-message-border-color)	Floating message border color.
--floating-message-background	var(--info-message-background)	Floating message background.
--floating-message-box-shadow-color	var(--info-message-box-shadow-color)	Floating message box shadow color.
--floating-message-progress-background	var(--info-message-progress-background)	Floating message progress background.
--info-message-top	50px	Info message top.
--info-message-max-width	300px	Info message max width.

grid

Grid helper classes.

Variable	Default	Description
--grid-cell-padding	6px	Grid cell padding.

block

Block component (mg-block) and its variants.

Variable	Default	Description
--block-radius	3px	Block radius.
--block-border	1px solid var(--primary500)	Block border.
--block-shadow	0 0 24px 2px var(--primary200)	Block shadow.
--block-margin	12px	Block margin.
--block-background	var(--color-surface)	Block background.

card

Variable	Default	Description
--card-shadow	var(--block-shadow)	Card shadow.
--card-border	var(--block-border)	Card border.
--card-radius	var(--block-radius)	Card radius.
--card-background	var(--block-background)	Card background.
--card-padding	16px	Card padding.
--card-ratio	1 / 3	Card ratio.
--card-img-height	100px	Card img height.
--card-zoom-scale	1.1	Card zoom scale.
--card-zoom-duration	0.3s	Card zoom duration.

table

Table component (table[mg]).

Variable	Default	Description
--table-header-background	var(--color-surface-sunken)	Table header background.
--table-header-background-hover	var(--neutral200)	Table header background hover.
--table-header-sortable-cell	var(--neutral300)	Table header sortable cell.
--table-line-hover-background	var(--neutral300)	Table line hover background.
--table-selected-text	var(--alert800)	Table selected text.

tooltip

Tooltip directive ([mgTooltip]).

Variable	Default	Description
--tooltip-text-color	var(--color-on-surface)	Tooltip text color.
--tooltip-background	var(--color-surface-raised)	Tooltip background.
--tooltip-shadow-color	var(--neutral000)	Tooltip shadow color.
--tooltip-border-color	var(--color-border)	Tooltip border color.
--tooltip-cursor	help	Tooltip cursor.

badge

Variable	Default	Description
--badge-radius	12px	Badge radius.
--badge-padding	2px 10px	Badge padding.
--badge-small-font-size	var(--font-very-small)	Badge small font size.
--badge-small-padding	1px 6px	Badge small padding.
--badge-large-font-size	var(--font-small)	Badge large font size.
--badge-large-padding	2px 10px	Badge large padding.
--badge-font-size-small	var(--font-very-small)	Badge font size small.
--badge-neutral-background	var(--neutral300)	Badge neutral background.
--badge-neutral-color	contrast-color(var(--neutral300))	Badge neutral color.
--badge-primary-background	var(--primary500)	Badge primary background.
--badge-primary-color	contrast-color(var(--primary500))	Badge primary color.
--badge-success-background	var(--success500)	Badge success background.
--badge-success-color	contrast-color(var(--success500))	Badge success color.
--badge-warning-background	var(--warn500)	Badge warning background.
--badge-warning-color	contrast-color(var(--warn500))	Badge warning color.
--badge-alert-background	var(--alert500)	Badge alert background.
--badge-alert-color	contrast-color(var(--alert500))	Badge alert color.
--badge-info-background	var(--primary200)	Badge info background.
--badge-info-color	contrast-color(var(--primary200))	Badge info color.
--badge-background-label-dark	black 50%	Badge background label dark.
--badge-background-label-light	white 50%	Badge background label light.

page

Page-level layout helpers.

Variable	Default	Description
--page-item-text-color	var(--neutral900)	Page item text color.
--page-item-border-color	var(--neutral500)	Page item border color.
--page-item-current-test-color	var(--primary700)	Page item current test color.
--page-item-current-background	var(--primary200)	Page item current background.
--page-item-hover-background	var(--neutral300)	Page item hover background.

expansion-panel

Variable	Default	Description
--expansion-panel-padding	5px	Expansion panel padding.
--expansion-panel-arrow-size	20px	Expansion panel arrow size.
--expansion-panel-transition-duration	0.5s	Expansion panel transition duration.

walkthrough

Walkthrough / product tour (mg-walkthrough).

Variable	Default	Description
--walkthrough-backdrop	rgba(0, 0, 0, 0.7)	Walkthrough backdrop.

click-enter

Click-enter directive ([clickEnter]) focus and hover feedback.

Variable	Default	Description
--click-enter-hover-background	var(--color-surface-raised)	Click enter hover background.
--click-enter-hover-cursor	pointer	Click enter hover cursor.
--click-enter-hover-filter	brightness(0.8)	Click enter hover filter.
--click-enter-block-hover-background	var(--neutral200)	Click enter block hover background.

spinner

Spinner component (mg-spinner).

Variable	Default	Description
--spinner-color	var(--color-primary)	Spinner color.

loader

Loader component (mg-loader) and its progress bar.

Variable	Default	Description
--loader-background	color-mix(in hsl, var(--neutral050) 23%, transparent)	Loader background.
--loader-text-color	var(--color-on-surface)	Loader text color.
--loader-text-shadow-color	var(--neutral000)	Loader text shadow color.
--loader-progress-background	#0b0b0b80	Loader progress background.
--loader-progress-bar-background	#fff	Loader progress bar background.

loader-tile (base)

Loader tile skeleton (mg-loader-tile, mg-loader-block).

Variable	Default	Description
--loading-item-color	var(--primary200)	Loading item color.

contrib-calendar

Contribution calendar (mg-contrib-calendar).

Variable	Default	Description
--contrib-calendar-day-font-size	12px	Contrib calendar day font size.
--contrib-calendar-day-background	var(--color-surface-raised)	Contrib calendar day background.
--contrib-calendar-month-font-size	12px	Contrib calendar month font size.
--contrib-calendar-tile-size	15px	Contrib calendar tile size.
--contrib-calendar-tile-color-even	var(--neutral100)	Contrib calendar tile color even.
--contrib-calendar-tile-color-odd	var(--neutral200)	Contrib calendar tile color odd.
--contrib-calendar-tile-color-lvl1	var(--success300)	Contrib calendar tile color lvl1.
--contrib-calendar-tile-color-lvl2	var(--success400)	Contrib calendar tile color lvl2.
--contrib-calendar-tile-color-lvl3	var(--success500)	Contrib calendar tile color lvl3.
--contrib-calendar-tile-color-lvl4	var(--success600)	Contrib calendar tile color lvl4.

avatar

Variable	Default	Description
--avatar-radius	50%	Avatar radius.
--avatar-color	var(--primary950)	Avatar color.
--avatar-size-small	28px	Avatar size small.
--avatar-size-medium	40px	Avatar size medium.
--avatar-size-large	56px	Avatar size large.
--avatar-size-extra	80px	Avatar size extra.
--avatar-font-size-small	var(--font-small)	Avatar font size small.
--avatar-font-size-medium	var(--font-medium)	Avatar font size medium.
--avatar-font-size-large	var(--font-large)	Avatar font size large.
--avatar-font-size-extra	var(--font-extra)	Avatar font size extra.

window

Variable	Default	Description
--window-min-width	150px	Window min width.
--window-min-height	150px	Window min height.
--window-background	var(--color-surface-raised)	Window background.
--window-shadow-color	var(--dialog-shadow-color)	Window shadow color.
--window-content-border	none	Window content border.
--window-content-border-color	transparent	Window content border color.
--window-bar-padding	0 0 0 5px	Window bar padding.
--window-bar-height	auto	Window bar height.
--window-bar-color	inherit	Window bar color.
--window-bar-font-weight	normal	Window bar font weight.
--window-bar-button-background	var(--neutral400)	Window bar button background.
--window-bar-button-border	none	Window bar button border.
--window-bar-button-border-color	transparent	Window bar button border color.
--window-bar-button-box-shadow	none	Window bar button box shadow.
--window-bar-button-focus-outline	2px solid var(--neutral900)	Window bar button focus outline.
--window-bar-button-focus-offset	1px	Window bar button focus offset.
--window-bar-button-size	24px	Window bar button size.
--window-bar-button-gap	3px	Window bar button gap.
--window-bar-button-color	var(--neutral950)	Window bar button color.
--window-bar-button-padding	2px	Window bar button padding.
--window-bar-background	var(--neutral300)	Window bar background.
--window-bar-background-active	var(--neutral400)	Window bar background active.

tag-list

Variable	Default	Description
--tag-list-gap	6px	Tag list gap.
--tag-item-radius	15px	Tag item radius.
--tag-item-background	var(--primary100)	Tag item background.
--tag-item-padding	3px 0 3px 10px	Tag item padding.
--tag-item-min-height	26px	Tag item min height.
--tag-item-color	inherit	Tag item color.
--tag-item-font-size	inherit	Tag item font size.
--tag-item-hover-background	var(--primary050)	Tag item hover background.
--tag-item-remove-color	currentColor	Tag item remove color.
--tag-item-remove-color-hover	var(--alert500)	Tag item remove color hover.
--tag-input-border-color	var(--primary100)	Tag input border color.
--tag-input-background	transparent	Tag input background.
--tag-input-focus-border-color	var(--primary300)	Tag input focus border color.

status

Variable	Default	Description
--status-gap	6px	Status gap.
--status-font-size	0.85em	Status font size.
--status-dot-size	8px	Status dot size.
--status-color	var(--text-color)	Status color.
--status-dot-color	currentColor	Status dot color.
--status-success-dot-color	hsl(var(--successH, 120) 60% 40%)	Status success dot color.
--status-success-color	hsl(var(--successH, 120) 60% 30%)	Status success color.
--status-warning-dot-color	hsl(var(--warnH, 15) 80% 50%)	Status warning dot color.
--status-warning-color	hsl(var(--warnH, 15) 80% 35%)	Status warning color.
--status-danger-dot-color	hsl(var(--alertH, 0) 70% 50%)	Status danger dot color.
--status-danger-color	hsl(var(--alertH, 0) 70% 40%)	Status danger color.
--status-info-dot-color	hsl(var(--primaryH, 200) 60% 45%)	Status info dot color.
--status-info-color	hsl(var(--primaryH, 200) 60% 35%)	Status info color.
--status-neutral-dot-color	hsl(var(--neutralH, 0) var(--neutralS, 0%) 50%)	Status neutral dot color.
--status-neutral-color	var(--text-color)	Status neutral color.
--status-offline-dot-color	hsl(var(--neutralH, 0) var(--neutralS, 0%) 65%)	Status offline dot color.
--status-offline-color	hsl(var(--neutralH, 0) var(--neutralS, 0%) 50%)	Status offline color.
--status-pulse-duration	2s	Status pulse duration.
--status-pulse-opacity-max	1	Status pulse opacity max.
--status-pulse-opacity-min	0.4	Status pulse opacity min.

light-dark

Variable	Default	Description
--light-dark-border-color	var(--primary950)	Light dark border color.
--light-dark-gap	5px	Light dark gap.
--light-dark-icon-size	20px	Light dark icon size.
--light-dark-toggle-width	40px	Light dark toggle width.
--light-dark-toggle-height	20px	Light dark toggle height.
--light-dark-toggle-border-radius	20px	Light dark toggle border radius.
--light-dark-thumb-size	16px	Light dark thumb size.
--light-dark-thumb-margin	2px	Light dark thumb margin.
--light-dark-transition-duration	0.5s	Light dark transition duration.
--light-dark-compact-border-radius	20px	Light dark compact border radius.
--light-dark-compact-padding-x	2px	Light dark compact padding x.
--light-dark-compact-height	24px	Light dark compact height.
--light-dark-compact-icon-offset	-48px	Light dark compact icon offset.
--light-dark-focus-outline-width	3px	Light dark focus outline width.
--light-dark-focus-outline-offset	1px	Light dark focus outline offset.

select2

Styling passed through to the ng-select2-component dependency.

Variable	Default	Description
--select2-selection-focus-border-color	var(--input-focus-border-color)	Select2 selection focus border color.
--select2-selection-text-color	var(--text-color)	Select2 selection text color.
--select2-selection-background	var(--input-background)	Select2 selection background.
--select2-selection-border-color	var(--input-border-color)	Select2 selection border color.
--select2-selection-disabled-background	var(--input-background)	Select2 selection disabled background.
--select2-selection-disabled-border-color	var(--input-border-color)	Select2 selection disabled border color.
--select2-single-height	auto	Select2 single height.
--select2-dropdown-background	var(--input-background)	Select2 dropdown background.
--select2-dropdown-border-color	var(--input-border-color)	Select2 dropdown border color.
--select2-option-text-color	var(--text-color)	Select2 option text color.
--select2-option-selected-text-color	var(--text-color)	Select2 option selected text color.
--select2-option-selected-background	var(--primary500)	Select2 option selected background.
--select2-option-highlighted-text-color	var(--text-color)	Select2 option highlighted text color.
--select2-option-highlighted-background	var(--primary400)	Select2 option highlighted background.
--select2-search-border-color	var(--input-border-color)	Select2 search border color.
--select2-search-background	var(--text-color)	Select2 search background.
--select2-selection-line-height	31px	Select2 selection line height.
--select2-selection-readonly-background	var(--input-background)	Select2 selection readonly background.
--select2-selection-choice-line-height	25px	Select2 selection choice line height.
--select2-selection-choice-background	var(--primary300)	Select2 selection choice background.
--select2-selection-choice-border-color	var(--primary500)	Select2 selection choice border color.
--select2-selection-choice-text-color	var(--text-color)	Select2 selection choice text color.
--select2-selection-choice-close-color	var(--primary800)	Select2 selection choice close color.
--select2-selection-choice-hover-close-color	var(--primary950)	Select2 selection choice hover close color.