@servicetitan/hammer-token 0.0.0-rc-1.48.0-20251104214834 → 0.0.0-rc-3.0.0-20260127161418

package/CHANGELOG.md

@@ -1,6 +1,42 @@
 # @servicetitan/hammer-token
 
-## 0.0.0-rc-1.48.0-20251104214834
+## 0.0.0-rc-3.0.0-20260127161418
+
+### Major Changes
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Expansion of color ramp
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Renaming of interactive tokens for clarity and better typeahead support
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Prefix of `a2-` is added for all CSS variables
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Charts stroke token is now split into StrokeStyle and StrokeColor for clarity
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] JS import object changed to match DTCG format
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Prefix all CSS variables with `a2-` to prevent naming collisions (e.g., `--color-primary` becomes `--a2-color-primary`).
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Renamed types exported for clarity of use
+
+### Minor Changes
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add new component tokens for Button.
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Update Anvil2 token usages
+
+### Patch Changes
+
+- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Avatar component design tokens and migrate SCSS to use token variables
+
+- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Announcement component design tokens, missing foreground tokens for success, and migrate SCSS to use token variables
+
+- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Badge component design tokens and migrate SCSS to use token variables
+
+- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Fix various token configuration, formatting, and SCSS generation issues
+
+- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Alert component design tokens and migrate SCSS to use token variables
+
+## 2.5.1
 
 ### Patch Changes
 

package/README.md

