Skip to content
On this page

Directus Cloud

Everything you need to start building. Provisioned in 90 seconds. Starting at $15/month.

Get Started

This is an auto-generated document to support extension builders understand the internal packages they can utilize. To find our written guides, tutorials, and API/SDK reference, check out our main docs .

Directus / @directus/themes / index / rulesToCssVars

Function: rulesToCssVars() ​

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

Parameters ​

• rules

• rules.background?: string= undefined

• rules.backgroundAccent?: string= undefined

• rules.backgroundNormal?: string= undefined

• rules.backgroundSubdued?: string= undefined

• rules.banner?= undefined

• rules.banner.art?= undefined

• rules.banner.art.foreground?: string= undefined

• rules.banner.avatar?= undefined

• rules.banner.avatar.background?: string= undefined

• rules.banner.avatar.borderRadius?: string= undefined

• rules.banner.avatar.foreground?: string= undefined

• rules.banner.background?: string= undefined

• rules.banner.borderRadius?: string= undefined

• rules.banner.headline?= undefined

• rules.banner.headline.fontFamily?: string= undefined

• rules.banner.headline.fontWeight?: string= undefined

• rules.banner.headline.foreground?: string= undefined

• rules.banner.padding?: string= undefined

• rules.banner.subtitle?= undefined

• rules.banner.subtitle.fontFamily?: string= undefined

• rules.banner.subtitle.fontWeight?: string= undefined

• rules.banner.subtitle.foreground?: string= undefined

• rules.banner.title?= undefined

• rules.banner.title.fontFamily?: string= undefined

• rules.banner.title.fontWeight?: string= undefined

• rules.banner.title.foreground?: string= undefined

• rules.borderColor?: string= undefined

• rules.borderColorAccent?: string= undefined

• rules.borderColorSubdued?: string= undefined

• rules.borderRadius?: string= undefined

• rules.borderWidth?: string= undefined

• rules.danger?: string= undefined

• rules.dangerAccent?: string= undefined

• rules.dangerBackground?: string= undefined

• rules.dangerSubdued?: string= undefined

• rules.fonts?= undefined

• rules.fonts.display?= undefined

• rules.fonts.display.fontFamily?: string= undefined

• rules.fonts.display.fontWeight?: string= undefined

• rules.fonts.monospace?= undefined

• rules.fonts.monospace.fontFamily?: string= undefined

• rules.fonts.monospace.fontWeight?: string= undefined

• rules.fonts.sans?= undefined

• rules.fonts.sans.fontFamily?: string= undefined

• rules.fonts.sans.fontWeight?: string= undefined

• rules.fonts.serif?= undefined

• rules.fonts.serif.fontFamily?: string= undefined

• rules.fonts.serif.fontWeight?: string= undefined

• rules.foreground?: string= undefined

• rules.foregroundAccent?: string= undefined

• rules.foregroundSubdued?: string= undefined

• rules.form?= FormRules

• rules.form.columnGap?: string= undefined

• rules.form.field?= undefined

• rules.form.field.input?= undefined

• rules.form.field.input.background?: string= undefined

• rules.form.field.input.backgroundSubdued?: string= undefined

• rules.form.field.input.borderColor?: string= undefined

• rules.form.field.input.borderColorFocus?: string= undefined

• rules.form.field.input.borderColorHover?: string= undefined

• rules.form.field.input.boxShadow?: string= undefined

• rules.form.field.input.boxShadowFocus?: string= undefined

• rules.form.field.input.boxShadowHover?: string= undefined

• rules.form.field.input.foreground?: string= undefined

• rules.form.field.input.foregroundSubdued?: string= undefined

• rules.form.field.input.height?: string= undefined

• rules.form.field.input.padding?: string= undefined

• rules.form.field.label?= undefined

• rules.form.field.label.fontFamily?: string= undefined

• rules.form.field.label.fontWeight?: string= undefined

• rules.form.field.label.foreground?: string= undefined

• rules.form.rowGap?: string= undefined

