@c2n/theme 0.0.6

package/dist/tokens.css

@@ -0,0 +1,94 @@
+/* GENERATED by @c2n/theme scripts/theme-generator. Do not edit by hand. */
+/*
+ * Design tokens of @c2n/theme. Light values on the root, dark values under [data-theme='dark'] / .c2-dark and
+ * as the OS preference fallback. Override any token on :root (or on a subtree) to theme every component.
+ */
+:root,
+:host,
+[data-theme='light'],
+.c2-light {
+  color-scheme: light;
+  --c2-theme--color-primary: #0265dc;
+  --c2-theme--color-primary-hover: #0154b8;
+  --c2-theme--color-primary-active: #01469a;
+  --c2-theme--color-on-primary: #ffffff;
+  --c2-theme--color-primary-container: #edf1fe;
+  --c2-theme--color-surface: #ffffff;
+  --c2-theme--color-surface-container-low: #fafafa;
+  --c2-theme--color-surface-container: #f4f4f5;
+  --c2-theme--color-on-surface: #18181b;
+  --c2-theme--color-on-surface-variant: #71717a;
+  --c2-theme--color-outline: #d4d4d8;
+  --c2-theme--color-outline-variant: #e4e4e7;
+  --c2-theme--color-outline-strong: #a1a1aa;
+  --c2-theme--color-error: #dc2626;
+  --c2-theme--color-scrim: rgba(9, 9, 11, 0.45);
+  --c2-theme--color-inverse-surface: #18181b;
+  --c2-theme--color-on-inverse-surface: #fafafa;
+  --c2-theme--font-size-sm: 12px;
+  --c2-theme--font-size-md: 14px;
+  --c2-theme--font-weight-medium: 500;
+  --c2-theme--font-weight-semibold: 600;
+  --c2-theme--radius-sm: 4px;
+  --c2-theme--radius-md: 6px;
+  --c2-theme--radius-lg: 8px;
+  --c2-theme--radius-xl: 14px;
+  --c2-theme--radius-full: 999px;
+  --c2-theme--border-width: 1px;
+  --c2-theme--focus-ring: 2px solid rgba(2, 101, 220, 0.4);
+  --c2-theme--disabled-opacity: 0.38;
+  --c2-theme--motion-scale: 1;
+  --c2-theme--shadow-md: 0 8px 24px rgba(24, 24, 27, 0.08);
+  --c2-theme--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.25);
+}
+
+[data-theme='dark'],
+.c2-dark {
+  color-scheme: dark;
+  --c2-theme--color-primary: #5aa3ff;
+  --c2-theme--color-primary-hover: #7bb6ff;
+  --c2-theme--color-primary-active: #9cc9ff;
+  --c2-theme--color-on-primary: #032a5c;
+  --c2-theme--color-primary-container: #0f2d5c;
+  --c2-theme--color-surface: #18181b;
+  --c2-theme--color-surface-container-low: #1f1f23;
+  --c2-theme--color-surface-container: #27272a;
+  --c2-theme--color-on-surface: #f4f4f5;
+  --c2-theme--color-on-surface-variant: #a1a1aa;
+  --c2-theme--color-outline: #3f3f46;
+  --c2-theme--color-outline-variant: #27272a;
+  --c2-theme--color-outline-strong: #52525b;
+  --c2-theme--color-error: #f87171;
+  --c2-theme--color-scrim: rgba(0, 0, 0, 0.6);
+  --c2-theme--color-inverse-surface: #f4f4f5;
+  --c2-theme--color-on-inverse-surface: #18181b;
+  --c2-theme--focus-ring: 2px solid rgba(90, 163, 255, 0.5);
+  --c2-theme--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+  --c2-theme--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']):not(.c2-light) {
+    color-scheme: dark;
+    --c2-theme--color-primary: #5aa3ff;
+    --c2-theme--color-primary-hover: #7bb6ff;
+    --c2-theme--color-primary-active: #9cc9ff;
+    --c2-theme--color-on-primary: #032a5c;
+    --c2-theme--color-primary-container: #0f2d5c;
+    --c2-theme--color-surface: #18181b;
+    --c2-theme--color-surface-container-low: #1f1f23;
+    --c2-theme--color-surface-container: #27272a;
+    --c2-theme--color-on-surface: #f4f4f5;
+    --c2-theme--color-on-surface-variant: #a1a1aa;
+    --c2-theme--color-outline: #3f3f46;
+    --c2-theme--color-outline-variant: #27272a;
+    --c2-theme--color-outline-strong: #52525b;
+    --c2-theme--color-error: #f87171;
+    --c2-theme--color-scrim: rgba(0, 0, 0, 0.6);
+    --c2-theme--color-inverse-surface: #f4f4f5;
+    --c2-theme--color-on-inverse-surface: #18181b;
+    --c2-theme--focus-ring: 2px solid rgba(90, 163, 255, 0.5);
+    --c2-theme--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+    --c2-theme--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
+  }
+}