@@ -0,0 +1,222 @@
+# @servicetitan/hammer-token
+
+Design token system for the Hammer design system, built with [Style Dictionary v5](https://styledictionary.com/) and the [Design Tokens Community Group (DTCG) format](https://www.designtokens.org/tr/2025.10/format/).
+
+## Overview
+
+This package transforms design tokens from JSON source files into multiple output formats for use across web applications. It generates JavaScript modules, SCSS variables, CSS utility classes, and TypeScript definitions to support both runtime and build-time token consumption.
+
+## Build Output (`/build/web`)
+
+The build process generates files in `/build/web` organized as follows:
+
+```
+build/web/
+├── index.js              # Main entry point
+├── index.d.ts            # TypeScript definitions
+├── types.d.ts            # Core types (TokenObj, Token)
+└── core/
+    ├── primitive.js              # Primitive tokens (JS)
+    ├── primitive.scss            # Primitive tokens (SCSS)
+    ├── primitive-variables.scss  # Primitive tokens map (SCSS)
+    ├── primitive.d.ts            # Primitive tokens (TypeScript)
+    ├── semantic.js               # Semantic tokens (JS)
+    ├── semantic.scss             # Semantic tokens (SCSS)
+    ├── semantic-variables.scss   # Semantic tokens map (SCSS)
+    ├── semantic.d.ts             # Semantic tokens (TypeScript)
+    ├── component.js              # Component tokens (JS)
+    ├── component.scss            # Component tokens (SCSS)
+    ├── component-variables.scss  # Component tokens map (SCSS)
+    ├── component.d.ts            # Component tokens (TypeScript)
+    ├── index.js                  # Core index
+    ├── index.d.ts                # Core TypeScript definitions
+    └── css-utils/                # CSS utility classes
+```
+
+### File Types
+
+#### `*-variables.scss` Files
+
+These files contain SCSS maps used for mapping in `ThemeProvider.module.scss`. They provide structured token data organized by appearance variants (light/dark) and token categories.
+
+#### `*.js` Files
+
+JavaScript modules for importing tokens in JavaScript/TypeScript code. Each token is exported as a named constant with its value and appearance extensions.
+
+**Example:**
+
+```javascript
+import { BackgroundColorPrimary } from "@servicetitan/hammer-token/build/web/core/semantic";
+
+// Token structure:
+// {
+//   value: "#0265dc",
+//   extensions: {
+//     appearance: {
+//       dark: {
+//         value: "#78bbfa"
+//       }
+//     }
+//   }
+// }
+```
+
+> **Caution**: JavaScript tokens return static resolved values at build time. These values are not affected by CSS variable changes at runtime. If you need dynamic theming that responds to CSS variable changes, use the `*.scss` files instead.
+
+#### `*.scss` Files
+
+SCSS variable files for importing in SCSS stylesheets. Variables use CSS custom properties with fallback values, supporting recursive reference chains and `light-dark()` for dark mode.
+
+#### `.d.ts` Files (TypeScript Definitions)
+
+Auto-generated TypeScript definition files provide type safety for token imports. We use a unified `TokenObj` type for all exports.
+
+**Example generated types:**
+
+```typescript
+// component.d.ts
+import { TokenObj } from "../types";
+
+export declare const ButtonPrimaryBackgroundColor: TokenObj;
+export declare const ButtonPrimaryBorderRadius: TokenObj;
+```
+
+## CSS Variable Prefix
+
+All generated CSS variable names include a configurable prefix to avoid naming conflicts with other design systems or libraries. By default, the prefix is `a2-`.
+
+## Configuration File (`config.js`)
+
+The main configuration file orchestrates the entire build process using [Style Dictionary v5](https://styledictionary.com/).
+
+### Build Process
+
+The configuration executes three sequential builds:
+
+1. **Primitive Tokens Build**: Foundational values (colors, spacing, etc.)
+2. **Theme Tokens Build**: Decision-based tokens (semantic)
+3. **Component Tokens Build**: Component-specific tokens
+
+## Utility Files (`src/utils/`)
+
+### `token-helpers.js`
+
+Core helper functions for working with DTCG format tokens.
+
+**Smart Reference Resolution**: Includes logic to automatically resolve references to groups (e.g., `{background.color.primary}`) by falling back to a nested `.$root` token if the exact path isn't found.
+
+### `sd-transforms.js`
+
+Style Dictionary transform registrations:
+
+- **`dtcg/name`**: Transforms token paths to kebab-case names, filtering out `$root` and `$schema`.
+- **`dtcg/value`**: Handles dimension tokens by combining `value` and `unit` properties.
+
+## Token Structure
+
+Tokens follow the [Design Tokens Community Group (DTCG) format](https://www.designtokens.org/tr/2025.10/format/).
+
+### Standard Color Token
+
+```json
+{
+  "$type": "color",
+  "$value": "#0265dc",
+  "$extensions": {
+    "appearance": {
+      "dark": {
+        "$value": "#78bbfa"
+      }
+    }
+  }
+}
+```
+
+### Dimension Token
+
+Dimension tokens (sizes, radii, breakpoints) use a nested object for the value:
+
+```json
+{
+  "$type": "dimension",
+  "$value": {
+    "value": 0.5,
+    "unit": "rem"
+  }
+}
+```
+
+### The $root Pattern
+
+The `$root` pattern is a core convention in our **DTCG format standard**. It solves a fundamental challenge in design token systems: allowing a "group" (a category or semantic concept) to have its own primary value while still acting as a container for related sub-tokens (such as interactive states or functional variants).
+
+#### Why we use it
+
+In a standard nested structure, if a node has a `$value`, it is treated as a leaf token, and tools often ignore its children. Conversely, a group without a `$value` cannot be referenced directly. The `$root` pattern bridges this gap by explicitly defining the "default" or "base" value of a group.
+
+```json
+"primary": {
+  "$root": {
+    "$type": "color",
+    "$value": "{color.blue.500}"
+  },
+  "hover": {
+    "$type": "color",
+    "$value": "{color.blue.600}"
+  },
+  "active": {
+    "$type": "color",
+    "$value": "{color.blue.700}"
+  }
+}
+```
+
+#### Key Benefits & Behavior
+
+1.  **DTCG Compliance**: By using `$root` (a reserved property starting with `$`), we remain compatible with DTCG parsing logic while clearly distinguishing the base token from its semantic children.
+2.  **Cleaner Reference Syntax**: Our build system includes smart resolution that allows you to reference the group name directly (e.g., `{background.color.primary}`). You don't need to append `.$root` in your JSON source files.
+3.  **State & Variant Support**: It allows us to keep interactive states like `.hover` and `.active` logically nested within the parent token they modify, rather than flattening them into a messy global list.
+4.  **Automatic Naming Cleanup**: During the transformation process, the `$root` segment is automatically stripped from the path. This ensures that the generated CSS variables and JS exports maintain a clean, flat naming convention (e.g., `--a2-background-color-primary` instead of `--a2-background-color-primary-root`).
+
+## Token Naming Conventions
+
+### Naming Transformation Rules
+
+1. **Path to Name**: JSON object paths are converted to PascalCase.
+2. **Special Segments**: `$root` segments are removed from the path (e.g., `background.color.default.$root` → `BackgroundColorDefault`).
+3. **State Suffixes**: State names (hover, active) are capitalized and appended.
+
+## Development
+
+### Adding New Tokens
+
+1. Add token JSON files to `src/global/primitive/` (primitives) or `src/theme/core/` (semantic/component)
+2. Run `pnpm build` to regenerate output files
+3. Import tokens in your code using the generated files
+
+### Modifying Build Output
+
+- **Transforms**: Edit `src/utils/sd-transforms.js`
+- **Formats**: Edit `src/utils/sd-formats.js`
+- **Build Configs**: Edit `src/utils/sd-build-configs.js`
+- **CSS Utils**: Edit `src/utils/css-utils-format-utils.js`
+
+## Troubleshooting
+
+### Console Reference Errors
+
+During the build process (`pnpm build`), you may see "Reference Errors" in the console, such as:
+
+```text
+{button.primary.foreground.color.$root} tries to reference {foreground.color.on.primary}, which is not defined.
+```
+
+#### Why this happens
+
+We use a `$root` token pattern to define a default value for a group (e.g., `background.color.primary.$root`). Standard Style Dictionary v5 validation expects references to point to an exact token path. When a component references a group like `{background.color.primary}`, Style Dictionary flags it as "not defined" because it technically points to a group container, not a leaf token.
+
+#### Why the build is still correct
+
+We have implemented a custom `resolveReference` helper in `src/utils/token-helpers.js`. This helper automatically detects if a reference points to a group and attempts to fall back to the `$root` token (e.g., it converts `{background.color.primary}` to `{background.color.primary.$root}` internally).
+
+Because our custom output formats use this helper, the **generated files (JS, SCSS, CSS) are 100% correct**, even if Style Dictionary's internal validator prints warnings. You can safely ignore these specific reference errors as long as the build completes successfully and the output files contain the expected values.

package/build/web/core/component-variables.scss

@@ -1,139 +1,185 @@
 $light: (
-  button-primary-foreground-color: #ffffff,
-  button-primary-foreground-color-hover: #ffffff,
-  button-primary-foreground-color-active: #ffffff,
-  button-primary-background-color: #0265DC,
-  button-primary-background-color-hover: #0655b4ff,
-  button-primary-background-color-active: #09458cff,
-  button-primary-border-color: transparent,
-  button-primary-focus-ring-color: #0265DC,
-  button-secondary-foreground-color: #141414,
-  button-secondary-foreground-color-hover: #141414,
-  button-secondary-foreground-color-active: #141414,
-  button-secondary-background-color: #0404040f,
-  button-secondary-background-color-hover: #05050522,
-  button-secondary-background-color-active: #07070735,
-  button-secondary-border-color: transparent,
-  button-secondary-focus-ring-color: #0265DC,
-  button-ghost-foreground-color: #141414,
-  button-ghost-foreground-color-hover: #141414,
-  button-ghost-foreground-color-active: #141414,
-  button-ghost-background-color: transparent,
-  button-ghost-background-color-hover: #14141414,
-  button-ghost-background-color-active: #14141429,
-  button-ghost-border-color: transparent,
-  button-ghost-focus-ring-color: #0265DC,
-  button-danger-primary-foreground-color: #ffffff,
-  button-danger-primary-foreground-color-hover: #ffffff,
-  button-danger-primary-foreground-color-active: #ffffff,
-  button-danger-primary-background-color: #e13212,
-  button-danger-primary-background-color-hover: #b82c12ff,
-  button-danger-primary-background-color-active: #8f2613ff,
-  button-danger-primary-border-color: transparent,
-  button-danger-primary-focus-ring-color: #e13212,
-  button-danger-secondary-foreground-color: #bf2a00,
-  button-danger-secondary-foreground-color-hover: #bf2a00,
-  button-danger-secondary-foreground-color-active: #bf2a00,
-  button-danger-secondary-background-color: #ffece9,
-  button-danger-secondary-background-color-hover: #fcd9d4ff,
-  button-danger-secondary-background-color-active: #f6b4a9ff,
-  button-danger-secondary-border-color: transparent,
-  button-danger-secondary-focus-ring-color: #e13212,
-  checkbox-unchecked-fill-color-default: #141414,
-  checkbox-unchecked-fill-color-hover: #141414,
-  checkbox-unchecked-fill-color-active: #141414,
-  checkbox-unchecked-background-color-default: transparent,
-  checkbox-unchecked-background-color-hover: #14141414,
-  checkbox-unchecked-background-color-active: #14141429,
-  checkbox-checked-fill-color-default: #0265DC,
-  checkbox-checked-fill-color-hover: #004ba0d1,
-  checkbox-checked-fill-color-active: #0151afb8,
-  checkbox-checked-background-color-default: transparent,
-  checkbox-checked-background-color-hover: #0265dc14,
-  checkbox-checked-background-color-active: #0265dc29,
-  checkbox-unchecked-error-fill-color-default: #e13212,
-  checkbox-unchecked-error-fill-color-hover: #bf2a00,
-  checkbox-unchecked-error-fill-color-active: #bf2a00,
-  checkbox-unchecked-error-background-color-default: transparent,
-  checkbox-unchecked-error-background-color-hover: #e132120f,
-  checkbox-unchecked-error-background-color-active: #e132122e,
-  checkbox-checked-error-fill-color-default: #e13212,
-  checkbox-checked-error-fill-color-hover: #bf2a00,
-  checkbox-checked-error-fill-color-active: #bf2a00,
-  checkbox-checked-error-background-color-default: transparent,
-  checkbox-checked-error-background-color-hover: #e132120f,
-  checkbox-checked-error-background-color-active: #e132122e,
+  alert-background-color: var(--a2-color-neutral-0, #ffffff),
+  alert-border-color-info: var(--a2-color-blue-500, #1a82ff),
+  alert-border-color-success: var(--a2-color-green-500, #09a569),
+  alert-border-color-warning: var(--a2-color-yellow-500, #d6a000),
+  alert-border-color-danger: var(--a2-color-red-500, #ff3914),
+  alert-status-icon-color-info: var(--a2-color-blue-500, #1a82ff),
+  alert-status-icon-color-success: var(--a2-color-green-500, #09a569),
+  alert-status-icon-color-warning: var(--a2-color-yellow-500, #d6a000),
+  alert-status-icon-color-danger: var(--a2-color-red-500, #ff3914),
+  alert-close-button-foreground-color: var(--a2-color-neutral-950, #040404),
+  announcement-background-color-info: var(--a2-color-blue-500, #1a82ff),
+  announcement-background-color-success: var(--a2-color-green-500, #09a569),
+  announcement-background-color-warning: var(--a2-color-yellow-500, #d6a000),
+  announcement-background-color-danger: var(--a2-color-red-500, #ff3914),
+  announcement-foreground-color-info: var(--a2-color-neutral-0, #ffffff),
+  announcement-foreground-color-success: var(--a2-color-neutral-0, #ffffff),
+  announcement-foreground-color-warning: var(--a2-color-neutral-950, #040404),
+  announcement-foreground-color-danger: var(--a2-color-neutral-0, #ffffff),
+  announcement-action-button-background-color-info: #1a1a1a0F,
+  announcement-action-button-background-color-success: #1a1a1a0F,
+  announcement-action-button-background-color-warning: #1a1a1a0F,
+  announcement-action-button-background-color-danger: #1a1a1a0F,
+  avatar-background-color: var(--a2-color-neutral-70, #e8e8e8),
+  avatar-foreground-color: var(--a2-color-neutral-950, #040404),
+  avatar-border-color: var(--a2-color-neutral-0, #ffffff),
+  avatar-indicator-background-color-online: var(--a2-color-green-500, #09a569),
+  avatar-indicator-background-color-offline: var(--a2-color-neutral-0, #ffffff),
+  avatar-indicator-background-color-disabled: var(--a2-color-neutral-100, #dfdfdf),
+  avatar-indicator-border-color: var(--a2-color-neutral-80, #e5e5e5),
+  badge-background-color: var(--a2-color-red-500, #ff3914),
+  badge-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  button-primary-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  button-primary-foreground-color-hover: var(--a2-color-neutral-0, #ffffff),
+  button-primary-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
+  button-primary-background-color: var(--a2-color-blue-500, #1a82ff),
+  button-primary-background-color-hover: var(--a2-color-blue-600, #0065de),
+  button-primary-background-color-active: var(--a2-color-blue-700, #004da9),
+  button-primary-border-color: "rgba(0, 0, 0, 0)",
+  button-primary-focus-ring-color: var(--a2-color-blue-500, #1a82ff),
+  button-secondary-foreground-color: var(--a2-color-neutral-950, #040404),
+  button-secondary-foreground-color-hover: var(--a2-color-neutral-950, #040404),
+  button-secondary-foreground-color-active: var(--a2-color-neutral-950, #040404),
+  button-secondary-background-color: #0404040F,
+  button-secondary-background-color-hover: #04040414,
+  button-secondary-background-color-active: #04040429,
+  button-secondary-border-color: "rgba(0, 0, 0, 0)",
+  button-secondary-focus-ring-color: var(--a2-color-blue-500, #1a82ff),
+  button-ghost-foreground-color: var(--a2-color-neutral-950, #040404),
+  button-ghost-foreground-color-hover: var(--a2-color-neutral-950, #040404),
+  button-ghost-foreground-color-active: var(--a2-color-neutral-950, #040404),
+  button-ghost-background-color: "rgba(0, 0, 0, 0)",
+  button-ghost-background-color-hover: #8b8b8b14,
+  button-ghost-background-color-active: #8b8b8b29,
+  button-ghost-border-color: "rgba(0, 0, 0, 0)",
+  button-ghost-focus-ring-color: var(--a2-color-blue-500, #1a82ff),
+  button-danger-primary-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  button-danger-primary-foreground-color-hover: var(--a2-color-neutral-0, #ffffff),
+  button-danger-primary-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
+  button-danger-primary-background-color: var(--a2-color-red-500, #ff3914),
+  button-danger-primary-background-color-hover: var(--a2-color-red-600, #d62100),
+  button-danger-primary-background-color-active: var(--a2-color-red-700, #a31900),
+  button-danger-primary-border-color: "rgba(0, 0, 0, 0)",
+  button-danger-primary-focus-ring-color: var(--a2-color-red-500, #ff3914),
+  button-danger-secondary-foreground-color: var(--a2-color-red-600, #d62100),
+  button-danger-secondary-foreground-color-hover: var(--a2-color-red-600, #d62100),
+  button-danger-secondary-foreground-color-active: var(--a2-color-red-600, #d62100),
+  button-danger-secondary-background-color: var(--a2-color-red-100, #ffd4cc),
+  button-danger-secondary-background-color-hover: var(--a2-color-red-200, #ffac9e),
+  button-danger-secondary-background-color-active: var(--a2-color-red-300, #ff8974),
+  button-danger-secondary-border-color: "rgba(0, 0, 0, 0)",
+  button-danger-secondary-focus-ring-color: var(--a2-color-red-500, #ff3914),
+  checkbox-checked-foreground-color: var(--a2-color-blue-500, #1a82ff),
+  checkbox-checked-foreground-color-hover: var(--a2-color-blue-600, #0065de),
+  checkbox-checked-foreground-color-active: var(--a2-color-blue-600, #0065de),
+  checkbox-checked-background-color-hover: #1a82ff1A,
+  checkbox-checked-focus-ring-color: var(--a2-color-blue-500, #1a82ff),
+  checkbox-unchecked-background-color-hover: #8b8b8b14,
+  checkbox-unchecked-focus-ring-color: var(--a2-color-blue-500, #1a82ff),
+  checkbox-checked-error-foreground-color: var(--a2-color-red-500, #ff3914),
+  checkbox-checked-error-foreground-color-hover: var(--a2-color-red-600, #d62100),
+  checkbox-checked-error-foreground-color-active: var(--a2-color-red-600, #d62100),
+  checkbox-checked-error-background-color-hover: #ff39141A,
+  checkbox-checked-error-focus-ring-color: var(--a2-color-red-500, #ff3914),
+  checkbox-unchecked-error-background-color-hover: #ff39141A,
+  checkbox-unchecked-error-focus-ring-color: var(--a2-color-red-500, #ff3914),
 );
 $dark: (
-  button-primary-foreground-color: #141414,
-  button-primary-foreground-color-hover: #141414,
-  button-primary-foreground-color-active: #141414,
-  button-primary-background-color: #78BBFA,
-  button-primary-background-color-hover: #8ec6fbff,
-  button-primary-background-color-active: #68a0d5ff,
-  button-primary-border-color: transparent,
-  button-primary-focus-ring-color: #78BBFA,
-  button-secondary-foreground-color: #ffffff,
-  button-secondary-foreground-color-hover: #ffffff,
-  button-secondary-foreground-color-active: #ffffff,
-  button-secondary-background-color: #ffffff0f,
-  button-secondary-background-color-hover: #ffffff22,
-  button-secondary-background-color-active: #ffffff35,
-  button-secondary-border-color: transparent,
-  button-secondary-focus-ring-color: #78BBFA,
-  button-ghost-foreground-color: #ffffff,
-  button-ghost-foreground-color-hover: #ffffff,
-  button-ghost-foreground-color-active: #ffffff,
-  button-ghost-background-color: transparent,
+  alert-background-color: var(--a2-color-neutral-400, #8b8b8b),
+  alert-border-color-info: var(--a2-color-blue-100, #cce3ff),
+  alert-border-color-success: var(--a2-color-green-100, #b8f5dd),
+  alert-border-color-warning: var(--a2-color-yellow-100, #fff0c2),
+  alert-border-color-danger: var(--a2-color-red-100, #ffd4cc),
+  alert-status-icon-color-info: var(--a2-color-blue-100, #cce3ff),
+  alert-status-icon-color-success: var(--a2-color-green-100, #b8f5dd),
+  alert-status-icon-color-warning: var(--a2-color-yellow-100, #fff0c2),
+  alert-status-icon-color-danger: var(--a2-color-red-100, #ffd4cc),
+  alert-close-button-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  announcement-background-color-info: var(--a2-color-blue-100, #cce3ff),
+  announcement-background-color-success: var(--a2-color-green-100, #b8f5dd),
+  announcement-background-color-warning: var(--a2-color-yellow-100, #fff0c2),
+  announcement-background-color-danger: var(--a2-color-red-100, #ffd4cc),
+  announcement-foreground-color-info: var(--a2-color-neutral-950, #040404),
+  announcement-foreground-color-success: var(--a2-color-neutral-950, #040404),
+  announcement-foreground-color-warning: var(--a2-color-neutral-950, #040404),
+  announcement-foreground-color-danger: var(--a2-color-neutral-950, #040404),
+  announcement-action-button-background-color-info: #ffffff0F,
+  announcement-action-button-background-color-success: #ffffff0F,
+  announcement-action-button-background-color-warning: #ffffff0F,
+  announcement-action-button-background-color-danger: #ffffff0F,
+  avatar-background-color: var(--a2-color-neutral-800, #292929),
+  avatar-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  avatar-border-color: var(--a2-color-neutral-0, #ffffff),
+  avatar-indicator-background-color-online: var(--a2-color-green-100, #b8f5dd),
+  avatar-indicator-background-color-offline: var(--a2-color-neutral-400, #8b8b8b),
+  avatar-indicator-background-color-disabled: var(--a2-color-neutral-100, #dfdfdf),
+  avatar-indicator-border-color: var(--a2-color-neutral-100, #dfdfdf),
+  badge-background-color: var(--a2-color-red-100, #ffd4cc),
+  badge-foreground-color: var(--a2-color-neutral-950, #040404),
+  button-primary-foreground-color: var(--a2-color-neutral-950, #040404),
+  button-primary-foreground-color-hover: var(--a2-color-neutral-950, #040404),
+  button-primary-foreground-color-active: var(--a2-color-neutral-950, #040404),
+  button-primary-background-color: var(--a2-color-blue-300, #70b1ff),
+  button-primary-background-color-hover: var(--a2-color-blue-200, #9ecaff),
+  button-primary-background-color-active: var(--a2-color-blue-100, #cce3ff),
+  button-primary-border-color: rgba(0, 0, 0, 0),
+  button-primary-focus-ring-color: var(--a2-color-blue-300, #70b1ff),
+  button-secondary-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  button-secondary-foreground-color-hover: var(--a2-color-neutral-0, #ffffff),
+  button-secondary-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
+  button-secondary-background-color: #ffffff0F,
+  button-secondary-background-color-hover: #ffffff14,
+  button-secondary-background-color-active: #ffffff29,
+  button-secondary-border-color: rgba(0, 0, 0, 0),
+  button-secondary-focus-ring-color: var(--a2-color-blue-300, #70b1ff),
+  button-ghost-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  button-ghost-foreground-color-hover: var(--a2-color-neutral-0, #ffffff),
+  button-ghost-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
+  button-ghost-background-color: rgba(0, 0, 0, 0),
   button-ghost-background-color-hover: #ffffff14,
   button-ghost-background-color-active: #ffffff29,
-  button-ghost-border-color: transparent,
-  button-ghost-focus-ring-color: #78BBFA,
-  button-danger-primary-foreground-color: #141414,
-  button-danger-primary-foreground-color-hover: #141414,
-  button-danger-primary-foreground-color-active: #141414,
-  button-danger-primary-background-color: #ff745f,
-  button-danger-primary-background-color-hover: #ff8a79ff,
-  button-danger-primary-background-color-active: #d96553ff,
-  button-danger-primary-border-color: transparent,
-  button-danger-primary-focus-ring-color: #ff745f,
-  button-danger-secondary-foreground-color: #ffffff,
-  button-danger-secondary-foreground-color-hover: #ff745f,
-  button-danger-secondary-foreground-color-active: #ff745f,
-  button-danger-secondary-background-color: #ff745f33,
-  button-danger-secondary-background-color-hover: #fe6e5852,
-  button-danger-secondary-background-color-active: #fe6a5466,
-  button-danger-secondary-border-color: transparent,
-  button-danger-secondary-focus-ring-color: #ff745f,
-  checkbox-unchecked-fill-color-default: #ffffff,
-  checkbox-unchecked-fill-color-hover: #ffffff,
-  checkbox-unchecked-fill-color-active: #ffffff,
-  checkbox-unchecked-background-color-default: transparent,
+  button-ghost-border-color: rgba(0, 0, 0, 0),
+  button-ghost-focus-ring-color: var(--a2-color-blue-300, #70b1ff),
+  button-danger-primary-foreground-color: var(--a2-color-neutral-950, #040404),
+  button-danger-primary-foreground-color-hover: var(--a2-color-neutral-950, #040404),
+  button-danger-primary-foreground-color-active: var(--a2-color-neutral-950, #040404),
+  button-danger-primary-background-color: var(--a2-color-red-100, #ffd4cc),
+  button-danger-primary-background-color-hover: var(--a2-color-red-200, #ffac9e),
+  button-danger-primary-background-color-active: var(--a2-color-red-100, #ffd4cc),
+  button-danger-primary-border-color: rgba(0, 0, 0, 0),
+  button-danger-primary-focus-ring-color: var(--a2-color-red-300, #ff8974),
+  button-danger-secondary-foreground-color: var(--a2-color-neutral-0, #ffffff),
+  button-danger-secondary-foreground-color-hover: var(--a2-color-red-100, #ffd4cc),
+  button-danger-secondary-foreground-color-active: var(--a2-color-red-100, #ffd4cc),
+  button-danger-secondary-background-color: #ff897433,
+  button-danger-secondary-background-color-hover: var(--a2-color-red-600, #d62100),
+  button-danger-secondary-background-color-active: var(--a2-color-red-800, #731100),
+  button-danger-secondary-border-color: rgba(0, 0, 0, 0),
+  button-danger-secondary-focus-ring-color: var(--a2-color-red-300, #ff8974),
+  checkbox-checked-foreground-color: var(--a2-color-blue-300, #70b1ff),
+  checkbox-checked-foreground-color-hover: var(--a2-color-blue-200, #9ecaff),
+  checkbox-checked-foreground-color-active: var(--a2-color-blue-200, #9ecaff),
+  checkbox-checked-background-color-hover: #70b1ff1A,
+  checkbox-checked-focus-ring-color: var(--a2-color-blue-300, #70b1ff),
   checkbox-unchecked-background-color-hover: #ffffff14,
-  checkbox-unchecked-background-color-active: #ffffff29,
-  checkbox-checked-fill-color-default: #78BBFA,
-  checkbox-checked-fill-color-hover: #abd8feda,
-  checkbox-checked-fill-color-active: #abd8fee0,
-  checkbox-checked-background-color-default: transparent,
-  checkbox-checked-background-color-hover: #78bbfa14,
-  checkbox-checked-background-color-active: #78bbfa29,
-  checkbox-unchecked-error-fill-color-default: #ff745f,
-  checkbox-unchecked-error-fill-color-hover: #ff745f,
-  checkbox-unchecked-error-fill-color-active: #ff745f,
-  checkbox-unchecked-error-background-color-default: transparent,
-  checkbox-unchecked-error-background-color-hover: #f94d321a,
-  checkbox-unchecked-error-background-color-active: #f94d3240,
-  checkbox-checked-error-fill-color-default: #ff745f,
-  checkbox-checked-error-fill-color-hover: #ff745f,
-  checkbox-checked-error-fill-color-active: #ff745f,
-  checkbox-checked-error-background-color-default: transparent,
-  checkbox-checked-error-background-color-hover: #f94d321a,
-  checkbox-checked-error-background-color-active: #f94d3240,
+  checkbox-unchecked-focus-ring-color: var(--a2-color-blue-300, #70b1ff),
+  checkbox-checked-error-foreground-color: var(--a2-color-red-100, #ffd4cc),
+  checkbox-checked-error-foreground-color-hover: var(--a2-color-red-100, #ffd4cc),
+  checkbox-checked-error-foreground-color-active: var(--a2-color-red-100, #ffd4cc),
+  checkbox-checked-error-background-color-hover: #ff89741A,
+  checkbox-checked-error-focus-ring-color: var(--a2-color-red-300, #ff8974),
+  checkbox-unchecked-error-background-color-hover: #ff89741A,
+  checkbox-unchecked-error-focus-ring-color: var(--a2-color-red-300, #ff8974),
 );
 $nonColor: (
-  button-primary-border-radius: 0.375rem,
-  button-secondary-border-radius: 0.375rem,
-  button-ghost-border-radius: 0.375rem,
-  button-danger-primary-border-radius: 0.375rem,
-  button-danger-secondary-border-radius: 0.375rem,
+  button-primary-border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)),
+  button-secondary-border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)),
+  button-ghost-border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)),
+  button-danger-primary-border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)),
+  button-danger-secondary-border-radius: var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)),
+  checkbox-checked-border-radius: var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)),
+  checkbox-unchecked-border-radius: var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)),
+  checkbox-checked-error-border-radius: var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)),
+  checkbox-unchecked-error-border-radius: var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)),
 );