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>