Tokens are imported in Javascript as a theme object, and as such that’s the top-level access, which we’ll exclude for the purposes of this mapping. This prefix has been dropped for CSS variables, meaning the tokens begin directly with the grouping they belong to (e.g. --color, --space etc.).
Colours
Brand
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.core.colour.brand.midnight |
color.brand.dark |
--color-brand-dark |
|
|
ovo.core.colour.brand.forest |
color.brand.dim |
--color-brand-dim |
|
|
ovo.core.colour.brand.ovo |
color.brand.brand |
--color-brand-brand |
|
|
ovo.core.colour.brand.leaf |
color.brand.gradientTo |
--color-brand-gradient-to |
|
|
ovo.core.colour.brand.energised |
color.brand.bold |
--color-brand-bold |
|
|
ovo.core.colour.brand.offwhite |
|
|
color.surface.surface |
|
ovo.core.colour.brand.white |
color.brand.onBrand |
--color-brand-on-brand |
|
|
ovo.core.colour.brand.black |
|
|
color.neutral.black |
|
ovo.core.colour.brand.midnight.tint |
|
|
|
|
ovo.core.colour.brand.forest.tint |
|
|
|
|
ovo.core.colour.brand.ovo.tint |
|
|
|
|
ovo.core.colour.brand.leaf.tint |
|
|
|
|
ovo.core.colour.brand.energised.tint |
|
|
|
|
|
color.brand.bright |
--color-brand-bright |
|
|
|
color.brand.gradientFrom |
--color-brand-gradient-from |
|
|
|
color.brand.onBrandVariant |
--color-brand-on-brand-variant |
|
|
|
color.brand.fixed.bright |
--color-brand-fixed-bright |
|
|
|
color.brand.fixed.bold |
--color-brand-fixed-bold |
|
|
|
color.brand.fixed.brand |
--color-brand-fixed-brand |
|
|
|
color.brand.fixed.dim |
--color-brand-fixed-dim |
|
|
|
color.brand.fixed.dark |
--color-brand-fixed-dark |
|
|
|
color.brand.fixed.onBrand |
--color-brand-fixed-on-brand |
|
|
|
color.brand.fixed.onBrandVariant |
--color-brand-fixed-on-brand-variant |
|
Message
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.semantic.message.base |
color.surface.onSurface |
--color-surface-on-surface |
|
|
ovo.semantic.message.secondary |
color.surface.onSurfaceVariant |
--color-surface-on-surface-variant |
|
|
ovo.semantic.message.link |
color.surface.link |
--color-surface-link |
|
|
ovo.semantic.message.branded |
|
|
--color-brand-brand |
|
ovo.semantic.message.error |
|
|
--color-alert-error |
Border
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.semantic.border.graphic |
|
|
color.brand.fixed.onBrand |
|
ovo.semantic.border.differentiated |
color.surface.border |
--color-surface-border |
|
|
ovo.semantic.border.functional |
|
|
color.surface.onSurfaceVariant |
|
|
color.surface.borderdim |
--color-surface-border-dim |
|
|
|
color.alert.border |
--color-alert-border |
|
Surface
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.semantic.surface.base |
color.surface.surface |
--color-surface-surface |
|
|
ovo.semantic.surface.cutout |
color.surface.dim |
--color-surface-dim |
|
|
ovo.semantic.surface.elevated |
color.surface.bright |
--color-surface-bright |
|
|
|
color.surface.fadeFrom |
--color-surface-fade-from |
|
|
|
color.surface.fadeTo |
--color-surface-fade-to |
|
Inverted
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.semantic.inverted.surface |
|
|
color.surface.onSurface |
|
ovo.semantic.inverted.surface.alt |
|
|
color.brand.dim |
|
ovo.semantic.inverted.message.branded |
|
|
color.brand.brand |
|
ovo.semantic.inverted.message.base |
|
|
color.surface.surface |
|
ovo.semantic.inverted.message.secondary |
|
|
color.surface.surface |
|
ovo.semantic.inverted.message.link |
|
|
color.brand.bold |
|
ovo.semantic.inverted.border |
|
|
color.surface.dim |
Semantic Colours
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.semantic.success.surface |
color.alert.successTint |
--color-alert-success-tint |
|
|
ovo.semantic.success.message |
color.alert.success |
--color-alert-success |
|
|
ovo.semantic.success.surface.emphasis |
|
|
color.alert.success |
|
ovo.semantic.success.border |
|
|
color.alert.border |
|
ovo.semantic.success.message.on.emphasis |
|
|
color.alert.successTint |
|
|
|
|
|
|
ovo.semantic.warning.surface |
color.alert.warningTint |
--color-alert-warningTint |
|
|
ovo.semantic.warning.message |
color.alert.warning |
--color-alert-warning |
|
|
ovo.semantic.warning.surface.emphasis |
|
|
color.alert.warning |
|
ovo.semantic.warning.border |
|
|
color.alert.border |
|
ovo.semantic.warning.message.on.emphasis |
|
|
color.alert.warningTint |
|
|
|
|
|
|
ovo.semantic.error.surface |
color.alert.errorTint |
--color-alert-errorTint |
|
|
ovo.semantic.error.message |
color.alert.error |
--color-alert-error |
|
|
ovo.semantic.error.surface.emphasis |
|
|
color.alert.error |
|
ovo.semantic.error.border |
|
|
color.alert.border |
|
ovo.semantic.error.message.on.emphasis |
|
|
color.alert.errorTint |
|
|
|
|
|
|
ovo.semantic.info.surface |
color.alert.infoTint |
--color-alert-infoTint |
|
|
ovo.semantic.info.message |
color.alert.info |
--color-alert-info |
|
|
ovo.semantic.info.surface.emphasis |
|
|
color.alert.info |
|
ovo.semantic.info.border |
|
|
color.alert.border |
|
ovo.semantic.info.message.on.emphasis |
|
|
color.alert.infoTint |
|
|
|
|
|
|
ovo.semantic.neutral.surface |
color.alert.neutralTint |
--color-alert-neutralTint |
|
|
ovo.semantic.neutral.message |
color.alert.neutral |
--color-alert-neutral |
|
|
ovo.semantic.neutral.surface.emphasis |
|
|
color.alert.neutral |
|
ovo.semantic.neutral.border |
|
|
color.alert.border |
|
ovo.semantic.neutral.message.on.emphasis |
|
|
color.alert.neutralTint |
Data
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.semantic.data.branded1 |
|
|
color.brand.brand |
|
ovo.semantic.data.branded2 |
|
|
color.brand.dark |
|
ovo.semantic.data.branded3 |
|
|
color.brand.dim |
|
ovo.semantic.data.branded4 |
|
|
color.brand.bright |
|
|
|
|
|
|
ovo.semantic.data.electric1 |
color.surface.electricity |
--color-surface-electricity |
|
|
ovo.semantic.data.electric2 |
|
|
color.surface.electricity |
|
ovo.semantic.data.electric3 |
|
|
color.surface.electricity |
|
ovo.semantic.data.electric4 |
|
|
color.surface.electricity |
|
|
|
|
|
|
ovo.semantic.data.gas1 |
color.alert.gas |
--color-surface-gas |
|
|
ovo.semantic.data.gas2 |
|
|
color.alert.gas |
|
ovo.semantic.data.gas3 |
|
|
color.alert.gas |
|
ovo.semantic.data.gas4 |
|
|
color.alert.gas |
Spacing & Sizing
Media Queries
|
v4 |
v5 (JS) |
v5 (CSS) |
Value |
|---|---|---|---|
|
ovo.core.media.query.small |
mediaQuery.sm |
--media-query-small |
576 |
|
ovo.core.media.query.medium |
mediaQuery.md |
--media-query-medium |
960 |
|
ovo.core.media.query.large |
mediaQuery.lg |
--media-query-large |
1200 |
Spacing
These units work in multiples of 4px, with 100 being the base, 50 = 2px etc.
In native these are provided as numbers (as typed by the theme object), whereas in web these are pixels in JS and calc functions in CSS.
|
v4 |
v5 (JS) |
v5 (CSS) |
Value |
|---|---|---|---|
|
ovo.core.space.0 |
space.0 |
--space-0 |
0 |
|
|
space.25 |
--space-25 |
1 |
|
|
space.50 |
--space-50 |
2 |
|
ovo.core.space.1 |
space.100 |
--space-100 |
4 |
|
ovo.core.space.2 |
space.200 |
--space-200 |
8 |
|
ovo.core.space.3 |
space.300 |
--space-300 |
12 |
|
|
space.350 |
--space-350 |
14 |
|
ovo.core.space.4 |
space.400 |
--space-400 |
16 |
|
|
space.450 |
--space-450 |
18 |
|
ovo.core.space.5 |
space.500 |
--space-500 |
20 |
|
|
space.550 |
--space-550 |
22 |
|
ovo.core.space.6 |
space.600 |
--space-600 |
24 |
|
ovo.core.space.7 |
space.700 |
--space-700 |
28 |
|
ovo.core.space.8 |
space.800 |
--space-800 |
32 |
|
ovo.core.space.9 |
space.900 |
--space-900 |
36 |
|
ovo.core.space.10 |
space.1000 |
--space-1000 |
40 |
|
ovo.core.space.11 |
space.1100 |
--space-1100 |
44 |
|
ovo.core.space.12 |
space.1200 |
--space-1200 |
48 |
|
ovo.core.space.13 |
space.1300 |
--space-1300 |
52 |
|
ovo.core.space.14 |
space.1400 |
--space-1400 |
56 |
|
ovo.core.space.15 |
space.1500 |
--space-1500 |
60 |
|
|
space.1600 |
--space-1600 |
64 |
|
|
space.1800 |
--space-1800 |
72 |
|
|
space.2000 |
--space-2000 |
80 |
|
|
space.2400 |
--space-2400 |
96 |
|
|
space.3000 |
--space-3000 |
120 |
|
|
space.3500 |
--space-3500 |
140 |
UI Helpers
Borders
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
|
border.radius.xs |
--border-radius-xs |
|
|
ovo.core.radius.small |
border.radius.sm |
--border-radius-sm |
|
|
ovo.core.radius.medium |
border.radius.md |
--border-radius-md |
|
|
ovo.core.radius.large |
border.radius.lg |
--border-radius-lg |
|
|
|
border.radius.xl |
--border-radius-xl |
|
|
ovo.core.radius.max |
border.radius.2xl |
--border-radius-2xl |
|
|
|
border.radius.3xl |
--border-radius-3xl |
|
|
ovo.core.border.width.small |
border.width.sm |
--border-width-sm |
|
|
ovo.core.border.width.medium |
border.width.sm |
--border-width-md |
|
|
ovo.core.border.width.large |
border.width.sm |
--border-width-lg |
|
Timing functions
|
v4 |
v5 (JS) |
v5 (CSS) |
Value |
|---|---|---|---|
|
ovo.core.transition.fast |
transition.duration.fast |
--transition-duration-fast |
200ms |
|
ovo.core.transition.medium |
transition.duration.medium |
--transition-duration-medium |
300ms |
|
ovo.core.transition.slow |
transition.duration.slow |
--transition-duration-slow |
500ms |
Opacity
|
v4 |
v5 (JS) |
v5 (CSS) |
Value |
|---|---|---|---|
|
ovo.core.opacity.solid |
opacity.solid |
--opacity-solid |
1 |
|
ovo.core.opacity.translucent |
opacity.translucent |
--opacity-translucent |
0.75 |
|
ovo.core.opacity.transparent |
opacity.transparent |
--opacity-transparent |
0.25 |
Focus
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.semantic.focus.outline |
color.outline.outer |
--color-outline-outer |
|
|
ovo.semantic.focus.hover |
|
|
color.blue.30 |
|
ovo.semantic.focus.surface |
color.outline.inner |
--color-outline-inner |
|
Font
Family
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.core.font.family.mono.native |
|
|
|
|
ovo.core.font.family.mono.web |
|
|
|
|
ovo.core.font.family.heading.native |
native.font.family.black |
--native-font-family-black |
|
|
ovo.core.font.family.heading.web |
|
|
|
|
ovo.core.font.family.body.native |
native.font.family.book |
--native-font-family-book |
|
|
ovo.core.font.family.body.web |
|
|
|
|
ovo.core.font.family.body.bold.native |
native.font.family.bold |
--native-font-family-bold |
|
|
ovo.core.font.family.body.bold.web |
|
|
|
|
|
web.font.family |
--web-font-family |
|
Weight
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.core.font.weight.book |
font.weight.book |
--font-weight-book |
|
|
ovo.core.font.weight.bold |
font.weight.bold |
--font-weight-bold |
|
|
ovo.core.font.weight.black |
font.weight.black |
--font-weight-black |
|
Size
The value of these token dynamically switches in a media-query, provided in the theme CSS file (not in JS).
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
|
font.size.d1.mediaQuery.sm |
--font-size-d1 |
|
|
|
font.size.d1.mediaQuery.lg |
|
|
|
|
font.size.d2.mediaQuery.sm |
--font-size-d2 |
|
|
|
font.size.d2.mediaQuery.lg |
|
|
|
|
font.size.d3.mediaQuery.sm |
--font-size-d3 |
|
|
|
font.size.d3.mediaQuery.lg |
|
|
|
|
font.size.d4.mediaQuery.sm |
--font-size-d4 |
|
|
|
font.size.d4.mediaQuery.lg |
|
|
|
ovo.core.font.size.heading1.small |
font.size.4xl.mediaQuery.sm |
--font-size-4xl |
|
|
ovo.core.font.size.heading1.large |
font.size.4xl.mediaQuery.lg |
|
|
|
ovo.core.font.size.heading2.small |
font.size.3xl.mediaQuery.sm |
--font-size-3xl |
|
|
ovo.core.font.size.heading2.large |
font.size.3xl.mediaQuery.lg |
|
|
|
ovo.core.font.size.heading3.small |
font.size.2xl.mediaQuery.sm |
--font-size-2xl |
|
|
ovo.core.font.size.heading3.large |
font.size.2xl.mediaQuery.lg |
|
|
|
ovo.core.font.size.heading4.small |
font.size.xl.mediaQuery.sm |
--font-size-xl |
|
|
ovo.core.font.size.heading4.large |
font.size.xl.mediaQuery.lg |
|
|
|
ovo.core.font.size.lead.small |
font.size.lg.mediaQuery.sm |
--font-size-lg |
|
|
ovo.core.font.size.lead.large |
font.size.lg.mediaQuery.lg |
|
|
|
ovo.core.font.size.body.small |
font.size.md.mediaQuery.sm |
--font-size-md |
|
|
ovo.core.font.size.body.large |
font.size.md.mediaQuery.lg |
|
|
|
ovo.core.font.size.small.small |
font.size.sm.mediaQuery.sm |
--font-size-sm |
|
|
ovo.core.font.size.small.large |
font.size.sm.mediaQuery.lg |
|
|
|
ovo.core.font.size.label.small |
font.size.xs.mediaQuery.sm |
--font-size-xs |
|
|
ovo.core.font.size.label.large |
font.size.xs.mediaQuery.lg |
|
|
Line-height
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
|
font.lineHeight.d1.mediaQuery.sm |
--font-line-height-d1 |
|
|
|
font.lineHeight.d1.mediaQuery.lg |
|
|
|
|
font.lineHeight.d2.mediaQuery.sm |
--font-line-height-d2 |
|
|
|
font.lineHeight.d2.mediaQuery.lg |
|
|
|
|
font.lineHeight.d3.mediaQuery.sm |
--font-line-height-d3 |
|
|
|
font.lineHeight.d3.mediaQuery.lg |
|
|
|
|
font.lineHeight.d4.mediaQuery.sm |
--font-line-height-d4 |
|
|
|
font.lineHeight.d4.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.heading1.small |
font.lineHeight.4xl.mediaQuery.sm |
--font-line-height-4xl |
|
|
ovo.core.font.lineHeight.heading1.large |
font.lineHeight.4xl.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.heading2.small |
font.lineHeight.3xl.mediaQuery.sm |
--font-line-height-3xl |
|
|
ovo.core.font.lineHeight.heading2.large |
font.lineHeight.3xl.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.heading3.small |
font.lineHeight.2xl.mediaQuery.sm |
--font-line-height-2xl |
|
|
ovo.core.font.lineHeight.heading3.large |
font.lineHeight.2xl.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.heading4.small |
font.lineHeight.xl.mediaQuery.sm |
--font-line-height-xl |
|
|
ovo.core.font.lineHeight.heading4.large |
font.lineHeight.xl.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.lead.small |
font.lineHeight.lg.mediaQuery.sm |
--font-line-height-lg |
|
|
ovo.core.font.lineHeight.lead.large |
font.lineHeight.lg.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.body.small |
font.lineHeight.md.mediaQuery.sm |
--font-line-height-md |
|
|
ovo.core.font.lineHeight.body.large |
font.lineHeight.md.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.small.small |
font.lineHeight.sm.mediaQuery.sm |
--font-line-height-sm |
|
|
ovo.core.font.lineHeight.small.large |
font.lineHeight.sm.mediaQuery.lg |
|
|
|
ovo.core.font.lineHeight.label.small |
font.lineHeight.xs.mediaQuery.sm |
--font-line-height-xs |
|
|
ovo.core.font.lineHeight.label.large |
font.lineHeight.xs.mediaQuery.lg |
|
|
Letter-spacing
As with font sizes, the values for these are switched in a media-query as part of the Element theme, but a single token name is used for both sizes.
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.core.letter.spacing.base |
|
|
|
|
ovo.core.letter.spacing.compressed |
|
|
|
|
ovo.core.letter.spacing.extra.compressed |
|
|
|
|
|
font.letterSpacing.d1 |
--font-letter-spacing-d1 |
|
|
|
font.letterSpacing.d2 |
--font-letter-spacing-d2 |
|
|
|
font.letterSpacing.d3 |
--font-letter-spacing-d3 |
|
|
|
font.letterSpacing.d4 |
--font-letter-spacing-d4 |
|
|
|
font.letterSpacing.4xl |
--font-letter-spacing-4xl |
|
|
|
font.letterSpacing.3xl |
--font-letter-spacing-3xl |
|
|
|
font.letterSpacing.2xl |
--font-letter-spacing-2xl |
|
|
|
font.letterSpacing.xl |
--font-letter-spacing-xl |
|
|
|
font.letterSpacing.lg |
--font-letter-spacing-lg |
|
|
|
font.letterSpacing.md |
--font-letter-spacing-md |
|
|
|
font.letterSpacing.sm |
--font-letter-spacing-sm |
|
|
|
font.letterSpacing.xs |
--font-letter-spacing-xs |
|
Paragraph-spacing
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
|
font.paragraphSpace.d1.mediaQuery.sm |
--font-paragraph-space-d1 |
|
|
|
font.paragraphSpace.d1.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.d2.mediaQuery.sm |
--font-paragraph-space-d2 |
|
|
|
font.paragraphSpace.d2.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.d3.mediaQuery.sm |
--font-paragraph-space-d3 |
|
|
|
font.paragraphSpace.d3.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.d4.mediaQuery.sm |
--font-paragraph-space-d4 |
|
|
|
font.paragraphSpace.d4.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.4xl.mediaQuery.sm |
--font-paragraph-space-4xl |
|
|
|
font.paragraphSpace.4xl.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.3xl.mediaQuery.sm |
--font-paragraph-space-3xl |
|
|
|
font.paragraphSpace.3xl.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.2xl.mediaQuery.sm |
--font-paragraph-space-2xl |
|
|
|
font.paragraphSpace.2xl.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.xl.mediaQuery.sm |
--font-paragraph-space-xl |
|
|
|
font.paragraphSpace.xl.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.lg.mediaQuery.sm |
--font-paragraph-space-lg |
|
|
|
font.paragraphSpace.lg.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.md.mediaQuery.sm |
--font-paragraph-space-md |
|
|
|
font.paragraphSpace.md.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.sm.mediaQuery.sm |
--font-paragraph-space-sm |
|
|
|
font.paragraphSpace.sm.mediaQuery.lg |
|
|
|
|
font.paragraphSpace.xs.mediaQuery.sm |
--font-paragraph-space-xs |
|
|
|
font.paragraphSpace.xs.mediaQuery.lg |
|
|
Core Tokens
These generally shouldn’t be needed for direct use, and serve as base values for other tokens in the design system, i.e. the provide the building blocks of primitive values for our components. The semantically mapped tokens above alias these almost entirely, and should be used in almost all cases (unless they aren’t mapped as required).
Primitive Colours
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.core.colour.neutral.darkest |
color.neutral.80 |
--color-neutral-80 |
|
|
ovo.core.colour.neutral.darker |
color.neutral.70 |
--color-neutral-70 |
|
|
ovo.core.colour.neutral.dark |
color.neutral.60 |
--color-neutral-60 |
|
|
ovo.core.colour.neutral.base |
color.neutral.50 |
--color-neutral-50 |
|
|
ovo.core.colour.neutral.light |
color.neutral.40 |
--color-neutral-40 |
|
|
ovo.core.colour.neutral.lighter |
color.neutral.30 |
--color-neutral-30 |
|
|
ovo.core.colour.neutral.lightest |
color.neutral.20 |
--color-neutral-20 |
|
|
|
color.neutral.white |
--color-neutral-white |
|
|
|
color.neutral.black |
--color-neutral-black |
|
|
|
|
|
|
|
ovo.core.colour.red.darkest |
color.red.80 |
--color-red-80 |
|
|
ovo.core.colour.red.darker |
color.red.70 |
--color-red-70 |
|
|
ovo.core.colour.red.dark |
color.red.60 |
--color-red-60 |
|
|
ovo.core.colour.red.base |
color.red.50 |
--color-red-50 |
|
|
ovo.core.colour.red.light |
color.red.40 |
--color-red-40 |
|
|
ovo.core.colour.red.lighter |
color.red.30 |
--color-red-30 |
|
|
ovo.core.colour.red.lightest |
color.red.20 |
--color-red-20 |
|
|
|
|
|
|
|
ovo.core.colour.orange.darkest |
|
|
color.orange.70 |
|
ovo.core.colour.orange.darker |
color.orange.70 |
--color-orange-70 |
|
|
ovo.core.colour.orange.dark |
color.orange.60 |
--color-orange-60 |
|
|
ovo.core.colour.orange.base |
color.orange.50 |
--color-orange-50 |
|
|
ovo.core.colour.orange.light |
color.orange.40 |
--color-orange-40 |
|
|
ovo.core.colour.orange.lighter |
color.orange.30 |
--color-orange-30 |
|
|
ovo.core.colour.orange.lightest |
color.orange.20 |
--color-orange-20 |
|
|
|
|
|
|
|
ovo.core.colour.yellow.darkest |
color.yellow.80 |
--color-yellow-80 |
|
|
ovo.core.colour.yellow.darker |
color.yellow.70 |
--color-yellow-70 |
|
|
ovo.core.colour.yellow.dark |
|
|
color.yellow.70 |
|
ovo.core.colour.yellow.base |
|
|
color.yellow.70 |
|
ovo.core.colour.yellow.light |
|
|
color.yellow.70 |
|
ovo.core.colour.yellow.lighter |
|
|
color.yellow.70 |
|
ovo.core.colour.yellow.lightest |
|
|
color.yellow.70 |
|
|
|
|
|
|
|
color.green.90 |
--color-green-90 |
|
|
ovo.core.colour.green.darkest |
color.green.80 |
--color-green-80 |
|
|
ovo.core.colour.green.darker |
color.green.70 |
--color-green-70 |
|
|
ovo.core.colour.green.dark |
color.green.60 |
--color-green-60 |
|
|
ovo.core.colour.green.base |
color.green.50 |
--color-green-50 |
|
|
ovo.core.colour.green.light |
color.green.40 |
--color-green-40 |
|
|
ovo.core.colour.green.lighter |
color.green.30 |
--color-green-30 |
|
|
ovo.core.colour.green.lightest |
color.green.20 |
--color-green-20 |
|
|
|
|
|
|
|
ovo.core.colour.blue.darkest |
|
|
color.blue.70 |
|
ovo.core.colour.blue.darker |
color.blue.70 |
--color-blue-70 |
|
|
ovo.core.colour.blue.dark |
color.blue.60 |
--color-blue-60 |
|
|
ovo.core.colour.blue.base |
color.blue.50 |
--color-blue-50 |
|
|
ovo.core.colour.blue.light |
color.blue.40 |
--color-blue-40 |
|
|
ovo.core.colour.blue.lighter |
color.blue.30 |
--color-blue-30 |
|
|
ovo.core.colour.blue.lightest |
color.blue.20 |
--color-blue-20 |
|
Sizing units
|
v4 |
v5 (JS) |
v5 (CSS) |
Value |
|---|---|---|---|
|
|
unit.0 |
--unit-0 |
0 |
|
|
unit.25 |
--unit-25 |
1 |
|
|
unit.50 |
--unit-50 |
2 |
|
|
unit.100 |
--unit-100 |
4 |
|
|
unit.200 |
--unit-200 |
8 |
|
|
unit.300 |
--unit-300 |
12 |
|
|
unit.350 |
--unit-350 |
14 |
|
|
unit.400 |
--unit-400 |
16 |
|
|
unit.450 |
--unit-450 |
18 |
|
|
unit.500 |
--unit-500 |
20 |
|
|
unit.550 |
--unit-550 |
22 |
|
|
unit.600 |
--unit-600 |
24 |
|
|
unit.700 |
--unit-700 |
28 |
|
|
unit.800 |
--unit-800 |
32 |
|
|
unit.900 |
--unit-900 |
36 |
|
|
unit.1000 |
--unit-1000 |
40 |
|
|
unit.1100 |
--unit-1100 |
44 |
|
|
unit.1200 |
--unit-1200 |
48 |
|
|
unit.1300 |
--unit-1300 |
52 |
|
|
unit.1400 |
--unit-1400 |
56 |
|
|
unit.1500 |
--unit-1500 |
60 |
|
|
unit.1600 |
--unit-1600 |
64 |
|
|
unit.1800 |
--unit-1800 |
72 |
|
|
unit.2000 |
--unit-2000 |
80 |
|
|
unit.2400 |
--unit-2400 |
96 |
|
|
unit.3000 |
--unit-3000 |
120 |
|
|
unit.3500 |
--unit-3500 |
140 |
Breakpoints
|
v4 |
v5 (JS) |
v5 (CSS) |
Alternative |
|---|---|---|---|
|
ovo.core.breakpoint.small |
breakpoint.sm |
--breakpoint-small |
|
|
ovo.core.breakpoint.medium |
breakpoint.md |
--breakpoint-medium |
|
|
ovo.core.breakpoint.large |
breakpoint.lg |
--breakpoint-large |
|