@momoi-labs/kiso 0.1.0

package/tokens/build/tokens.d.ts

@@ -0,0 +1,160 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/** Pure white. Light theme elevated surface. */
+export const colorWhite: string;
+/** Pure black. Reserved for overlays and shadows. */
+export const colorBlack: string;
+export const colorNeutral100: string;
+export const colorNeutral200: string;
+export const colorNeutral300: string;
+export const colorNeutral400: string;
+export const colorNeutral500: string;
+export const colorNeutral600: string;
+export const colorNeutral700: string;
+export const colorNeutral800: string;
+export const colorNeutral900: string;
+export const colorAccent200: string;
+export const colorAccent300: string;
+export const colorAccent400: string;
+export const colorAccent600: string;
+export const colorAccent700: string;
+export const colorAccent800: string;
+export const colorAccent900: string;
+/** Base accent primitive. Airy lilac on dark (10.03:1) and deeper violet on light (6.36:1) — calibrated up from the marketing site accent, which fails AA in both themes. */
+export const colorAccentBase: string;
+/** Success status primitive. */
+export const colorStatusSuccess: string;
+/** Warning status primitive. */
+export const colorStatusWarning: string;
+/** Danger status primitive. */
+export const colorStatusDanger: string;
+/** Info status primitive. */
+export const colorStatusInfo: string;
+/** App canvas. Surface role, never text. */
+export const semanticBackground: string;
+/** Cards, panels, table rows. Surface role. */
+export const semanticSurface: string;
+/** Menus, popovers, dialogs. Surface role. */
+export const semanticElevatedSurface: string;
+/** Primary text. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticForeground: string;
+/** Secondary text, labels. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticMutedForeground: string;
+/** Placeholders, timestamps, hints. Large text and non-essential metadata only (>=3:1). Never body copy. */
+export const semanticSubtleForeground: string;
+/** Dividers and input outlines. Non-text role. */
+export const semanticBorder: string;
+/** Primary interactive colour: links, active state, primary button fill. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticPrimary: string;
+/** Emphasis and highlight. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticAccent: string;
+/** Positive state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticSuccess: string;
+/** Caution state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticWarning: string;
+/** Destructive or error state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticDanger: string;
+/** Neutral informational state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
+export const semanticInfo: string;
+/** Focus ring. Non-text role. >=3:1 against background. */
+export const semanticFocus: string;
+/** Disabled text and controls. Exempt from contrast minimums per WCAG 1.4.3. */
+export const semanticDisabled: string;
+/** Heading family. Inter, same as body; headings differentiate by size and weight. */
+export const fontHeading: string;
+/** Body family. Inter for interface text. */
+export const fontBody: string;
+/** Monospace family. Code and machine-readable values (hashes, identifiers). Numeric tables use body with tabular figures, not mono. */
+export const fontMono: string;
+/** Step -2. Captions, timestamps, footnotes, table metadata. */
+export const typeSizeMetadata: string;
+/** Step -1. Labels, buttons, form captions, small UI text. */
+export const typeSizeLabel: string;
+/** Step 0. Body copy; base size for code and numeric text. */
+export const typeSizeBody: string;
+/** Step +1. Small headings, card titles. */
+export const typeSizeH3: string;
+/** Step +2. Section headings. */
+export const typeSizeH2: string;
+/** Step +3. Page headings. */
+export const typeSizeH1: string;
+/** Step +4. Display headings - the calm ceiling; the 48px hero is marketing scale, not product scale. */
+export const typeSizeDisplay: string;
+/** Regular - body, metadata, code. */
+export const typeWeightRegular: number;
+/** Medium - labels, display headings. */
+export const typeWeightMedium: number;
+/** Semibold - headings. */
+export const typeWeightSemibold: number;
+/** Bold - emphasis within headings. */
+export const typeWeightBold: number;
+/** Display and headings. */
+export const typeLineHeightTight: number;
+/** Body, labels, code. */
+export const typeLineHeightNormal: number;
+/** Long-form reading, notes. 1.6 is rationalized - 1.75 is part of the ad-hoc set and is deliberately not reused. */
+export const typeLineHeightRelaxed: number;
+/** Display and headings - a hair tighter than body. */
+export const typeLetterSpacingHeading: string;
+/** Neutral tracking - the default for body, metadata and code roles. */
+export const typeLetterSpacingNormal: string;
+/** Labels and small UI text. */
+export const typeLetterSpacingLabel: string;
+/** Display headings. */
+export const typeRoleDisplay: string;
+/** Page headings (h1); h2 and h3 step down through type.size. */
+export const typeRoleHeading: string;
+/** Body copy. */
+export const typeRoleBody: string;
+/** Labels, buttons, form captions. */
+export const typeRoleLabel: string;
+/** Captions, timestamps, footnotes. */
+export const typeRoleMetadata: string;
+/** Code and data values (monospace). */
+export const typeRoleCode: string;
+/** Numeric and tabular data. Carries the namespaced com.momoi-labs.kiso.fontVariantNumeric extension (tabular-nums), emitted by the formatter as the global --font-variant-numeric feature token. */
+export const typeRoleNumeric: string;
+/** Tight internal padding, icon gaps. */
+export const spacingXs: string;
+/** Component padding, small gaps. */
+export const spacingSm: string;
+/** Default padding, form gaps. */
+export const spacingMd: string;
+/** Card padding, section gaps. */
+export const spacingLg: string;
+/** Page margins, panel gaps. */
+export const spacingXl: string;
+/** Wide page margins, dialog padding. */
+export const spacing2xl: string;
+/** Section spacing. */
+export const spacing3xl: string;
+/** Large section spacing, hero padding. */
+export const spacing4xl: string;
+/** Inputs, small controls. */
+export const radiusSm: string;
+/** Cards, buttons, panels. */
+export const radiusMd: string;
+/** Dialogs, popovers, large surfaces. */
+export const radiusLg: string;
+/** Pills, badges, avatars. */
+export const radiusFull: string;
+/** Cards on canvas - subtle separation. */
+export const shadowSm: string;
+/** Menus, popovers, dialogs - floating layers. */
+export const shadowMd: string;
+/** Focus and hover feedback. */
+export const motionDurationFast: string;
+/** Open/close and state changes. */
+export const motionDurationNormal: string;
+/** Ease-out - elements settle, no bounce, no delight for its own sake. */
+export const motionEasingStandard: string;
+/** Small tablets, portrait. */
+export const breakpointSm: string;
+/** Tablets, landscape phones. */
+export const breakpointMd: string;
+/** Desktop. */
+export const breakpointLg: string;
+/** Wide desktop. */
+export const breakpointXl: string;

