@pure-ds/core 0.3.0

package/CSS-INTELLISENSE-LIMITATION.md

@@ -0,0 +1,98 @@
+# ⚠️ CSS IntelliSense - Important Information
+
+## Where CSS IntelliSense Works
+
+✅ **CSS Files (.css)**
+```css
+/* Full autocomplete available */
+.my-class {
+  color: var(--color-primary-500);  /* ← Type var(-- to see all tokens */
+  padding: var(--spacing-4);
+}
+```
+
+✅ **HTML `<style>` Tags**
+```html
+<style>
+  .custom {
+    /* Full autocomplete available */
+    background: var(--color-primary-500);
+  }
+</style>
+```
+
+## Where It Does NOT Work
+
+❌ **Inline `style` Attributes** 
+```html
+<!-- NO IntelliSense here - This is a VS Code limitation -->
+<div style="padding: var(--)"></div>
+```
+
+This is not a PDS bug - it's a VS Code limitation. The `css.customData` setting only applies to CSS files and `<style>` tags, not inline style attributes.
+
+## Workarounds
+
+### 1. Use `<style>` Tags
+```html
+<style>
+  .my-padding {
+    padding: var(--spacing-4);  /* Full IntelliSense works here */
+  }
+</style>
+<div class="my-padding"></div>
+```
+
+### 2. Use Utility Classes
+PDS provides comprehensive utility classes:
+```html
+<div class="flex gap-4 items-center">
+  <div class="card surface-elevated">
+    Content
+  </div>
+</div>
+```
+
+### 3. Use External CSS File
+```css
+/* styles.css - Full IntelliSense */
+.hero {
+  background: var(--color-primary-500);
+  padding: var(--spacing-8);
+}
+```
+
+```html
+<div class="hero">Content</div>
+```
+
+## Verify It's Working
+
+1. **Create a test CSS file** (like `test.css`)
+2. **Type**: `color: var(--`
+3. **You should see**: All 165 CSS custom properties with descriptions
+4. **Hover over a token**: See the actual color/value
+
+If this doesn't work:
+1. Check `.vscode/settings.json` has `css.customData` configured
+2. Reload VS Code (Ctrl+Shift+P → "Developer: Reload Window")
+3. Make sure `pds.css-data.json` exists in `public/assets/pds/`
+
+## For Class Autocomplete
+
+Class autocomplete in HTML `class` attributes also has limitations in VS Code's HTML extension. For best class discovery:
+
+1. **Use Storybook** - Browse all available classes and components
+2. **Check documentation** - See [CSS-INTELLISENSE-QUICK-REF.md](./CSS-INTELLISENSE-QUICK-REF.md)
+3. **Use TypeScript** - Better autocomplete in JS/TS files
+
+## Summary
+
+| Location | CSS Tokens | Utility Classes | Works? |
+|----------|-----------|----------------|---------|
+| `.css` files | ✅ Yes | N/A | ✅ Full Support |
+| `<style>` tags | ✅ Yes | N/A | ✅ Full Support |
+| `style=""` attribute | ❌ No | N/A | ❌ VS Code Limitation |
+| `class=""` attribute | N/A | ⚠️ Limited | ⚠️ VS Code Limitation |
+
+**Bottom line**: Use CSS files or `<style>` tags for the best IntelliSense experience with PDS tokens!

package/CSS-INTELLISENSE-QUICK-REF.md

