Theme
  • Light
  • Dark

CSS variable

Theme variable is essential when you need to customize or create your theme or design systems. normally you will want to change it value but add more variables and generate more atomic classed is possible too Learn more about customization.

Nomimono uses most CSS custom properties. You don't need any build setup. You can change the CSS custom properties in the CSS file or the runtime.

Color, Typography and Spacing is the most important things that you will need to change it value to create your theme. below

Color

For regular use cases, color is the only CSS custom property you need to change/override to create your theme. Learn more about customization.

Custom property Default value
--hsl-primary
background-color: hsl(var(--hsl-primary))
For primary color text and background
--hsl-primary-active
background-color: hsl(var(--hsl-primary-active))
--hsl-primary-content
background-color: hsl(var(--hsl-primary-content))
--hsl-secondary
background-color: hsl(var(--hsl-secondary))
--hsl-secondary-active
background-color: hsl(var(--hsl-secondary-active))
--hsl-secondary-content
background-color: hsl(var(--hsl-secondary-content))
--hsl-base-100
background-color: hsl(var(--hsl-base-100))
--hsl-base-200
background-color: hsl(var(--hsl-base-200))
--hsl-base-300
background-color: hsl(var(--hsl-base-300))
--hsl-base-400
background-color: hsl(var(--hsl-base-400))
--hsl-line
background-color: hsl(var(--hsl-line))
--hsl-content
background-color: hsl(var(--hsl-content))
--hsl-content-inv
background-color: hsl(var(--hsl-content-inv))
--hsl-positive
background-color: hsl(var(--hsl-positive))
--hsl-positive-content
background-color: hsl(var(--hsl-positive-content))
--hsl-negative
background-color: hsl(var(--hsl-negative))
--hsl-negative-content
background-color: hsl(var(--hsl-negative-content))
--hsl-warning
background-color: hsl(var(--hsl-warning))
--hsl-warning-content
background-color: hsl(var(--hsl-warning-content))
--hsl-info
background-color: hsl(var(--hsl-info))
--hsl-info-content
background-color: hsl(var(--hsl-info-content))
--hsl-black
background-color: hsl(var(--hsl-black))
--hsl-white
background-color: hsl(var(--hsl-white))
Typography

These are the CSS custom properties related to design systems' typography (font family, font size). Usually, you may want to change the font-family for your website.

Custom property Default value
--ffml-primary
-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
Default font-family
--ffml-secondary
-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
Can be use in element that need different font, eg. label, header
--fs-1
0.75rem (12px)
--fs-2
0.875rem (14px)
--fs-3
0.9375rem (15px)
--fs-4
1rem (16px)
--fs-5
1.125rem (18px)
--fs-6
1.25rem (20px)
--fs-7
1.5rem (24px)
--fs-8
1.75rem (28px)
--fs-9
2rem (32px)
--fs-10
2.25rem (36px)
--fs-11
2.5rem (40px)
--fs-12
3rem (48px)
--fs-13
3.5rem (56px)
--fs-14
4.5rem (72px)
Spacing

These are the CSS custom properties related to design systems' spacing, specifically used for margin, padding, top, left, bottom, right, width and height. normally you don't need to change it at all.

Custom property Default value
--spc-0
0rem (0px)
--spc-1
0.0625rem (1px)
--spc-2
0.125rem (2px)
--spc-3
0.25rem (4px)
--spc-4
0.5rem (8px)
--spc-5
0.75rem (12px)
--spc-6
1rem (16px)
--spc-7
1.5rem (24px)
--spc-8
2rem (32px)
--spc-9
2.5rem (40px)
--spc-10
3rem (48px)
--spc-11
4rem (64px)
--spc-12
6rem (96px)
--spc-13
8rem (128px)
Class name Customization