package/dist/tokens.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The `@c2n/theme` design tokens.
+ *
+ * Tokens follow the component variable grammar with the pseudo-component prefix `c2-theme` and no part
+ * segment: `--c2-theme--<name>`. The generated `base.css` maps every `@c2n/*` component variable onto one
+ * of them, keeping the component's own default as the innermost fallback, e.g.
+ * `--c2-list--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #e4e4e7))`.
+ *
+ * Keep this file to erasable TypeScript syntax: the theme generator imports it directly under Node.
+ */
+export declare const TOKEN_PREFIX = "--c2-theme--";
+export type TokenCategory = 'color' | 'font' | 'radius' | 'border' | 'focus' | 'disabled' | 'motion' | 'shadow';
+export interface TokenDef {
+    /** Full custom property name, e.g. `--c2-theme--color-primary`. */
+    name: string;
+    category: TokenCategory;
+    /** Light value. `null` means "not set by default" (the component fallback applies). */
+    light: string | null;
+    /** Dark value; omitted when the token is theme-invariant. */
+    dark?: string;
+    description: string;
+}
+export declare const tokens: TokenDef[];
+export declare const tokenNames: string[];
+/** Look up a token by its full name. */
+export declare function getToken(name: string): TokenDef | undefined;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,YAAY,iBAAiB,CAAA;AAE1C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE/G,MAAM,WAAW,QAAQ;IACvB,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,aAAa,CAAA;IACvB,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;CACpB;AAMD,eAAO,MAAM,MAAM,EAAE,QAAQ,EAyC5B,CAAA;AAED,eAAO,MAAM,UAAU,UAA4B,CAAA;AAEnD,wCAAwC;AACxC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAE3D"}

package/dist/tokens.js