@@ -0,0 +1,238 @@
+# CSS IntelliSense Quick Reference
+
+Quick reference for using PDS IntelliSense in your projects.
+
+## Setup (VS Code)
+
+```json
+// .vscode/settings.json
+{
+  "html.customData": ["node_modules/pure-ds/public/assets/pds/vscode-custom-data.json"],
+  "css.customData": ["node_modules/pure-ds/public/assets/pds/pds.css-data.json"]
+}
+```
+
+Reload: `Ctrl+Shift+P` → **Developer: Reload Window**
+
+## CSS Tokens
+
+### Colors (900+ generated)
+```css
+--color-primary-{50-900}      /* Primary brand colors */
+--color-secondary-{50-900}    /* Secondary/neutral colors */
+--color-accent-{50-900}       /* Accent colors */
+--color-gray-{50-900}         /* Gray scale */
+--color-success-{50-900}      /* Success states */
+--color-warning-{50-900}      /* Warning states */
+--color-danger-{50-900}       /* Error states */
+--color-info-{50-900}         /* Info states */
+```
+
+### Spacing
+```css
+--spacing-0                   /* 0 */
+--spacing-1                   /* Base unit (8px default) */
+--spacing-2                   /* 1.5x base */
+--spacing-3                   /* 2.25x base */
+--spacing-4                   /* 3.375x base */
+/* ... continues up to spacing-12 */
+```
+
+### Typography
+```css
+--font-family-heading         /* Headings font */
+--font-family-body            /* Body text font */
+--font-family-mono            /* Monospace font */
+
+--font-size-xs                /* Extra small */
+--font-size-sm                /* Small */
+--font-size-base              /* Base size */
+--font-size-lg                /* Large */
+--font-size-xl                /* Extra large */
+/* ... continues to 5xl */
+
+--font-weight-thin            /* 100 */
+--font-weight-normal          /* 400 */
+--font-weight-medium          /* 500 */
+--font-weight-semibold        /* 600 */
+--font-weight-bold            /* 700 */
+
+--line-height-tight           /* 1.25 */
+--line-height-normal          /* 1.5 */
+--line-height-relaxed         /* 1.75 */
+```
+
+### Borders
+```css
+--radius-sm                   /* Small radius */
+--radius-md                   /* Medium radius */
+--radius-lg                   /* Large radius */
+--radius-xl                   /* Extra large */
+--radius-full                 /* Fully rounded */
+
+--border-width-thin           /* 1px */
+--border-width-medium         /* 2px */
+--border-width-thick          /* 3px */
+```
+
+### Shadows
+```css
+--shadow-sm                   /* Small shadow */
+--shadow-md                   /* Medium shadow */
+--shadow-lg                   /* Large shadow */
+--shadow-xl                   /* Extra large */
+--shadow-2xl                  /* 2x extra large */
+```
+
+### Surfaces (Semantic)
+```css
+--surface-bg                  /* Surface background */
+--surface-text                /* Surface text color */
+--surface-text-secondary      /* Secondary text */
+--surface-border              /* Surface border */
+--surface-shadow              /* Surface shadow */
+--surface-hover               /* Hover state */
+```
+
+### Transitions
+```css
+--transition-fast             /* 150ms */
+--transition-normal           /* 300ms */
+--transition-slow             /* 500ms */
+```
+
+### Layout
+```css
+--breakpoint-sm               /* 640px */
+--breakpoint-md               /* 768px */
+--breakpoint-lg               /* 1024px */
+--breakpoint-xl               /* 1280px */
+
+--z-dropdown                  /* 1000 */
+--z-sticky                    /* 1020 */
+--z-fixed                     /* 1030 */
+--z-modal-backdrop            /* 1040 */
+--z-modal                     /* 1050 */
+--z-notification              /* 9999 */
+```
+
+## CSS Classes
+
+### Primitives
+```css
+.badge, .pill, .tag, .chip   /* Badge variants */
+.card                         /* Card container */
+.surface                      /* Surface container */
+.alert                        /* Alert box */
+.dialog                       /* Dialog element */
+```
+
+### Layout
+```css
+.flex                         /* Flexbox container */
+.flex-wrap                    /* Wrapped flex */
+.grid                         /* Grid container */
+.grid-cols-{1-6}             /* Fixed columns */
+.grid-auto-{sm|md|lg|xl}     /* Auto-fit grid */
+.container                    /* Max-width container */
+```
+
+### Spacing Utilities
+```css
+.gap-{0-12}                  /* Flexbox/Grid gap */
+```
+
+### Alignment
+```css
+.items-start                  /* align-items: flex-start */
+.items-end                    /* align-items: flex-end */
+.items-center                 /* align-items: center */
+.items-baseline               /* align-items: baseline */
+.items-stretch                /* align-items: stretch */
+
+.justify-start                /* justify-content: flex-start */
+.justify-end                  /* justify-content: flex-end */
+.justify-center               /* justify-content: center */
+.justify-between              /* justify-content: space-between */
+.justify-around               /* justify-content: space-around */
+.justify-evenly               /* justify-content: space-evenly */
+```
+
+### Effects
+```css
+.border-gradient              /* Gradient border */
+.border-gradient-primary      /* Primary gradient */
+.border-gradient-accent       /* Accent gradient */
+.border-gradient-secondary    /* Secondary gradient */
+
+.border-glow                  /* Glow effect */
+.border-glow-sm               /* Small glow */
+.border-glow-lg               /* Large glow */
+.border-glow-{color}          /* Colored glow */
+```
+
+## Data Attributes
+
+Progressive enhancement attributes (with IntelliSense):
+
+```html
+<!-- Type data-dr to see autocomplete with example code -->
+<nav data-dropdown>          <!-- Dropdown navigation -->
+  <button>Menu</button>
+  <menu>
+    <li><a href="#">Item</a></li>
+  </menu>
+</nav>
+
+<!-- Type data-to to see autocomplete with example code -->
+<label data-toggle>          <!-- Toggle switch -->
+  <span>Enable</span>
+  <input type="checkbox">
+</label>
+
+<!-- Other enhancements -->
+<div data-tabs>              <!-- Tab interface -->
+<div data-modal>             <!-- Modal dialog -->
+<span data-tooltip>          <!-- Tooltip -->
+```
+
+**IntelliSense Features:**
+- Shows attribute name while typing
+- Displays description of enhancement
+- Includes complete example markup from `demoHtml`
+
+## Web Components
+
+```html
+<!-- Type <pds- to see all -->
+<pds-drawer position="right|left|top|bottom">
+<pds-icon icon="star|heart|bell|...">
+<pds-upload accept="image/*">
+<pds-jsonform>
+<pds-tabstrip>
+<pds-toaster>
+<pds-richtext>
+<pds-scrollrow>
+<pds-splitpanel>
+```
+
+## Usage Tips
+
+1. **Type `--` in CSS** to see all tokens
+2. **Type `.` in HTML class** to browse all classes  
+3. **Hover over tokens** to see actual values
+4. **Type `<pds-`** to see all components
+5. **Type `icon="`** to browse all icon names
+
+## Generation
+
+```bash
+npm run pds:dx          # Generate all IntelliSense
+npm run pds:export      # Full export including IntelliSense
+```
+
+## More Info
+
+- [Full IntelliSense Guide](./INTELLISENSE.md)
+- [Main README](./readme.md)
+- [Storybook Documentation](./packages/pds-storybook/README.md)