• rules.header?= undefined

• rules.header.background?: string= undefined

• rules.header.borderColor?: string= undefined

• rules.header.borderWidth?: string= undefined

• rules.header.boxShadow?: string= undefined

• rules.header.headline?= undefined

• rules.header.headline.fontFamily?: string= undefined

• rules.header.headline.foreground?: string= undefined

• rules.header.title?= undefined

• rules.header.title.fontFamily?: string= undefined

• rules.header.title.fontWeight?: string= undefined

• rules.header.title.foreground?: string= undefined

• rules.navigation?= undefined

• rules.navigation.background?: string= undefined

• rules.navigation.backgroundAccent?: string= undefined

• rules.navigation.borderColor?: string= undefined

• rules.navigation.borderWidth?: string= undefined

• rules.navigation.list?= undefined

• rules.navigation.list.background?: string= undefined

• rules.navigation.list.backgroundActive?: string= undefined

• rules.navigation.list.backgroundHover?: string= undefined

• rules.navigation.list.divider?= undefined

• rules.navigation.list.divider.borderColor?: string= undefined

• rules.navigation.list.divider.borderWidth?: string= undefined

• rules.navigation.list.fontFamily?: string= undefined

• rules.navigation.list.foreground?: string= undefined

• rules.navigation.list.foregroundActive?: string= undefined

• rules.navigation.list.foregroundHover?: string= undefined

• rules.navigation.list.icon?= undefined

• rules.navigation.list.icon.foreground?: string= undefined

• rules.navigation.list.icon.foregroundActive?: string= undefined

• rules.navigation.list.icon.foregroundHover?: string= undefined

• rules.navigation.modules?= undefined

• rules.navigation.modules.background?: string= undefined

• rules.navigation.modules.borderColor?: string= undefined

• rules.navigation.modules.borderWidth?: string= undefined

• rules.navigation.modules.button?= undefined

• rules.navigation.modules.button.background?: string= undefined

• rules.navigation.modules.button.backgroundActive?: string= undefined

• rules.navigation.modules.button.backgroundHover?: string= undefined

• rules.navigation.modules.button.foreground?: string= undefined

• rules.navigation.modules.button.foregroundActive?: string= undefined

• rules.navigation.modules.button.foregroundHover?: string= undefined

• rules.navigation.project?= undefined

• rules.navigation.project.background?: string= undefined

• rules.navigation.project.borderColor?: string= undefined

• rules.navigation.project.borderWidth?: string= undefined

• rules.navigation.project.fontFamily?: string= undefined

• rules.navigation.project.foreground?: string= undefined

• rules.popover?= undefined

• rules.popover.menu?= undefined

• rules.popover.menu.background?: string= undefined

• rules.popover.menu.borderRadius?: string= undefined

• rules.popover.menu.boxShadow?: string= undefined

• rules.primary?: string= undefined

• rules.primaryAccent?: string= undefined

• rules.primaryBackground?: string= undefined

• rules.primarySubdued?: string= undefined

• rules.public?= undefined

• rules.public.art?= undefined

• rules.public.art.background?: string= undefined

• rules.public.art.primary?: string= undefined

• rules.public.art.secondary?: string= undefined

• rules.public.art.speed?: string= undefined

• rules.public.background?: string= undefined

• rules.public.foreground?: string= undefined

• rules.public.foregroundAccent?: string= undefined

• rules.public.form?= FormRules

• rules.public.form.columnGap?: string= undefined

• rules.public.form.field?= undefined

• rules.public.form.field.input?= undefined

• rules.public.form.field.input.background?: string= undefined

• rules.public.form.field.input.backgroundSubdued?: string= undefined

• rules.public.form.field.input.borderColor?: string= undefined

• rules.public.form.field.input.borderColorFocus?: string= undefined

• rules.public.form.field.input.borderColorHover?: string= undefined

• rules.public.form.field.input.boxShadow?: string= undefined

• rules.public.form.field.input.boxShadowFocus?: string= undefined

