Skip to content
On this page

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: Object

rules.background?: string= undefined

rules.backgroundAccent?: string= undefined

rules.backgroundNormal?: string= undefined

rules.backgroundSubdued?: 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?: Object= undefined

rules.fonts.display?: Object= undefined

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

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

rules.fonts.monospace?: Object= undefined

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

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

rules.fonts.sans?: Object= undefined

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

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

rules.fonts.serif?: Object= 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?: Object= FormRules

rules.form.columnGap?: string= undefined

rules.form.field?: Object= undefined

rules.form.field.input?: Object= 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?: Object= 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?: Object= undefined

rules.header.background?: string= undefined

rules.header.borderColor?: string= undefined

rules.header.borderWidth?: string= undefined

rules.header.boxShadow?: string= undefined

rules.header.headline?: Object= undefined

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

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

rules.header.title?: Object= undefined

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

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

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

rules.navigation?: Object= undefined

rules.navigation.background?: string= undefined

rules.navigation.backgroundAccent?: string= undefined

rules.navigation.borderColor?: string= undefined

rules.navigation.borderWidth?: string= undefined

rules.navigation.list?: Object= undefined

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

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

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

rules.navigation.list.divider?: Object= 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?: Object= 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?: Object= undefined

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

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

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

rules.navigation.modules.button?: Object= 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?: Object= 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?: Object= undefined

rules.popover.menu?: Object= 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?: Object= undefined

rules.public.art?: Object= 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?: Object= FormRules

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

rules.public.form.field?: Object= undefined

rules.public.form.field.input?: Object= 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?: Object= 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?: Object= 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?: Object= undefined

rules.sidebar.section.form?: Object= FormRules

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

rules.sidebar.section.form.field?: Object= undefined

rules.sidebar.section.form.field.input?: Object= undefined

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

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

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

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

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

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

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

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

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

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

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

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

rules.sidebar.section.form.field.label?: Object= undefined

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

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

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

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

rules.sidebar.section.toggle?: Object= 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?: Object= 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