@pantheon-systems/pds-design-tokens 2.0.0-alpha.55 → 2.0.0-alpha.57

package/build/css/variables.dark.css

@@ -314,16 +314,20 @@
   --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
   --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
   --pds-color-dropdown-top-border: rgba(255, 255, 255, 0.00);
+  --pds-color-dropdown-separator: oklch(0.4091 0 0);
   --pds-color-foreground-default: oklch(0.9702 0 0);
   --pds-color-foreground-default-secondary: oklch(0.8452 0 0);
   --pds-color-foreground-reverse: oklch(0.2178 0 0);
   --pds-color-foreground-reverse-secondary: oklch(0.5173 0 0);
+  --pds-color-highlight-background: oklch(0.55 0.115 65);
+  --pds-color-highlight-foreground: oklch(0.9673 0 0);
   --pds-color-input-placeholder: oklch(0.6830 0 0);
   --pds-color-input-file-upload-button-background-default: oklch(0.2931 0 0);
   --pds-color-input-file-upload-button-background-hover: oklch(0.3329 0 0);
   --pds-color-input-selected-background: oklch(0.7049 0.1468 258.30);
-  --pds-color-input-selected-foreground: oklch(1.0000 0 0);
-  --pds-color-input-switch-icon: oklch(0.8452 0 0);
+  --pds-color-input-selected-foreground: oklch(0.2178 0 0);
+  --pds-color-input-switch-icon: oklch(0.2178 0 0);
+  --pds-color-input-switch-background: oklch(0.6830 0 0);
   --pds-color-input-tag-background-default: oklch(0.38 0 0);
   --pds-color-input-tag-background-hover: oklch(0.32 0 0);
   --pds-color-input-tag-background-active: oklch(0.7049 0.1468 258.30);

package/build/css/variables.global.css

@@ -73,7 +73,6 @@
   --pds-spacing-button-gap-inline-l: var(--pds-spacing-xs);
   --pds-spacing-input-height-s: var(--pds-spacing-2xl);
   --pds-spacing-input-height-m: var(--pds-spacing-3xl);
-  --pds-spacing-input-height-l: var(--pds-spacing-4xl);
   --pds-z-index-navigation: 100;
   --pds-z-index-dropdown: 300;
   --pds-z-index-notifications: 500;

package/build/css/variables.light.css

@@ -314,16 +314,20 @@
   --pds-color-dropdown-item-background-active: var(--pds-color-interactive-background-active);
   --pds-color-dropdown-item-background-selected: var(--pds-color-interactive-background-hover);
   --pds-color-dropdown-top-border: #dfdfdf;
+  --pds-color-dropdown-separator: oklch(0.9430 0 0);
   --pds-color-foreground-default: oklch(0.2178 0 0);
   --pds-color-foreground-default-secondary: oklch(0.5550 0.0020 247.86);
   --pds-color-foreground-reverse: oklch(1.0000 0 0);
   --pds-color-foreground-reverse-secondary: oklch(0.8452 0 0);
+  --pds-color-highlight-background: oklch(0.9 0.13 72);
+  --pds-color-highlight-foreground: oklch(0.2178 0 0);
   --pds-color-input-placeholder: oklch(0.8047 0 0);
   --pds-color-input-file-upload-button-background-default: oklch(0.9702 0 0);
   --pds-color-input-file-upload-button-background-hover: oklch(0.9430 0 0);
   --pds-color-input-selected-background: oklch(0.5256 0.1988 268.04);
   --pds-color-input-selected-foreground: oklch(1.0000 0 0);
   --pds-color-input-switch-icon: oklch(1.0000 0 0);
+  --pds-color-input-switch-background: oklch(0.5550 0.0020 247.86);
   --pds-color-input-tag-background-default: oklch(0.907 0 0);
   --pds-color-input-tag-background-hover: oklch(0.87 0 0);
   --pds-color-input-tag-background-active: oklch(0.9559 0.0143 308.29);

package/build/figma/tokens.json

@@ -896,23 +896,6 @@
                   }
                 }
               }
-            },
-            "l": {
-              "value": "{spacing.4XL}",
-              "type": "dimension",
-              "$extensions": {
-                "public": true,
-                "defaultUnit": "rem",
-                "com.figma": {
-                  "scopes": [
-                    "WIDTH_HEIGHT"
-                  ],
-                  "exportAs": "variable",
-                  "codeSyntax": {
-                    "WEB": "--pds-spacing-input-height-l"
-                  }
-                }
-              }
             }
           }
         }
@@ -4426,6 +4409,20 @@
               }
             }
           }
+        },
+        "separator": {
+          "value": "{color.light-mode.neutral.300}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-dropdown-separator"
+              }
+            }
+          }
         }
       },
       "foreground": {
@@ -4486,6 +4483,36 @@
           }
         }
       },
