Use a token by its CSS variable. The colour roles are on Colour; this page lists the rest of the families. Renaming or removing a token is a breaking change: it is deprecated for one minor release first.
| Token | CSS variable | Value |
|---|
ui.space.0 | --okr-ui-space-0 | 0px |
|---|
ui.space.1 | --okr-ui-space-1 | 4px |
|---|
ui.space.2 | --okr-ui-space-2 | 8px |
|---|
ui.space.3 | --okr-ui-space-3 | 12px |
|---|
ui.space.4 | --okr-ui-space-4 | 16px |
|---|
ui.space.5 | --okr-ui-space-5 | 20px |
|---|
ui.space.6 | --okr-ui-space-6 | 24px |
|---|
ui.space.8 | --okr-ui-space-8 | 32px |
|---|
ui.space.10 | --okr-ui-space-10 | 40px |
|---|
ui.space.12 | --okr-ui-space-12 | 48px |
|---|
ui.space.16 | --okr-ui-space-16 | 64px |
|---|
ui.space.20 | --okr-ui-space-20 | 80px |
|---|
ui.space.24 | --okr-ui-space-24 | 96px |
|---|
ui.space.32 | --okr-ui-space-32 | 128px |
|---|
ui.space.42 | --okr-ui-space-42 | 168px |
|---|
ui.space.0-5 | --okr-ui-space-0-5 | 2px |
|---|
ui.space.section | --okr-ui-space-section | clamp(96px, 5rem + 5vw, 168px) |
|---|
ui.space.hero-top | --okr-ui-space-hero-top | clamp(40px, 2rem + 4vw, 104px) |
|---|
| Token | CSS variable | Value |
|---|
ui.radius.xs | --okr-ui-radius-xs | 4px |
|---|
ui.radius.sm | --okr-ui-radius-sm | 6px |
|---|
ui.radius.md | --okr-ui-radius-md | 8px |
|---|
ui.radius.lg | --okr-ui-radius-lg | 10px |
|---|
ui.radius.xl | --okr-ui-radius-xl | 14px |
|---|
ui.radius.2xl | --okr-ui-radius-2xl | 16px |
|---|
ui.radius.full | --okr-ui-radius-full | 9999px |
|---|
| Token | CSS variable | Value |
|---|
ui.font.size.xs | --okr-ui-font-size-xs | 12px |
|---|
ui.font.size.sm | --okr-ui-font-size-sm | 13px |
|---|
ui.font.size.md | --okr-ui-font-size-md | 14px |
|---|
ui.font.size.lg | --okr-ui-font-size-lg | 16px |
|---|
ui.font.size.xl | --okr-ui-font-size-xl | 20px |
|---|
ui.font.size.2xl | --okr-ui-font-size-2xl | 24px |
|---|
ui.font.size.3xl | --okr-ui-font-size-3xl | 32px |
|---|
| Token | CSS variable | Value |
|---|
ui.layout.content-max | --okr-ui-layout-content-max | 1280px |
|---|
ui.layout.gutter | --okr-ui-layout-gutter | 24px |
|---|
ui.layout.columns | --okr-ui-layout-columns | 12 |
|---|
ui.layout.margin | --okr-ui-layout-margin | clamp(20px, 4.2vw, 80px) |
|---|
ui.layout.header | --okr-ui-layout-header | 68px |
|---|
ui.layout.sidebar | --okr-ui-layout-sidebar | 216px |
|---|
ui.layout.inspector | --okr-ui-layout-inspector | 340px |
|---|
ui.layout.topbar | --okr-ui-layout-topbar | 48px |
|---|
ui.layout.icon-rail | --okr-ui-layout-icon-rail | 48px |
|---|
ui.layout.sidebar-min | --okr-ui-layout-sidebar-min | 200px |
|---|
ui.layout.sidebar-max | --okr-ui-layout-sidebar-max | 320px |
|---|
ui.layout.form-max | --okr-ui-layout-form-max | 640px |
|---|
ui.layout.dashboard-max | --okr-ui-layout-dashboard-max | 1440px |
|---|
ui.layout.page-inline-sm | --okr-ui-layout-page-inline-sm | 16px |
|---|
ui.layout.page-inline | --okr-ui-layout-page-inline | 24px |
|---|
ui.layout.page-top | --okr-ui-layout-page-top | 24px |
|---|
ui.layout.section-gap | --okr-ui-layout-section-gap | 32px |
|---|
ui.layout.reading-max | --okr-ui-layout-reading-max | 68ch |
|---|
ui.layout.header-toolbar-gap | --okr-ui-layout-header-toolbar-gap | 12px |
|---|
ui.layout.dialog-sm | --okr-ui-layout-dialog-sm | 440px |
|---|
ui.layout.dialog-md | --okr-ui-layout-dialog-md | 560px |
|---|
ui.layout.dialog-lg | --okr-ui-layout-dialog-lg | 720px |
|---|
ui.layout.drawer-sm | --okr-ui-layout-drawer-sm | 340px |
|---|
ui.layout.drawer-md | --okr-ui-layout-drawer-md | 480px |
|---|
ui.layout.drawer-lg | --okr-ui-layout-drawer-lg | 640px |
|---|
ui.layout.sheet-snap-half | --okr-ui-layout-sheet-snap-half | 0.5 |
|---|
ui.layout.sheet-snap-full | --okr-ui-layout-sheet-snap-full | 0.9 |
|---|
| Token | CSS variable | Value |
|---|
ui.z.sticky | --okr-ui-z-sticky | 10 |
|---|
ui.z.sheet | --okr-ui-z-sheet | 40 |
|---|
ui.z.dialog | --okr-ui-z-dialog | 50 |
|---|
ui.z.popover | --okr-ui-z-popover | 60 |
|---|
ui.z.toast | --okr-ui-z-toast | 70 |
|---|
ui.z.tooltip | --okr-ui-z-tooltip | 80 |
|---|
ui.z.skip | --okr-ui-z-skip | 90 |
|---|
| Token | CSS variable | Value |
|---|
ui.motion.duration.instant | --okr-ui-motion-duration-instant | 0ms |
|---|
ui.motion.duration.micro | --okr-ui-motion-duration-micro | 120ms |
|---|
ui.motion.duration.standard | --okr-ui-motion-duration-standard | 200ms |
|---|
ui.motion.duration.panel | --okr-ui-motion-duration-panel | 320ms |
|---|
ui.motion.duration.write | --okr-ui-motion-duration-write | 500ms |
|---|
ui.motion.duration.loop | --okr-ui-motion-duration-loop | 1600ms |
|---|
ui.motion.duration.fast | --okr-ui-motion-duration-fast | 120ms |
|---|
ui.motion.duration.base | --okr-ui-motion-duration-base | 200ms |
|---|
ui.motion.duration.slow | --okr-ui-motion-duration-slow | 320ms |
|---|
ui.motion.duration.micro-exit | --okr-ui-motion-duration-micro-exit | 96ms |
|---|
ui.motion.duration.standard-exit | --okr-ui-motion-duration-standard-exit | 160ms |
|---|
ui.motion.duration.panel-exit | --okr-ui-motion-duration-panel-exit | 256ms |
|---|
| Token | CSS variable | Value |
|---|
ui.motion.ease.standard | --okr-ui-motion-ease-standard | cubic-bezier(0.2, 0, 0, 1) |
|---|
ui.motion.ease.enter | --okr-ui-motion-ease-enter | cubic-bezier(0.16, 1, 0.3, 1) |
|---|
ui.motion.ease.exit | --okr-ui-motion-ease-exit | cubic-bezier(0.3, 0, 0.8, 0.15) |
|---|
ui.motion.ease.linear | --okr-ui-motion-ease-linear | cubic-bezier(0, 0, 1, 1) |
|---|
ui.motion.ease.panel | --okr-ui-motion-ease-panel | cubic-bezier(0.32, 0.72, 0, 1) |
|---|
| Token | Paper | Night |
|---|
ui.shadow.e1 | 0px 1px 0px 0px rgba(13,16,21,0.04), 0px 12px 32px -12px rgba(13,16,21,0.14) | 0px 0px 0px 0px rgba(0,0,0,0) |
|---|
ui.shadow.e2 | 0px 4px 12px 0px rgba(13,16,21,0.08), 0px 1px 3px 0px rgba(13,16,21,0.06) | 0px 24px 48px -16px rgba(0,0,0,0.6) |
|---|
ui.shadow.e3 | 0px 12px 32px 0px rgba(13,16,21,0.12), 0px 2px 6px 0px rgba(13,16,21,0.06) | 0px 24px 48px -16px rgba(0,0,0,0.6) |
|---|
