@bcc-code/design-tokens 3.0.12 → 3.0.16

package/README.md

@@ -1,6 +1,6 @@
 # @bcc-code/design-tokens
 
-BCC Design System tokens with support for CSS variables, Tailwind CSS v4, and PrimeVue themes. Generates consistent design tokens from Figma Token Studio with automatic light/dark mode support.
+BCC Design System tokens for CSS, Tailwind v4, and PrimeVue with light/dark mode support.
 
 ## Installation
 
@@ -10,17 +10,13 @@ npm install @bcc-code/design-tokens
 
 ## Usage
 
-### CSS Variables (Recommended)
-
-Import auto-switching CSS variables with light/dark mode support:
+### CSS Variables
 
 ```css
 @import '@bcc-code/design-tokens/css';
 ```
 
-This automatically provides light theme by default and switches to dark theme when the `.dark` class is applied to any parent element (typically `html` or `body`).
-
-Use semantic tokens in your styles:
+Provides light theme by default, dark theme with `.dark` class:
 
 ```css
 .card {
@@ -28,68 +24,43 @@ Use semantic tokens in your styles:
   color: var(--color-text-default);
   padding: var(--space-300);
   border-radius: var(--border-radius-md);
-  font-family: var(--font-family-archivo);
 }
 ```
 
-**Manual theme switching:**
+Toggle dark mode:
+
 ```javascript
-// Toggle dark mode
 document.documentElement.classList.toggle('dark');
-
-// Or set theme based on user preference
-const isDark = localStorage.getItem('theme') === 'dark';
-document.documentElement.classList.toggle('dark', isDark);
-```
-
-**Alternative theme-specific imports (optional):**
-```css
-@import '@bcc-code/design-tokens/css/light';
-@import '@bcc-code/design-tokens/css/dark';
 ```
 
-### Tailwind CSS v4 (Recommended)
-
-Import Tailwind utilities with auto-switching themes and `.dark` class support:
+### Tailwind CSS v4
 
 ```css
 @import '@bcc-code/design-tokens/tailwind';
 ```
 
-This provides light theme by default and dark theme when using the `.dark` class on any parent element.
-
 Use utility classes:
 
 ```html
 <div class="bg-elevation-surface-default text-default p-300 radius-md">
-  Content with BCC design tokens
+  Content
 </div>
 
-<!-- Dark mode with .dark class -->
+<!-- Dark mode -->
 <div class="dark">
-  <div class="bg-elevation-surface-default text-default p-300 radius-md">
-    Content in dark mode
+  <div class="bg-elevation-surface-default text-default">
+    Dark content
   </div>
 </div>
 ```
 
-**Alternative theme-specific imports (optional):**
-```css
-@import '@bcc-code/design-tokens/tailwind/light';
-@import '@bcc-code/design-tokens/tailwind/dark';
-```
-
-### PrimeVue Integration
-
-Configure PrimeVue with BCC theme preset:
+### PrimeVue
 
 ```javascript
 import { createApp } from 'vue'
 import PrimeVue from 'primevue/config'
 import BCCPreset from '@bcc-code/design-tokens/primevue'
 
-const app = createApp(App)
-
 app.use(PrimeVue, {
   theme: {
     preset: BCCPreset,
@@ -102,150 +73,83 @@ app.use(PrimeVue, {
 })
 ```
 
-Enable dark mode by adding the `dark` class to your root element:
+Toggle dark mode:
 
 ```javascript
-// Toggle dark mode
-document.documentElement.classList.toggle('dark')
-
-// Or with system preference fallback
-function setTheme(isDark) {
-  document.documentElement.classList.toggle('dark', isDark);
-  document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-}
+document.documentElement.classList.toggle('dark');
 ```
 
 ## Token Categories
 