+      "highlight": {
+        "background": {
+          "value": "#ffd078",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-background"
+              }
+            }
+          }
+        },
+        "foreground": {
+          "value": "#1a1a1a",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-foreground"
+              }
+            }
+          }
+        }
+      },
       "input": {
         "placeholder": {
           "value": "{color.light-mode.neutral.500}",
@@ -4579,6 +4606,20 @@
                 }
               }
             }
+          },
+          "background": {
+            "value": "{color.light-mode.neutral.700}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-input-switch-background"
+                }
+              }
+            }
           }
         },
         "tag": {
@@ -12256,6 +12297,20 @@
               }
             }
           }
+        },
+        "separator": {
+          "value": "{color.dark-mode.neutral.500}",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-dropdown-separator"
+              }
+            }
+          }
         }
       },
       "foreground": {
@@ -12316,6 +12371,36 @@
           }
         }
       },
+      "highlight": {
+        "background": {
+          "value": "#9f6116",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-background"
+              }
+            }
+          }
+        },
+        "foreground": {
+          "value": "#f4f4f4",
+          "type": "color",
+          "$extensions": {
+            "public": true,
+            "resolveValue": true,
+            "com.figma": {
+              "exportAs": "variable",
+              "codeSyntax": {
+                "WEB": "--pds-color-highlight-foreground"
+              }
+            }
+          }
+        }
+      },
       "input": {
         "placeholder": {
           "value": "{color.dark-mode.neutral.700}",
@@ -12381,7 +12466,7 @@
             }
           },
           "foreground": {
-            "value": "#ffffff",
+            "value": "{color.dark-mode.neutral.100}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12397,7 +12482,7 @@
         },
         "switch": {
           "icon": {
-            "value": "{color.dark-mode.neutral.800}",
+            "value": "{color.dark-mode.neutral.100}",
             "type": "color",
             "$extensions": {
               "public": true,
@@ -12409,6 +12494,20 @@
                 }
               }
             }
+          },
+          "background": {
+            "value": "{color.dark-mode.neutral.700}",
+            "type": "color",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-color-input-switch-background"
+                }
+              }
+            }
           }
         },
         "tag": {

package/build/js/variables.global.d.ts

@@ -80,7 +80,6 @@ export const SPACING_BUTTON_GAP_INLINE_M: string;
 export const SPACING_BUTTON_GAP_INLINE_L: string;
 export const SPACING_INPUT_HEIGHT_S: string;
 export const SPACING_INPUT_HEIGHT_M: string;
-export const SPACING_INPUT_HEIGHT_L: string;
 export const TYPOGRAPHY_FONT_CSS_IMPORT: string;
 export const Z_INDEX_NAVIGATION: number;
 export const Z_INDEX_DROPDOWN: number;

package/build/js/variables.global.js

@@ -80,7 +80,6 @@ export const SPACING_BUTTON_GAP_INLINE_M = "0.625rem";
 export const SPACING_BUTTON_GAP_INLINE_L = "0.625rem";
 export const SPACING_INPUT_HEIGHT_S = "2rem";
 export const SPACING_INPUT_HEIGHT_M = "2.5rem";
-export const SPACING_INPUT_HEIGHT_L = "3rem";
 export const TYPOGRAPHY_FONT_CSS_IMPORT = "'https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'";
 export const Z_INDEX_NAVIGATION = 100;
 export const Z_INDEX_DROPDOWN = 300;

package/build/json/tokens.json

@@ -1715,29 +1715,6 @@
             "m"
           ],
           "public": true
-        },
-        "l": {
-          "value": "3",
-          "filePath": "tokens/spacing/semantic/input.json",
-          "isSource": true,
-          "original": {
-            "value": "{spacing.4XL}",
-            "public": true
-          },
-          "name": "SpacingInputHeightL",
-          "attributes": {
-            "category": "spacing",
-            "type": "input",
-            "item": "height",
-            "subitem": "l"
-          },
-          "path": [
-            "spacing",
-            "input",
-            "height",
-            "l"
-          ],
-          "public": true
         }
       }
     }

package/codemods/v1-to-v2/README.md

