@k8slens/lds-tokens 0.57.0 → 0.58.2

package/README.md

@@ -1,7 +1,159 @@
-# Lens Design System – Design Tokens
+# @k8slens/lds-tokens
+
+Design tokens for the Lens Design System – colors, spacing, typography, shadows, and visual properties.
+
+## Installation
+
+```bash
+npm install @k8slens/lds-tokens
+```
+
+## CSS Variables
+
+Import CSS files to use design tokens as CSS custom properties:
+
+```css
+/* Fonts (required) */
+@import "@k8slens/lds-tokens/lib/electron/font-face.css";
+
+/* Core tokens (spacing, radius, shadows, typography) */
+@import "@k8slens/lds-tokens/lib/web/tokens.core.css";
+
+/* Theme: Choose dark or light */
+@import "@k8slens/lds-tokens/lib/web/tokens.dark.css";
+/* or */
+@import "@k8slens/lds-tokens/lib/web/tokens.light.css";
+
+.my-component {
+  color: var(--alias-color-text-primary);
+  background: var(--alias-color-background-base);
+  padding: var(--spacing-4);
+  border-radius: var(--radius-default);
+}
+```
+
+### Available CSS Files
+
+| File                         | Description                                        |
+| ---------------------------- | -------------------------------------------------- |
+| `lib/electron/font-face.css` | Font face definitions (required)                   |
+| `tokens.core.css`            | Core tokens (spacing, radius, shadows, typography) |
+| `tokens.base.css`            | Base design tokens                                 |
+| `tokens.colors.css`          | Color palette definitions                          |
+| `tokens.dark.css`            | Dark theme semantic colors                         |
+| `tokens.light.css`           | Light theme semantic colors                        |
+| `tokens.dark.scoped.css`     | Scoped dark theme (for theme switching)            |
+| `tokens.light.scoped.css`    | Scoped light theme (for theme switching)           |
+
+## JavaScript/TypeScript
+
+Import tokens as constants:
+
+```typescript
+import { AliasColorTextPrimary, Spacing4 } from "@k8slens/lds-tokens/lib/web/tokens.dark";
+```
+
+## Tailwind CSS
+
+```javascript
+// tailwind.config.js
+import ldsConfig from "@k8slens/lds-tokens/lib/web/tailwind.config.js";
+
+export default {
+  presets: [ldsConfig],
+};
+```
+
+## Icons
+
+SVG icons organized by category. Two formats available:
+
+**As React components** (recommended for bundlers with SVG support):
+
+```tsx
+import { CopyPaste, Delete, Edit } from "@k8slens/lds-tokens/lib/web/icons/action.js";
+import { Logo } from "@k8slens/lds-tokens/lib/web/icons/base.js";
+import { Success, Warning } from "@k8slens/lds-tokens/lib/web/icons/status.js";
+
+<Delete className="icon" />;
+```
+
+Categories: `action`, `base`, `commerce`, `display`, `idp`, `misc`, `navigation`, `status`, `user`
+
+> **Note:** Prefer `@k8slens/lds-icons` for React projects - it provides themed components with "Icon" suffix naming (e.g., `DeleteIcon`). Use tokens icons for non-React or custom bundler setups.
+
+**As inline base64 data** (for dynamic loading without bundler):
+
+```typescript
+import actionIcons from "@k8slens/lds-tokens/lib/web/icons-inline/action.dark.json";
+
+const svgData = actionIcons["asset-icon-action-delete"];
+const imgSrc = `data:image/svg+xml;base64,${svgData}`;
+```
+
+Theme variants: `{category}.dark.json`, `{category}.light.json`, `{category}.brand.json`
+
+## Images
+
+SVG image assets as React components:
+
+```tsx
+import { ThankYouHero } from "@k8slens/lds-tokens/lib/web/images/index.js";
+
+<ThankYouHero className="hero-image" />;
+```
+
+## Favicons
+
+Pre-generated favicon sets with all required sizes and formats:
+
+- `lib/web/favicons/website/` - Standard website favicons
+- `lib/web/favicons/lenscloud/` - Lens Cloud application favicons
+
+**Usage:** Copy favicon files from `node_modules` to your public folder:
+
+```bash
+cp -r node_modules/@k8slens/lds-tokens/lib/web/favicons/website/favicons/* public/
+```
+
+Then add `<link>` tags to your HTML head using one of these options:
+
+1. **Copy from HTML snippet** (`index.html` contains all required tags):
+
+   ```bash
+   cat node_modules/@k8slens/lds-tokens/lib/web/favicons/website/index.html
+   ```
+
+2. **React component** (ensure paths match your public folder structure):
+   ```tsx
+   import FaviconImports from "@k8slens/lds-tokens/lib/web/favicons/website/index.js";
+   <FaviconImports />;
+   ```
+
+**Next.js:** Favicon naming follows Next.js App Router conventions. Copy `favicon.ico` and `apple-icon*.png` directly to your `app/` directory - Next.js will serve them automatically without additional configuration.
 
 ## Documentation
