Directus / @directus/themes / index / rulesToCssVars

Function: rulesToCssVars() ​

rulesToCssVars(rules): Record<string, string | number>

Defined in: packages/themes/src/utils/rules-to-css-vars.ts:7

Parameters ​

rules ​

background? ​

string = ...

backgroundAccent? ​

string = ...

backgroundNormal? ​

string = ...

backgroundSubdued? ​

string = ...

banner? ​

{ art: { foreground: string; }; avatar: { background: string; borderRadius: string; foreground: string; }; background: string; borderRadius: string; headline: { fontFamily: string; fontWeight: string; foreground: string; }; padding: string; subtitle: { fontFamily: string; fontWeight: string; foreground: string; }; title: { fontFamily: string; fontWeight: string; foreground: string; }; } = ...

banner.art? ​

{ foreground: string; } = ...

banner.art.foreground? ​

string = ...

banner.avatar? ​

{ background: string; borderRadius: string; foreground: string; } = ...

banner.avatar.background? ​

string = ...

banner.avatar.borderRadius? ​

string = ...

banner.avatar.foreground? ​

string = ...

banner.background? ​

string = ...

banner.borderRadius? ​

string = ...

banner.headline? ​

{ fontFamily: string; fontWeight: string; foreground: string; } = ...

banner.headline.fontFamily? ​

string = ...

banner.headline.fontWeight? ​

string = ...

banner.headline.foreground? ​

string = ...

banner.padding? ​

string = ...

banner.subtitle? ​

{ fontFamily: string; fontWeight: string; foreground: string; } = ...

banner.subtitle.fontFamily? ​

string = ...

banner.subtitle.fontWeight? ​

string = ...

banner.subtitle.foreground? ​

string = ...

banner.title? ​

{ fontFamily: string; fontWeight: string; foreground: string; } = ...

banner.title.fontFamily? ​

string = ...

banner.title.fontWeight? ​

string = ...

banner.title.foreground? ​

string = ...

borderColor? ​

string = ...

borderColorAccent? ​

string = ...

borderColorSubdued? ​

string = ...

borderRadius? ​

string = ...

borderWidth? ​

string = ...

danger? ​

string = ...

dangerAccent? ​

string = ...

dangerBackground? ​

string = ...

dangerSubdued? ​

string = ...

fonts? ​

{ display: { fontFamily: string; fontWeight: string; }; monospace: { fontFamily: string; fontWeight: string; }; sans: { fontFamily: string; fontWeight: string; }; serif: { fontFamily: string; fontWeight: string; }; } = ...

fonts.display? ​

{ fontFamily: string; fontWeight: string; } = ...

fonts.display.fontFamily? ​

string = ...

fonts.display.fontWeight? ​

string = ...

fonts.monospace? ​

{ fontFamily: string; fontWeight: string; } = ...

fonts.monospace.fontFamily? ​

string = ...

fonts.monospace.fontWeight? ​

string = ...

fonts.sans? ​

{ fontFamily: string; fontWeight: string; } = ...

fonts.sans.fontFamily? ​

string = ...

fonts.sans.fontWeight? ​

string = ...

fonts.serif? ​

{ fontFamily: string; fontWeight: string; } = ...

fonts.serif.fontFamily? ​

string = ...

fonts.serif.fontWeight? ​

string = ...

foreground? ​

string = ...

foregroundAccent? ​

string = ...

foregroundSubdued? ​

string = ...

form? ​