@@ -0,0 +1,62 @@
+/**
+ * The `@c2n/theme` design tokens.
+ *
+ * Tokens follow the component variable grammar with the pseudo-component prefix `c2-theme` and no part
+ * segment: `--c2-theme--<name>`. The generated `base.css` maps every `@c2n/*` component variable onto one
+ * of them, keeping the component's own default as the innermost fallback, e.g.
+ * `--c2-list--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #e4e4e7))`.
+ *
+ * Keep this file to erasable TypeScript syntax: the theme generator imports it directly under Node.
+ */
+export const TOKEN_PREFIX = '--c2-theme--';
+function token(name, category, light, description, dark) {
+    return { name: `${TOKEN_PREFIX}${name}`, category, light, dark, description };
+}
+export const tokens = [
+    // Colour roles
+    token('color-primary', 'color', '#0265dc', 'Accent colour: filled buttons, selected states, focused borders, links.', '#5aa3ff'),
+    token('color-primary-hover', 'color', '#0154b8', 'Accent colour on hover.', '#7bb6ff'),
+    token('color-primary-active', 'color', '#01469a', 'Accent colour while pressed.', '#9cc9ff'),
+    token('color-on-primary', 'color', '#ffffff', 'Text and icons drawn on the accent colour.', '#032a5c'),
+    token('color-primary-container', 'color', '#edf1fe', 'Soft accent surface, e.g. a selected list item.', '#0f2d5c'),
+    token('color-surface', 'color', '#ffffff', 'Default surface of inputs, lists, cards, dialogs.', '#18181b'),
+    token('color-surface-container-low', 'color', '#fafafa', 'Slightly raised surface: side navigation, read-only fields, subtle hover.', '#1f1f23'),
+    token('color-surface-container', 'color', '#f4f4f5', 'Hover surface for rows and icon buttons.', '#27272a'),
+    token('color-on-surface', 'color', '#18181b', 'Primary text colour.', '#f4f4f5'),
+    token('color-on-surface-variant', 'color', '#71717a', 'Secondary text, placeholders, icons, supporting text.', '#a1a1aa'),
+    token('color-outline', 'color', '#d4d4d8', 'Resting border colour of inputs, cards and lists.', '#3f3f46'),
+    token('color-outline-variant', 'color', '#e4e4e7', 'Hairline dividers and light borders.', '#27272a'),
+    token('color-outline-strong', 'color', '#a1a1aa', 'Border colour on hover.', '#52525b'),
+    token('color-error', 'color', '#dc2626', 'Error borders, error text, required indicators.', '#f87171'),
+    token('color-scrim', 'color', 'rgba(9, 9, 11, 0.45)', 'Backdrop behind dialogs and drawers.', 'rgba(0, 0, 0, 0.6)'),
+    token('color-inverse-surface', 'color', '#18181b', 'High-contrast surface, e.g. tooltips.', '#f4f4f5'),
+    token('color-on-inverse-surface', 'color', '#fafafa', 'Text drawn on the inverse surface.', '#18181b'),
+    // Typography
+    token('font-family', 'font', null, 'Font family of every component. Unset by default so components inherit the page font.'),
+    token('font-size-sm', 'font', '12px', 'Small text: supporting text, tooltips, descriptions, timestamps.'),
+    token('font-size-md', 'font', '14px', 'Body text: buttons, inputs, list items, dialog content.'),
+    token('font-weight-medium', 'font', '500', 'Medium weight: buttons, headers, tooltips.'),
+    token('font-weight-semibold', 'font', '600', 'Semibold weight: dialog titles, list headings, avatars.'),
+    // Shape
+    token('radius-sm', 'radius', '4px', 'Small radius: checkboxes, link buttons, inline controls.'),
+    token('radius-md', 'radius', '6px', 'Default radius: buttons, inputs, list items, tooltips.'),
+    token('radius-lg', 'radius', '8px', 'Large radius: cards, panels, popovers.'),
+    token('radius-xl', 'radius', '14px', 'Extra large radius: dialogs.'),
+    token('radius-full', 'radius', '999px', 'Pill / circle radius: avatars, icon buttons.'),
+    // Borders
+    token('border-width', 'border', '1px', 'Width of every themed border.'),
+    token('border', 'border', null, 'Complete resting border shorthand. Unset by default: it falls back to `border-width solid color-outline`.'),
+    // Interaction
+    token('focus-ring', 'focus', '2px solid rgba(2, 101, 220, 0.4)', 'Focus-visible outline of every component.', '2px solid rgba(90, 163, 255, 0.5)'),
+    token('disabled-opacity', 'disabled', '0.38', 'Opacity of disabled components.'),
+    token('motion-scale', 'motion', '1', 'Multiplier applied to every transition and animation duration (0 disables motion).'),
+    // Elevation
+    token('shadow-md', 'shadow', '0 8px 24px rgba(24, 24, 27, 0.08)', 'Shadow of popovers, menus and tooltips.', '0 8px 24px rgba(0, 0, 0, 0.45)'),
+    token('shadow-lg', 'shadow', '0 24px 60px rgba(0, 0, 0, 0.25)', 'Shadow of dialogs and drawers.', '0 24px 60px rgba(0, 0, 0, 0.6)'),
+];
+export const tokenNames = tokens.map((t) => t.name);
+/** Look up a token by its full name. */
+export function getToken(name) {
+    return tokens.find((t) => t.name === name);
+}
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The `@c2n/theme` design tokens.\n *\n * Tokens follow the component variable grammar with the pseudo-component prefix `c2-theme` and no part\n * segment: `--c2-theme--<name>`. The generated `base.css` maps every `@c2n/*` component variable onto one\n * of them, keeping the component's own default as the innermost fallback, e.g.\n * `--c2-list--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #e4e4e7))`.\n *\n * Keep this file to erasable TypeScript syntax: the theme generator imports it directly under Node.\n */\n\nexport const TOKEN_PREFIX = '--c2-theme--'\n\nexport type TokenCategory = 'color' | 'font' | 'radius' | 'border' | 'focus' | 'disabled' | 'motion' | 'shadow'\n\nexport interface TokenDef {\n  /** Full custom property name, e.g. `--c2-theme--color-primary`. */\n  name: string\n  category: TokenCategory\n  /** Light value. `null` means \"not set by default\" (the component fallback applies). */\n  light: string | null\n  /** Dark value; omitted when the token is theme-invariant. */\n  dark?: string\n  description: string\n}\n\nfunction token(name: string, category: TokenCategory, light: string | null, description: string, dark?: string): TokenDef {\n  return { name: `${TOKEN_PREFIX}${name}`, category, light, dark, description }\n}\n\nexport const tokens: TokenDef[] = [\n  // Colour roles\n  token('color-primary', 'color', '#0265dc', 'Accent colour: filled buttons, selected states, focused borders, links.', '#5aa3ff'),\n  token('color-primary-hover', 'color', '#0154b8', 'Accent colour on hover.', '#7bb6ff'),\n  token('color-primary-active', 'color', '#01469a', 'Accent colour while pressed.', '#9cc9ff'),\n  token('color-on-primary', 'color', '#ffffff', 'Text and icons drawn on the accent colour.', '#032a5c'),\n  token('color-primary-container', 'color', '#edf1fe', 'Soft accent surface, e.g. a selected list item.', '#0f2d5c'),\n  token('color-surface', 'color', '#ffffff', 'Default surface of inputs, lists, cards, dialogs.', '#18181b'),\n  token('color-surface-container-low', 'color', '#fafafa', 'Slightly raised surface: side navigation, read-only fields, subtle hover.', '#1f1f23'),\n  token('color-surface-container', 'color', '#f4f4f5', 'Hover surface for rows and icon buttons.', '#27272a'),\n  token('color-on-surface', 'color', '#18181b', 'Primary text colour.', '#f4f4f5'),\n  token('color-on-surface-variant', 'color', '#71717a', 'Secondary text, placeholders, icons, supporting text.', '#a1a1aa'),\n  token('color-outline', 'color', '#d4d4d8', 'Resting border colour of inputs, cards and lists.', '#3f3f46'),\n  token('color-outline-variant', 'color', '#e4e4e7', 'Hairline dividers and light borders.', '#27272a'),\n  token('color-outline-strong', 'color', '#a1a1aa', 'Border colour on hover.', '#52525b'),\n  token('color-error', 'color', '#dc2626', 'Error borders, error text, required indicators.', '#f87171'),\n  token('color-scrim', 'color', 'rgba(9, 9, 11, 0.45)', 'Backdrop behind dialogs and drawers.', 'rgba(0, 0, 0, 0.6)'),\n  token('color-inverse-surface', 'color', '#18181b', 'High-contrast surface, e.g. tooltips.', '#f4f4f5'),\n  token('color-on-inverse-surface', 'color', '#fafafa', 'Text drawn on the inverse surface.', '#18181b'),\n  // Typography\n  token('font-family', 'font', null, 'Font family of every component. Unset by default so components inherit the page font.'),\n  token('font-size-sm', 'font', '12px', 'Small text: supporting text, tooltips, descriptions, timestamps.'),\n  token('font-size-md', 'font', '14px', 'Body text: buttons, inputs, list items, dialog content.'),\n  token('font-weight-medium', 'font', '500', 'Medium weight: buttons, headers, tooltips.'),\n  token('font-weight-semibold', 'font', '600', 'Semibold weight: dialog titles, list headings, avatars.'),\n  // Shape\n  token('radius-sm', 'radius', '4px', 'Small radius: checkboxes, link buttons, inline controls.'),\n  token('radius-md', 'radius', '6px', 'Default radius: buttons, inputs, list items, tooltips.'),\n  token('radius-lg', 'radius', '8px', 'Large radius: cards, panels, popovers.'),\n  token('radius-xl', 'radius', '14px', 'Extra large radius: dialogs.'),\n  token('radius-full', 'radius', '999px', 'Pill / circle radius: avatars, icon buttons.'),\n  // Borders\n  token('border-width', 'border', '1px', 'Width of every themed border.'),\n  token('border', 'border', null, 'Complete resting border shorthand. Unset by default: it falls back to `border-width solid color-outline`.'),\n  // Interaction\n  token('focus-ring', 'focus', '2px solid rgba(2, 101, 220, 0.4)', 'Focus-visible outline of every component.', '2px solid rgba(90, 163, 255, 0.5)'),\n  token('disabled-opacity', 'disabled', '0.38', 'Opacity of disabled components.'),\n  token('motion-scale', 'motion', '1', 'Multiplier applied to every transition and animation duration (0 disables motion).'),\n  // Elevation\n  token('shadow-md', 'shadow', '0 8px 24px rgba(24, 24, 27, 0.08)', 'Shadow of popovers, menus and tooltips.', '0 8px 24px rgba(0, 0, 0, 0.45)'),\n  token('shadow-lg', 'shadow', '0 24px 60px rgba(0, 0, 0, 0.25)', 'Shadow of dialogs and drawers.', '0 24px 60px rgba(0, 0, 0, 0.6)'),\n]\n\nexport const tokenNames = tokens.map((t) => t.name)\n\n/** Look up a token by its full name. */\nexport function getToken(name: string): TokenDef | undefined {\n  return tokens.find((t) => t.name === name)\n}\n"]}