nova-design-model-testing 0.0.1 → 0.0.3

package/guidelines/components/passcode.md

@@ -0,0 +1,35 @@
+# Passcode
+
+AI-ready documentation for passcode dots.
+
+## Overview
+
+Passcode fields display masked digits as dots while a user types a numeric code.
+
+## Configurable properties (from Figma)
+
+| Property | Default value | Configurable values |
+| --- | --- | --- |
+| State | Enabled | Enabled, Error, Disabled |
+| Typing state | To type | To type, Typing, Typed |
+
+## Layout & constraints
+
+- Dot size: 16px
+- Gap between dots: 24px
+- Default length: 6 digits
+
+## Design tokens
+
+- Enabled idle: `background/neutral/tertiary`
+- Enabled active: `text icon/functional/link`
+- Error idle: `Input/error/bg`
+- Error active: `text icon/functional/danger`
+- Disabled idle: `background/neutral/disabled`
+- Disabled active: `text icon/neutral/disabled`
+
+## Behavior
+
+- Clicking focuses the hidden input and enables typing.
+- Dots fill as digits are entered.
+

package/guidelines/components/radio.md

@@ -0,0 +1,62 @@
+# Radio
+
+AI-ready documentation for the radio button component.
+
+## Overview
+
+Radio buttons show a single-select choice with selected/unselected states.
+
+## Configurable properties (from Figma)
+
+| Property | Default value | Configurable values |
+| --- | --- | --- |
+| Selected | true | true, false |
+| State | Enabled | Enabled, Disabled |
+
+## Layout & constraints
+
+- Container size: 24px
+- Indicator size: 20px
+
+## Design tokens
+
+- Enabled selected: `radio/active/selected`
+- Enabled unselected: `radio/active/unselected`
+- Disabled selected: `radio/disabled/selected`
+- Disabled unselected: `radio/disabled/unselected`
+
+## Behavior
+
+- Clicking selects the radio.
+- Disabled state blocks interaction.
+
+# radio
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/tabs.md

@@ -0,0 +1,30 @@
+# taUs
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/text-field.md

@@ -0,0 +1,68 @@
+# Text field
+
+AI-ready documentation for the text field component and its nested slots.
+
+## Overview
+
+Text fields collect short text input and can include labels, supporting text, prefix text, and an inline action.
+
+## Anatomy
+
+- Label area (label + optional)
+- Text field base
+- Leading icon slot
+- Action button slot
+- Prefix text
+- Main text (hint or entered)
+- Clear button (typing)
+- Trailing icon slot
+- Supporting text area
+
+## Configurable properties (from Figma)
+
+| Property | Default value | Configurable values |
+| --- | --- | --- |
+| Show label area | true | true, false |
+| Show supporting text area | true | true, false |
+| State | Enabled | Enabled, Error, Disabled |
+| Typing state | To type | To type, Typing, Typed |
+
+## Nested properties
+
+- `labelText` and `showOptional`
+- `supportingText`
+- `prefixText`, `hintText`, `valueText`
+- `showLeadingIcon`, `showTrailingIcon`
+- `showActionButton`, `actionLabel`, `showActionTrailingIcon`
+- `showClearButton`
+
+## Layout & constraints
+
+- Base height: 48px
+- Padding: 16px horizontal, 12px vertical
+- Corner radius: 24px
+- Gap between items: 8px
+- Label/supporting text spacing: 8px
+- Content should stay within the base container (no overflow).
+
+## Design tokens
+
+- Enabled background: `background/neutral/secondary`
+- Typing background: `background/neutral/tertiary`
+- Error background: `Input/error/bg`
+- Disabled background: `background/neutral/disabled`
+- Text: `text icon/neutral/primary`
+- Placeholder: `text icon/neutral/placeholder`
+- Supporting text: `text icon/neutral/secondary` or `text icon/functional/danger`
+
+## Behavior
+
+- “To type” shows hint text.
+- “Typing” shows caret and clear button.
+- “Typed” shows entered text without caret.
+- Disabled state dims label, text, and action button.
+
+## Accessibility
+
+- Provide a visible label or aria-label.
+- Ensure error supporting text describes how to fix the issue.

package/guidelines/components/toast.md

@@ -0,0 +1,30 @@
+# toast
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/toggle.md

@@ -0,0 +1,30 @@
+# toggle
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/components/top-navigation.md

@@ -0,0 +1,30 @@
+# top navigation
+
+## Overview
+
+Describe the purpose of the component and where it is used.
+
+## Anatomy
+
+List the key parts and slots of the component.
+
+## Usage guidelines
+
+- When to use
+- When not to use
+
+## Behavior
+
+Document states, interactions, and motion notes.
+
+## Accessibility
+
+Note keyboard, focus, and contrast requirements.
+
+## Content guidelines
+
+Provide copy and content rules.
+
+## Do and don't
+
+Add visuals or bullet lists for correct and incorrect usage.

package/guidelines/foundations/colors.md

@@ -0,0 +1,43 @@
+# Color Foundations
+
+This foundation captures the *primitive* color palette from Figma. These values
+are raw brand colors that will later map to semantic tokens (e.g. text, surface,
+border, interactive). Keep primitives stable; only semantic tokens should change
+when UI meaning or usage evolves.
+
+## Source of truth
+
+Primitives live in `src/design-system/tokens/primitives/colors.json`.
+Semantic tokens live in:
+
+- `src/design-system/tokens/semantic/colors.light.json`
+- `src/design-system/tokens/semantic/colors.dark.json`
+
+### How we use primitives
+
+1. **Define primitives once** (this file) from Figma variables.
+2. **Create semantic tokens** by mapping primitives to use-cases:
+   - `color.text.primary`
+   - `color.surface.neutral`
+   - `color.border.subtle`
+   - `color.interactive.primary`
+3. **Component styles** consume semantic tokens only.
+
+### Light and dark mode setup
+
+- **Light mode** values are stored in `colors.light.json`.
+- **Dark mode** values are stored in `colors.dark.json`.
+- At runtime, we expose semantic tokens as CSS variables on `:root` (light) and
+  override them on `[data-theme="dark"]`. Components read the variables instead
+  of hardcoded hex values.
+
+### Why this structure
+
+- Aligns designers and devs on the same palette.
+- Allows refactoring meaning without changing brand palette.
+- Supports themes by remapping semantics, not primitives.
+
+## Notes
+
+- Opacity values are stored as hex with alpha (e.g. `#0505051a` for 10%).
+- Figma variable names were normalized to camelCase keys for JSON.

package/guidelines/foundations/radius.md

@@ -0,0 +1,16 @@
+# Radius Foundation
+
+Radius tokens define how rounded components and surfaces feel. Nova uses the
+`radius-*` scale from Figma to keep the UI consistent.
+
+## Rules
+
+- Use `radius-xs`–`radius-md` for compact controls.
+- Use `radius-lg`–`radius-xl` for cards and sheets.
+- Use `radius-xxl` for hero surfaces and large containers.
+
+## Examples
+
+- Buttons: `radius-md`
+- Cards: `radius-lg`
+- Modals / sheets: `radius-xl`

package/guidelines/foundations/spacing.md

@@ -0,0 +1,16 @@
+# Spacing Foundation
+
+Spacing tokens define the rhythm of layouts, padding, and gaps. Nova uses the
+`space-*` scale from Figma to keep screens aligned and predictable.
+
+## Rules
+
+- Use only spacing tokens for padding and margins.
+- Prefer smaller steps in dense UI, larger steps in marketing or empty layouts.
+- Avoid custom pixel values unless documenting a new token.
+
+## Examples
+
+- Cards: use `md` or `lg` for internal padding.
+- Lists: use `xs` or `sm` for vertical spacing between rows.
+- Sections: use `xl`+ for separations between major blocks.

package/guidelines/guidelines.md

@@ -0,0 +1,36 @@
+This project has access to a custom Design System called Nova. Files in the guidelines directory show how to use Nova.
+
+Always read:
+- All files with a name that starts overview-
+- All files in the guidelines/design-tokens folder
+
+Read the files in the guidelines/components directory when you want to use the component with that name. For example, if you want to use Toast, read guidelines/components/toast.md. Additional context can be found by reading the code for the corresponding component in src/design-system/components/.
+
+## Component Usage Guidelines - READ THIS FIRST
+
+IMPORTANT: Always prefer to use components from Nova if they exist. For example, prefer to use a Button component from Nova, rather than regular button components.
+
+IMPORTANT: Follow these steps IN ORDER before writing any code:
+
+Step 1: Read Overview Files (REQUIRED)
+Read ALL files with a name that starts with "overview-" in the guidelines directory:
+- overview-setup.md
+- overview-components.md  
+- overview-icons.md
+(And any other overview-*.md files)
+
+Step 2: Read Design Tokens (REQUIRED)
+Read ALL files in the guidelines/design-tokens/ folder. Do NOT skip this step.
+
+Step 3: Plan what components you need to use (REQUIRED)
+
+Step 4: Read Component Guidelines BEFORE Using Components (REQUIRED)
+BEFORE using ANY component, you MUST read its guidelines file first:
+- Using Button? → Read guidelines/components/button.md FIRST
+- Using Toast? → Read guidelines/components/toast.md FIRST
+- Using TextField? → Read guidelines/components/text-field.md FIRST
+
+Step 5: Plan what icons you need to use (REQUIRED)
+Before using ANY icon, you must check to see if that icon exists in the Nova package. If it doesn't, pick a different icon and verify the new icon.
+
+DO NOT write code using a component until you have read its specific guidelines.

package/guidelines/overview-components.md

@@ -0,0 +1,16 @@
+# Overview: Components
+
+Nova provides a wide range of components to build consistent user interfaces.
+
+## Available Components
+All component guidelines can be found in `guidelines/components/`.
+
+Key components include:
+- Button
+- TextField
+- Toast
+- Card
+- Avatar
+- And many more...
+
+Always check the specific guideline file before using a component.

package/guidelines/overview-icons.md

@@ -0,0 +1,18 @@
+# Overview: Icons
+
+Nova uses a custom icon set. Icons are available as SVG files in `src/assets/icons/`.
+
+## Icon Styles
+- **Line**: Outline icons.
+- **Solid**: Filled icons.
+
+## Usage
+Use the `Icon` component to render icons.
+Example:
+```jsx
+import { Icon } from './design-system/components/icon/Icon';
+
+<Icon name="search" style="line" />
+```
+
+Before using an icon, verify its existence in `src/assets/icons/`.

package/guidelines/overview-setup.md

@@ -0,0 +1,15 @@
+# Overview: Setup
+
+Nova is the design system for this project. It is built with React and Tailwind CSS.
+
+## Installation
+The components are located in `src/design-system/components`.
+Foundations are in `src/design-system/foundations`.
+Tokens are in `src/design-system/tokens`.
+
+## Usage
+To use a component, import it from its directory in `src/design-system/components`.
+Example:
+```jsx
+import { Button } from './design-system/components/button/Button';
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nova-design-model-testing",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}