crayon-design-system-ui 0.0.9 → 0.0.10

package/README.md

@@ -77,13 +77,13 @@ Package name: **`crayon-design-system-ui`**. A reusable Design System built usin
 
 Use **custom elements** (`import 'crayon-design-system-ui/register'` then `<ui-button>`) everywhere, or in Svelte use the named component: `import { Button } from 'crayon-design-system-ui'`.
 
-**Always load design tokens in the app** so spacing, colors, and component sizing resolve correctly:
+Default design tokens now load automatically when you import:
 
-```js
-import 'crayon-design-system-ui/tokens.css';
-```
+- `crayon-design-system-ui` (main entry), or
+- `crayon-design-system-ui/register`, or
+- `dist-browser/bundle.js`
 
-Registering components alone does **not** load `tokens.css`. Without it, many `--crayon-*` variables are undefined; components now use **fallbacks** where possible (e.g. button padding), but importing tokens is still required for the full theme and consistent look across all components.
+You can still optionally import `crayon-design-system-ui/tokens.css`, and you can override any `--crayon-*` variable in your own CSS.
 
 Example:
 
@@ -93,7 +93,7 @@ Example:
 
 **Component usage docs:** See [docs/README.md](docs/README.md) for a list of per-component usage documents. When you change a component in `src/lib/components/`, update its doc in `docs/components/` so the docs stay in sync.
 
-**Design tokens:** Import `crayon-design-system-ui/tokens.css` for CSS custom properties (colors, spacing, etc.); see [docs/design-tokens.md](docs/design-tokens.md) if present.
+**Design tokens:** Defaults are auto-loaded by the package entry points. Import `crayon-design-system-ui/tokens.css` only if you want the token file explicitly in your app pipeline; override `--crayon-*` variables in your own CSS as needed.
 
 ---
 
@@ -223,10 +223,9 @@ With a bundler (e.g. Vite, Rollup), use the register entry:
 <ui-button variant="primary">Click Me</ui-button>
 ```
 
-Without a bundler, use the browser bundle (e.g. copy `node_modules/crayon-design-system-ui/dist-browser/bundle.js` and optionally `tokens.css` to your server, or use a CDN):
+Without a bundler, use the browser bundle (e.g. copy `node_modules/crayon-design-system-ui/dist-browser/bundle.js` to your server, or use a CDN):
 
 ```html