-- **Colors**: Semantic color tokens for text, backgrounds, borders, and states
-- **Typography**: Font families, sizes, weights, and line heights
-- **Spacing**: Consistent spacing scale for margins, padding, and gaps
-- **Border Radius**: Border radius values for consistent corner rounding
-- **Elevation**: Surface tokens for different elevation levels
+- **Colors**: Text, backgrounds, borders, states
+- **Typography**: Font families, sizes, weights, line heights
+- **Spacing**: Margins, padding, gaps
+- **Border Radius**: Corner rounding
+- **Elevation**: Surface levels
 
 ## CDN Usage
 
 ```html
-<!-- Auto-switching CSS variables with .dark class support (recommended) -->
+<!-- CSS variables -->
 <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">
 
-<!-- Or Tailwind utilities with .dark class support -->
+<!-- Tailwind utilities -->
 <link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">
 
-<!-- Then add JavaScript for theme switching -->
+<!-- Theme toggle -->
 <script>
-  // Basic theme toggle
-  function toggleTheme() {
-    document.documentElement.classList.toggle('dark');
-  }
-  
-  // Theme with system preference detection
-  function initTheme() {
-    const savedTheme = localStorage.getItem('theme');
-    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const isDark = savedTheme ? savedTheme === 'dark' : systemDark;
-    
-    document.documentElement.classList.toggle('dark', isDark);
-    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-  }
-  
-  initTheme();
+  document.documentElement.classList.toggle('dark');
 </script>
 ```
 
-## Contributing
+## Development
 
-We welcome contributions! Here's how to get started:
-
-### Development Setup
-
-1. **Clone and install dependencies:**
-   ```bash
-   git clone https://github.com/bcc-code/design-tokens.git
-   cd design-tokens
-   npm install
-   ```
-
-2. **Build tokens:**
-   ```bash
-   npm run build
-   ```
-
-3. **Test with demo application:**
-   ```bash
-   cd demo
-   npm install
-   npm run dev
-   ```
-   
-   The demo application showcases all three integration methods (CSS variables, Tailwind utilities, and PrimeVue components) with a comprehensive dashboard featuring theme switching, real-world examples, and live token demonstrations.
-
-### Token Structure
-
-- **Source tokens** are located in `tokens/` directory, synced from Figma Token Studio
-- **Build configuration** is in `export-tokens/build.js` using Style Dictionary
-- **Output files** are generated in `build/bcc/` with organized folders for `css/` and `js/`
-
-### GitHub-Figma Workflow
-
-The design token system integrates with Figma through Figma Token Studio, creating a streamlined workflow between design and development:
-
-**1. Design in Figma**
-- Design tokens are created and managed in Figma using the Token Studio plugin
-- Tokens are organized into collections: primitives, semantic (light/dark), typeface, and PrimeVue
-- Designers can make changes directly in Figma and preview them in real-time
-
-**2. Export from Figma Token Studio**
-- Use the Token Studio plugin to export tokens as JSON files
-- Export collections separately or as a complete token set
-- Tokens are exported in the Figma Token Studio format with proper references
-
-**3. Sync to GitHub**
-- Export token files from Figma Token Studio
-- Update the corresponding files in the `tokens/` directory:
-  - `tokens/primitives/` - Base design tokens (colors, dimensions, typography)
-  - `tokens/semantic/light.json` - Light theme semantic tokens
-  - `tokens/semantic/dark.json` - Dark theme semantic tokens
-  - `tokens/typeface/` - Font definitions
-  - `tokens/primevue/aura-primitive.json` - PrimeVue Aura primitive tokens
-- Commit changes to your feature branch
-
-**4. Build and Deploy**
-- Run `npm run build` to transform tokens into CSS, JS, and Tailwind formats
-- The Style Dictionary build system processes tokens with custom transforms
-- Generated files in `build/bcc/` are ready for distribution
-
-**5. Version and Release**
-- Create pull request with token changes
-- Review generated output files and test with demo application
-- Merge to main branch triggers automated release process
-- New package version is published to npm with updated tokens
-
-### Making Changes
-
-1. **Token updates:** Export from Figma Token Studio and update files in `tokens/` directory
-2. **Build system changes:** Update `export-tokens/build.js` for new formats or transformations
-3. **PrimeVue preset:** Modify `config/primevue.config.js` for theme mapping changes
-
-### Pull Requests
-
-- Ensure `npm run build` runs successfully
-- Test changes with the demo application
-- Update documentation if adding new features
-- Follow conventional commit messages
+```bash
+git clone https://github.com/bcc-code/bcc-tokens.git
+cd bcc-tokens
+npm install
+npm run build
+```
 
