Styles Introduction

What Tokens Are and Where They Live

Core tokens are declared as CSS custom properties in src/global/app.css. Typed exports in src/styles/index.ts mirror those values for JS/TS usage.

:root {
  --diwa-accent: #10a37f;
  --diwa-space-4: 1rem;
  --diwa-focus-ring-width: 2px;
}

Consume Tokens in CSS and JS

Prefer semantic tokens in component CSS, and use JS exports when style values are needed in runtime logic or tests.

/* CSS */
.card {
  border-radius: var(--diwa-radius-lg);
  padding: var(--diwa-space-4);
  color: var(--diwa-text-primary);
}

// JS / TS
import { borderRadiusLg, spacing4, getFocusStyle } from '@diwacopilot/components/styles';

const cardStyle = {
  borderRadius: borderRadiusLg,
  padding: spacing4,
  ...getFocusStyle(),
};

Theme and Interaction Contract

Theme tokens define color and contrast, while interaction tokens define how focus, hover, and motion behave. Use these pages together when introducing custom UI patterns.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

Recommended Reading Order

1. 1. Theme - Start with semantic color and surface tokens.
2. 2. Spacing - Lay out components with the shared spacing scale.
3. 3. Typography - Set readable hierarchy and text rhythm.
4. 4. Focus - Apply visible keyboard focus rules consistently.
5. 5. Hover - Add pointer states without hurting touch behavior.
6. 6. Motion - Respect reduced-motion and duration guidelines.

Categories