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>