-## Development
+Run demo:
+
+```bash
+cd demo
+npm install
+npm run dev
+```
+
+Visit `http://localhost:5173`
 
-A comprehensive demo application is available in the `demo/` directory featuring:
+## Project Structure
 
-- **CSS Variables showcase**: Custom cards, newsletter forms, and status displays using pure CSS with BCC tokens
-- **Tailwind Utilities showcase**: Project management dashboard with utility-first CSS classes
-- **PrimeVue Components showcase**: User profiles, settings panels, and component galleries
-- **Theme switching**: Manual dark/light mode toggle with system preference detection
-- **Live token demonstrations**: Real-time examples of all token categories in action
+```
+tokens/             # Source tokens (Figma Token Studio)
+export-tokens/      # Build system
+config/             # PrimeVue preset
+build/bcc/          # Generated output
+demo/               # Demo application
+```
+
+## Publishing
+
+Automated via GitHub Actions when you push a version tag:
+
+```bash
+# Update version in package.json
+git add package.json
+git commit -m "Bump version to X.X.X"
+git push
+
+# Create and push tag
+git tag vX.X.X
+git push origin vX.X.X
+```
+
+## Contributing
 
-Access the demo at `http://localhost:5173` after running `npm run dev` in the `demo/` directory.
+See [CONTRIBUTING.md](CONTRIBUTING.md)
 
 ## License
 
-MIT © BCC Code
+MIT © BCC Code

package/build/bcc/css/auto.css

@@ -4,7 +4,6 @@
 
 
 :root {
-  --font-family-archivo: Archivo;
   --color-neutral-0: #ffffff;
   --color-neutral-100: #f7f8f9;
   --color-neutral-200: #f1f2f4;
@@ -36,7 +35,6 @@
   --color-dark-neutral-900: #b6c2cf;
   --color-dark-neutral-1000: #c7d1db;
   --color-dark-neutral-1100: #dee4ea;
-  --color-dark-neutral-negative-100: #101214;
   --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
   --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
   --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
@@ -176,26 +174,24 @@
   --space-negative-300: -1.5rem; /** -24px */
   --space-negative-400: -2rem; /** -32px */
   --border-radius-none: 0; /** 0 */
-  --border-radius-xs: 0.125rem; /** 2px */
-  --border-radius-sm: 0.25rem; /** 4px */
+  --border-radius-2xs: 0.125rem; /** 2px */
+  --border-radius-xs: 0.25rem; /** 4px */
+  --border-radius-sm: 0.375rem; /** 6px */
   --border-radius-md: 0.5rem; /** 8px */
-  --border-radius-lg: 1rem; /** 16px */
-  --border-radius-xl: 1.5rem; /** 24px */
-  --border-radius-2xl: 2rem; /** 32px */
-  --border-radius-3xl: 3rem; /** 48px */
+  --border-radius-lg: 0.75rem; /** 12px */
+  --border-radius-xl: 1rem; /** 16px */
+  --border-radius-2xl: 1.5rem; /** 24px */
+  --border-radius-3xl: 2rem; /** 32 */
+  --border-radius-4xl: 3rem; /** 48px */
   --border-radius-full: 999px;
-  --icon-size-xs: 1rem; /** 16px */
-  --icon-size-sm: 1.25rem; /** 20px */
-  --icon-size-md: 1.5rem; /** 24px */
-  --icon-size-lg: 2rem; /** 32px */
-  --icon-size-xl: 3rem; /** 48px */
   --border-width-0: 0;
   --border-width-1: 1px;
   --border-width-2: 2px;
+  --font-family-archivo: Archivo;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-bold: 700;
-  --line-height-1: 12px;
+  --line-height-1: 14px;
   --line-height-2: 16px;
   --line-height-3: 20px;
   --line-height-4: 24px;
@@ -203,9 +199,9 @@
   --line-height-6: 32px;
   --line-height-7: 36px;
   --line-height-8: 40px;
-  --line-height-9: 52px;
+  --line-height-9: 56px;
   --line-height-10: 64px;
-  --line-height-none: 1;
+  --line-height-none: normal;
   --font-size-xs: 0.75rem; /** 12px */
   --font-size-sm: 0.875rem; /** 14px */
   --font-size-md: 1rem; /** 16px */
@@ -214,6 +210,9 @@
   --font-size-2xl: 2em; /** 32px */
   --font-size-3xl: 2.25rem; /** 36px */
   --font-size-4xl: 3rem; /** 48px */
+  --elevation-shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
+  --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
+  --elevation-shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
   --color-text-default: var(--color-neutral-1000);
   --color-text-subtle: var(--color-neutral-800);
   --color-text-subtlest: var(--color-neutral-700);
@@ -355,18 +354,18 @@
   --color-background-brand-boldest-default: var(--color-bcc-1000);
   --color-background-brand-boldest-hover: var(--color-bcc-900);
   --color-background-brand-boldest-pressed: var(--color-bcc-800);
-  --color-background-accent-neutral-default: var(--color-neutral-alpha-300-a);
-  --color-background-accent-neutral-hover: var(--color-neutral-alpha-400-a);
-  --color-background-accent-neutral-pressed: var(--color-neutral-alpha-500-a);
-  --color-background-accent-neutral-subtle-default: var(--color-neutral-alpha-200-a);
-  --color-background-accent-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
-  --color-background-accent-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
-  --color-background-accent-neutral-subtler-default: var(--color-neutral-alpha-100-a);
-  --color-background-accent-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
-  --color-background-accent-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
-  --color-background-accent-neutral-subtlest-default: var(--color-transparent);
-  --color-background-accent-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
-  --color-background-accent-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
+  --color-background-neutral-default: var(--color-neutral-alpha-300-a);
+  --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
+  --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
+  --color-background-neutral-subtle-default: var(--color-neutral-alpha-200-a);
+  --color-background-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
+  --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
+  --color-background-neutral-subtler-default: var(--color-neutral-alpha-100-a);
+  --color-background-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
+  --color-background-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
+  --color-background-neutral-subtlest-default: var(--color-transparent);
+  --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
+  --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
   --color-background-accent-blue-subtle-default: var(--color-blue-400);
   --color-background-accent-blue-subtle-hover: var(--color-blue-300);
   --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -441,7 +440,10 @@
   --color-background-accent-orange-bolder-pressed: var(--color-orange-900);
   --color-background-accent-red-subtle-default: var(--color-red-400);
   --color-background-accent-red-subtle-hover: var(--color-red-300);
-  --color-background-accent-red-subtle-pressed: var(--color-red-400);
+  --color-background-accent-red-subtle-pressed: var(--color-red-200);
+  --color-background-accent-red-subtler-default: var(--color-red-200);
+  --color-background-accent-red-subtler-hover: var(--color-red-300);
+  --color-background-accent-red-subtler-pressed: var(--color-red-400);
   --color-background-accent-red-subtlest-default: var(--color-red-100);
   --color-background-accent-red-subtlest-hover: var(--color-red-200);
   --color-background-accent-red-subtlest-pressed: var(--color-red-300);
@@ -500,13 +502,20 @@
   --color-elevation-surface-raised-hovered: var(--color-neutral-200);
   --color-elevation-surface-raised-pressed: var(--color-neutral-300);
   --color-elevation-surface-sunken-default: var(--color-neutral-100);
-  --heading-xs: var(--font-weight-medium) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
-  --heading-sm: var(--font-weight-medium) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
-  --heading-md: var(--font-weight-medium) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
-  --heading-lg: var(--font-weight-medium) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
-  --heading-xl: var(--font-weight-medium) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
-  --heading-2xl: var(--font-weight-medium) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
-  --heading-3xl: var(--font-weight-medium) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
+  --icon-size-xs: var(--space-200); /** 16px */
+  --icon-size-sm: var(--space-250); /** 20px */
+  --icon-size-md: var(--space-300); /** 24px */
+  --icon-size-lg: var(--space-400); /** 32px */
+  --icon-size-xl: var(--space-600); /** 48px */
+  --heading-xs: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
+  --heading-sm: var(--font-weight-bold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
+  --heading-md: var(--font-weight-bold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
+  --heading-lg: var(--font-weight-bold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
+  --heading-xl: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
+  --heading-2xl: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
+  --heading-3xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
+  --heading-4xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
+  --heading-5xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-10) var(--font-family-archivo);
   --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
   --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
   --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
@@ -516,7 +525,6 @@
   --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16);
   --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24);
   --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32);