-<link rel="stylesheet" href="tokens.css" />
 <script type="module" src="bundle.js"></script>
 <ui-button variant="primary">Click Me</ui-button>
 ```
@@ -464,7 +463,7 @@ the package loads and, in the browser, dynamically imports each component’s co
 
 Works in:
 
-- **Plain HTML** (with a bundler, or by loading `dist-browser/bundle.js` and `tokens.css`)
+- **Plain HTML** (with a bundler, or by loading `dist-browser/bundle.js`)
 - **Svelte / SvelteKit** (named Svelte components or custom elements)
 - **React** (wrapper components from `crayon-design-system-ui/react`; register once)
 - **Angular** (wrapper components / `CrayonDesignSystemModule` from `crayon-design-system-ui/angular`; register once)

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./tokens.css";
 export { default as Button } from "./components/button/Button.js";
 export { default as Accordion } from "./components/accordion/Accordion.js";
 export { default as AccordionItem } from "./components/accordion-item/AccordionItem.js";

package/dist/index.js

@@ -1,3 +1,4 @@
+import "./tokens.css";
 export { default as Button } from "./components/button/Button.js";
 export { default as Accordion } from "./components/accordion/Accordion.js";
 export { default as AccordionItem } from "./components/accordion-item/AccordionItem.js";

package/dist/register/accordion-item.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/accordion-item/AccordionItem.js");
 }

package/dist/register/accordion.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/accordion/Accordion.js");
 }

package/dist/register/avatar.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/avatar/Avatar.js");
 }

package/dist/register/breadcrumb.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/breadcrumb/Breadcrumb.js");
 }

package/dist/register/button.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/button/Button.js");
 }

package/dist/register/card.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/card/Card.js");
 }

package/dist/register/checkbox.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/checkbox/Checkbox.js");
 }

package/dist/register/form-select-option.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/form-select/FormSelectOption.js");
 }

package/dist/register/form-select.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/form-select/FormSelect.js");
 }

package/dist/register/form.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/form/Form.js");
 }

package/dist/register/input.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/input/Input.js");
 }

package/dist/register/label.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/label/Label.js");
 }

package/dist/register/pagination.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/pagination/Pagination.js");
 }

package/dist/register/radio.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/radio/Radio.js");
 }

package/dist/register/table.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/table/Table.js");
 }

package/dist/register/tabs.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/tabs/Tabs.js");
 }

package/dist/register/textarea.js

@@ -1,4 +1,5 @@
 // SSR-safe: register only this custom element in the browser.
 if (typeof window !== "undefined" && "customElements" in window) {
+  void import("../tokens.css");
   void import("../components/textarea/Textarea.js");
 }

package/dist/register.js

@@ -1,4 +1,6 @@
-"use strict";
+// Load default design tokens so consumers don't need to import tokens.css manually.
+// Consumers can still override any --crayon-* variable in their own CSS.
+import "./tokens.css";
 // SSR-safe: only register custom elements in the browser.
 // Each import causes the Svelte compiler output to call customElements.define(...).
 if (typeof window !== "undefined" && "customElements" in window) {

package/dist-browser/assets/register-browser-CBD_MWJt.css

@@ -0,0 +1 @@
+:root{--crayon-font-size-xs: 12px;--crayon-font-size-sm: 14px;--crayon-font-size-md: 16px;--crayon-font-size-lg: 18px;--crayon-font-size-xl: 20px;--crayon-radius-none: 0;--crayon-radius-sm: 4px;--crayon-radius-md: 10px;--crayon-radius-lg: 12px;--crayon-radius-full: 999px;--crayon-radius-circle: 50%;--crayon-border-width-thin: 1px;--crayon-border-width-medium: 2px;--crayon-spacing-1: 2px;--crayon-spacing-2: 4px;--crayon-spacing-3: 6px;--crayon-spacing-4: 8px;--crayon-spacing-5: 12px;--crayon-spacing-6: 14px;--crayon-spacing-7: 16px;--crayon-spacing-8: 18px;--crayon-spacing-9: 24px;--crayon-spacing-10: 32px;--crayon-primary: #474bff;--crayon-primary-hover: #2b2399;--crayon-secondary: #222121;--crayon-secondary-hover: #616061;--crayon-danger: #e03e52;--crayon-danger-hover: #c23445;--crayon-success: #2cc84d;--crayon-success-hover: #2cc84d;--crayon-white: #ffffff;--crayon-white-hover: #f5f5f5;--crayon-outline: #222121;--crayon-outline-hover: transparent;--crayon-text-on-light: #222121;--crayon-border-light: #e0e0e0;--crayon-border-light-hover: #c0c0c0;--crayon-ghost-text: #616061;--crayon-ghost-hover: rgba(0, 0, 0, .06);--crayon-ghost-text-hover: #222121;--crayon-button-border-radius: var(--crayon-radius-md);--crayon-button-border-width: var(--crayon-border-width-thin);--crayon-button-padding-y-sm: var(--crayon-spacing-3);--crayon-button-padding-x-sm: var(--crayon-spacing-5);--crayon-button-padding-y-md: var(--crayon-spacing-6);--crayon-button-padding-x-md: var(--crayon-spacing-9);--crayon-button-padding-y-lg: var(--crayon-spacing-6);--crayon-button-padding-x-lg: var(--crayon-spacing-10);--crayon-button-font-size-sm: var(--crayon-font-size-xs);--crayon-button-font-size-md: var(--crayon-font-size-sm);--crayon-button-font-size-lg: var(--crayon-font-size-md);--crayon-button-gap: var(--crayon-spacing-5);--crayon-button-gap-sm: var(--crayon-spacing-3);--crayon-button-bg: #fefeff;--crayon-button-floating-radius: var(--crayon-radius-full);--crayon-icon-sprite: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.9933%204.88338C12.9355%204.38604%2012.5128%204%2012%204C11.4477%204%2011%204.44772%2011%205V11H5L4.88338%2011.0067C4.38604%2011.0645%204%2011.4872%204%2012C4%2012.5523%204.44772%2013%205%2013H11V19L11.0067%2019.1166C11.0645%2019.614%2011.4872%2020%2012%2020C12.5523%2020%2013%2019.5523%2013%2019V13H19L19.1166%2012.9933C19.614%2012.9355%2020%2012.5128%2020%2012C20%2011.4477%2019.5523%2011%2019%2011H13V5L12.9933%204.88338Z'%20fill='%23222121'/%3e%3c/svg%3e");--crayon-accordion-border-radius: var(--crayon-radius-md);--crayon-accordion-border-width: var(--crayon-border-width-thin);--crayon-accordion-gap: var(--crayon-spacing-1);--crayon-accordion-trigger-padding-y: var(--crayon-spacing-6);--crayon-accordion-trigger-padding-x: var(--crayon-spacing-8);--crayon-accordion-panel-padding-y: var(--crayon-spacing-6);--crayon-accordion-panel-padding-x: var(--crayon-spacing-8);--crayon-accordion-chevron-font-size: .7em;--crayon-accordion-content-font-size: var(--crayon-font-size-sm);--crayon-accordion-bg: #f5f5f5;--crayon-accordion-border: #e0e0e0;--crayon-accordion-bg-hover: #eeeeee;--crayon-accordion-bg-open: #fafaff;--crayon-accordion-title: #1a1a1a;--crayon-accordion-content: #444;--crayon-avatar-bg: #e5e7eb;--crayon-avatar-color: #374151;--crayon-avatar-border-radius: var(--crayon-radius-md);--crayon-avatar-size-sm: 32px;--crayon-avatar-size-md: 40px;--crayon-avatar-size-lg: 56px;--crayon-avatar-font-size-sm: var(--crayon-font-size-xs);--crayon-avatar-font-size-md: var(--crayon-font-size-sm);--crayon-avatar-font-size-lg: var(--crayon-font-size-lg);--crayon-avatar-ring-color: #fff;--crayon-avatar-ring-border: #e5e7eb;--crayon-card-font-size: var(--crayon-font-size-sm);--crayon-card-color: #212529;--crayon-card-bg: #fff;--crayon-card-border-width: var(--crayon-border-width-thin);--crayon-card-border-color: rgba(0, 0, 0, .125);--crayon-card-border-radius: 8px;--crayon-card-box-shadow: none;--crayon-card-primary-bg: #0d6efd;--crayon-card-primary-border: #0d6efd;--crayon-card-primary-color: #fff;--crayon-card-secondary-bg: #6c757d;--crayon-card-secondary-border: #6c757d;--crayon-card-secondary-color: #fff;--crayon-card-success-bg: #198754;--crayon-card-success-border: #198754;--crayon-card-success-color: #fff;--crayon-card-danger-bg: #dc3545;--crayon-card-danger-border: #dc3545;--crayon-card-danger-color: #fff;--crayon-card-warning-bg: #ffc107;--crayon-card-warning-border: #ffc107;--crayon-card-warning-color: #000;--crayon-card-info-bg: #0dcaf0;--crayon-card-info-border: #0dcaf0;--crayon-card-info-color: #000;--crayon-card-light-bg: #f8f9fa;--crayon-card-light-border: #e9ecef;--crayon-card-light-color: #212529;--crayon-card-dark-bg: #212529;--crayon-card-dark-border: #212529;--crayon-card-dark-color: #fff;--crayon-card-header-padding-y: var(--crayon-spacing-5);--crayon-card-header-padding-x: var(--crayon-spacing-7);--crayon-card-header-bg: rgba(0, 0, 0, .03);--crayon-card-body-padding-y: var(--crayon-spacing-7);--crayon-card-body-padding-x: var(--crayon-spacing-7);--crayon-card-title-margin-bottom: var(--crayon-spacing-5);--crayon-card-title-font-size: 1.25rem;--crayon-card-text-margin-bottom: var(--crayon-spacing-5);--crayon-card-footer-padding-y: var(--crayon-spacing-5);--crayon-card-footer-padding-x: var(--crayon-spacing-7);--crayon-card-footer-bg: rgba(0, 0, 0, .03);--crayon-checkbox-label-color: #111827;--crayon-checkbox-label-font-size: var(--crayon-font-size-sm);--crayon-checkbox-gap: var(--crayon-spacing-5);--crayon-checkbox-size: 22px;--crayon-checkbox-radius: var(--crayon-radius-sm);--crayon-checkbox-border-width: var(--crayon-border-width-medium);--crayon-checkbox-border-color: #111111;--crayon-checkbox-bg: transparent;--crayon-checkbox-checked-bg: var(--crayon-primary);--crayon-checkbox-checked-border: var(--crayon-primary);--crayon-checkbox-check-color: #ffffff;--crayon-checkbox-focus-ring: rgba(71, 75, 255, .45);--crayon-checkbox-label-disabled: #9ca3af;--crayon-checkbox-border-disabled: #bdbdbc;--crayon-checkbox-bg-disabled: #e5e7eb;--crayon-radio-label-color: #111827;--crayon-radio-label-font-size: var(--crayon-font-size-sm);--crayon-radio-gap: var(--crayon-spacing-5);--crayon-radio-size: 22px;--crayon-radio-border-radius: var(--crayon-radius-full);--crayon-radio-border-width: var(--crayon-border-width-medium);--crayon-radio-border-color: #111111;--crayon-radio-bg: transparent;--crayon-radio-checked-bg: var(--crayon-primary);--crayon-radio-checked-border: var(--crayon-primary);--crayon-radio-inner: #ffffff;--crayon-radio-focus-ring: rgba(71, 75, 255, .45);--crayon-radio-label-disabled: #9ca3af;--crayon-radio-border-disabled: #bdbdbc;--crayon-radio-bg-disabled: #e5e7eb;--crayon-label-color: #111827;--crayon-label-disabled-color: #9ca3af;--crayon-label-error-color: #dc2626;--crayon-label-success-color: #16a34a;--crayon-label-required-color: #dc2626;--crayon-label-font-size-sm: var(--crayon-font-size-xs);--crayon-label-font-size-md: var(--crayon-font-size-sm);--crayon-label-font-size-lg: var(--crayon-font-size-md);--crayon-label-gap: var(--crayon-spacing-2);--crayon-label-font-size: .875rem;--crayon-hint-font-size: .8125rem;--crayon-hint-color: #6c757d;--crayon-hint-margin-top: var(--crayon-spacing-3);--crayon-form-label-margin-bottom: var(--crayon-spacing-3);--crayon-input-color: #222121;--crayon-input-bg: #feffff;--crayon-input-border-width: var(--crayon-border-width-thin);--crayon-input-border-color: #dee2e6;--crayon-input-border-color-default: #e0e0e0;--crayon-input-border-color-data: #e0e0e0;--crayon-input-border-radius: var(--crayon-radius-md);--crayon-input-border-radius-sm: var(--crayon-radius-sm);--crayon-input-border-radius-lg: var(--crayon-radius-lg);--crayon-input-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);--crayon-input-placeholder-color: #bdbdbc;--crayon-input-hover-border-color: #adb5bd;--crayon-input-focus-border-color: #2563eb;--crayon-input-focus-ring: rgba(37, 99, 235, .25);--crayon-input-error-border-color: #dc2626;--crayon-input-error-ring: rgba(220, 38, 38, .25);--crayon-input-success-border-color: #16a34a;--crayon-input-success-ring: rgba(22, 163, 74, .25);--crayon-input-disabled-bg: #e9ecef;--crayon-input-disabled-color: #6c757d;--crayon-input-disabled-border-color: #dee2e6;--crayon-input-padding-y: 9px;--crayon-input-padding-x: var(--crayon-spacing-7);--crayon-input-padding-y-sm: var(--crayon-spacing-2);--crayon-input-padding-x-sm: var(--crayon-spacing-5);--crayon-input-padding-y-lg: var(--crayon-spacing-5);--crayon-input-padding-x-lg: var(--crayon-spacing-7);--crayon-input-font-size: var(--crayon-font-size-sm);--crayon-input-font-size-sm: .875rem;--crayon-input-font-size-lg: 1.25rem;--crayon-input-icon-color: #6b7280;--crayon-input-search-icon-color: #6b7280;--crayon-input-error-icon-color: #dc2626;--crayon-input-success-icon-color: #16a34a;--crayon-select-padding-y: .375rem;--crayon-select-padding-x: .75rem;--crayon-select-padding-y-sm: .25rem;--crayon-select-padding-x-sm: .5rem;--crayon-select-padding-y-lg: .5rem;--crayon-select-padding-x-lg: 1rem;--crayon-select-indicator-padding: 2.25rem;--crayon-select-font-size: 1rem;--crayon-table-font-size: var(--crayon-font-size-sm);--crayon-table-text-color: var(--crayon-text-on-light);--crayon-table-bg: #ffffff;--crayon-table-border-color: var(--crayon-border-light);--crayon-table-header-bg: var(--crayon-card-header-bg);--crayon-table-header-color: var(--crayon-label-color);--crayon-table-header-hover-bg: var(--crayon-ghost-hover);--crayon-table-caption-color: var(--crayon-label-color);--crayon-table-row-stripe-bg: var(--crayon-card-light-bg);--crayon-table-row-hover-bg: var(--crayon-ghost-hover);--crayon-table-cell-padding-y: var(--crayon-spacing-3);--crayon-table-cell-padding-x: var(--crayon-spacing-5);--crayon-table-sort-indicator-color: var(--crayon-ghost-text);--crayon-table-sort-indicator-gap: var(--crayon-spacing-2);--crayon-pagination-font-size: var(--crayon-font-size-sm);--crayon-pagination-text-color: var(--crayon-text-on-light);--crayon-pagination-summary-color: var(--crayon-text-on-light);--crayon-pagination-bg: transparent;--crayon-pagination-gap: var(--crayon-spacing-2);--crayon-pagination-padding-y: var(--crayon-spacing-2);--crayon-pagination-padding-x: var(--crayon-spacing-2);--crayon-pagination-border-radius: var(--crayon-radius-md);--crayon-pagination-item-radius: var(--crayon-radius-sm);--crayon-pagination-border-color: var(--crayon-border-light);--crayon-pagination-item-bg: #ffffff;--crayon-pagination-item-hover-bg: var(--crayon-ghost-hover);--crayon-pagination-active-bg: var(--crayon-primary);--crayon-pagination-active-color: #ffffff;--crayon-pagination-active-border-color: transparent;--crayon-pagination-disabled-bg: #f5f5f5;--crayon-tabs-gap: var(--crayon-spacing-2);--crayon-tabs-tablist-padding-y: 0;--crayon-tabs-tab-padding-y: var(--crayon-spacing-4);--crayon-tabs-tab-padding-x: var(--crayon-spacing-5);--crayon-tabs-tab-radius: var(--crayon-radius-md);--crayon-tabs-tab-color: var(--crayon-text-on-light, #222121);--crayon-tabs-tab-hover-bg: var(--crayon-ghost-hover);--crayon-tabs-tab-active-bg: var(--crayon-primary);--crayon-tabs-tab-active-color: #ffffff;--crayon-tabs-panels-margin-top: var(--crayon-spacing-2);--crayon-tabs-divider-width: var(--crayon-border-width-thin);--crayon-tabs-divider-color: var(--crayon-border-light, #e0e0e0);--crayon-tabs-panel-padding-y: var(--crayon-spacing-6);--crayon-tabs-panel-padding-x: var(--crayon-spacing-7);--crayon-tabs-panel-color: var(--crayon-text-on-light, #222121);--crayon-tabs-font-size: var(--crayon-font-size-sm, 14px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crayon-design-system-ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run build:browser && npm run prepack",