-Browse documentation at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/).
 
-## Package contents
-[To be added later]
+Browse the full documentation at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/).
+
+## AI Assistance
+
+This package includes an `llms.txt` file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., `CLAUDE.md`):
+
+```markdown
+Read node_modules/@k8slens/lds-tokens/llms.txt for design tokens reference.
+
+Always use LDS tokens instead of hardcoded values:
+
+If using Tailwind (preferred):
+- Colors: `text-primary`, `bg-base` (from LDS Tailwind config)
+- Spacing: `p-4`, `gap-2` (uses LDS spacing scale)
+- Radius: `rounded-DEFAULT`, `rounded-lg`
+
+If using CSS:
+- Colors: `var(--alias-color-text-primary)` not `#333`
+- Spacing: `var(--spacing-4)` not `16px`
+- Radius: `var(--radius-default)` not `4px`
+
+Search llms.txt for available tokens before using custom values.
+```

package/lib/docs/token-map.dark.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 15 Jan 2026 14:16:04 GMT
+ * Generated on Fri, 13 Feb 2026 12:17:28 GMT
  */
 
 export type PackageDetails = {

package/lib/docs/token-map.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 15 Jan 2026 14:16:04 GMT
+ * Generated on Fri, 13 Feb 2026 12:17:28 GMT
  */
 
 const tokenMap = {
@@ -262,6 +262,7 @@ const tokenMap = {
           "variable": "asset-icon-action-copy-paste",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/content_copy-fill.svg",
           "attributes": {
+            "description": "Use for copy-to-clipboard actions or duplicate item functionality",
             "keywords": [
               "copy",
               "duplicate",
@@ -303,6 +304,7 @@ const tokenMap = {
           "variable": "asset-icon-action-delete",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/delete-fill.svg",
           "attributes": {
+            "description": "Use for destructive actions that permanently remove items. Pair with confirmation dialog",
             "keywords": [
               "delete",
               "remove",
@@ -344,6 +346,7 @@ const tokenMap = {
           "variable": "asset-icon-action-download",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/download.svg",
           "attributes": {
+            "description": "Use for downloading files or exporting data to the user's device",
             "keywords": [
               "download",
               "save",
@@ -384,6 +387,7 @@ const tokenMap = {
           "variable": "asset-icon-action-edit",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/edit.svg",
           "attributes": {
+            "description": "Use for entering edit mode or modifying existing content",
             "keywords": [
               "edit",
               "modify",
@@ -426,6 +430,7 @@ const tokenMap = {
           "variable": "asset-icon-action-reactivate",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/laps.svg",
           "attributes": {
+            "description": "Use for reactivating disabled/paused items or resuming interrupted processes",
             "keywords": [
               "reactivate",
               "resume",
@@ -468,6 +473,7 @@ const tokenMap = {
           "variable": "asset-icon-action-repeat",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/repeat.svg",
           "attributes": {
+            "description": "Use for retry, refresh, or loop/repeat functionality",
             "keywords": [
               "repeat",
               "loop",
@@ -512,6 +518,7 @@ const tokenMap = {
           "variable": "asset-icon-action-thumb-up",
           "value": "../../node_modules/@material-symbols/svg-400/rounded/thumb_up-fill.svg",
           "attributes": {
+            "description": "Use for positive feedback, approval, or like actions",
             "keywords": [
               "thumb up",
               "like",
@@ -556,6 +563,7 @@ const tokenMap = {
           "variable": "asset-icon-action-thumb-down",
           "value": "../../node_modules/@material-symbols/svg-400/rounded/thumb_down-fill.svg",
           "attributes": {
+            "description": "Use for negative feedback, disapproval, or dislike actions",
             "keywords": [
               "thumb down",
               "dislike",
@@ -601,6 +609,7 @@ const tokenMap = {
           "variable": "asset-icon-base-logo",
           "value": "assets/icons/logo-icon.svg",
           "attributes": {
+            "description": "Lens logo icon. Use in headers, footers, or as brand identifier",
             "keywords": [
               "logo",
               "icon",
@@ -646,6 +655,7 @@ const tokenMap = {
           "variable": "asset-icon-base-loop-logo",
           "value": "assets/icons/looplogo-icon.svg",
           "attributes": {
+            "description": "Loop product logo. Use for Loop-specific branding",
             "keywords": [
               "logo",
               "icon",
@@ -686,6 +696,7 @@ const tokenMap = {
           "variable": "asset-icon-base-lens-ide-logo",
           "value": "assets/icons/lens-ide-logo-icon.svg",
           "attributes": {
+            "description": "Lens IDE logo. Use for IDE-specific branding",
             "keywords": [
               "logo",
               "icon",
@@ -913,6 +924,7 @@ const tokenMap = {
           "variable": "asset-icon-commerce-credit-card",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/credit_card.svg",
           "attributes": {
+            "description": "Use for payment methods, billing settings, or add payment card actions",
             "keywords": [
               "credit card",
               "payment",
@@ -958,6 +970,7 @@ const tokenMap = {
           "variable": "asset-icon-commerce-credit-card-off",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/credit_card_off.svg",
           "attributes": {
+            "description": "Use to indicate missing payment method, expired card, or payment disabled state",
             "keywords": [
               "credit card",
               "credit card off",
@@ -1005,6 +1018,7 @@ const tokenMap = {
           "variable": "asset-icon-commerce-receipt",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/receipt.svg",
           "attributes": {
+            "description": "Use for invoices, transaction history, or billing receipts",
             "keywords": [
               "receipt",
               "payment",
@@ -1053,6 +1067,7 @@ const tokenMap = {
           "variable": "asset-icon-display-dark-mode",
           "value": "../../node_modules/@material-symbols/svg-400/rounded/dark_mode.svg",
           "attributes": {
+            "description": "Use in theme switcher to represent dark mode option",
             "keywords": [
               "dark mode",
               "night mode",
@@ -1099,6 +1114,7 @@ const tokenMap = {
           "variable": "asset-icon-display-light-mode",
           "value": "../../node_modules/@material-symbols/svg-400/rounded/light_mode.svg",
           "attributes": {
+            "description": "Use in theme switcher to represent light mode option",
             "keywords": [
               "light mode",
               "day mode",
@@ -1145,6 +1161,7 @@ const tokenMap = {
           "variable": "asset-icon-display-night-sight-auto",
           "value": "../../node_modules/@material-symbols/svg-400/rounded/night_sight_auto.svg",
           "attributes": {
+            "description": "Use in theme switcher to represent system/auto theme option",
             "keywords": [
               "theme auto",
               "auto",
@@ -1193,6 +1210,7 @@ const tokenMap = {
           "variable": "asset-icon-idp-apple",
           "value": "assets/icons/apple-icon.svg",
           "attributes": {
+            "description": "Use for Sign in with Apple button or to indicate Apple account connection",
             "keywords": [
               "apple",
               "identity provider",
@@ -1236,6 +1254,7 @@ const tokenMap = {
           "variable": "asset-icon-idp-github",
           "value": "assets/icons/github-icon.svg",
           "attributes": {
+            "description": "Use for Sign in with GitHub button or to indicate GitHub account connection",
             "keywords": [
               "github",
               "identity provider",
@@ -1279,6 +1298,7 @@ const tokenMap = {
           "variable": "asset-icon-idp-google",
           "value": "assets/icons/google-icon.svg",
           "attributes": {
+            "description": "Use for Sign in with Google button or to indicate Google account connection",
             "keywords": [
               "google",
               "identity provider",
@@ -1324,6 +1344,7 @@ const tokenMap = {
           "variable": "asset-icon-misc-event",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/event.svg",
           "attributes": {
+            "description": "Use for calendar events, scheduling, or date-related features",
             "keywords": [
               "event",
               "calendar",
@@ -1364,6 +1385,7 @@ const tokenMap = {
           "variable": "asset-icon-misc-awesome",
           "value": "assets/icons/awesome.svg",
           "attributes": {
+            "description": "Use for featured content, highlights, or special promotional items",
             "keywords": [
               "awesome",
               "star",
@@ -1885,7 +1907,9 @@ const tokenMap = {
           "code": "$asset-icon-misc-preview",
           "variable": "asset-icon-misc-preview",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/preview.svg",
-          "attributes": {},
+          "attributes": {
+            "deprecated": "Use `navigation.preview` instead"
+          },
           "asset": {
             "name": "preview",
             "fileName": "preview.svg",
@@ -1923,6 +1947,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-arrow-up",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/arrow_drop_up.svg",
           "attributes": {
+            "description": "Use for collapse actions, sort ascending, or scroll up indicators",
             "keywords": [
               "arrow up",
               "navigate",
@@ -1963,6 +1988,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-arrow-down",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/arrow_drop_down.svg",
           "attributes": {
+            "description": "Use for expand actions, dropdown triggers, sort descending, or scroll down indicators",
             "keywords": [
               "arrow down",
               "navigate",
@@ -2003,6 +2029,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-arrow-forward",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/arrow_forward.svg",
           "attributes": {
+            "description": "Use for next step, continue, or navigate forward actions",
             "keywords": [
               "arrow forward",
               "navigate",
@@ -2043,6 +2070,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-menu",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/menu.svg",
           "attributes": {
+            "description": "Use to toggle hamburger/side navigation menu",
             "keywords": [
               "menu",
               "hamburger",
@@ -2084,6 +2112,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-context-menu",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/more_vert.svg",
           "attributes": {
+            "description": "Use for overflow actions menu or additional options dropdown",
             "keywords": [
               "menu",
               "options",
@@ -2126,6 +2155,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-close",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/close.svg",
           "attributes": {
+            "description": "Use for dismissing modals, panels, notifications, or closing views",
             "keywords": [
               "close",
               "collapse",
@@ -2168,6 +2198,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-show",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/visibility.svg",
           "attributes": {
+            "description": "Use to reveal hidden content like passwords or toggle visibility on",
             "keywords": [
               "show",
               "view",
@@ -2212,6 +2243,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-hide",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/visibility_off.svg",
           "attributes": {
+            "description": "Use to hide sensitive content like passwords or toggle visibility off",
             "keywords": [
               "hide",
               "conceal",
@@ -2255,6 +2287,7 @@ const tokenMap = {
           "variable": "asset-icon-navigation-preview",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/preview.svg",
           "attributes": {
+            "description": "Use for preview mode or viewing content before finalizing",
             "keywords": [
               "preview"
             ]
@@ -2445,6 +2478,7 @@ const tokenMap = {
           "variable": "asset-icon-status-spinner",
           "value": "assets/icons/spinner.svg",
           "attributes": {
+            "description": "Use for loading states. Animates automatically. Pair with aria-busy for accessibility",
             "keywords": [
               "spinner",
               "loading",
@@ -2490,6 +2524,7 @@ const tokenMap = {
           "variable": "asset-icon-status-info",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/info.svg",
           "attributes": {
+            "description": "Use for informational messages, tooltips, or help hints. Not for warnings or errors",
             "keywords": [
               "info",
               "information",
@@ -2535,6 +2570,7 @@ const tokenMap = {
           "variable": "asset-icon-status-warning",
           "value": "../../node_modules/@material-symbols/svg-400/rounded/warning.svg",
           "attributes": {
+            "description": "Use for cautionary states that need attention but aren't blocking. Not for errors",
             "keywords": [
               "warning",
               "alert",
@@ -2580,6 +2616,7 @@ const tokenMap = {
           "variable": "asset-icon-status-success",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/check_circle.svg",
           "attributes": {
+            "description": "Use for success states, completed operations, or positive confirmations",
             "keywords": [
               "success",
               "check",
@@ -2625,6 +2662,7 @@ const tokenMap = {
           "variable": "asset-icon-status-check",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/check.svg",
           "attributes": {
+            "description": "Use for checkmarks in lists, selected states, or inline confirmations. Prefer `success` for status messages",
             "keywords": [
               "check",
               "tick",
@@ -2672,6 +2710,7 @@ const tokenMap = {
           "variable": "asset-icon-user-person",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/person.svg",
           "attributes": {
+            "description": "Use for user profile, account settings, or as avatar placeholder",
             "keywords": [
               "user",
               "profile",
@@ -2716,6 +2755,7 @@ const tokenMap = {
           "variable": "asset-icon-user-email",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/mail.svg",
           "attributes": {
+            "description": "Use for email fields, contact information, or message/inbox features",
             "keywords": [
               "email",
               "mail",
@@ -2761,6 +2801,7 @@ const tokenMap = {
           "variable": "asset-icon-user-license",
           "value": "assets/icons/license.svg",
           "attributes": {
+            "description": "Use for license management, subscription status, or legal agreements",
             "keywords": [
               "license",
               "id card",
@@ -2808,6 +2849,7 @@ const tokenMap = {
           "variable": "asset-icon-user-lock",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/lock.svg",
           "attributes": {
+            "description": "Use for password fields, security settings, or locked/protected content",
             "keywords": [
               "lock",
               "secure",
@@ -2853,6 +2895,7 @@ const tokenMap = {
           "variable": "asset-icon-user-key",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/key.svg",
           "attributes": {
+            "description": "Use for API keys, access tokens, or authentication credentials",
             "keywords": [
               "key",
               "unlock",
@@ -2897,6 +2940,7 @@ const tokenMap = {
           "variable": "asset-icon-user-verified",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/verified.svg",
           "attributes": {
+            "description": "Use for verified accounts, trusted status, or identity confirmation badges",
             "keywords": [
               "verified",
               "check",
@@ -2942,6 +2986,7 @@ const tokenMap = {
           "variable": "asset-icon-user-stylus-note",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/stylus_note.svg",
           "attributes": {
+            "description": "Use for digital signatures, sign document actions, or handwritten input",
             "keywords": [
               "signature",
               "sign",
@@ -2985,6 +3030,7 @@ const tokenMap = {
           "variable": "asset-icon-user-dialpad",
           "value": "../../node_modules/@material-symbols/svg-400/outlined/dialpad.svg",
           "attributes": {
+            "description": "Use for OTP/2FA code entry, PIN input, or numeric verification",
             "keywords": [
               "otp",
               "2fa",

package/lib/docs/token-map.light.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 15 Jan 2026 14:16:05 GMT
+ * Generated on Fri, 13 Feb 2026 12:17:28 GMT
  */
 
 export type PackageDetails = {