-  --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
   --color-blanket-default: rgba(16, 18, 20, 0.6);
   --color-blanket-selected: rgba(29, 122, 252, 0.08);
   --color-blanket-danger: rgba(227, 73, 53, 0.08);
@@ -660,11 +668,103 @@
   --color-background-brand-bolder-default: var(--color-bcc-400);
   --color-background-brand-bolder-hover: var(--color-bcc-300);
   --color-background-brand-bolder-pressed: var(--color-bcc-200);
-  --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
-  --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
-  --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
-  --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
-  --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
+  --color-background-brand-boldest-default: var(--color-bcc-100);
+  --color-background-brand-boldest-hover: var(--color-bcc-200);
+  --color-background-brand-boldest-pressed: var(--color-bcc-300);
+  --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
+  --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
+  --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
+  --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-200-a);
+  --color-background-neutral-subtle-hover: var(--color-dark-neutral-alpha-300-a);
+  --color-background-neutral-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
+  --color-background-neutral-subtler-default: var(--color-dark-neutral-alpha-100-a);
+  --color-background-neutral-subtler-hover: var(--color-dark-neutral-alpha-200-a);
+  --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
+  --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
+  --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
+  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
+  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
+  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
+  --color-background-accent-blue-subtler-default: var(--color-blue-900);
+  --color-background-accent-blue-subtler-hover: var(--color-blue-800);
+  --color-background-accent-blue-subtler-pressed: var(--color-blue-700);
+  --color-background-accent-blue-subtle-default: var(--color-blue-700);
+  --color-background-accent-blue-subtle-hover: var(--color-blue-600);
+  --color-background-accent-blue-subtle-pressed: var(--color-blue-500);
+  --color-background-accent-blue-bolder-default: var(--color-blue-400);
+  --color-background-accent-blue-bolder-hover: var(--color-blue-300);
+  --color-background-accent-blue-bolder-pressed: var(--color-blue-200);
+  --color-background-accent-teal-subtlest-default: var(--color-teal-1000);
+  --color-background-accent-teal-subtlest-hover: var(--color-teal-900);
+  --color-background-accent-teal-subtlest-pressed: var(--color-teal-800);
+  --color-background-accent-teal-subtler-default: var(--color-teal-900);
+  --color-background-accent-teal-subtler-hover: var(--color-teal-800);
+  --color-background-accent-teal-subtler-pressed: var(--color-teal-700);
+  --color-background-accent-teal-subtle-default: var(--color-teal-700);
+  --color-background-accent-teal-subtle-hover: var(--color-teal-600);
+  --color-background-accent-teal-subtle-pressed: var(--color-teal-500);
+  --color-background-accent-teal-bolder-default: var(--color-teal-400);
+  --color-background-accent-teal-bolder-hover: var(--color-teal-300);
+  --color-background-accent-teal-bolder-pressed: var(--color-teal-200);
+  --color-background-accent-green-subtlest-default: var(--color-green-1000);
+  --color-background-accent-green-subtlest-hover: var(--color-green-900);
+  --color-background-accent-green-subtlest-pressed: var(--color-green-800);
+  --color-background-accent-green-subtler-default: var(--color-green-900);
+  --color-background-accent-green-subtler-hover: var(--color-green-800);
+  --color-background-accent-green-subtler-pressed: var(--color-green-700);
+  --color-background-accent-green-subtle-default: var(--color-green-700);
+  --color-background-accent-green-subtle-hover: var(--color-green-600);
+  --color-background-accent-green-subtle-pressed: var(--color-green-500);
+  --color-background-accent-green-bolder-default: var(--color-green-400);
+  --color-background-accent-green-bolder-hover: var(--color-green-300);
+  --color-background-accent-green-bolder-pressed: var(--color-green-200);
+  --color-background-accent-brown-subtlest-default: var(--color-brown-1000);
+  --color-background-accent-brown-subtlest-hover: var(--color-brown-900);
+  --color-background-accent-brown-subtlest-pressed: var(--color-brown-800);
+  --color-background-accent-brown-subtler-default: var(--color-brown-900);
+  --color-background-accent-brown-subtler-hover: var(--color-brown-800);
+  --color-background-accent-brown-subtler-pressed: var(--color-brown-700);
+  --color-background-accent-brown-subtle-default: var(--color-brown-700);
+  --color-background-accent-brown-subtle-hover: var(--color-brown-600);
+  --color-background-accent-brown-subtle-pressed: var(--color-brown-500);
+  --color-background-accent-brown-bolder-default: var(--color-brown-400);
+  --color-background-accent-brown-bolder-hover: var(--color-brown-300);
+  --color-background-accent-brown-bolder-pressed: var(--color-brown-200);
+  --color-background-accent-yellow-subtlest-default: var(--color-yellow-1000);
+  --color-background-accent-yellow-subtlest-hover: var(--color-yellow-900);
+  --color-background-accent-yellow-subtlest-pressed: var(--color-yellow-800);
+  --color-background-accent-yellow-subtler-default: var(--color-yellow-900);
+  --color-background-accent-yellow-subtler-hover: var(--color-yellow-800);
+  --color-background-accent-yellow-subtler-pressed: var(--color-yellow-700);
+  --color-background-accent-yellow-subtle-default: var(--color-yellow-700);
+  --color-background-accent-yellow-subtle-hover: var(--color-yellow-600);
+  --color-background-accent-yellow-bolder-default: var(--color-yellow-400);
+  --color-background-accent-yellow-bolder-hover: var(--color-yellow-300);
+  --color-background-accent-yellow-bolder-pressed: var(--color-yellow-200);
+  --color-background-accent-orange-subtlest-default: var(--color-orange-1000);
+  --color-background-accent-orange-subtlest-hover: var(--color-orange-900);
+  --color-background-accent-orange-subtlest-pressed: var(--color-orange-800);
+  --color-background-accent-orange-subtler-default: var(--color-orange-900);
+  --color-background-accent-orange-subtler-hover: var(--color-orange-800);
+  --color-background-accent-orange-subtler-pressed: var(--color-orange-700);
+  --color-background-accent-orange-subtle-default: var(--color-orange-700);
+  --color-background-accent-orange-subtle-hover: var(--color-orange-600);
+  --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
+  --color-background-accent-orange-bolder-default: var(--color-orange-400);
+  --color-background-accent-orange-bolder-hover: var(--color-orange-300);
+  --color-background-accent-orange-bolder-pressed: var(--color-orange-200);
+  --color-background-accent-red-subtlest-default: var(--color-red-1000);
+  --color-background-accent-red-subtlest-hover: var(--color-red-900);
+  --color-background-accent-red-subtlest-pressed: var(--color-red-800);
+  --color-background-accent-red-subtler-default: var(--color-red-900);
+  --color-background-accent-red-subtler-hover: var(--color-red-800);
+  --color-background-accent-red-subtler-pressed: var(--color-red-700);
+  --color-background-accent-red-subtle-default: var(--color-red-700);
+  --color-background-accent-red-subtle-hover: var(--color-red-600);
+  --color-background-accent-red-subtle-pressed: var(--color-red-500);
+  --color-background-accent-red-bolder-default: var(--color-red-400);
+  --color-background-accent-red-bolder-hover: var(--color-red-300);
+  --color-background-accent-red-bolder-pressed: var(--color-red-200);
   --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
   --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
   --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
@@ -689,17 +789,20 @@
   --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
   --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
   --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
-  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
-  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
-  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
-  --color-background-accent-gray-subtler-default: var(--color-dark-neutral-400);
-  --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-500);
-  --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-600);
-  --color-background-accent-gray-subtle-default: var(--color-dark-neutral-500);
-  --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-400);
-  --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-300);
+  --color-background-accent-gray-default: var(--color-dark-neutral-300);
+  --color-background-accent-gray-hover: var(--color-dark-neutral-400);
+  --color-background-accent-gray-pressed: var(--color-dark-neutral-500);
+  --color-background-accent-gray-subtle-default: var(--color-dark-neutral-200);
+  --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-300);
+  --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-400);
+  --color-background-accent-gray-subtler-default: var(--color-dark-neutral-100);
+  --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-200);
+  --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-300);
+  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
+  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
+  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
   --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
-  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
+  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
   --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
   --color-skeleton-default: var(--color-dark-neutral-alpha-200-a);
   --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a);