• rules.public.form.field.input.boxShadowHover?: string= undefined

• rules.public.form.field.input.foreground?: string= undefined

• rules.public.form.field.input.foregroundSubdued?: string= undefined

• rules.public.form.field.input.height?: string= undefined

• rules.public.form.field.input.padding?: string= undefined

• rules.public.form.field.label?= undefined

• rules.public.form.field.label.fontFamily?: string= undefined

• rules.public.form.field.label.fontWeight?: string= undefined

• rules.public.form.field.label.foreground?: string= undefined

• rules.public.form.rowGap?: string= undefined

• rules.secondary?: string= undefined

• rules.secondaryAccent?: string= undefined

• rules.secondaryBackground?: string= undefined

• rules.secondarySubdued?: string= undefined

• rules.sidebar?= undefined

• rules.sidebar.background?: string= undefined

• rules.sidebar.borderColor?: string= undefined

• rules.sidebar.borderWidth?: string= undefined

• rules.sidebar.fontFamily?: string= undefined

• rules.sidebar.foreground?: string= undefined

• rules.sidebar.section?= undefined

• rules.sidebar.section.form?= FormRules

• rules.sidebar.section.form.columnGap?: string= undefined

• rules.sidebar.section.form.field?= undefined

• rules.sidebar.section.form.field.input?= undefined

• rules.sidebar.section.form.field.input.background?: ...= undefined

• rules.sidebar.section.form.field.input.backgroundSubdued?: ...= undefined

• rules.sidebar.section.form.field.input.borderColor?: ...= undefined

• rules.sidebar.section.form.field.input.borderColorFocus?: ...= undefined

• rules.sidebar.section.form.field.input.borderColorHover?: ...= undefined

• rules.sidebar.section.form.field.input.boxShadow?: ...= undefined

• rules.sidebar.section.form.field.input.boxShadowFocus?: ...= undefined

• rules.sidebar.section.form.field.input.boxShadowHover?: ...= undefined

• rules.sidebar.section.form.field.input.foreground?: ...= undefined

• rules.sidebar.section.form.field.input.foregroundSubdued?: ...= undefined

• rules.sidebar.section.form.field.input.height?: ...= undefined

• rules.sidebar.section.form.field.input.padding?: ...= undefined

• rules.sidebar.section.form.field.label?= undefined

• rules.sidebar.section.form.field.label.fontFamily?: ...= undefined

• rules.sidebar.section.form.field.label.fontWeight?: ...= undefined

• rules.sidebar.section.form.field.label.foreground?: ...= undefined

• rules.sidebar.section.form.rowGap?: string= undefined

• rules.sidebar.section.toggle?= undefined

• rules.sidebar.section.toggle.background?: string= undefined

• rules.sidebar.section.toggle.backgroundActive?: string= undefined

• rules.sidebar.section.toggle.backgroundHover?: string= undefined

• rules.sidebar.section.toggle.borderColor?: string= undefined

• rules.sidebar.section.toggle.borderWidth?: string= undefined

• rules.sidebar.section.toggle.fontFamily?: string= undefined

• rules.sidebar.section.toggle.foreground?: string= undefined

• rules.sidebar.section.toggle.foregroundActive?: string= undefined

• rules.sidebar.section.toggle.foregroundHover?: string= undefined

• rules.sidebar.section.toggle.icon?= undefined

• rules.sidebar.section.toggle.icon.foreground?: string= undefined

• rules.sidebar.section.toggle.icon.foregroundActive?: string= undefined

• rules.sidebar.section.toggle.icon.foregroundHover?: string= undefined

• rules.success?: string= undefined

• rules.successAccent?: string= undefined

• rules.successBackground?: string= undefined

• rules.successSubdued?: string= undefined

• rules.warning?: string= undefined

• rules.warningAccent?: string= undefined

• rules.warningBackground?: string= undefined

• rules.warningSubdued?: string= undefined

Returns ​

Record<string, string | number>

Source ​

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