@@ -0,0 +1,203 @@
+# v1 to v2 Migration Codemod
+
+This directory contains the data and tooling for the automated migration from v1.x to v2.x of PDS Design Tokens.
+
+**Status:** 📝 Data collection phase (Alpha)
+
+The codemod itself will be built during the beta phase when the API is frozen.
+
+## Contents
+
+### `mappings.json`
+
+**Purpose:** Machine-readable source of truth for all breaking changes
+
+This file tracks:
+- File path renames (CSS, JS)
+- Token renames (direct 1:1 mappings)
+- Token patterns (wildcards like `--pds-color-gradient-avatar-*`)
+- Token removals (with optional replacement notes)
+- Value format changes (e.g., decimal → percentage)
+- Categories for grouping related changes
+
+**When to update:**
+- Every time you make a breaking change during alpha/beta
+- Update this file FIRST, then auto-generate the migration guide
+- This ensures consistency and makes codemod development easier
+
+### `validate.js`
+
+**Purpose:** Validates `mappings.json` for consistency
+
+Checks for:
+- Valid JSON structure
+- No duplicate "from" tokens
+- No duplicate removals
+- All category references exist
+- No conflicts (token in both renames and removals)
+
+**Usage:**
+```bash
+# Direct
+node codemods/v1-to-v2/validate.js
+
+# Or via npm script
+npm run validate:mappings
+```
+
+Run this before committing changes to ensure data integrity.
+
+### `generate-migration-guide.js`
+
+**Purpose:** Auto-generates the Breaking Changes section of `guides/MIGRATION-v2.md` from `mappings.json`
+
+Generates:
+- Summary-style Breaking Changes with counts and categories
+- Links to detailed Step-by-Step Migration sections
+- Organized by: File Structure, Token Removals, Token Renames, Category Changes, Format Changes, New Features
+
+**Usage:**
+```bash
+# Direct
+node codemods/v1-to-v2/generate-migration-guide.js
+
+# Or via npm script
+npm run generate:migration
+```
+
+Run this after updating `mappings.json` to keep the migration guide in sync.
+
+## Workflow for Adding Breaking Changes
+
+When you make a breaking change during alpha/beta:
+
+### 1. Update `mappings.json`
+
+**For a token rename:**
+```json
+{
+  "from": "--pds-old-token",
+  "to": "--pds-new-token",
+  "category": "animation"
+}
+```
+
+Add to `tokens.renames` array.
+
+**For a token removal:**
+```json
+{
+  "token": "--pds-removed-token",
+  "category": "color",
+  "replacement": null,
+  "note": "Optional note about why it was removed"
+}
+```
+
+Add to `tokens.removals` array.
+
+**For a file rename:**
+```json
+{
+  "from": "build/css/old-file.css",
+  "to": "build/css/new-file.css",
+  "description": "Brief description"
+}
+```
+
+Add to `files.renames` array.
+
+### 2. Validate the changes
+
+```bash
+npm run validate:mappings
+```
+
+### 3. Generate migration guide
+
+```bash
+npm run generate:migration
+```
+
+This auto-generates a summary-style Breaking Changes section in `guides/MIGRATION-v2.md` from `mappings.json`. The summary includes counts, categories, and links to detailed step-by-step instructions.
+
+### 4. Update CHANGELOG
+
+Add entry to `CHANGELOG.mdx` with "BREAKING:" prefix.
+
+### 5. Commit together
+
+```bash
+git add tokens/ codemods/v1-to-v2/mappings.json guides/MIGRATION-v2.md CHANGELOG.mdx
+git commit -m "BREAKING: Description
+
+- Specific change
+- Updated mappings.json and auto-generated migration guide"
+```
+
+## Future: Codemod Implementation
+
+**Timeline:** Build during beta phase (when API is frozen)
+
+**Implementation plan:**
+- Use [jscodeshift](https://github.com/facebook/jscodeshift) for JS/TS transformations
+- Use [postcss](https://postcss.org/) for CSS/SCSS transformations
+- Read from `mappings.json` for all transformation rules
+- Provide dry-run mode to preview changes
+- Generate report of:
+  - Automated changes (file renames, token renames)
+  - Manual review needed (removed tokens, value changes)
+
+**Usage (future):**
+```bash
+npx @pantheon-systems/pds-design-tokens migrate v1-to-v2
+```
+
+## Categories
+
+Current categories defined in `mappings.json`:
+
+- **animation** - Animation and transition tokens
+- **status-colors** - Status color tokens (info, success, warning, critical, discovery)
+- **text-colors** - Text and foreground color tokens
+- **typography** - Typography tokens (font families, sizes, etc.)
+- **gradients** - Gradient tokens (moved from color category)
+- **border** - Border width and offset tokens
+- **color** - General color tokens
+- **component** - Component-specific tokens
+
+Add new categories as needed to keep changes organized.
+
+## Validation Script Output
+
+Example successful validation:
+
+```
+✅ mappings.json is valid JSON
+✅ No duplicate 'from' tokens in renames (19 unique)
+✅ No duplicate removal tokens (21 unique)
+ℹ️  Valid categories: animation, status-colors, text-colors, typography, gradients, border, color, component
+✅ All token categories are valid
+✅ No conflicts between renames and removals
+
+📊 Summary:
+   File renames: 3
+   Token renames: 19
+   Token patterns: 1
+   Token removals: 21
+   Value changes: 1
+   Categories: 8
+
+✅ All validations passed!
+```
+
+## Notes
+
+- **Patterns:** Use `isPattern: true` for wildcard tokens like `--pds-color-gradient-avatar-*`
+- **Removals:** Set `replacement: null` for tokens removed without direct replacement
+- **Value changes:** Document transformation logic (e.g., "multiply by 100, add %")
+- **Keep synced:** `mappings.json` is the source of truth - migration guide reflects this data
+
+---
+
+For migration guide, see: `guides/MIGRATION-v2.md`