@torio-luxury/design-tokens

v1.0.0

Published

19 hours ago

Torio Luxury design tokens — Style Dictionary v4 source of truth for color, typography, spacing, radius, elevation. Outputs CSS, Tailwind preset, Dart, and flat JSON.

0High
0Medium
0Low

bhenav

torio-luxury-design-tokens

Style Dictionary v4 source-of-truth for Torio Luxury design tokens — colors, typography, spacing, radius, elevation. Builds CSS, Tailwind preset, Dart, and flat JSON outputs consumed by all three frontends (web-landing, web-admin, mobile).

Brand values were signed off 2026-04-29 (see planning workspace docs/05). Any change is a brand-version bump.

Layout

tokens/
├── primitive/        raw values — never referenced directly by UI code
│   ├── color.json      gold/charcoal/neutral/feedback scales
│   ├── space.json      4px-based scale + radius
│   └── typography.json font family/size/lineHeight/weight/letterSpacing
└── semantic/         named usage tokens — UI references these
    ├── color.light.json
    └── color.dark.json

build/                generated, committed (drift check in CI)
├── css/tokens.{light,dark}.css
├── ts/tailwind.tokens.{light,dark}.js
├── ts/tailwind.preset.js          (CSS-var-based, theme-agnostic)
├── ts/index.js
└── json/flat.{light,dark}.json    (Figma plugin sync)

dart/                 Flutter package (consumed via path/git URL)
├── lib/torio_tokens.dart
├── lib/src/torio_theme.dart
├── lib/src/generated/tokens_{light,dark}.dart
├── pubspec.yaml
└── analysis_options.yaml

Build

pnpm install
pnpm build         # writes everything under build/ and dart/lib/src/generated/
pnpm build:fresh   # clean + build

Outputs are committed. CI runs pnpm build then git diff --exit-code — drift fails the build.

Consumption

Web (Tailwind + CSS)

// tailwind.config.ts
import preset from '@torio-luxury/design-tokens/tailwind';
export default { presets: [preset], content: [...] };

/* global stylesheet */
@import '@torio-luxury/design-tokens/css/light';
@import '@torio-luxury/design-tokens/css/dark';

Theme switch: toggle data-theme="dark" on <html> (or <body>).

Flutter

# pubspec.yaml
dependencies:
  torio_tokens:
    git:
      url: https://github.com/toneyavuz/torio-luxury-design-tokens
      path: dart

import 'package:torio_tokens/torio_tokens.dart';

MaterialApp(
  theme: TorioTheme.light(),
  darkTheme: TorioTheme.dark(),
);

Figma

Import build/json/flat.{light,dark}.json via your Figma tokens plugin.

Adding / changing tokens

Edit JSON under tokens/primitive/ or tokens/semantic/.
pnpm build to regenerate outputs.
Commit token + generated artifacts together.
Renaming a semantic key is a breaking change — coordinate frontend bumps.

Contracts

Token shape: DTCG ($value, $type, optional $description).
References: {color.gold.500} resolve at build time.
No magic: every consumed value lives in tokens/. Components never hardcode colors or sizes.
WCAG: every shipped color pair clears AA (4.5:1 body / 3:1 UI). See docs/05 §3.3 in the planning workspace.

Versioning

Semantic-release on main. Conventional Commits + DCO sign-off (git commit -s).

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme