@cdx-ui/components 0.2.3 → 0.2.4

package/docs/foundations/styles/tokens/all-tokens/content.md

@@ -0,0 +1,192 @@
+# All design tokens (https://design.candescent.com/docs/foundations/styles/tokens/all-tokens)
+
+## Primitives
+
+Our design tokens are broken down into 3 distinct layers: **Primitives**, **FI Primitives**, and **Semantics**.
+
+The tokens in the Primitives layer are constants defined by Tailwind CSS, which serves as the styling layer for the Forge Design System. These tokens are generally not used directly in designs. Instead, they serve as values for the tokens in our Semantics layer.
+
+**Standard palettes**
+
+| Scale | Steps | Example class |
+| --- | --- | --- |
+| `blue` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-blue-500` |
+| `green` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-green-500` |
+| `red` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-red-500` |
+| `amber` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-amber-500` |
+| `orange` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-orange-500` |
+| `yellow` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-yellow-500` |
+| `pink` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-pink-500` |
+| `purple` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-purple-500` |
+| `sky` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-sky-500` |
+| `teal` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-teal-500` |
+| `neutral` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-neutral-500` |
+
+**Singular colors:** `black` (`bg-black`), `transparent` (`bg-transparent`), `white` (`bg-white`)
+
+## FI Primitives
+
+Our design tokens are broken down into 3 distinct layers: **Primitives**, **FI Primitives**, and **Semantics**.
+
+The tokens in the FI Primitives layer are similar to the Primitive tokens, but they are generated based on a FI's brand colors and other selections made in the theme editor.
+
+Generated per FI from the brand inputs, so their values differ for every FI. The input seed keys sit alongside the 50-950 steps.
+
+| Scale | Steps | Example class |
+| --- | --- | --- |
+| `brand` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950; inputs `input` | `bg-brand-500` |
+| `accent` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950; inputs `input` | `bg-accent-500` |
+| `base` | 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | `bg-base-500` |
+
+## Semantics
+
+Our design tokens are broken down into 3 distinct layers: **Primitives**, **FI Primitives**, and **Semantics**.
+
+The tokens in the Semantics layer represent design decisions. These are the core tokens that should be used directly in designs. They typically reference a token from the Primitives or FI Primitives layer.
+
+### Content
+
+Text and icon colors, used as `text-*` utilities. Light and Dark name the primitive each token resolves to in the default theme. An FI theme changes what the FI primitives (`brand`, `accent`, `base`) resolve to, so use the token, never the primitive.
+
+| Token | Utility class | Role | Light | Dark |
+| --- | --- | --- | --- | --- |
+| `content.brand` | `text-content-brand` | brand | `color.brand.700` | `color.brand.300` |
+| `content.brand-on-strong` | `text-content-brand-on-strong` | brand, on strong | `color.white` | `color.brand.950` |
+| `content.brand-on-subtle` | `text-content-brand-on-subtle` | brand, on subtle | `color.brand.800` | `color.brand.100` |
+| `content.primary` | `text-content-primary` | primary | `color.base.950` | `color.white` |
+| `content.secondary` | `text-content-secondary` | secondary | `color.base.600` | `color.base.300` |
+| `content.tertiary` | `text-content-tertiary` | tertiary | `color.base.500` | `color.base.400` |
+| `content.action` | `text-content-action` | action | `color.brand.700` | `color.brand.100` |
+| `content.action-on-strong` | `text-content-action-on-strong` | action, on strong | `color.white` | `color.brand.950` |
+| `content.action-on-subtle` | `text-content-action-on-subtle` | action, on subtle | `color.brand.800` | `color.brand.100` |
+| `content.neutral` | `text-content-neutral` | neutral | `color.base.700` | `color.base.300` |
+| `content.neutral-on-strong` | `text-content-neutral-on-strong` | neutral, on strong | `color.white` | `color.base.900` |
+| `content.neutral-on-subtle` | `text-content-neutral-on-subtle` | neutral, on subtle | `color.base.800` | `color.base.100` |
+| `content.info` | `text-content-info` | info | `color.sky.700` | `color.sky.500` |
+| `content.info-on-strong` | `text-content-info-on-strong` | info, on strong | `color.white` | `color.white` |
+| `content.info-on-subtle` | `text-content-info-on-subtle` | info, on subtle | `color.sky.900` | `color.sky.900` |
+| `content.success` | `text-content-success` | success | `color.green.700` | `color.green.600` |
+| `content.success-on-strong` | `text-content-success-on-strong` | success, on strong | `color.white` | `color.white` |
+| `content.success-on-subtle` | `text-content-success-on-subtle` | success, on subtle | `color.green.900` | `color.green.900` |
+| `content.warning` | `text-content-warning` | warning | `color.amber.700` | `color.amber.600` |
+| `content.warning-on-strong` | `text-content-warning-on-strong` | warning, on strong | `color.black` | `color.black` |
+| `content.warning-on-subtle` | `text-content-warning-on-subtle` | warning, on subtle | `color.amber.900` | `color.amber.900` |
+| `content.danger` | `text-content-danger` | danger | `color.red.700` | `color.red.300` |
+| `content.danger-on-strong` | `text-content-danger-on-strong` | danger, on strong | `color.white` | `color.red.900` |
+| `content.danger-on-subtle` | `text-content-danger-on-subtle` | danger, on subtle | `color.red.900` | `color.red.100` |
+| `content.link` | `text-content-link` | link | `color.blue.600` | `color.white` |
+| `content.link-visited` | `text-content-link-visited` | link, visited | `color.purple.800` | `color.purple.200` |
+| `content.selected` | `text-content-selected` | selected | `color.brand.700` | `color.brand.100` |
+| `content.accent` | `text-content-accent` | accent | `color.accent.700` | `color.accent.300` |
+| `content.accent-on-strong` | `text-content-accent-on-strong` | accent, on strong | `color.white` | `color.accent.950` |
+| `content.accent-on-subtle` | `text-content-accent-on-subtle` | accent, on subtle | `color.accent.800` | `color.accent.100` |
+
+### Surface
+
+Background colors, used as `bg-*` utilities. Light and Dark name the primitive each token resolves to in the default theme. An FI theme changes what the FI primitives (`brand`, `accent`, `base`) resolve to, so use the token, never the primitive.
+
+| Token | Utility class | Role | Light | Dark |
+| --- | --- | --- | --- | --- |
+| `surface.background` | `bg-surface-background` | Base surfaces, background | `color.base.50` | `color.base.950` |
+| `surface.backdrop` | `bg-surface-backdrop` | Base surfaces, backdrop | `rgba(0, 0, 0, 0.5)` | `rgba(0, 0, 0, 0.5)` |
+| `surface.primary` | `bg-surface-primary` | Base surfaces, primary | `color.white` | `color.base.950` |
+| `surface.primary-hover` | `bg-surface-primary-hover` | Base surfaces, primary, hover | `color.base.100` | `color.base.900` |
+| `surface.primary-active` | `bg-surface-primary-active` | Base surfaces, primary, active | `color.base.200` | `color.base.800` |
+| `surface.secondary` | `bg-surface-secondary` | Base surfaces, secondary | `color.base.100` | `color.base.900` |
+| `surface.secondary-hover` | `bg-surface-secondary-hover` | Base surfaces, secondary, hover | `color.base.200` | `color.base.800` |
+| `surface.secondary-active` | `bg-surface-secondary-active` | Base surfaces, secondary, active | `color.base.300` | `color.base.700` |
+| `surface.tertiary` | `bg-surface-tertiary` | Base surfaces, tertiary | `color.brand.200` | `color.brand.900` |
+| `surface.action.strong` | `bg-surface-action-strong` | Action, strong | `color.brand.700` | `color.brand.300` |
+| `surface.action.strong-hover` | `bg-surface-action-strong-hover` | Action, strong, hover | `color.brand.800` | `color.brand.200` |
+| `surface.action.strong-active` | `bg-surface-action-strong-active` | Action, strong, active | `color.brand.900` | `color.brand.100` |
+| `surface.action.subtle` | `bg-surface-action-subtle` | Action, subtle | `color.brand.200` | `color.brand.900` |
+| `surface.action.subtle-hover` | `bg-surface-action-subtle-hover` | Action, subtle, hover | `color.brand.300` | `color.brand.800` |
+| `surface.action.subtle-active` | `bg-surface-action-subtle-active` | Action, subtle, active | `color.brand.400` | `color.brand.700` |
+| `surface.action.tint` | `bg-surface-action-tint` | Action, tint | `color.brand.50` | `color.brand.950` |
+| `surface.action.tint-hover` | `bg-surface-action-tint-hover` | Action, tint, hover | `color.brand.100` | `color.brand.900` |
+| `surface.action.tint-active` | `bg-surface-action-tint-active` | Action, tint, active | `color.brand.200` | `color.brand.800` |
+| `surface.brand.strong` | `bg-surface-brand-strong` | Brand, strong | `color.brand.700` | `color.brand.300` |
+| `surface.brand.subtle` | `bg-surface-brand-subtle` | Brand, subtle | `color.brand.200` | `color.brand.900` |
+| `surface.brand.tint` | `bg-surface-brand-tint` | Brand, tint | `color.brand.50` | `color.brand.950` |
+| `surface.brand.core` | `bg-surface-brand-core` | Brand, core | `color.brand.input` | `color.brand.input` |
+| `surface.accent.strong` | `bg-surface-accent-strong` | Accent, strong | `color.accent.700` | `color.accent.300` |
+| `surface.accent.subtle` | `bg-surface-accent-subtle` | Accent, subtle | `color.accent.200` | `color.accent.900` |
+| `surface.accent.tint` | `bg-surface-accent-tint` | Accent, tint | `color.accent.50` | `color.accent.950` |
+| `surface.accent.core` | `bg-surface-accent-core` | Accent, core | `color.accent.input` | `color.accent.input` |
+| `surface.danger.strong` | `bg-surface-danger-strong` | Danger, strong | `color.red.700` | `color.red.200` |
+| `surface.danger.strong-hover` | `bg-surface-danger-strong-hover` | Danger, strong, hover | `color.red.800` | `color.red.100` |
+| `surface.danger.strong-active` | `bg-surface-danger-strong-active` | Danger, strong, active | `color.red.900` | `color.red.50` |
+| `surface.danger.subtle` | `bg-surface-danger-subtle` | Danger, subtle | `color.red.100` | `color.red.900` |
+| `surface.danger.subtle-hover` | `bg-surface-danger-subtle-hover` | Danger, subtle, hover | `color.red.200` | `color.red.800` |
+| `surface.danger.subtle-active` | `bg-surface-danger-subtle-active` | Danger, subtle, active | `color.red.300` | `color.red.700` |
+| `surface.danger.tint` | `bg-surface-danger-tint` | Danger, tint | `color.red.50` | `color.red.950` |
+| `surface.danger.tint-hover` | `bg-surface-danger-tint-hover` | Danger, tint, hover | `color.red.100` | `color.red.900` |
+| `surface.danger.tint-active` | `bg-surface-danger-tint-active` | Danger, tint, active | `color.red.200` | `color.red.800` |
+| `surface.info.strong` | `bg-surface-info-strong` | Info, strong | `color.sky.700` | `color.sky.300` |
+| `surface.info.strong-hover` | `bg-surface-info-strong-hover` | Info, strong, hover | `color.sky.800` | `color.sky.200` |
+| `surface.info.strong-active` | `bg-surface-info-strong-active` | Info, strong, active | `color.sky.900` | `color.sky.100` |
+| `surface.info.subtle` | `bg-surface-info-subtle` | Info, subtle | `color.sky.100` | `color.sky.900` |
+| `surface.info.subtle-hover` | `bg-surface-info-subtle-hover` | Info, subtle, hover | `color.sky.200` | `color.sky.800` |
+| `surface.info.subtle-active` | `bg-surface-info-subtle-active` | Info, subtle, active | `color.sky.300` | `color.sky.700` |
+| `surface.info.tint` | `bg-surface-info-tint` | Info, tint | `color.sky.50` | `color.sky.950` |
+| `surface.info.tint-hover` | `bg-surface-info-tint-hover` | Info, tint, hover | `color.sky.100` | `color.sky.900` |
+| `surface.info.tint-active` | `bg-surface-info-tint-active` | Info, tint, active | `color.sky.200` | `color.sky.800` |
+| `surface.neutral.strong` | `bg-surface-neutral-strong` | Neutral, strong | `color.base.700` | `color.base.300` |
+| `surface.neutral.strong-hover` | `bg-surface-neutral-strong-hover` | Neutral, strong, hover | `color.base.800` | `color.base.200` |
+| `surface.neutral.strong-active` | `bg-surface-neutral-strong-active` | Neutral, strong, active | `color.base.900` | `color.base.100` |
+| `surface.neutral.subtle` | `bg-surface-neutral-subtle` | Neutral, subtle | `color.base.200` | `color.base.900` |
+| `surface.neutral.subtle-hover` | `bg-surface-neutral-subtle-hover` | Neutral, subtle, hover | `color.base.300` | `color.base.800` |
+| `surface.neutral.subtle-active` | `bg-surface-neutral-subtle-active` | Neutral, subtle, active | `color.base.400` | `color.base.700` |
+| `surface.neutral.tint` | `bg-surface-neutral-tint` | Neutral, tint | `color.base.50` | `color.base.950` |
+| `surface.neutral.tint-hover` | `bg-surface-neutral-tint-hover` | Neutral, tint, hover | `color.base.100` | `color.base.900` |
+| `surface.neutral.tint-active` | `bg-surface-neutral-tint-active` | Neutral, tint, active | `color.base.200` | `color.base.800` |
+| `surface.success.strong` | `bg-surface-success-strong` | Success, strong | `color.green.600` | `color.green.300` |
+| `surface.success.strong-hover` | `bg-surface-success-strong-hover` | Success, strong, hover | `color.green.700` | `color.green.200` |
+| `surface.success.strong-active` | `bg-surface-success-strong-active` | Success, strong, active | `color.green.800` | `color.green.100` |
+| `surface.success.subtle` | `bg-surface-success-subtle` | Success, subtle | `color.green.100` | `color.green.900` |
+| `surface.success.subtle-hover` | `bg-surface-success-subtle-hover` | Success, subtle, hover | `color.green.200` | `color.green.800` |
+| `surface.success.subtle-active` | `bg-surface-success-subtle-active` | Success, subtle, active | `color.green.300` | `color.green.700` |
+| `surface.success.tint` | `bg-surface-success-tint` | Success, tint | `color.green.50` | `color.green.950` |
+| `surface.success.tint-hover` | `bg-surface-success-tint-hover` | Success, tint, hover | `color.green.100` | `color.green.900` |
+| `surface.success.tint-active` | `bg-surface-success-tint-active` | Success, tint, active | `color.green.200` | `color.green.800` |
+| `surface.warning.strong` | `bg-surface-warning-strong` | Warning, strong | `color.amber.400` | `color.amber.300` |
+| `surface.warning.strong-hover` | `bg-surface-warning-strong-hover` | Warning, strong, hover | `color.amber.500` | `color.amber.200` |
+| `surface.warning.strong-active` | `bg-surface-warning-strong-active` | Warning, strong, active | `color.amber.600` | `color.amber.100` |
+| `surface.warning.subtle` | `bg-surface-warning-subtle` | Warning, subtle | `color.amber.100` | `color.amber.900` |
+| `surface.warning.subtle-hover` | `bg-surface-warning-subtle-hover` | Warning, subtle, hover | `color.amber.200` | `color.amber.800` |
+| `surface.warning.subtle-active` | `bg-surface-warning-subtle-active` | Warning, subtle, active | `color.amber.300` | `color.amber.700` |
+| `surface.warning.tint` | `bg-surface-warning-tint` | Warning, tint | `color.amber.50` | `color.amber.950` |
+| `surface.warning.tint-hover` | `bg-surface-warning-tint-hover` | Warning, tint, hover | `color.amber.100` | `color.amber.900` |
+| `surface.warning.tint-active` | `bg-surface-warning-tint-active` | Warning, tint, active | `color.amber.200` | `color.amber.800` |
+
+### Stroke
+
+Border colors, used as `border-*` utilities. Light and Dark name the primitive each token resolves to in the default theme. An FI theme changes what the FI primitives (`brand`, `accent`, `base`) resolve to, so use the token, never the primitive.
+
+| Token | Utility class | Role | Light | Dark |
+| --- | --- | --- | --- | --- |
+| `stroke.primary` | `border-stroke-primary` | primary | `color.base.500` | `color.base.400` |
+| `stroke.secondary` | `border-stroke-secondary` | secondary | `color.base.200` | `color.base.800` |
+| `stroke.action` | `border-stroke-action` | action | `color.brand.700` | `color.brand.300` |
+| `stroke.info` | `border-stroke-info` | info | `color.sky.700` | `color.sky.200` |
+| `stroke.success` | `border-stroke-success` | success | `color.green.600` | `color.green.200` |
+| `stroke.warning` | `border-stroke-warning` | warning | `color.amber.700` | `color.amber.300` |
+| `stroke.danger` | `border-stroke-danger` | danger | `color.red.700` | `color.red.300` |
+| `stroke.focus` | `border-stroke-focus` | focus | `color.brand.700` | `color.brand.300` |
+| `stroke.hover` | `border-stroke-hover` | hover | `color.base.950` | `color.base.50` |
+| `stroke.ring` | `border-stroke-ring` | ring | `color.base.950` | `color.white` |
+
+### Chart
+
+Data-visualization colors, used as `bg-*` utilities. Light and Dark name the primitive each token resolves to in the default theme. An FI theme changes what the FI primitives (`brand`, `accent`, `base`) resolve to, so use the token, never the primitive.
+
+| Token | Utility class | Role | Light | Dark |
+| --- | --- | --- | --- | --- |
+| `chart.categorical.1` | `bg-chart-categorical-1` | Categorical, 1 | `color.blue.600` | `color.blue.600` |
+| `chart.categorical.2` | `bg-chart-categorical-2` | Categorical, 2 | `color.orange.600` | `color.orange.600` |
+| `chart.categorical.3` | `bg-chart-categorical-3` | Categorical, 3 | `color.teal.600` | `color.teal.600` |
+| `chart.categorical.4` | `bg-chart-categorical-4` | Categorical, 4 | `color.pink.600` | `color.pink.600` |
+| `chart.categorical.5` | `bg-chart-categorical-5` | Categorical, 5 | `color.purple.600` | `color.purple.600` |
+| `chart.categorical.6` | `bg-chart-categorical-6` | Categorical, 6 | `color.neutral.600` | `color.neutral.600` |
+| `chart.simple.primary` | `bg-chart-simple-primary` | Simple, primary | `color.brand.500` | `color.brand.500` |
+| `chart.simple.secondary` | `bg-chart-simple-secondary` | Simple, secondary | `color.brand.950` | `color.brand.950` |

package/docs/foundations/styles/tokens/what-are-tokens/content.md

@@ -0,0 +1,33 @@
+# What are tokens? (https://design.candescent.com/docs/foundations/styles/tokens/what-are-tokens)
+
+Design tokens are the most atomic building blocks of our design system. They act as a bridge between design and engineering by distilling foundational design decisions down into data. A token can be a color, typography style, spacing unit, elevation, or any other style that can be reused across platforms.
+
+_what-are-tokens\_labeled_
+
+## **Why use design tokens?**
+
+Using tokens ensures consistency throughout and between experiences. Additionally, if the value of a token is updated, that new value will automatically disseminate to every component or element that uses it, eliminating the need to find and replace hard-coded values.
+
+In addition to consistency and ease of updates, using design tokens also has the following benefits:
+
+- Tokens enable extensibility, allowing our partners to customize their branding and theming throughout our experiences.
+- Since tokens are available in Figma too, the design handoff process is streamlined for developers.
+
+## **How to read token names**
+
+Knowing how to read token names will help you find the right token faster and understand what the token represents.
+
+1. **Token Type**: The token's type, which is related to a specific visual design attribute such as color, typography, or shadow.
+2. **Property**: The type of UI element that the token should be applied to, such content, a surface, or a border.
+3. **Group** _(optional)_: The group or color palette that the token belongs to.
+   - Not every token has a group. For example, color.content.primary is our default text color.
+4. **Modifier**: Additional details about the token's purpose, such as it's color role, emphasis, or interaction state.
+   - Some tokens have multiple modifiers, such as color.surface.action.strong-hover, where "strong" indicates the emphasis and "hover" indicates the interaction state.
+
+## Token layers
+
+Our design tokens are broken down into 3 distinct layers: **Primitives**, **FI Primitives**, and **Semantics**.
+
+- **Primitives**: These tokens are constants defined by Tailwind CSS, which serves as the styling layer for the Forge Design System. These tokens are generally not used directly in designs. Instead, they serve as values for the tokens in our Semantics layer.
+- **FI Primitives**: These tokens are similar to the Primitive tokens, but they are generated based on a FI's brand colors and other selections made in the theme editor.
+- **Semantics**: These tokens represent design decisions. These are the core tokens that should be used directly in designs. They typically reference a token from the Primitives or FI Primitives layer.

package/docs/foundations/styles/tokens/what-are-tokens/design.md

@@ -0,0 +1,33 @@
+# What are tokens? — Design (https://design.candescent.com/docs/foundations/styles/tokens/what-are-tokens)
+
+Design tokens are the most atomic building blocks of our design system. They act as a bridge between design and engineering by distilling foundational design decisions down into data. A token can be a color, typography style, spacing unit, elevation, or any other style that can be reused across platforms.
+
+_what-are-tokens\_labeled_
+
+## **Why use design tokens?**
+
+Using tokens ensures consistency throughout and between experiences. Additionally, if the value of a token is updated, that new value will automatically disseminate to every component or element that uses it, eliminating the need to find and replace hard-coded values.
+
+In addition to consistency and ease of updates, using design tokens also has the following benefits:
+
+- Tokens enable extensibility, allowing our partners to customize their branding and theming throughout our experiences.
+- Since tokens are available in Figma too, the design handoff process is streamlined for developers.
+
+## **How to read token names**
+
+Knowing how to read token names will help you find the right token faster and understand what the token represents.
+
+1. **Token Type**: The token's type, which is related to a specific visual design attribute such as color, typography, or shadow.
+2. **Property**: The type of UI element that the token should be applied to, such content, a surface, or a border.
+3. **Group** _(optional)_: The group or color palette that the token belongs to.
+   - Not every token has a group. For example, color.content.primary is our default text color.
+4. **Modifier**: Additional details about the token's purpose, such as it's color role, emphasis, or interaction state.
+   - Some tokens have multiple modifiers, such as color.surface.action.strong-hover, where "strong" indicates the emphasis and "hover" indicates the interaction state.
+
+## Token layers
+
+Our design tokens are broken down into 3 distinct layers: **Primitives**, **FI Primitives**, and **Semantics**.
+
+- **Primitives**: These tokens are constants defined by Tailwind CSS, which serves as the styling layer for the Forge Design System. These tokens are generally not used directly in designs. Instead, they serve as values for the tokens in our Semantics layer.
+- **FI Primitives**: These tokens are similar to the Primitive tokens, but they are generated based on a FI's brand colors and other selections made in the theme editor.
+- **Semantics**: These tokens represent design decisions. These are the core tokens that should be used directly in designs. They typically reference a token from the Primitives or FI Primitives layer.

package/docs/getting-started/content.md

@@ -0,0 +1,4 @@
+# Getting Started (https://design.candescent.com/docs/getting-started)
+
+- [Designers](https://design.candescent.com/docs/getting-started/designers/content.md) — Start designing with our guidelines, best practices, and Figma libraries.
+- [Developers](https://design.candescent.com/docs/getting-started/developers/content.md) — Install and configure Forge UI, then build screens that keep FI theming and dark mode working.

package/docs/getting-started/designers/content.md

@@ -0,0 +1,13 @@
+# Designers (https://design.candescent.com/docs/getting-started/designers)
+
+The Forge Design System (FDS) provides the tools you need to design cohesive, user-friendly interfaces. We provide reusable components in Figma, design principles, content guidelines, and patterns built for financial services and Intelligent Banking. This makes it easy for our designers and external partners to create best-in-class experiences across Candescent products.
+
+To get started, check out our foundations to familiarize yourself with our design tokens, visual styles, and content guidelines. Then, explore our component library for reusable elements that you can incorporate into your designs, each accompanied by usage and content guidelines. Whether you're spinning up a new product or upgrading from a legacy system, the design system is here to streamline your workflow and make collaboration with developers smoother.
+
+The core principles of our design system, including design tokens, styles, and content guidelines.
+
+Reusable building blocks that can be combined to create consistent visuals, interactions, and accessibility.
+
+Reusable combinations of components and templates that address common user experiences and flows.
+
+Access our official design system Figma libraries.

package/docs/getting-started/designers/design.md

@@ -0,0 +1,13 @@
+# Designers — Design (https://design.candescent.com/docs/getting-started/designers)
+
+The Forge Design System (FDS) provides the tools you need to design cohesive, user-friendly interfaces. We provide reusable components in Figma, design principles, content guidelines, and patterns built for financial services and Intelligent Banking. This makes it easy for our designers and external partners to create best-in-class experiences across Candescent products.
+
+To get started, check out our foundations to familiarize yourself with our design tokens, visual styles, and content guidelines. Then, explore our component library for reusable elements that you can incorporate into your designs, each accompanied by usage and content guidelines. Whether you're spinning up a new product or upgrading from a legacy system, the design system is here to streamline your workflow and make collaboration with developers smoother.
+
+The core principles of our design system, including design tokens, styles, and content guidelines.
+
+Reusable building blocks that can be combined to create consistent visuals, interactions, and accessibility.
+
+Reusable combinations of components and templates that address common user experiences and flows.
+
+Access our official design system Figma libraries.

package/docs/getting-started/developers/accessibility/content.md

@@ -0,0 +1,31 @@
+# Accessibility (https://design.candescent.com/docs/getting-started/developers/accessibility)
+
+Forge UI components are built to work with VoiceOver on iOS, TalkBack on Android, and screen readers and keyboards on the web. Each component sets its own role, state and focus behavior, so a screen built from Forge UI parts starts accessible. Some things only your screen knows, such as what an icon-only button does or what a form field is for, and those are yours to supply.
+
+Every component page ends with an Accessibility section that lists what that component announces and what it needs from you. This page covers what holds across all of them.
+
+## What the components handle
+
+- **Roles and state.** Interactive components set their role (button, checkbox, radio, switch, tab, menu item) and report state such as checked, selected, expanded and disabled to assistive technology on every platform. Don't add a role or state a component already sets.
+- **Keyboard focus on the web.** Keyboard users see a focus ring; pointer and touch users don't. Collections such as [Menu](https://design.candescent.com/docs/components/menu/content.md), [Select](https://design.candescent.com/docs/components/select/content.md) and [Tabs](https://design.candescent.com/docs/components/tabs/content.md) move focus between their items with the arrow keys.
+- **Overlays.** [Dialog](https://design.candescent.com/docs/components/dialog/content.md) and [Alert Dialog](https://design.candescent.com/docs/components/alert-dialog/content.md) move focus into the popup, keep it there while the popup is open, and return it to the trigger when it closes.
+- **Headings.** [Heading](https://design.candescent.com/docs/components/heading/content.md) is announced as a heading, with a level that follows its `size`: `xl` is level 1 through `xs` at level 5.
+- **Announcements.** [Alert](https://design.candescent.com/docs/components/alert/content.md) is announced as a status message, or as an alert that interrupts for `danger` and `warning`. `Field.Error` is announced as soon as it appears, so validation errors reach screen reader users without moving focus.
+- **Form relationships.** [Field](https://design.candescent.com/docs/components/field/content.md) connects its label, helper text and error message to the control it wraps.
+
+## What your screen provides
+
+- **Names for icon-only controls.** An [IconButton](https://design.candescent.com/docs/components/icon-button/content.md) has no visible text, so give every one an `accessibilityLabel` that describes the action, such as "Close" or "Delete".
+- **Meaningful icons.** An [Icon](https://design.candescent.com/docs/components/icon/content.md) is decorative and hidden from assistive technology unless you pass `accessibilityLabel`. Pass it only when the icon carries information that no nearby text does.
+- **Labels for form controls.** Wrap each control in a `Field` with one `Field.Label`. Put instructions in `Field.Helper` and validation messages in `Field.Error`, not in placeholder text.
+- **Required and invalid state.** Set `isRequired` and `isInvalid` from your form state. Forge UI communicates these states but does not run validation.
+- **Information beyond color.** Pair a color, such as a red amount or a green badge, with text or an icon that says the same thing.
+- **Right-to-left text.** Align text with `text-start` and `text-end`, never `text-left` or `text-right`, so a screen mirrors in right-to-left languages. See [Styling and customization](https://design.candescent.com/docs/getting-started/developers/styling/content.md).
+
+## Leave the defaults alone
+
+Overriding a component's accessibility props is the most common way to break them. Don't hide a component from assistive technology to silence it, don't replace the role a component sets, and don't restyle a focus ring away. If a component announces something wrong for your case, [request a change](https://design.candescent.com/docs/getting-started/developers/styling/content.md) rather than patching it on the screen.
+
+## Testing
+
+Test each screen with the screen reader on every platform you ship: VoiceOver on iOS, TalkBack on Android, and a desktop screen reader with keyboard-only navigation on the web. Automated checks such as axe catch missing names and roles but not whether an announcement makes sense.