package/tokens/build/tokens.json

@@ -0,0 +1,88 @@
+{
+  "color-white": {"colorSpace":"srgb","components":[1,1,1],"hex":"#ffffff"},
+  "color-black": {"colorSpace":"srgb","components":[0,0,0],"hex":"#000000"},
+  "color-neutral-100": {"colorSpace":"srgb","components":[0.9804,0.9765,0.9686],"hex":"#faf9f7"},
+  "color-neutral-200": {"colorSpace":"srgb","components":[0.9569,0.949,0.9333],"hex":"#f4f2ee"},
+  "color-neutral-300": {"colorSpace":"srgb","components":[0.8784,0.8627,0.8392],"hex":"#e0dcd6"},
+  "color-neutral-400": {"colorSpace":"srgb","components":[0.7137,0.698,0.6824],"hex":"#b6b2ae"},
+  "color-neutral-500": {"colorSpace":"srgb","components":[0.5412,0.5216,0.498],"hex":"#8a857f"},
+  "color-neutral-600": {"colorSpace":"srgb","components":[0.3725,0.3569,0.3412],"hex":"#5f5b57"},
+  "color-neutral-700": {"colorSpace":"srgb","components":[0.1922,0.1843,0.2157],"hex":"#312f37"},
+  "color-neutral-800": {"colorSpace":"srgb","components":[0.149,0.1451,0.1686],"hex":"#26252b"},
+  "color-neutral-900": {"colorSpace":"srgb","components":[0.1059,0.102,0.1176],"hex":"#1b1a1e"},
+  "color-accent-200": {"colorSpace":"srgb","components":[0.9294,0.9098,0.9922],"hex":"#ede8fd"},
+  "color-accent-300": {"colorSpace":"srgb","components":[0.8706,0.8353,0.9843],"hex":"#ded5fb"},
+  "color-accent-400": {"colorSpace":"srgb","components":[0.7686,0.7059,0.9608],"hex":"#c4b4f5"},
+  "color-accent-600": {"colorSpace":"srgb","components":[0.4902,0.4078,0.8196],"hex":"#7d68d1"},
+  "color-accent-700": {"colorSpace":"srgb","components":[0.3961,0.3216,0.7216],"hex":"#6552b8"},
+  "color-accent-800": {"colorSpace":"srgb","components":[0.2745,0.1882,0.6196],"hex":"#46309e"},
+  "color-accent-900": {"colorSpace":"srgb","components":[0.1804,0.1294,0.4392],"hex":"#2e2170"},
+  "color-accent-base": {"colorSpace":"srgb","components":[0.7961,0.7412,0.9686],"hex":"#cbbdf7"},
+  "color-status-success": {"colorSpace":"srgb","components":[0.3059,0.8392,0.6039],"hex":"#4ed69a"},
+  "color-status-warning": {"colorSpace":"srgb","components":[0.9098,0.7529,0.3529],"hex":"#e8c05a"},
+  "color-status-danger": {"colorSpace":"srgb","components":[0.9569,0.5255,0.498],"hex":"#f4867f"},
+  "color-status-info": {"colorSpace":"srgb","components":[0.5608,0.7882,0.9608],"hex":"#8fc9f5"},
+  "semantic-background": {"colorSpace":"srgb","components":[0.1059,0.102,0.1176],"hex":"#1b1a1e"},
+  "semantic-surface": {"colorSpace":"srgb","components":[0.149,0.1451,0.1686],"hex":"#26252b"},
+  "semantic-elevated-surface": {"colorSpace":"srgb","components":[0.1922,0.1843,0.2157],"hex":"#312f37"},
+  "semantic-foreground": {"colorSpace":"srgb","components":[0.9804,0.9765,0.9686],"hex":"#faf9f7"},
+  "semantic-muted-foreground": {"colorSpace":"srgb","components":[0.7137,0.698,0.6824],"hex":"#b6b2ae"},
+  "semantic-subtle-foreground": {"colorSpace":"srgb","components":[0.5412,0.5216,0.498],"hex":"#8a857f"},
+  "semantic-border": {"colorSpace":"srgb","components":[0.3725,0.3569,0.3412],"hex":"#5f5b57"},
+  "semantic-primary": {"colorSpace":"srgb","components":[0.7961,0.7412,0.9686],"hex":"#cbbdf7"},
+  "semantic-accent": {"colorSpace":"srgb","components":[0.8706,0.8353,0.9843],"hex":"#ded5fb"},
+  "semantic-success": {"colorSpace":"srgb","components":[0.3059,0.8392,0.6039],"hex":"#4ed69a"},
+  "semantic-warning": {"colorSpace":"srgb","components":[0.9098,0.7529,0.3529],"hex":"#e8c05a"},
+  "semantic-danger": {"colorSpace":"srgb","components":[0.9569,0.5255,0.498],"hex":"#f4867f"},
+  "semantic-info": {"colorSpace":"srgb","components":[0.5608,0.7882,0.9608],"hex":"#8fc9f5"},
+  "semantic-focus": {"colorSpace":"srgb","components":[0.8706,0.8353,0.9843],"hex":"#ded5fb"},
+  "semantic-disabled": {"colorSpace":"srgb","components":[0.3725,0.3569,0.3412],"hex":"#5f5b57"},
+  "font-heading": ["Inter","system-ui","sans-serif"],
+  "font-body": ["Inter","system-ui","sans-serif"],
+  "font-mono": ["JetBrains Mono","ui-monospace","monospace"],
+  "type-size-metadata": {"value":11,"unit":"px"},
+  "type-size-label": {"value":13,"unit":"px"},
+  "type-size-body": {"value":16,"unit":"px"},
+  "type-size-h3": {"value":19,"unit":"px"},
+  "type-size-h2": {"value":23,"unit":"px"},
+  "type-size-h1": {"value":28,"unit":"px"},
+  "type-size-display": {"value":33,"unit":"px"},
+  "type-weight-regular": 400,
+  "type-weight-medium": 500,
+  "type-weight-semibold": 600,
+  "type-weight-bold": 700,
+  "type-line-height-tight": 1.2,
+  "type-line-height-normal": 1.5,
+  "type-line-height-relaxed": 1.6,
+  "type-letter-spacing-heading": {"value":-0.01,"unit":"rem"},
+  "type-letter-spacing-normal": {"value":0,"unit":"rem"},
+  "type-letter-spacing-label": {"value":0.02,"unit":"rem"},
+  "type-role-display": {"fontFamily":["Inter","system-ui","sans-serif"],"fontSize":{"value":33,"unit":"px"},"fontWeight":500,"letterSpacing":{"value":-0.01,"unit":"rem"},"lineHeight":1.2},
+  "type-role-heading": {"fontFamily":["Inter","system-ui","sans-serif"],"fontSize":{"value":28,"unit":"px"},"fontWeight":600,"letterSpacing":{"value":-0.01,"unit":"rem"},"lineHeight":1.2},
+  "type-role-body": {"fontFamily":["Inter","system-ui","sans-serif"],"fontSize":{"value":16,"unit":"px"},"fontWeight":400,"letterSpacing":{"value":0,"unit":"rem"},"lineHeight":1.5},
+  "type-role-label": {"fontFamily":["Inter","system-ui","sans-serif"],"fontSize":{"value":13,"unit":"px"},"fontWeight":500,"letterSpacing":{"value":0.02,"unit":"rem"},"lineHeight":1.5},
+  "type-role-metadata": {"fontFamily":["Inter","system-ui","sans-serif"],"fontSize":{"value":11,"unit":"px"},"fontWeight":400,"letterSpacing":{"value":0,"unit":"rem"},"lineHeight":1.5},
+  "type-role-code": {"fontFamily":["JetBrains Mono","ui-monospace","monospace"],"fontSize":{"value":13,"unit":"px"},"fontWeight":400,"letterSpacing":{"value":0,"unit":"rem"},"lineHeight":1.5},
+  "type-role-numeric": {"fontFamily":["Inter","system-ui","sans-serif"],"fontSize":{"value":16,"unit":"px"},"fontWeight":400,"letterSpacing":{"value":0,"unit":"rem"},"lineHeight":1.5},
+  "spacing-xs": {"value":4,"unit":"px"},
+  "spacing-sm": {"value":8,"unit":"px"},
+  "spacing-md": {"value":12,"unit":"px"},
+  "spacing-lg": {"value":16,"unit":"px"},
+  "spacing-xl": {"value":24,"unit":"px"},
+  "spacing-2xl": {"value":32,"unit":"px"},
+  "spacing-3xl": {"value":48,"unit":"px"},
+  "spacing-4xl": {"value":64,"unit":"px"},
+  "radius-sm": {"value":4,"unit":"px"},
+  "radius-md": {"value":8,"unit":"px"},
+  "radius-lg": {"value":12,"unit":"px"},
+  "radius-full": {"value":9999,"unit":"px"},
+  "shadow-sm": {"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.24,"hex":"#000000"},"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"}},
+  "shadow-md": {"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.32,"hex":"#000000"},"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":8,"unit":"px"},"spread":{"value":0,"unit":"px"}},
+  "motion-duration-fast": {"value":120,"unit":"ms"},
+  "motion-duration-normal": {"value":200,"unit":"ms"},
+  "motion-easing-standard": [0.2,0,0,1],
+  "breakpoint-sm": {"value":640,"unit":"px"},
+  "breakpoint-md": {"value":768,"unit":"px"},
+  "breakpoint-lg": {"value":1024,"unit":"px"},
+  "breakpoint-xl": {"value":1280,"unit":"px"}
+}

package/tokens/build/tokens.scss

@@ -0,0 +1,89 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$color-white: #ffffff; // Pure white. Light theme elevated surface.
+$color-black: #000000; // Pure black. Reserved for overlays and shadows.
+$color-neutral-100: #faf9f7;
+$color-neutral-200: #f4f2ee;
+$color-neutral-300: #e0dcd6;
+$color-neutral-400: #b6b2ae;
+$color-neutral-500: #8a857f;
+$color-neutral-600: #5f5b57;
+$color-neutral-700: #312f37;
+$color-neutral-800: #26252b;
+$color-neutral-900: #1b1a1e;
+$color-accent-200: #ede8fd;
+$color-accent-300: #ded5fb;
+$color-accent-400: #c4b4f5;
+$color-accent-600: #7d68d1;
+$color-accent-700: #6552b8;
+$color-accent-800: #46309e;
+$color-accent-900: #2e2170;
+$color-accent-base: #cbbdf7; // Base accent primitive. Airy lilac on dark (10.03:1) and deeper violet on light (6.36:1) — calibrated up from the marketing site accent, which fails AA in both themes.
+$color-status-success: #4ed69a; // Success status primitive.
+$color-status-warning: #e8c05a; // Warning status primitive.
+$color-status-danger: #f4867f; // Danger status primitive.
+$color-status-info: #8fc9f5; // Info status primitive.
+$semantic-background: #1b1a1e; // App canvas. Surface role, never text.
+$semantic-surface: #26252b; // Cards, panels, table rows. Surface role.
+$semantic-elevated-surface: #312f37; // Menus, popovers, dialogs. Surface role.
+$semantic-foreground: #faf9f7; // Primary text. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-muted-foreground: #b6b2ae; // Secondary text, labels. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-subtle-foreground: #8a857f; // Placeholders, timestamps, hints. Large text and non-essential metadata only (>=3:1). Never body copy.
+$semantic-border: #5f5b57; // Dividers and input outlines. Non-text role.
+$semantic-primary: #cbbdf7; // Primary interactive colour: links, active state, primary button fill. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-accent: #ded5fb; // Emphasis and highlight. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-success: #4ed69a; // Positive state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-warning: #e8c05a; // Caution state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-danger: #f4867f; // Destructive or error state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-info: #8fc9f5; // Neutral informational state. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
+$semantic-focus: #ded5fb; // Focus ring. Non-text role. >=3:1 against background.
+$semantic-disabled: #5f5b57; // Disabled text and controls. Exempt from contrast minimums per WCAG 1.4.3.
+$font-heading: Inter, system-ui, sans-serif; // Heading family. Inter, same as body; headings differentiate by size and weight.
+$font-body: Inter, system-ui, sans-serif; // Body family. Inter for interface text.
+$font-mono: 'JetBrains Mono', ui-monospace, monospace; // Monospace family. Code and machine-readable values (hashes, identifiers). Numeric tables use body with tabular figures, not mono.
+$type-size-metadata: 11px; // Step -2. Captions, timestamps, footnotes, table metadata.
+$type-size-label: 13px; // Step -1. Labels, buttons, form captions, small UI text.
+$type-size-body: 16px; // Step 0. Body copy; base size for code and numeric text.
+$type-size-h3: 19px; // Step +1. Small headings, card titles.
+$type-size-h2: 23px; // Step +2. Section headings.
+$type-size-h1: 28px; // Step +3. Page headings.
+$type-size-display: 33px; // Step +4. Display headings - the calm ceiling; the 48px hero is marketing scale, not product scale.
+$type-weight-regular: 400; // Regular - body, metadata, code.
+$type-weight-medium: 500; // Medium - labels, display headings.
+$type-weight-semibold: 600; // Semibold - headings.
+$type-weight-bold: 700; // Bold - emphasis within headings.
+$type-line-height-tight: 1.2; // Display and headings.
+$type-line-height-normal: 1.5; // Body, labels, code.
+$type-line-height-relaxed: 1.6; // Long-form reading, notes. 1.6 is rationalized - 1.75 is part of the ad-hoc set and is deliberately not reused.
+$type-letter-spacing-heading: -0.01rem; // Display and headings - a hair tighter than body.
+$type-letter-spacing-normal: 0rem; // Neutral tracking - the default for body, metadata and code roles.
+$type-letter-spacing-label: 0.02rem; // Labels and small UI text.
+$type-role-display: 500 33px/1.2 Inter, system-ui, sans-serif; // Display headings.
+$type-role-heading: 600 28px/1.2 Inter, system-ui, sans-serif; // Page headings (h1); h2 and h3 step down through type.size.
+$type-role-body: 400 16px/1.5 Inter, system-ui, sans-serif; // Body copy.
+$type-role-label: 500 13px/1.5 Inter, system-ui, sans-serif; // Labels, buttons, form captions.
+$type-role-metadata: 400 11px/1.5 Inter, system-ui, sans-serif; // Captions, timestamps, footnotes.
+$type-role-code: 400 13px/1.5 'JetBrains Mono', ui-monospace, monospace; // Code and data values (monospace).
+$type-role-numeric: 400 16px/1.5 Inter, system-ui, sans-serif; // Numeric and tabular data. Carries the namespaced com.momoi-labs.kiso.fontVariantNumeric extension (tabular-nums), emitted by the formatter as the global --font-variant-numeric feature token.
+$spacing-xs: 4px; // Tight internal padding, icon gaps.
+$spacing-sm: 8px; // Component padding, small gaps.
+$spacing-md: 12px; // Default padding, form gaps.
+$spacing-lg: 16px; // Card padding, section gaps.
+$spacing-xl: 24px; // Page margins, panel gaps.
+$spacing-2xl: 32px; // Wide page margins, dialog padding.
+$spacing-3xl: 48px; // Section spacing.
+$spacing-4xl: 64px; // Large section spacing, hero padding.
+$radius-sm: 4px; // Inputs, small controls.
+$radius-md: 8px; // Cards, buttons, panels.
+$radius-lg: 12px; // Dialogs, popovers, large surfaces.
+$radius-full: 9999px; // Pills, badges, avatars.
+$shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.24); // Cards on canvas - subtle separation.
+$shadow-md: 0px 2px 8px 0px rgb(0% 0% 0% / 0.32); // Menus, popovers, dialogs - floating layers.
+$motion-duration-fast: 120ms; // Focus and hover feedback.
+$motion-duration-normal: 200ms; // Open/close and state changes.
+$motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); // Ease-out - elements settle, no bounce, no delight for its own sake.
+$breakpoint-sm: 640px; // Small tablets, portrait.
+$breakpoint-md: 768px; // Tablets, landscape phones.
+$breakpoint-lg: 1024px; // Desktop.
+$breakpoint-xl: 1280px; // Wide desktop.