fix: add component files

Author: QuintonJason

packages/styles/_generated/pine/components/pds-alert/pds-alert.tokens.scss

@@ -0,0 +1,36 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --pine-alert-color-background: var(--pine-color-grey-150);
+  --pine-alert-color-border: var(--pine-color-grey-300);
+  --pine-alert-color-dismiss: var(--pine-color-grey-900);
+  --pine-alert-color-dismiss-hover: var(--pine-color-grey-300);
+  --pine-alert-color-icon: var(--pine-color-grey-700);
+  --pine-alert-color-text: var(--pine-color-grey-950);
+  --pine-alert-color-danger-background: var(--pine-color-red-150);
+  --pine-alert-color-danger-border: var(--pine-color-red-300);
+  --pine-alert-color-danger-dismiss: var(--pine-color-red-900);
+  --pine-alert-color-danger-dismiss-hover: var(--pine-color-red-300);
+  --pine-alert-color-danger-icon: var(--pine-color-red-700);
+  --pine-alert-color-danger-text: var(--pine-color-red-950);
+  --pine-alert-color-info-background: var(--pine-color-blue-150);
+  --pine-alert-color-info-border: var(--pine-color-blue-300);
+  --pine-alert-color-info-dismiss: var(--pine-color-blue-900);
+  --pine-alert-color-info-dismiss-hover: var(--pine-color-blue-300);
+  --pine-alert-color-info-icon: var(--pine-color-blue-700);
+  --pine-alert-color-info-text: var(--pine-color-blue-950);
+  --pine-alert-color-success-background: var(--pine-color-green-150);
+  --pine-alert-color-success-border: var(--pine-color-green-300);
+  --pine-alert-color-success-dismiss: var(--pine-color-green-900);
+  --pine-alert-color-success-dismiss-hover: var(--pine-color-green-300);
+  --pine-alert-color-success-icon: var(--pine-color-green-700);
+  --pine-alert-color-success-text: var(--pine-color-green-950);
+  --pine-alert-color-warning-background: var(--pine-color-yellow-150);
+  --pine-alert-color-warning-border: var(--pine-color-yellow-300);
+  --pine-alert-color-warning-dismiss: var(--pine-color-yellow-900);
+  --pine-alert-color-warning-dismiss-hover: var(--pine-color-yellow-300);
+  --pine-alert-color-warning-icon: var(--pine-color-yellow-700);
+  --pine-alert-color-warning-text: var(--pine-color-yellow-950);
+}

packages/styles/_generated/pine/components/pds-chip/pds-chip.tokens.scss

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --pine-chip-color-accent: var(--pine-color-purple-100);
+  --pine-chip-color-accent-hover: var(--pine-color-purple-300);
+  --pine-chip-color-accent-dot: var(--pine-color-purple-600);
+  --pine-chip-color-danger: var(--pine-color-red-100);
+  --pine-chip-color-danger-hover: var(--pine-color-red-300);
+  --pine-chip-color-danger-dot: var(--pine-color-red-600);
+  --pine-chip-color-info: var(--pine-color-blue-100);
+  --pine-chip-color-info-hover: var(--pine-color-blue-300);
+  --pine-chip-color-info-dot: var(--pine-color-blue-600);
+  --pine-chip-color-neutral: var(--pine-color-grey-100);
+  --pine-chip-color-neutral-hover: var(--pine-color-grey-300);
+  --pine-chip-color-neutral-dot: var(--pine-color-grey-600);
+  --pine-chip-color-success: var(--pine-color-green-100);
+  --pine-chip-color-success-hover: var(--pine-color-green-300);
+  --pine-chip-color-success-dot: var(--pine-color-green-600);
+  --pine-chip-color-warning: var(--pine-color-yellow-100);
+  --pine-chip-color-warning-hover: var(--pine-color-yellow-300);
+  --pine-chip-color-warning-dot: var(--pine-color-yellow-600);
+}

packages/styles/_generated/pine/components/pds-input/pds-input.tokens.scss

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --pine-input-color-background-danger: var(--pine-color-red-050);
+}

packages/styles/_generated/pine/components/pds-select/pds-select.tokens.scss

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:host {
+  --pine-select-color-background-danger: var(--pine-color-red-050);
+}

packages/styles/src/lib/transform/generators/component.js

@@ -22,8 +22,8 @@ export const generateComponentFiles = () => {
       format,
       filter: (token) => {
         const filePath = token.filePath || '';
-        return filePath.includes(`components/${comp}/light.json`) ||
-               filePath.includes(`components/${comp}/light/`);
+        // Match component files like components/alert.json
+        return filePath.includes(`components/${comp}.json`);
       },
       options: {
         selector: ":host",

packages/styles/src/lib/transform/index.js

@@ -25,16 +25,33 @@ StyleDictionary.registerFormat({
       return name.replace(/[^a-zA-Z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
     };
 
+    // Helper to convert a reference path to CSS variable name
+    const refToVar = (refPath, prefix) => {
+      const varName = sanitizeName(refPath.split('.').join('-'));
+      return `var(--${prefix}-${varName})`;
+    };
+
     // Helper to convert token references to CSS variable references
     const formatTokenValue = (token, prefix) => {
       const originalValue = token.original?.value || token.value;
 
-      // Check if the original value is a reference (starts with {)
+      // Check if the original value is a simple string reference (starts with {)
       if (typeof originalValue === 'string' && originalValue.startsWith('{') && originalValue.endsWith('}')) {
         // Convert {color.purple.500} to var(--pine-color-purple-500)
         const refPath = originalValue.slice(1, -1); // Remove { and }
-        const varName = sanitizeName(refPath.split('.').join('-'));
-        return `var(--${prefix}-${varName})`;
+        return refToVar(refPath, prefix);
+      }
+
+      // Check if the original value contains a reference with operations (e.g., "{letter-spacing.114} * -1")
+      if (typeof originalValue === 'string' && originalValue.includes('{') && originalValue.includes('}')) {
+        // Extract the reference and any operations
+        const refMatch = originalValue.match(/\{([^}]+)\}/);
+        if (refMatch) {
+          const refPath = refMatch[1];
+          const varRef = refToVar(refPath, prefix);
+          // Replace the reference in the original string with the CSS variable
+          return originalValue.replace(/\{[^}]+\}/, varRef);
+        }
       }
 
       // If not a reference, use the resolved value
@@ -46,7 +63,7 @@ StyleDictionary.registerFormat({
 
     allTokens.forEach(token => {
       const name = sanitizeName(token.path.join('-'));
-      const value = formatTokenValue(token, prefix, { allTokens });
+      const value = formatTokenValue(token, prefix);
       output += `  --${prefix}-${name}: ${value};\n`;
     });