Directus / @directus/themes / index / rulesToCssVars
Function: rulesToCssVars() ​
rulesToCssVars(
rules):Record<string,string|number>
Parameters ​
• rules
• rules.background?: string = ...
• rules.backgroundAccent?: string = ...
• rules.backgroundNormal?: string = ...
• rules.backgroundSubdued?: string = ...
• rules.banner? = ...
• rules.banner.art? = ...
• rules.banner.art.foreground?: string = ...
• rules.banner.avatar? = ...
• rules.banner.avatar.background?: string = ...
• rules.banner.avatar.borderRadius?: string = ...
• rules.banner.avatar.foreground?: string = ...
• rules.banner.background?: string = ...
• rules.banner.borderRadius?: string = ...
• rules.banner.headline? = ...
• rules.banner.headline.fontFamily?: string = ...
• rules.banner.headline.fontWeight?: string = ...
• rules.banner.headline.foreground?: string = ...
• rules.banner.padding?: string = ...
• rules.banner.subtitle? = ...
• rules.banner.subtitle.fontFamily?: string = ...
• rules.banner.subtitle.fontWeight?: string = ...
• rules.banner.subtitle.foreground?: string = ...
• rules.banner.title? = ...
• rules.banner.title.fontFamily?: string = ...
• rules.banner.title.fontWeight?: string = ...
• rules.banner.title.foreground?: string = ...
• rules.borderColor?: string = ...
• rules.borderColorAccent?: string = ...
• rules.borderColorSubdued?: string = ...
• rules.borderRadius?: string = ...
• rules.borderWidth?: string = ...
• rules.danger?: string = ...
• rules.dangerAccent?: string = ...
• rules.dangerBackground?: string = ...
• rules.dangerSubdued?: string = ...
• rules.fonts? = ...
• rules.fonts.display? = ...
• rules.fonts.display.fontFamily?: string = ...
• rules.fonts.display.fontWeight?: string = ...
• rules.fonts.monospace? = ...
• rules.fonts.monospace.fontFamily?: string = ...
• rules.fonts.monospace.fontWeight?: string = ...
• rules.fonts.sans? = ...
• rules.fonts.sans.fontFamily?: string = ...
• rules.fonts.sans.fontWeight?: string = ...
• rules.fonts.serif? = ...
• rules.fonts.serif.fontFamily?: string = ...
• rules.fonts.serif.fontWeight?: string = ...
• rules.foreground?: string = ...
• rules.foregroundAccent?: string = ...
• rules.foregroundSubdued?: string = ...
• rules.form? = FormRules
• rules.form.columnGap?: string = ...
• rules.form.field? = ...
• rules.form.field.input? = ...
• rules.form.field.input.background?: string = ...
• rules.form.field.input.backgroundSubdued?: string = ...
• rules.form.field.input.borderColor?: string = ...
• rules.form.field.input.borderColorFocus?: string = ...
• rules.form.field.input.borderColorHover?: string = ...
• rules.form.field.input.boxShadow?: string = ...
• rules.form.field.input.boxShadowFocus?: string = ...
• rules.form.field.input.boxShadowHover?: string = ...
• rules.form.field.input.foreground?: string = ...
• rules.form.field.input.foregroundSubdued?: string = ...
• rules.form.field.input.height?: string = ...
• rules.form.field.input.padding?: string = ...
• rules.form.field.label? = ...
• rules.form.field.label.fontFamily?: string = ...
• rules.form.field.label.fontWeight?: string = ...
• rules.form.field.label.foreground?: string = ...
• rules.form.rowGap?: string = ...
• rules.header? = ...
• rules.header.background?: string = ...
• rules.header.borderColor?: string = ...
• rules.header.borderWidth?: string = ...
• rules.header.boxShadow?: string = ...
• rules.header.headline? = ...
• rules.header.headline.fontFamily?: string = ...
• rules.header.headline.foreground?: string = ...
• rules.header.title? = ...
• rules.header.title.fontFamily?: string = ...
• rules.header.title.fontWeight?: string = ...
• rules.header.title.foreground?: string = ...
• rules.navigation? = ...
• rules.navigation.background?: string = ...
• rules.navigation.backgroundAccent?: string = ...
• rules.navigation.borderColor?: string = ...
• rules.navigation.borderWidth?: string = ...
• rules.navigation.list? = ...
• rules.navigation.list.background?: string = ...
• rules.navigation.list.backgroundActive?: string = ...
• rules.navigation.list.backgroundHover?: string = ...
• rules.navigation.list.divider? = ...
• rules.navigation.list.divider.borderColor?: string = ...
• rules.navigation.list.divider.borderWidth?: string = ...
• rules.navigation.list.fontFamily?: string = ...
• rules.navigation.list.foreground?: string = ...
• rules.navigation.list.foregroundActive?: string = ...
• rules.navigation.list.foregroundHover?: string = ...
• rules.navigation.list.icon? = ...
• rules.navigation.list.icon.foreground?: string = ...
• rules.navigation.list.icon.foregroundActive?: string = ...
• rules.navigation.list.icon.foregroundHover?: string = ...
• rules.navigation.modules? = ...
• rules.navigation.modules.background?: string = ...
• rules.navigation.modules.borderColor?: string = ...
• rules.navigation.modules.borderWidth?: string = ...
• rules.navigation.modules.button? = ...
• rules.navigation.modules.button.background?: string = ...
• rules.navigation.modules.button.backgroundActive?: string = ...
• rules.navigation.modules.button.backgroundHover?: string = ...
• rules.navigation.modules.button.foreground?: string = ...
• rules.navigation.modules.button.foregroundActive?: string = ...
• rules.navigation.modules.button.foregroundHover?: string = ...
• rules.navigation.project? = ...
• rules.navigation.project.background?: string = ...
• rules.navigation.project.borderColor?: string = ...
• rules.navigation.project.borderWidth?: string = ...
• rules.navigation.project.fontFamily?: string = ...
• rules.navigation.project.foreground?: string = ...
• rules.popover? = ...
• rules.popover.menu? = ...
• rules.popover.menu.background?: string = ...
• rules.popover.menu.borderRadius?: string = ...
• rules.popover.menu.boxShadow?: string = ...
• rules.primary?: string = ...
• rules.primaryAccent?: string = ...
• rules.primaryBackground?: string = ...
• rules.primarySubdued?: string = ...
• rules.public? = ...
• rules.public.art? = ...
• rules.public.art.background?: string = ...
• rules.public.art.primary?: string = ...
• rules.public.art.secondary?: string = ...
• rules.public.art.speed?: string = ...
• rules.public.background?: string = ...
• rules.public.foreground?: string = ...
• rules.public.foregroundAccent?: string = ...
• rules.public.form? = FormRules
• rules.public.form.columnGap?: string = ...
• rules.public.form.field? = ...
• rules.public.form.field.input? = ...
• rules.public.form.field.input.background?: string = ...
• rules.public.form.field.input.backgroundSubdued?: string = ...
• rules.public.form.field.input.borderColor?: string = ...
• rules.public.form.field.input.borderColorFocus?: string = ...
• rules.public.form.field.input.borderColorHover?: string = ...
• rules.public.form.field.input.boxShadow?: string = ...
• rules.public.form.field.input.boxShadowFocus?: string = ...
• rules.public.form.field.input.boxShadowHover?: string = ...
• rules.public.form.field.input.foreground?: string = ...
• rules.public.form.field.input.foregroundSubdued?: string = ...
• rules.public.form.field.input.height?: string = ...
• rules.public.form.field.input.padding?: string = ...
• rules.public.form.field.label? = ...
• rules.public.form.field.label.fontFamily?: string = ...
• rules.public.form.field.label.fontWeight?: string = ...
• rules.public.form.field.label.foreground?: string = ...
• rules.public.form.rowGap?: string = ...
• rules.secondary?: string = ...
• rules.secondaryAccent?: string = ...
• rules.secondaryBackground?: string = ...
• rules.secondarySubdued?: string = ...
• rules.sidebar? = ...
• rules.sidebar.background?: string = ...
• rules.sidebar.borderColor?: string = ...
• rules.sidebar.borderWidth?: string = ...
• rules.sidebar.fontFamily?: string = ...
• rules.sidebar.foreground?: string = ...
• rules.sidebar.section? = ...
• rules.sidebar.section.form? = FormRules
• rules.sidebar.section.form.columnGap?: string = ...
• rules.sidebar.section.form.field? = ...
• rules.sidebar.section.form.field.input? = ...
• rules.sidebar.section.form.field.input.background?: ... = ...
• rules.sidebar.section.form.field.input.backgroundSubdued?: ... = ...
• rules.sidebar.section.form.field.input.borderColor?: ... = ...
• rules.sidebar.section.form.field.input.borderColorFocus?: ... = ...
• rules.sidebar.section.form.field.input.borderColorHover?: ... = ...
• rules.sidebar.section.form.field.input.boxShadow?: ... = ...
• rules.sidebar.section.form.field.input.boxShadowFocus?: ... = ...
• rules.sidebar.section.form.field.input.boxShadowHover?: ... = ...
• rules.sidebar.section.form.field.input.foreground?: ... = ...
• rules.sidebar.section.form.field.input.foregroundSubdued?: ... = ...
• rules.sidebar.section.form.field.input.height?: ... = ...
• rules.sidebar.section.form.field.input.padding?: ... = ...
• rules.sidebar.section.form.field.label? = ...
• rules.sidebar.section.form.field.label.fontFamily?: ... = ...
• rules.sidebar.section.form.field.label.fontWeight?: ... = ...
• rules.sidebar.section.form.field.label.foreground?: ... = ...
• rules.sidebar.section.form.rowGap?: string = ...
• rules.sidebar.section.toggle? = ...
• rules.sidebar.section.toggle.background?: string = ...
• rules.sidebar.section.toggle.backgroundActive?: string = ...
• rules.sidebar.section.toggle.backgroundHover?: string = ...
• rules.sidebar.section.toggle.borderColor?: string = ...
• rules.sidebar.section.toggle.borderWidth?: string = ...
• rules.sidebar.section.toggle.fontFamily?: string = ...
• rules.sidebar.section.toggle.foreground?: string = ...
• rules.sidebar.section.toggle.foregroundActive?: string = ...
• rules.sidebar.section.toggle.foregroundHover?: string = ...
• rules.sidebar.section.toggle.icon? = ...
• rules.sidebar.section.toggle.icon.foreground?: string = ...
• rules.sidebar.section.toggle.icon.foregroundActive?: string = ...
• rules.sidebar.section.toggle.icon.foregroundHover?: string = ...
• rules.success?: string = ...
• rules.successAccent?: string = ...
• rules.successBackground?: string = ...
• rules.successSubdued?: string = ...
• rules.warning?: string = ...
• rules.warningAccent?: string = ...
• rules.warningBackground?: string = ...
• rules.warningSubdued?: string = ...
Returns ​
Record<string, string | number>