@duro-app/tokens 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { colors } from './tokens/colors.css';
 export { spacing, radii } from './tokens/spacing.css';
-export { typography } from './tokens/typography.css';
+export { layoutSpacing } from './tokens/layout-spacing.css';
+export { typography, typeScale } from './tokens/typography.css';
+export { typePresets } from './tokens/type-presets.css';
 export { shadows } from './tokens/shadows.css';
 export { lightTheme, lightShadows } from './themes/light.css';
 export { highContrastTheme, highContrastShadows } from './themes/high-contrast.css';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,OAAO,EAAE,KAAK,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAC,UAAU,EAAC,MAAM,yBAAyB,CAAA;AAClD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAG5C,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,OAAO,EAAE,KAAK,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAC7D,OAAO,EAAC,WAAW,EAAC,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAG5C,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAA"}

package/dist/index.js

@@ -1,4 +1,4 @@
-const r = {
+const e = {
   bg: "var(--bg-xqkwqtp)",
   bgCard: "var(--bgCard-xj2l5r)",
   bgCardHover: "var(--bgCardHover-xlxk7vw)",
@@ -22,26 +22,44 @@ const r = {
   warningBg: "var(--warningBg-xtnxqss)",
   warningBorder: "var(--warningBorder-x1ev2mr5)",
   warningText: "var(--warningText-x1lgjghx)",
+  info: "var(--info-x97ho0r)",
   infoBg: "var(--infoBg-xho8jir)",
   infoBorder: "var(--infoBorder-xnevk3x)",
   infoText: "var(--infoText-x19pseus)",
   __varGroupHash__: "xjvd03b"
-}, a = {
+}, t = {
   xs: "var(--xs-xxfyjsd)",
   sm: "var(--sm-xbh8y7f)",
+  ms: "var(--ms-x13y09zs)",
   md: "var(--md-x3pkb85)",
   lg: "var(--lg-x34mutn)",
   xl: "var(--xl-xttpygj)",
   xxl: "var(--xxl-xbe9eha)",
+  xxxl: "var(--xxxl-xroalp5)",
   __varGroupHash__: "x6uc9q"
-}, e = {
+}, n = {
   sm: "var(--sm-x1bhtfs5)",
   md: "var(--md-xx2g89g)",
   lg: "var(--lg-xwd56yl)",
   full: "var(--full-x9vxdtd)",
   __varGroupHash__: "xw3ffwm"
-}, t = {
+}, i = {
+  stackXs: "var(--stackXs-x1qfrfo2)",
+  stackSm: "var(--stackSm-x2rk1ut)",
+  stackMd: "var(--stackMd-xhblkt4)",
+  stackLg: "var(--stackLg-xeue779)",
+  stackXl: "var(--stackXl-x7sbbgu)",
+  inlineXs: "var(--inlineXs-xq4tp4f)",
+  inlineSm: "var(--inlineSm-x2o8bbf)",
+  inlineMd: "var(--inlineMd-x1oalkxi)",
+  inlineLg: "var(--inlineLg-xz69o43)",
+  containerSm: "var(--containerSm-x3nosus)",
+  containerMd: "var(--containerMd-x170dvin)",
+  containerLg: "var(--containerLg-x1n6aasq)",
+  __varGroupHash__: "x16nfoyr"
+}, r = {
   fontFamily: "var(--fontFamily-xvrmnat)",
+  fontFamilyMono: "var(--fontFamilyMono-x1bzqfky)",
   fontSizeXs: "var(--fontSizeXs-x1w5m325)",
   fontSizeSm: "var(--fontSizeSm-x1bjjs4u)",
   fontSizeMd: "var(--fontSizeMd-xq8d99q)",
@@ -54,33 +72,176 @@ const r = {
   fontWeightBold: "var(--fontWeightBold-x1pjkvwg)",
   lineHeight: "var(--lineHeight-x1gubzd5)",
   __varGroupHash__: "xs62swl"
-}, x = {
+}, a = {
+  fontSize1: "var(--fontSize1-xx27tux)",
+  fontSize2: "var(--fontSize2-x5hag8h)",
+  fontSize3: "var(--fontSize3-x1mf6j39)",
+  fontSize4: "var(--fontSize4-xh0hch2)",
+  fontSize5: "var(--fontSize5-xcllv62)",
+  fontSize6: "var(--fontSize6-xo5veds)",
+  fontSize7: "var(--fontSize7-x1j85tz8)",
+  fontSize8: "var(--fontSize8-x17zhits)",
+  fontSize9: "var(--fontSize9-xveysf7)",
+  lineHeight1: "var(--lineHeight1-x17o1wol)",
+  lineHeight2: "var(--lineHeight2-xinpx5n)",
+  lineHeight3: "var(--lineHeight3-x1163vpm)",
+  lineHeight4: "var(--lineHeight4-x1y0jdbp)",
+  lineHeight5: "var(--lineHeight5-xjln4cz)",
+  lineHeight6: "var(--lineHeight6-x1h1b5wo)",
+  lineHeight7: "var(--lineHeight7-xx3gx0p)",
+  lineHeight8: "var(--lineHeight8-xk1f09j)",
+  lineHeight9: "var(--lineHeight9-xshcxhh)",
+  displaySm: "var(--displaySm-x5inqzv)",
+  displayMd: "var(--displayMd-x1oektom)",
+  displayLg: "var(--displayLg-x6qsr1u)",
+  letterSpacingTight: "var(--letterSpacingTight-xmavxfk)",
+  letterSpacingNormal: "var(--letterSpacingNormal-x1ih41v1)",
+  letterSpacingWide: "var(--letterSpacingWide-xt8z9rj)",
+  __varGroupHash__: "x4cj49w"
+}, o = {
+  bodySm: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x1hn3ytp",
+    "lineHeight-kLWn49": "lineHeight-xzs5d81",
+    "fontWeight-k63SB2": "fontWeight-xrec02b",
+    "letterSpacing-kb6lSQ": "letterSpacing-x2e73ve",
+    $$css: "tokens/type-presets.css.ts:6"
+  },
+  bodyMd: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-xfzcsg9",
+    "lineHeight-kLWn49": "lineHeight-x80sjjd",
+    "fontWeight-k63SB2": "fontWeight-xrec02b",
+    "letterSpacing-kb6lSQ": "letterSpacing-x2e73ve",
+    $$css: "tokens/type-presets.css.ts:13"
+  },
+  bodyLg: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x1kws70c",
+    "lineHeight-kLWn49": "lineHeight-x1487en2",
+    "fontWeight-k63SB2": "fontWeight-xrec02b",
+    "letterSpacing-kb6lSQ": "letterSpacing-x2e73ve",
+    $$css: "tokens/type-presets.css.ts:20"
+  },
+  caption: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x19zw8p8",
+    "lineHeight-kLWn49": "lineHeight-xsnwo96",
+    "fontWeight-k63SB2": "fontWeight-xrec02b",
+    "letterSpacing-kb6lSQ": "letterSpacing-x121swot",
+    $$css: "tokens/type-presets.css.ts:29"
+  },
+  label: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x1hn3ytp",
+    "lineHeight-kLWn49": "lineHeight-xzs5d81",
+    "fontWeight-k63SB2": "fontWeight-x120ksxs",
+    "letterSpacing-kb6lSQ": "letterSpacing-x2e73ve",
+    $$css: "tokens/type-presets.css.ts:36"
+  },
+  code: {
+    "fontFamily-kMv6JI": "fontFamily-x1kygxdj",
+    "fontSize-kGuDYH": "fontSize-x1hn3ytp",
+    "lineHeight-kLWn49": "lineHeight-xzs5d81",
+    "fontWeight-k63SB2": "fontWeight-xrec02b",
+    "letterSpacing-kb6lSQ": "letterSpacing-x2e73ve",
+    $$css: "tokens/type-presets.css.ts:43"
+  },
+  overline: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x19zw8p8",
+    "lineHeight-kLWn49": "lineHeight-xsnwo96",
+    "fontWeight-k63SB2": "fontWeight-x1x12jc5",
+    "letterSpacing-kb6lSQ": "letterSpacing-x121swot",
+    "textTransform-kP9fke": "textTransform-xtvhhri",
+    $$css: "tokens/type-presets.css.ts:50"
+  },
+  headingSm: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-xtv95mj",
+    "lineHeight-kLWn49": "lineHeight-xyb71hx",
+    "fontWeight-k63SB2": "fontWeight-x1x12jc5",
+    "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
+    $$css: "tokens/type-presets.css.ts:60"
+  },
+  headingMd: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x1qndi8g",
+    "lineHeight-kLWn49": "lineHeight-x17ovj3u",
+    "fontWeight-k63SB2": "fontWeight-x1x12jc5",
+    "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
+    $$css: "tokens/type-presets.css.ts:67"
+  },
+  headingLg: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-xo0rcgw",
+    "lineHeight-kLWn49": "lineHeight-x18micsl",
+    "fontWeight-k63SB2": "fontWeight-xhkckuk",
+    "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
+    $$css: "tokens/type-presets.css.ts:74"
+  },
+  headingXl: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x6ugw34",
+    "lineHeight-kLWn49": "lineHeight-x1f79cfb",
+    "fontWeight-k63SB2": "fontWeight-xhkckuk",
+    "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
+    $$css: "tokens/type-presets.css.ts:81"
+  },
+  displaySm: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x1lwaixd",
+    "lineHeight-kLWn49": "lineHeight-x1u7k74",
+    "fontWeight-k63SB2": "fontWeight-xhkckuk",
+    "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
+    $$css: "tokens/type-presets.css.ts:90"
+  },
+  displayMd: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-xrqn33v",
+    "lineHeight-kLWn49": "lineHeight-x1uo3zyz",
+    "fontWeight-k63SB2": "fontWeight-xhkckuk",
+    "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
+    $$css: "tokens/type-presets.css.ts:97"
+  },
+  displayLg: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x1s08cw3",
+    "lineHeight-kLWn49": "lineHeight-x1159mfc",
+    "fontWeight-k63SB2": "fontWeight-xhkckuk",
+    "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
+    $$css: "tokens/type-presets.css.ts:104"
+  }
+}, s = {
   sm: "var(--sm-x17hhtln)",
   md: "var(--md-x1oyt0aw)",
   lg: "var(--lg-x1mxd62i)",
   __varGroupHash__: "x13v825q"
-}, o = {
-  xjvd03b: "x18itf25 xjvd03b",
+}, x = {
+  xjvd03b: "xrtwk39 xjvd03b",
   $$css: !0
-}, v = {
+}, l = {
   x13v825q: "xv9ibj0 x13v825q",
   $$css: !0
-}, n = {
-  xjvd03b: "x1qgt5a2 xjvd03b",
+}, g = {
+  xjvd03b: "xaveibd xjvd03b",
   $$css: !0
-}, s = {
+}, c = {
   x13v825q: "x15e39jv x13v825q",
   $$css: !0
 };
 export {
-  r as colors,
-  s as highContrastShadows,
-  n as highContrastTheme,
-  v as lightShadows,
-  o as lightTheme,
-  e as radii,
-  x as shadows,
-  a as spacing,
-  t as typography
+  e as colors,
+  c as highContrastShadows,
+  g as highContrastTheme,
+  i as layoutSpacing,
+  l as lightShadows,
+  x as lightTheme,
+  n as radii,
+  s as shadows,
+  t as spacing,
+  o as typePresets,
+  a as typeScale,
+  r as typography
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/shadows.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n})\n\nexport const radii = css.defineVars({\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.1rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n})\n"],"names":["colors","spacing","radii","typography","shadows","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"AAEO,MAAMA,IAAS;AAAA,EACpB,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AAAA,EACN,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,kBAAkB;AACpB,GC5BaC,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,kBAAkB;AACpB,GACaC,IAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,kBAAkB;AACpB,GCfaC,IAAa;AAAA,EACxB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,kBAAkB;AACpB,GCdaC,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AACpB,GCHaC,IAAa;AAAA,EACxB,SAAS;AAAA,EACT,OAAO;AACT,GACaC,IAAe;AAAA,EAC1B,UAAU;AAAA,EACV,OAAO;AACT,GCPaC,IAAoB;AAAA,EAC/B,SAAS;AAAA,EACT,OAAO;AACT,GACaC,IAAsB;AAAA,EACjC,UAAU;AAAA,EACV,OAAO;AACT;"}
+{"version":3,"file":"index.js","sources":["../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n})\n\nexport const radii = css.defineVars({\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n  // Vertical rhythm (stack gaps)\n  stackXs: '4px',\n  stackSm: '8px',\n  stackMd: '16px',\n  stackLg: '24px',\n  stackXl: '48px',\n\n  // Horizontal rhythm (inline gaps)\n  inlineXs: '4px',\n  inlineSm: '8px',\n  inlineMd: '16px',\n  inlineLg: '24px',\n\n  // Container insets\n  containerSm: '16px',\n  containerMd: '24px',\n  containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.125rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n  // 9-step font size scale\n  fontSize1: '0.75rem', // 12px — captions, badges\n  fontSize2: '0.8125rem', // 13px — small UI\n  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n  fontSize4: '1rem', // 16px — body text\n  fontSize5: '1.125rem', // 18px — body-lg\n  fontSize6: '1.25rem', // 20px — subheading\n  fontSize7: '1.5rem', // 24px — heading-sm\n  fontSize8: '1.875rem', // 30px — heading-md\n  fontSize9: '2.25rem', // 36px — heading-lg\n\n  // Matched line-heights\n  lineHeight1: '1rem', // 16px\n  lineHeight2: '1.25rem', // 20px\n  lineHeight3: '1.25rem', // 20px\n  lineHeight4: '1.5rem', // 24px\n  lineHeight5: '1.5rem', // 24px\n  lineHeight6: '1.75rem', // 28px\n  lineHeight7: '2rem', // 32px\n  lineHeight8: '2.25rem', // 36px\n  lineHeight9: '2.75rem', // 44px\n\n  // Fluid display sizes\n  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n  // Letter-spacing\n  letterSpacingTight: '-0.02em',\n  letterSpacingNormal: '0',\n  letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n  // Body\n  bodySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize5,\n    lineHeight: typeScale.lineHeight5,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n\n  // UI\n  caption: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingWide,\n  },\n  label: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightMedium,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  code: {\n    fontFamily: typography.fontFamilyMono,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  overline: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n\n  // Heading\n  headingSm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize6,\n    lineHeight: typeScale.lineHeight6,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize7,\n    lineHeight: typeScale.lineHeight7,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize8,\n    lineHeight: typeScale.lineHeight8,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingXl: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize9,\n    lineHeight: typeScale.lineHeight9,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n\n  // Display (fluid)\n  displaySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displaySm,\n    lineHeight: 1.2,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayMd,\n    lineHeight: 1.15,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayLg,\n    lineHeight: 1.1,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n})\n"],"names":["colors","spacing","radii","layoutSpacing","typography","typeScale","typePresets","shadows","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}

package/dist/themes/high-contrast.css.d.ts

@@ -23,6 +23,7 @@ export declare const highContrastTheme: css.Theme<css.VarGroup<Readonly<{
     warningBg: string;
     warningBorder: string;
     warningText: string;
+    info: string;
     infoBg: string;
     infoBorder: string;
     infoText: string;

package/dist/themes/high-contrast.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"high-contrast.css.d.ts","sourceRoot":"","sources":["../../src/themes/high-contrast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2B5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;oBAI9B,CAAA"}
+{"version":3,"file":"high-contrast.css.d.ts","sourceRoot":"","sources":["../../src/themes/high-contrast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA4B5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;oBAI9B,CAAA"}

package/dist/themes/light.css.d.ts

@@ -23,6 +23,7 @@ export declare const lightTheme: css.Theme<css.VarGroup<Readonly<{
     warningBg: string;
     warningBorder: string;
     warningText: string;
+    info: string;
     infoBg: string;
     infoBorder: string;
     infoText: string;

package/dist/themes/light.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"light.css.d.ts","sourceRoot":"","sources":["../../src/themes/light.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2BrB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;oBAIvB,CAAA"}
+{"version":3,"file":"light.css.d.ts","sourceRoot":"","sources":["../../src/themes/light.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA4BrB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;oBAIvB,CAAA"}

package/dist/tokens/colors.css.d.ts

@@ -23,6 +23,7 @@ export declare const colors: css.VarGroup<Readonly<{
     warningBg: string;
     warningBorder: string;
     warningText: string;
+    info: string;
     infoBg: string;
     infoBorder: string;
     infoText: string;

package/dist/tokens/colors.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.css.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;WA0CjB,CAAA"}
+{"version":3,"file":"colors.css.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA2CjB,CAAA"}

package/dist/tokens/layout-spacing.css.d.ts

@@ -0,0 +1,16 @@
+import { css } from 'react-strict-dom';
+export declare const layoutSpacing: css.VarGroup<Readonly<{
+    stackXs: string;
+    stackSm: string;
+    stackMd: string;
+    stackLg: string;
+    stackXl: string;
+    inlineXs: string;
+    inlineSm: string;
+    inlineMd: string;
+    inlineLg: string;
+    containerSm: string;
+    containerMd: string;
+    containerLg: string;
+}>, symbol>;
+//# sourceMappingURL=layout-spacing.css.d.ts.map

package/dist/tokens/layout-spacing.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-spacing.css.d.ts","sourceRoot":"","sources":["../../src/tokens/layout-spacing.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,aAAa;;;;;;;;;;;;;WAkBxB,CAAA"}

package/dist/tokens/spacing.css.d.ts

@@ -2,10 +2,12 @@ import { css } from 'react-strict-dom';
 export declare const spacing: css.VarGroup<Readonly<{
     xs: string;
     sm: string;
+    ms: string;
     md: string;
     lg: string;
     xl: string;
     xxl: string;
+    xxxl: string;
 }>, symbol>;
 export declare const radii: css.VarGroup<Readonly<{
     sm: string;

package/dist/tokens/spacing.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.css.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,OAAO;;;;;;;WAOlB,CAAA;AAEF,eAAO,MAAM,KAAK;;;;;WAKhB,CAAA"}
+{"version":3,"file":"spacing.css.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,OAAO;;;;;;;;;WASlB,CAAA;AAEF,eAAO,MAAM,KAAK;;;;;WAKhB,CAAA"}

package/dist/tokens/type-presets.css.d.ts

@@ -0,0 +1,103 @@
+import { css } from 'react-strict-dom';
+export declare const typePresets: Readonly<{
+    readonly bodySm: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly bodyMd: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly bodyLg: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly caption: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly label: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly code: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly overline: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+        readonly textTransform: css.StyleXClassNameFor<"textTransform", "uppercase">;
+    }>;
+    readonly headingSm: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly headingMd: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly headingLg: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly headingXl: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly displaySm: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", 1.2>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly displayMd: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", 1.15>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+    readonly displayLg: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", 1.1>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+    }>;
+}>;
+//# sourceMappingURL=type-presets.css.d.ts.map

package/dist/tokens/type-presets.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-presets.css.d.ts","sourceRoot":"","sources":["../../src/tokens/type-presets.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAGpC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2GtB,CAAA"}

package/dist/tokens/typography.css.d.ts

@@ -1,6 +1,7 @@
 import { css } from 'react-strict-dom';
 export declare const typography: css.VarGroup<Readonly<{
     fontFamily: string;
+    fontFamilyMono: string;
     fontSizeXs: string;
     fontSizeSm: string;
     fontSizeMd: string;
@@ -13,4 +14,30 @@ export declare const typography: css.VarGroup<Readonly<{
     fontWeightBold: string;
     lineHeight: string;
 }>, symbol>;
+export declare const typeScale: css.VarGroup<Readonly<{
+    fontSize1: string;
+    fontSize2: string;
+    fontSize3: string;
+    fontSize4: string;
+    fontSize5: string;
+    fontSize6: string;
+    fontSize7: string;
+    fontSize8: string;
+    fontSize9: string;
+    lineHeight1: string;
+    lineHeight2: string;
+    lineHeight3: string;
+    lineHeight4: string;
+    lineHeight5: string;
+    lineHeight6: string;
+    lineHeight7: string;
+    lineHeight8: string;
+    lineHeight9: string;
+    displaySm: string;
+    displayMd: string;
+    displayLg: string;
+    letterSpacingTight: string;
+    letterSpacingNormal: string;
+    letterSpacingWide: string;
+}>, symbol>;
 //# sourceMappingURL=typography.css.d.ts.map

package/dist/tokens/typography.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.css.d.ts","sourceRoot":"","sources":["../../src/tokens/typography.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;WAcrB,CAAA"}
+{"version":3,"file":"typography.css.d.ts","sourceRoot":"","sources":["../../src/tokens/typography.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;WAerB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;WAgCpB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/tokens",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -16,13 +16,15 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -30,7 +32,9 @@
     "./tokens/colors.css": "./src/tokens/colors.css.ts",
     "./tokens/spacing.css": "./src/tokens/spacing.css.ts",
     "./tokens/typography.css": "./src/tokens/typography.css.ts",
+    "./tokens/layout-spacing.css": "./src/tokens/layout-spacing.css.ts",
     "./tokens/shadows.css": "./src/tokens/shadows.css.ts",
+    "./tokens/type-presets.css": "./src/tokens/type-presets.css.ts",
     "./themes/light.css": "./src/themes/light.css.ts",
     "./themes/high-contrast.css": "./src/themes/high-contrast.css.ts"
   },

package/src/index.ts

@@ -0,0 +1,11 @@
+// Tokens
+export {colors} from './tokens/colors.css'
+export {spacing, radii} from './tokens/spacing.css'
+export {layoutSpacing} from './tokens/layout-spacing.css'
+export {typography, typeScale} from './tokens/typography.css'
+export {typePresets} from './tokens/type-presets.css'
+export {shadows} from './tokens/shadows.css'
+
+// Themes
+export {lightTheme, lightShadows} from './themes/light.css'
+export {highContrastTheme, highContrastShadows} from './themes/high-contrast.css'

package/src/themes/high-contrast.css.ts

@@ -0,0 +1,39 @@
+import {css} from 'react-strict-dom'
+import {colors} from '../tokens/colors.css'
+import {shadows} from '../tokens/shadows.css'
+
+export const highContrastTheme = css.createTheme(colors, {
+  bg: '#000000',
+  bgCard: '#111111',
+  bgCardHover: '#1a1a1a',
+  text: '#ffffff',
+  textMuted: '#b0b0b0',
+  accent: '#60a5fa',
+  accentHover: '#93c5fd',
+  accentContrast: '#000000',
+  border: '#555555',
+  error: '#f87171',
+  errorHover: '#fca5a5',
+  errorBg: 'rgba(248, 113, 113, 0.15)',
+  errorBorder: 'rgba(248, 113, 113, 0.5)',
+  errorText: '#fca5a5',
+  errorContrast: '#000000',
+  success: '#4ade80',
+  successBg: 'rgba(74, 222, 128, 0.15)',
+  successBorder: 'rgba(74, 222, 128, 0.5)',
+  successText: '#86efac',
+  warning: '#fcd34d',
+  warningBg: 'rgba(252, 211, 77, 0.15)',
+  warningBorder: 'rgba(252, 211, 77, 0.5)',
+  warningText: '#fef08a',
+  info: '#60a5fa',
+  infoBg: 'rgba(96, 165, 250, 0.15)',
+  infoBorder: 'rgba(96, 165, 250, 0.5)',
+  infoText: '#bfdbfe',
+})
+
+export const highContrastShadows = css.createTheme(shadows, {
+  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',
+  md: '0 4px 12px rgba(0, 0, 0, 0.7)',
+  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',
+})

package/src/themes/light.css.ts

@@ -0,0 +1,39 @@
+import {css} from 'react-strict-dom'
+import {colors} from '../tokens/colors.css'
+import {shadows} from '../tokens/shadows.css'
+
+export const lightTheme = css.createTheme(colors, {
+  bg: '#ffffff',
+  bgCard: '#f5f5f5',
+  bgCardHover: '#ebebeb',
+  text: '#1a1a1a',
+  textMuted: '#4a4a4a',
+  accent: '#1e40af',
+  accentHover: '#1a3799',
+  accentContrast: '#ffffff',
+  border: '#d4d4d4',
+  error: '#991b1b',
+  errorHover: '#7f1d1d',
+  errorBg: 'rgba(153, 27, 27, 0.08)',
+  errorBorder: 'rgba(153, 27, 27, 0.3)',
+  errorText: '#7f1d1d',
+  errorContrast: '#ffffff',
+  success: '#166534',
+  successBg: 'rgba(22, 101, 52, 0.08)',
+  successBorder: 'rgba(22, 101, 52, 0.3)',
+  successText: '#14532d',
+  warning: '#92400e',
+  warningBg: 'rgba(146, 64, 14, 0.08)',
+  warningBorder: 'rgba(146, 64, 14, 0.3)',
+  warningText: '#78350f',
+  info: '#1e40af',
+  infoBg: 'rgba(30, 64, 175, 0.08)',
+  infoBorder: 'rgba(30, 64, 175, 0.3)',
+  infoText: '#1e40af',
+})
+
+export const lightShadows = css.createTheme(shadows, {
+  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',
+  md: '0 4px 12px rgba(0, 0, 0, 0.12)',
+  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',
+})

package/src/tokens/colors.css.ts

@@ -0,0 +1,46 @@
+import {css} from 'react-strict-dom'
+
+export const colors = css.defineVars({
+  // Backgrounds
+  bg: '#0f0f0f',
+  bgCard: '#1a1a1a',
+  bgCardHover: '#242424',
+
+  // Text
+  text: '#e5e5e5',
+  textMuted: '#b0b0b0',
+
+  // Accent
+  accent: '#6aaffc',
+  accentHover: '#93c5fd',
+  accentContrast: '#000000',
+
+  // Border
+  border: '#333333',
+
+  // Semantic — Error
+  error: '#f87171',
+  errorHover: '#fca5a5',
+  errorBg: 'rgba(248, 113, 113, 0.1)',
+  errorBorder: 'rgba(248, 113, 113, 0.3)',
+  errorText: '#fca5a5',
+  errorContrast: '#000000',
+
+  // Semantic — Success
+  success: '#22c55e',
+  successBg: 'rgba(34, 197, 94, 0.1)',
+  successBorder: 'rgba(34, 197, 94, 0.3)',
+  successText: '#86efac',
+
+  // Semantic — Warning
+  warning: '#fbbf24',
+  warningBg: 'rgba(251, 191, 36, 0.1)',
+  warningBorder: 'rgba(251, 191, 36, 0.3)',
+  warningText: '#fde68a',
+
+  // Semantic — Info (uses accent)
+  info: '#6aaffc',
+  infoBg: 'rgba(106, 175, 252, 0.1)',
+  infoBorder: 'rgba(106, 175, 252, 0.3)',
+  infoText: '#93c5fd',
+})

package/src/tokens/layout-spacing.css.ts

@@ -0,0 +1,21 @@
+import {css} from 'react-strict-dom'
+
+export const layoutSpacing = css.defineVars({
+  // Vertical rhythm (stack gaps)
+  stackXs: '4px',
+  stackSm: '8px',
+  stackMd: '16px',
+  stackLg: '24px',
+  stackXl: '48px',
+
+  // Horizontal rhythm (inline gaps)
+  inlineXs: '4px',
+  inlineSm: '8px',
+  inlineMd: '16px',
+  inlineLg: '24px',
+
+  // Container insets
+  containerSm: '16px',
+  containerMd: '24px',
+  containerLg: '32px',
+})

package/src/tokens/shadows.css.ts

@@ -0,0 +1,7 @@
+import {css} from 'react-strict-dom'
+
+export const shadows = css.defineVars({
+  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',
+  md: '0 4px 12px rgba(0, 0, 0, 0.4)',
+  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
+})

package/src/tokens/spacing.css.ts

@@ -0,0 +1,19 @@
+import {css} from 'react-strict-dom'
+
+export const spacing = css.defineVars({
+  xs: '4px',
+  sm: '8px',
+  ms: '12px',
+  md: '16px',
+  lg: '24px',
+  xl: '32px',
+  xxl: '48px',
+  xxxl: '64px',
+})
+
+export const radii = css.defineVars({
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  full: '9999px',
+})

package/src/tokens/type-presets.css.ts

@@ -0,0 +1,111 @@
+import {css} from 'react-strict-dom'
+import {typography, typeScale} from './typography.css'
+
+export const typePresets = css.create({
+  // Body
+  bodySm: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize3,
+    lineHeight: typeScale.lineHeight3,
+    fontWeight: typography.fontWeightNormal,
+    letterSpacing: typeScale.letterSpacingNormal,
+  },
+  bodyMd: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize4,
+    lineHeight: typeScale.lineHeight4,
+    fontWeight: typography.fontWeightNormal,
+    letterSpacing: typeScale.letterSpacingNormal,
+  },
+  bodyLg: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize5,
+    lineHeight: typeScale.lineHeight5,
+    fontWeight: typography.fontWeightNormal,
+    letterSpacing: typeScale.letterSpacingNormal,
+  },
+
+  // UI
+  caption: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize1,
+    lineHeight: typeScale.lineHeight1,
+    fontWeight: typography.fontWeightNormal,
+    letterSpacing: typeScale.letterSpacingWide,
+  },
+  label: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize3,
+    lineHeight: typeScale.lineHeight3,
+    fontWeight: typography.fontWeightMedium,
+    letterSpacing: typeScale.letterSpacingNormal,
+  },
+  code: {
+    fontFamily: typography.fontFamilyMono,
+    fontSize: typeScale.fontSize3,
+    lineHeight: typeScale.lineHeight3,
+    fontWeight: typography.fontWeightNormal,
+    letterSpacing: typeScale.letterSpacingNormal,
+  },
+  overline: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize1,
+    lineHeight: typeScale.lineHeight1,
+    fontWeight: typography.fontWeightSemibold,
+    letterSpacing: typeScale.letterSpacingWide,
+    textTransform: 'uppercase' as const,
+  },
+
+  // Heading
+  headingSm: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize6,
+    lineHeight: typeScale.lineHeight6,
+    fontWeight: typography.fontWeightSemibold,
+    letterSpacing: typeScale.letterSpacingTight,
+  },
+  headingMd: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize7,
+    lineHeight: typeScale.lineHeight7,
+    fontWeight: typography.fontWeightSemibold,
+    letterSpacing: typeScale.letterSpacingTight,
+  },
+  headingLg: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize8,
+    lineHeight: typeScale.lineHeight8,
+    fontWeight: typography.fontWeightBold,
+    letterSpacing: typeScale.letterSpacingTight,
+  },
+  headingXl: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize9,
+    lineHeight: typeScale.lineHeight9,
+    fontWeight: typography.fontWeightBold,
+    letterSpacing: typeScale.letterSpacingTight,
+  },
+
+  // Display (fluid)
+  displaySm: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.displaySm,
+    lineHeight: 1.2,
+    fontWeight: typography.fontWeightBold,
+    letterSpacing: typeScale.letterSpacingTight,
+  },
+  displayMd: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.displayMd,
+    lineHeight: 1.15,
+    fontWeight: typography.fontWeightBold,
+    letterSpacing: typeScale.letterSpacingTight,
+  },
+  displayLg: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.displayLg,
+    lineHeight: 1.1,
+    fontWeight: typography.fontWeightBold,
+    letterSpacing: typeScale.letterSpacingTight,
+  },
+})

