chrome:shell.skip
chrome:nav.docs chrome:nav.cdk chrome:nav.components blocks:nav.blocks chrome:nav.tools chrome:nav.contribute chrome:nav.about
generated:catalog.area.docs
generated:catalog.entry.getting-started.title generated:catalog.entry.core.title generated:catalog.entry.styles.title generated:catalog.entry.themes.title generated:catalog.entry.forms-guide.title generated:catalog.entry.icons.title generated:catalog.entry.testing.title

generated:catalog.entry.styles.title

@xngui/styles
@xngui/styles

generated:catalog.entry.styles.description

docs:styles.section.overview

docs:styles.heading.token-pipeline

docs:styles.paragraph.pipeline-lead

docs:styles.paragraph.pipeline-best-path

  • docs:styles.data.primitives

    primitives/--x-primary-500: oklch(0.58 0.12 212);

  • docs:styles.data.semantic-light

    semantic/light.css--x-primary: var(--x-primary-500);

  • docs:styles.data.semantic-dark

    semantic/dark.css.dark { --x-primary: var(--x-primary-400); }

  • docs:styles.data.scale

    scale/--x-control-height: var(--x-size-height-md);

  • docs:styles.data.field

    field.css.x-field[data-look="outline"] { … }

  • docs:styles.data.states

    states/.x-focusable:focus-visible { outline: … }

  • docs:styles.data.components

    libs/components/**--x-button-height: var(--x-control-height);

docs:styles.caption.semantic-dark-runtime docs:styles.link.themes-pagedocs:styles.caption.semantic-dark-runtime-suffix

docs:styles.heading.imports

docs:styles.paragraph.imports-lead

styles.css
@import '@xngui/styles';
@import '@xngui/styles/base';
@import '@xngui/styles/tailwind';

docs:styles.section.control-scale

docs:styles.heading.density-at-md

docs:styles.caption.density

compact
standard
comfortable

docs:styles.heading.size-at-standard

docs:styles.caption.size

--x-size-height-xs
--x-size-height-sm
--x-size-height-md
--x-size-height-lg
--x-size-height-xl

docs:styles.section.colors

docs:styles.heading.palette-imports

docs:styles.caption.palette-imports-lead

docs:styles.caption.palette-imports-callout

docs:styles.palette-path.css.title

docs:styles.palette-path.css.tagline

  • docs:styles.palette-path.css.bullet-1
  • docs:styles.palette-path.css.bullet-2

docs:styles.palette-path.runtime.title

docs:styles.palette-path.runtime.tagline

  • docs:styles.palette-path.runtime.bullet-1
  • docs:styles.palette-path.runtime.bullet-2
docs:styles.link.themes-page
styles.css
@import '@xngui/styles';@import '@xngui/styles/themes/nature/ocean';* Primitives only — pair with XThemeService for light  dark semantics. *

docs:styles.heading.semantic-roles

docs:styles.caption.semantic-roles

docs:styles.data.brand

--x-primary
docs:styles.data.background--x-primary
docs:styles.data.text--x-primary-foreground
docs:styles.data.border--x-primary-border
docs:styles.data.hover--x-primary-hover
docs:styles.data.subtle--x-primary-subtle

docs:styles.data.secondary

--x-secondary
docs:styles.data.background--x-secondary
docs:styles.data.text--x-secondary-foreground
docs:styles.data.border--x-secondary-border
docs:styles.data.hover--x-secondary-hover
docs:styles.data.subtle--x-secondary-subtle

docs:styles.data.accent

--x-accent
docs:styles.data.background--x-accent
docs:styles.data.text--x-accent-foreground
docs:styles.data.border--x-accent-border
docs:styles.data.hover--x-accent-hover
docs:styles.data.subtle--x-accent-subtle

docs:styles.data.neutral

--x-neutral
docs:styles.data.background--x-neutral
docs:styles.data.text--x-neutral-foreground
docs:styles.data.border--x-neutral-border
docs:styles.data.hover--x-neutral-hover
docs:styles.data.subtle--x-neutral-subtle

docs:styles.data.success

--x-success
docs:styles.data.background--x-success
docs:styles.data.text--x-success-foreground
docs:styles.data.border--x-success-border
docs:styles.data.hover--x-success-hover
docs:styles.data.subtle--x-success-subtle

docs:styles.data.warning

--x-warning
docs:styles.data.background--x-warning
docs:styles.data.text--x-warning-foreground
docs:styles.data.border--x-warning-border
docs:styles.data.hover--x-warning-hover
docs:styles.data.subtle--x-warning-subtle

docs:styles.data.danger

--x-danger
docs:styles.data.background--x-danger
docs:styles.data.text--x-danger-foreground
docs:styles.data.border--x-danger-border
docs:styles.data.hover--x-danger-hover
docs:styles.data.subtle--x-danger-subtle

docs:styles.data.info

--x-info
docs:styles.data.background--x-info
docs:styles.data.text--x-info-foreground
docs:styles.data.border--x-info-border
docs:styles.data.hover--x-info-hover
docs:styles.data.subtle--x-info-subtle

docs:styles.heading.primitive-ramps

docs:styles.caption.primitive-ramps

--x-white
--x-black

docs:styles.data.brand

50
100
200
300
400
500
600
700
800
900
950

docs:styles.data.secondary

50
100
200
300
400
500
600
700
800
900
950

docs:styles.data.accent

50
100
200
300
400
500
600
700
800
900
950

docs:styles.data.neutral

50
100
200
300
400
500
600
700
800
900
950

docs:styles.data.success

50
100
200
300
400
500
600
700
800
900
950

docs:styles.data.warning

50
100
200
300
400
500
600
700
800
900
950

docs:styles.data.danger

50
100
200
300
400
500
600
700
800
900
950

docs:styles.data.info

50
100
200
300
400
500
600
700
800
900
950

docs:styles.heading.surfaces-chrome

docs:styles.caption.surfaces

docs:styles.data.page

docs:styles.data.base-canvas-and-default-body-text

--x-background
--x-foreground

docs:styles.data.card

docs:styles.data.elevated-surfaces-containers-panels-and-tiles

--x-card
--x-card-foreground
--x-card-border
--x-card-hover

docs:styles.data.popover

docs:styles.data.floating-layers-menus-dialogs-and-tooltips

--x-popover
--x-popover-foreground

docs:styles.data.muted

docs:styles.data.de-emphasized-fills-and-secondary-copy

--x-muted
--x-muted-foreground

docs:styles.data.borders-inputs

docs:styles.data.dividers-control-outlines-and-focus-rings

--x-border
--x-input
--x-ring

docs:styles.data.selection

docs:styles.data.active-highlighted-item-chrome

--x-selected
--x-selected-foreground

docs:styles.section.typography

docs:styles.heading.type-scale

docs:styles.caption.type-scale

  • Aa — xs --x-text-xs
  • Aa — sm --x-text-sm
  • Aa — md --x-text-md
  • Aa — lg --x-text-lg
  • Aa — xl --x-text-xl
  • Aa — 2xl --x-text-2xl
  • Aa — 3xl --x-text-3xl

docs:styles.heading.font-weights

docs:styles.caption.font-weights

  • Aa — thin --x-weight-thin
  • Aa — extralight --x-weight-extralight
  • Aa — light --x-weight-light
  • Aa — normal --x-weight-normal
  • Aa — medium --x-weight-medium
  • Aa — semibold --x-weight-semibold
  • Aa — bold --x-weight-bold
  • Aa — extrabold --x-weight-extrabold
  • Aa — black --x-weight-black

docs:styles.section.spacing

docs:styles.heading.spacing-scale

docs:styles.caption.spacing

  • 0.25rem · 4px--x-spacing-1
  • 0.5rem · 8px--x-spacing-2
  • 0.75rem · 12px--x-spacing-3
  • 1rem · 16px--x-spacing-4
  • 1.5rem · 24px--x-spacing-6
  • 2rem · 32px--x-spacing-8
  • 3rem · 48px--x-spacing-12
  • 4rem · 64px--x-spacing-16

docs:styles.section.radius-shadow

docs:styles.heading.border-radius

docs:styles.caption.radius

  • xs--x-radius-xs0.125rem · 2px
  • sm--x-radius-sm0.25rem · 4px
  • md--x-radius-md0.375rem · 6px
  • lg--x-radius-lg0.5rem · 8px
  • xl--x-radius-xl0.75rem · 12px
  • 2xl--x-radius-2xl1rem · 16px
  • full--x-radius-full9999px · —

docs:styles.heading.shadows

docs:styles.caption.shadows

docs:styles.data.xshadowstep-label2xsxssmmdlgxl2xl
  • 2xs--x-shadow-2xs
  • xs--x-shadow-xs
  • sm--x-shadow-sm
  • md--x-shadow-md
  • lg--x-shadow-lg
  • xl--x-shadow-xl
  • 2xl--x-shadow-2xl

docs:styles.section.z-index

docs:styles.heading.stacking-layers

docs:styles.caption.z-index

  • toast--x-z-toastz-index 50
  • fab--x-z-fabz-index 40
  • modal--x-z-modalz-index 40
  • overlay--x-z-overlayz-index 30
  • dropdown--x-z-dropdownz-index 20
  • sticky--x-z-stickyz-index 10

docs:styles.section.motion

docs:styles.heading.motion-composer

docs:styles.caption.motion

transition: transform var(--x-duration-normal) var(--x-ease-in-out);200ms · cubic-bezier(0.4, 0, 0.2, 1)

docs:styles.data.duration-lanes

docs:styles.data.easing-curves

docs:styles.section.states

docs:styles.heading.live-samples

docs:styles.caption.states

  • docs:styles.data.disabled[disabled], [aria-disabled="true"], [data-disabled], [data-state="disabled"], .x-disableddocs:styles.data.disabled-usage
  • docs:styles.data.readonly[readonly], .x-readonlydocs:styles.data.visible-not-editable
    docs:styles.data.readonly
  • docs:styles.data.invalid[aria-invalid="true"], .x-invaliddocs:styles.data.error-border-ring
    docs:styles.data.invalid-field
  • docs:styles.data.loading[aria-busy="true"], .x-loadingdocs:styles.data.spinner-no-dimming
  • docs:styles.data.focus.x-focusable:focus-visibledocs:styles.data.shared-focus-ring
  • docs:styles.data.selected.x-selecteddocs:styles.data.pressed-active-look

docs:styles.section.tailwind

docs:styles.heading.role-utilities

docs:styles.caption.tailwind

docs:styles.data.background

docs:styles.data.brandbg-primary
docs:styles.data.secondarybg-secondary
docs:styles.data.accentbg-accent
docs:styles.data.neutralbg-neutral
docs:styles.data.successbg-success
docs:styles.data.warningbg-warning
docs:styles.data.dangerbg-danger
docs:styles.data.infobg-info
bg-primary-300
bg-secondary-400
bg-danger-200
bg-neutral-100

docs:styles.data.text

docs:styles.data.brandtext-primary
docs:styles.data.secondarytext-secondary
docs:styles.data.accenttext-accent
docs:styles.data.neutraltext-neutral
docs:styles.data.successtext-success
docs:styles.data.warningtext-warning
docs:styles.data.dangertext-danger
docs:styles.data.infotext-info
text-primary-600
text-secondary-500
text-danger-400
text-neutral-700

docs:styles.data.border

docs:styles.data.brandborder-primary
docs:styles.data.secondaryborder-secondary
docs:styles.data.accentborder-accent
docs:styles.data.neutralborder-neutral
docs:styles.data.successborder-success
docs:styles.data.warningborder-warning
docs:styles.data.dangerborder-danger
docs:styles.data.infoborder-info
border-primary-300
border-accent-500
border-danger-400
border-neutral-300