{ columnGap: string; field: { input: { background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; label: { fontFamily: string; fontWeight: string; foreground: string; }; }; rowGap: string; } = FormRules

form.columnGap? ​

string = ...

form.field? ​

{ input: { background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; label: { fontFamily: string; fontWeight: string; foreground: string; }; } = ...

form.field.input? ​

{ background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; } = ...

form.field.input.background? ​

string = ...

form.field.input.backgroundSubdued? ​

string = ...

form.field.input.borderColor? ​

string = ...

form.field.input.borderColorFocus? ​

string = ...

form.field.input.borderColorHover? ​

string = ...

form.field.input.boxShadow? ​

string = ...

form.field.input.boxShadowFocus? ​

string = ...

form.field.input.boxShadowHover? ​

string = ...

form.field.input.foreground? ​

string = ...

form.field.input.foregroundSubdued? ​

string = ...

form.field.input.height? ​

string = ...

form.field.input.padding? ​

string = ...

form.field.label? ​

{ fontFamily: string; fontWeight: string; foreground: string; } = ...

form.field.label.fontFamily? ​

string = ...

form.field.label.fontWeight? ​

string = ...

form.field.label.foreground? ​

string = ...

form.rowGap? ​

string = ...

header? ​

{ background: string; borderColor: string; borderWidth: string; boxShadow: string; headline: { fontFamily: string; foreground: string; }; title: { fontFamily: string; fontWeight: string; foreground: string; }; } = ...

header.background? ​

string = ...

header.borderColor? ​

string = ...

header.borderWidth? ​

string = ...

header.boxShadow? ​

string = ...

header.headline? ​

{ fontFamily: string; foreground: string; } = ...

header.headline.fontFamily? ​

string = ...

header.headline.foreground? ​

string = ...

header.title? ​

{ fontFamily: string; fontWeight: string; foreground: string; } = ...

header.title.fontFamily? ​

string = ...

header.title.fontWeight? ​

string = ...

header.title.foreground? ​

string = ...

navigation? ​

{ background: string; backgroundAccent: string; borderColor: string; borderWidth: string; list: { background: string; backgroundActive: string; backgroundHover: string; divider: { borderColor: string; borderWidth: string; }; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; }; modules: { background: string; borderColor: string; borderWidth: string; button: { background: string; backgroundActive: string; backgroundHover: string; foreground: string; foregroundActive: string; foregroundHover: string; }; }; project: { background: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; }; } = ...

navigation.background? ​

string = ...

navigation.backgroundAccent? ​

string = ...

navigation.borderColor? ​

string = ...

navigation.borderWidth? ​

string = ...

navigation.list? ​

{ background: string; backgroundActive: string; backgroundHover: string; divider: { borderColor: string; borderWidth: string; }; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; } = ...

navigation.list.background? ​

string = ...

navigation.list.backgroundActive? ​

string = ...

navigation.list.backgroundHover? ​

string = ...

navigation.list.divider? ​

{ borderColor: string; borderWidth: string; } = ...

navigation.list.divider.borderColor? ​

string = ...

navigation.list.divider.borderWidth? ​

string = ...

navigation.list.fontFamily? ​

string = ...

navigation.list.foreground? ​

string = ...

navigation.list.foregroundActive? ​

string = ...

navigation.list.foregroundHover? ​

string = ...

navigation.list.icon? ​

{ foreground: string; foregroundActive: string; foregroundHover: string; } = ...

navigation.list.icon.foreground? ​

string = ...

navigation.list.icon.foregroundActive? ​

string = ...

navigation.list.icon.foregroundHover? ​

string = ...

navigation.modules? ​

{ background: string; borderColor: string; borderWidth: string; button: { background: string; backgroundActive: string; backgroundHover: string; foreground: string; foregroundActive: string; foregroundHover: string; }; } = ...

navigation.modules.background? ​

string = ...

navigation.modules.borderColor? ​

string = ...

navigation.modules.borderWidth? ​

string = ...

navigation.modules.button? ​

{ background: string; backgroundActive: string; backgroundHover: string; foreground: string; foregroundActive: string; foregroundHover: string; } = ...

navigation.modules.button.background? ​

string = ...

navigation.modules.button.backgroundActive? ​

string = ...

navigation.modules.button.backgroundHover? ​

string = ...

navigation.modules.button.foreground? ​

string = ...

navigation.modules.button.foregroundActive? ​

string = ...

navigation.modules.button.foregroundHover? ​

string = ...

navigation.project? ​

{ background: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; } = ...

navigation.project.background? ​

string = ...

navigation.project.borderColor? ​

string = ...

navigation.project.borderWidth? ​

string = ...

navigation.project.fontFamily? ​

string = ...

navigation.project.foreground? ​

string = ...

popover? ​

{ menu: { background: string; borderRadius: string; boxShadow: string; }; } = ...

popover.menu? ​

{ background: string; borderRadius: string; boxShadow: string; } = ...

popover.menu.background? ​

string = ...

popover.menu.borderRadius? ​

string = ...

popover.menu.boxShadow? ​

string = ...

primary? ​

string = ...

primaryAccent? ​

string = ...

primaryBackground? ​

string = ...

primarySubdued? ​

string = ...

public? ​

{ art: { background: string; primary: string; secondary: string; speed: string; }; background: string; foreground: string; foregroundAccent: string; form: { columnGap: string; field: { input: { background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; label: { fontFamily: string; fontWeight: string; foreground: string; }; }; rowGap: string; }; } = ...

public.art? ​

{ background: string; primary: string; secondary: string; speed: string; } = ...

public.art.background? ​

string = ...

public.art.primary? ​

string = ...

public.art.secondary? ​

string = ...

public.art.speed? ​

string = ...

public.background? ​

string = ...

public.foreground? ​

string = ...

public.foregroundAccent? ​

string = ...

public.form? ​

{ columnGap: string; field: { input: { background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; label: { fontFamily: string; fontWeight: string; foreground: string; }; }; rowGap: string; } = FormRules

public.form.columnGap? ​

string = ...

public.form.field? ​

{ input: { background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; label: { fontFamily: string; fontWeight: string; foreground: string; }; } = ...

public.form.field.input? ​

{ background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; } = ...

public.form.field.input.background? ​

string = ...

public.form.field.input.backgroundSubdued? ​

string = ...

public.form.field.input.borderColor? ​

string = ...

public.form.field.input.borderColorFocus? ​

string = ...

public.form.field.input.borderColorHover? ​

string = ...

public.form.field.input.boxShadow? ​

string = ...

public.form.field.input.boxShadowFocus? ​

string = ...

public.form.field.input.boxShadowHover? ​

string = ...

public.form.field.input.foreground? ​

string = ...

public.form.field.input.foregroundSubdued? ​

string = ...

public.form.field.input.height? ​

string = ...

public.form.field.input.padding? ​

string = ...

public.form.field.label? ​

{ fontFamily: string; fontWeight: string; foreground: string; } = ...

public.form.field.label.fontFamily? ​

string = ...

public.form.field.label.fontWeight? ​

string = ...

public.form.field.label.foreground? ​

string = ...

public.form.rowGap? ​

string = ...

secondary? ​

string = ...

secondaryAccent? ​

string = ...

secondaryBackground? ​

string = ...

secondarySubdued? ​

string = ...

sidebar? ​

{ background: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; section: { form: { columnGap: string; field: { input: { background: ...; backgroundSubdued: ...; borderColor: ...; borderColorFocus: ...; borderColorHover: ...; boxShadow: ...; boxShadowFocus: ...; boxShadowHover: ...; foreground: ...; foregroundSubdued: ...; height: ...; padding: ...; }; label: { fontFamily: ...; fontWeight: ...; foreground: ...; }; }; rowGap: string; }; toggle: { background: string; backgroundActive: string; backgroundHover: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; }; }; } = ...

sidebar.background? ​

string = ...

sidebar.borderColor? ​

string = ...

sidebar.borderWidth? ​

string = ...

sidebar.fontFamily? ​

string = ...

sidebar.foreground? ​

string = ...

sidebar.section? ​

{ form: { columnGap: string; field: { input: { background: ...; backgroundSubdued: ...; borderColor: ...; borderColorFocus: ...; borderColorHover: ...; boxShadow: ...; boxShadowFocus: ...; boxShadowHover: ...; foreground: ...; foregroundSubdued: ...; height: ...; padding: ...; }; label: { fontFamily: ...; fontWeight: ...; foreground: ...; }; }; rowGap: string; }; toggle: { background: string; backgroundActive: string; backgroundHover: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; }; } = ...

sidebar.section.form? ​

{ columnGap: string; field: { input: { background: ...; backgroundSubdued: ...; borderColor: ...; borderColorFocus: ...; borderColorHover: ...; boxShadow: ...; boxShadowFocus: ...; boxShadowHover: ...; foreground: ...; foregroundSubdued: ...; height: ...; padding: ...; }; label: { fontFamily: ...; fontWeight: ...; foreground: ...; }; }; rowGap: string; } = FormRules

sidebar.section.form.columnGap? ​

string = ...

sidebar.section.form.field? ​

{ input: { background: ...; backgroundSubdued: ...; borderColor: ...; borderColorFocus: ...; borderColorHover: ...; boxShadow: ...; boxShadowFocus: ...; boxShadowHover: ...; foreground: ...; foregroundSubdued: ...; height: ...; padding: ...; }; label: { fontFamily: ...; fontWeight: ...; foreground: ...; }; } = ...

sidebar.section.form.field.input? ​

{ background: ...; backgroundSubdued: ...; borderColor: ...; borderColorFocus: ...; borderColorHover: ...; boxShadow: ...; boxShadowFocus: ...; boxShadowHover: ...; foreground: ...; foregroundSubdued: ...; height: ...; padding: ...; } = ...

sidebar.section.form.field.input.background? ​

... = ...

sidebar.section.form.field.input.backgroundSubdued? ​

... = ...

sidebar.section.form.field.input.borderColor? ​

... = ...

sidebar.section.form.field.input.borderColorFocus? ​

... = ...

sidebar.section.form.field.input.borderColorHover? ​

... = ...

sidebar.section.form.field.input.boxShadow? ​

... = ...

sidebar.section.form.field.input.boxShadowFocus? ​

... = ...

sidebar.section.form.field.input.boxShadowHover? ​

... = ...

sidebar.section.form.field.input.foreground? ​

... = ...

sidebar.section.form.field.input.foregroundSubdued? ​

... = ...

sidebar.section.form.field.input.height? ​

... = ...

sidebar.section.form.field.input.padding? ​

... = ...

sidebar.section.form.field.label? ​

{ fontFamily: ...; fontWeight: ...; foreground: ...; } = ...

sidebar.section.form.field.label.fontFamily? ​

... = ...

sidebar.section.form.field.label.fontWeight? ​

... = ...

sidebar.section.form.field.label.foreground? ​

... = ...

sidebar.section.form.rowGap? ​

string = ...

sidebar.section.toggle? ​

{ background: string; backgroundActive: string; backgroundHover: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; } = ...

sidebar.section.toggle.background? ​

string = ...

sidebar.section.toggle.backgroundActive? ​

string = ...

sidebar.section.toggle.backgroundHover? ​

string = ...

sidebar.section.toggle.borderColor? ​

string = ...

sidebar.section.toggle.borderWidth? ​

string = ...

sidebar.section.toggle.fontFamily? ​

string = ...

sidebar.section.toggle.foreground? ​

string = ...

sidebar.section.toggle.foregroundActive? ​

string = ...

sidebar.section.toggle.foregroundHover? ​

string = ...

sidebar.section.toggle.icon? ​

{ foreground: string; foregroundActive: string; foregroundHover: string; } = ...

sidebar.section.toggle.icon.foreground? ​

string = ...

sidebar.section.toggle.icon.foregroundActive? ​

string = ...

sidebar.section.toggle.icon.foregroundHover? ​

string = ...

success? ​

string = ...

successAccent? ​

string = ...

successBackground? ​

string = ...

successSubdued? ​

string = ...

warning? ​

string = ...

warningAccent? ​

string = ...

warningBackground? ​

string = ...

warningSubdued? ​

string = ...

Returns ​

Record<string, string | number>