package/src/tokens/typography.css.ts

@@ -0,0 +1,52 @@
+import {css} from 'react-strict-dom'
+
+export const typography = css.defineVars({
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',
+  fontFamilyMono: '"SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Courier New", monospace',
+  fontSizeXs: '0.75rem',
+  fontSizeSm: '0.875rem',
+  fontSizeMd: '1rem',
+  fontSizeLg: '1.125rem',
+  fontSizeXl: '1.25rem',
+  fontSizeHeading: '1.5rem',
+  fontWeightNormal: '400',
+  fontWeightMedium: '500',
+  fontWeightSemibold: '600',
+  fontWeightBold: '700',
+  lineHeight: '1.5',
+})
+
+export const typeScale = css.defineVars({
+  // 9-step font size scale
+  fontSize1: '0.75rem', // 12px — captions, badges
+  fontSize2: '0.8125rem', // 13px — small UI
+  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)
+  fontSize4: '1rem', // 16px — body text
+  fontSize5: '1.125rem', // 18px — body-lg
+  fontSize6: '1.25rem', // 20px — subheading
+  fontSize7: '1.5rem', // 24px — heading-sm
+  fontSize8: '1.875rem', // 30px — heading-md
+  fontSize9: '2.25rem', // 36px — heading-lg
+
+  // Matched line-heights
+  lineHeight1: '1rem', // 16px
+  lineHeight2: '1.25rem', // 20px
+  lineHeight3: '1.25rem', // 20px
+  lineHeight4: '1.5rem', // 24px
+  lineHeight5: '1.5rem', // 24px
+  lineHeight6: '1.75rem', // 28px
+  lineHeight7: '2rem', // 32px
+  lineHeight8: '2.25rem', // 36px
+  lineHeight9: '2.75rem', // 44px
+
+  // Fluid display sizes
+  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px
+  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px
+  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px
+
+  // Letter-spacing
+  letterSpacingTight: '-0.02em',
+  letterSpacingNormal: '0',
+  letterSpacingWide: '0.04em',
+})