{"_id":"@achimismaili/easy-web-theme-core","_rev":"3-7df20712b0b4aab0c2edc4a494406282","name":"@achimismaili/easy-web-theme-core","dist-tags":{"latest":"1.0.0"},"versions":{"0.5.0":{"name":"@achimismaili/easy-web-theme-core","version":"0.5.0","license":"UNLICENSED","_id":"@achimismaili/easy-web-theme-core@0.5.0","maintainers":[{"name":"achimismaili","email":"achim@ismaili.de"}],"homepage":"https://github.com/achimismaili/easy-web#readme","bugs":{"url":"https://github.com/achimismaili/easy-web/issues"},"dist":{"shasum":"bb901100dcdf6a531af2c1a38f6b6230e35e6458","tarball":"https://registry.npmjs.org/@achimismaili/easy-web-theme-core/-/easy-web-theme-core-0.5.0.tgz","fileCount":37,"integrity":"sha512-e5Z+a1nAWiqpMQ9IxECyZZ5dflbePLEe2KHSKp2Lvciy2nfjCN1n2HVs3hBTiVT68XiUGep2auwfhBlIylLayQ==","signatures":[{"sig":"MEUCIQDaRVqeDcM1AAADv4iWkYxAKrx/1Nsu9TCQNdlo3iBSFgIgJy5pTEX0uWvXulnvOo7z7IOziN9Dc4g8jr9eyUcQPEA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42799},"type":"module","_from":"file:achimismaili-easy-web-theme-core-0.5.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./fonts.css":"./styles/fonts.css","./tokens.css":"./styles/tokens.css"},"scripts":{"lint":"eslint src","test":"vitest run","build":"tsc","typecheck":"tsc --noEmit"},"_npmUser":{"name":"achimismaili","email":"achim@ismaili.de"},"_resolved":"C:\\Users\\ACHIMI~1\\AppData\\Local\\Temp\\198f8ad3ed05c3f04481f2b6ea551299\\achimismaili-easy-web-theme-core-0.5.0.tgz","_integrity":"sha512-e5Z+a1nAWiqpMQ9IxECyZZ5dflbePLEe2KHSKp2Lvciy2nfjCN1n2HVs3hBTiVT68XiUGep2auwfhBlIylLayQ==","repository":{"url":"git+https://github.com/achimismaili/easy-web.git","type":"git","directory":"packages/theme-core"},"_npmVersion":"10.9.8","description":"Design system foundation for the easy-web ecosystem. This package provides semantic design tokens, color ramps, typography, and spacing constants as CSS custom properties and typed TypeScript objects.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.22.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.2.4","typescript":"^5.5.0","@vitest/coverage-v8":"^3.2.4"},"_npmOperationalInternal":{"tmp":"tmp/easy-web-theme-core_0.5.0_1782497132524_0.514324228253759","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to @easy-web/theme-core. Install that instead; this package is no longer updated."},"1.0.0":{"name":"@achimismaili/easy-web-theme-core","version":"1.0.0","license":"MIT","_id":"@achimismaili/easy-web-theme-core@1.0.0","maintainers":[{"name":"achimismaili","email":"achim@ismaili.de"}],"homepage":"https://github.com/achimismaili/easy-web#readme","bugs":{"url":"https://github.com/achimismaili/easy-web/issues"},"dist":{"shasum":"b92a41e5ead7468c3ff2cdee97433739cfdc0613","tarball":"https://registry.npmjs.org/@achimismaili/easy-web-theme-core/-/easy-web-theme-core-1.0.0.tgz","fileCount":21,"integrity":"sha512-stxrsliqwdnURtkheCboGwZtHGFZdwistR6ypRb2377jxneX4IwoP/MGRt+LQEM0Sy12CvvlOc3QPj+WBX4qUA==","signatures":[{"sig":"MEUCIQDNBrtzbEZL+0yM/Qu5EnhxF/0RrtRH+M3mTKEGTb5eXAIgJHHukhl0iJ0Me6eFSdCE7PGTxBKJo0xsVGcHPx9i1p4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@achimismaili%2feasy-web-theme-core@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":34499},"type":"module","_from":"file:achimismaili-easy-web-theme-core-1.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./fonts.css":"./styles/fonts.css","./tokens.css":"./styles/tokens.css"},"scripts":{"lint":"eslint src","test":"vitest run","build":"tsc","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:3afaa69c-01dc-47e4-a321-7962a0ac74ec"}},"_resolved":"/tmp/ceb3e25294d9c68a0de289d12fb7692f/achimismaili-easy-web-theme-core-1.0.0.tgz","_integrity":"sha512-stxrsliqwdnURtkheCboGwZtHGFZdwistR6ypRb2377jxneX4IwoP/MGRt+LQEM0Sy12CvvlOc3QPj+WBX4qUA==","repository":{"url":"git+https://github.com/achimismaili/easy-web.git","type":"git","directory":"packages/theme-core"},"_npmVersion":"12.0.1","description":"Design system foundation for the easy-web ecosystem. This package provides semantic design tokens, color ramps, typography, and spacing constants as CSS custom properties and typed TypeScript objects.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.2.4","typescript":"^5.5.0","@vitest/coverage-v8":"^3.2.4"},"_npmOperationalInternal":{"tmp":"tmp/easy-web-theme-core_1.0.0_1784214873926_0.21119083114498216","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Moved to @easy-web/theme-core. Install that instead; this package is no longer updated."}},"time":{"created":"2026-06-26T18:05:32.440Z","modified":"2026-08-30T11:43:31.820Z","0.5.0":"2026-06-26T18:05:32.699Z","1.0.0":"2026-07-16T15:14:34.094Z"},"bugs":{"url":"https://github.com/achimismaili/easy-web/issues"},"license":"MIT","homepage":"https://github.com/achimismaili/easy-web#readme","repository":{"url":"git+https://github.com/achimismaili/easy-web.git","type":"git","directory":"packages/theme-core"},"description":"Design system foundation for the easy-web ecosystem. This package provides semantic design tokens, color ramps, typography, and spacing constants as CSS custom properties and typed TypeScript objects.","maintainers":[{"name":"achimismaili","email":"achim@ismaili.de"}],"readme":"# @achimismaili/easy-web-theme-core\n\nDesign system foundation for the easy-web ecosystem. This package provides semantic design tokens, color ramps, typography, and spacing constants as CSS custom properties and typed TypeScript objects.\n\n## Installation\n\n```bash\npnpm add @achimismaili/easy-web-theme-core\n```\n\nThis package is published to npm. Install it like any other npm package.\n\n## Setup\n\n### 1. Import CSS\nImport the design tokens in your main entry file (e.g., `main.ts` or `app.tsx`).\n\n```typescript\nimport '@achimismaili/easy-web-theme-core/tokens.css';\n```\n\n### 2. Prevent Theme Flash (Optional)\nTo avoid a white flash during page load when using dark mode, inject the `noFlashScript` in your HTML `<head>` before the stylesheet.\n\n```typescript\nimport { noFlashScript } from '@achimismaili/easy-web-theme-core';\n\n// In your root component or HTML template:\n// <script dangerouslySetInnerHTML={{ __html: noFlashScript }} />\n```\n\n**CSP Note:** This script requires `'unsafe-inline'` or a hash-based Content Security Policy.\n\n## Usage\n\n### CSS Variables\nUse semantic variables in your CSS files.\n\n```css\n.card {\n  background: var(--ew-surface);\n  color: var(--ew-on-surface);\n  border: 1px solid var(--ew-border);\n  border-radius: var(--ew-radius-md);\n  padding: var(--ew-space-4);\n}\n```\n\n### TypeScript Tokens\nUse the typed `tokens` object for CSS-in-JS or dynamic styles.\n\n```typescript\nimport { tokens } from '@achimismaili/easy-web-theme-core';\n\nconst styles = {\n  backgroundColor: tokens.color.surface,\n  color: tokens.color.onSurface,\n  fontSize: tokens.text.base,\n};\n```\n\n## Theme Management\n\nThe system supports light and dark modes via the `data-theme` attribute on the `<html>` element. System preference is automatically detected via media query.\n\n### JavaScript API\n\n```typescript\nimport { applyTheme, getPreferredTheme } from '@achimismaili/easy-web-theme-core';\n\n// Set theme manually (persists to localStorage)\napplyTheme('dark');\n\n// Reset to system preference\napplyTheme('system');\n\n// Get current setting\nconst current = getPreferredTheme();\n```\n\n### Manual Trigger\nYou can also toggle the theme manually by setting the attribute.\n\n```html\n<html data-theme=\"dark\">\n```\n\n## Token Reference\n\n### Semantic Colors\n| Token | CSS Variable | Description |\n|---|---|---|\n| `color.surface` | `--ew-surface` | Main background color |\n| `color.onSurface` | `--ew-on-surface` | Text color on surface |\n| `color.surfaceMuted` | `--ew-surface-muted` | Subtle background for containers |\n| `color.primary` | `--ew-primary` | Brand primary color |\n| `color.onPrimary` | `--ew-on-primary` | Text color on primary |\n| `color.border` | `--ew-border` | Default border color |\n| `color.muted` | `--ew-muted` | De-emphasized text |\n| `color.danger` | `--ew-danger` | Error/danger state |\n\n### Other Systems\n- **Neutral Ramp:** `color.neutral[50-950]` / `--ew-neutral-[50-950]`\n- **Primary Ramp:** `color.primaryRamp[50-950]` / `--ew-primary-[50-950]`\n- **Typography:** `font.sans`, `font.mono`, `text.xs` to `text.3xl`\n- **Spacing:** `space[0-12]` / `--ew-space-[0-12]`\n- **Radius:** `radius.none`, `radius.sm`, `radius.md`, `radius.lg`, `radius.xl`, `radius.full`\n- **Shadows:** `shadow.xs` to `shadow.2xl` + `shadow.inner` / `--ew-shadow-*`\n- **Motion durations:** `motion.duration.instant` to `motion.duration.slower` / `--ew-duration-*`\n- **Motion easings:** `motion.ease.default`, `.in`, `.out`, `.inOut`, `.spring` / `--ew-ease-*`\n- **Z-index:** `zIndex.hide` to `zIndex.toast` (−1 to 1500) / `--ew-z-*`\n- **Breakpoints:** `breakpoints.sm` to `breakpoints['2xl']` (raw px numbers) / `--ew-bp-*`\n\n### Shadow Scale\n| Token | CSS Variable | Description |\n|---|---|---|\n| `shadow.xs` | `--ew-shadow-xs` | Very subtle elevation |\n| `shadow.sm` | `--ew-shadow-sm` | Light card shadow |\n| `shadow.md` | `--ew-shadow-md` | Standard elevation |\n| `shadow.lg` | `--ew-shadow-lg` | Pronounced elevation |\n| `shadow.xl` | `--ew-shadow-xl` | High elevation |\n| `shadow.2xl` | `--ew-shadow-2xl` | Maximum elevation |\n| `shadow.inner` | `--ew-shadow-inner` | Inset shadow |\n\nShadows automatically increase opacity in dark mode via the `--ew-shadow-color` primitive.\n\n```css\n.card { box-shadow: var(--ew-shadow-md); }\n```\n\n### Motion Tokens\n#### Durations\n| Token | CSS Variable | Value |\n|---|---|---|\n| `motion.duration.instant` | `--ew-duration-instant` | 0ms |\n| `motion.duration.fast` | `--ew-duration-fast` | 100ms |\n| `motion.duration.normal` | `--ew-duration-normal` | 200ms |\n| `motion.duration.moderate` | `--ew-duration-moderate` | 300ms |\n| `motion.duration.slow` | `--ew-duration-slow` | 500ms |\n| `motion.duration.slower` | `--ew-duration-slower` | 700ms |\n\nAll durations automatically reset to `0ms` under `prefers-reduced-motion: reduce`.\n\n#### Easings\n| Token | CSS Variable | Usage |\n|---|---|---|\n| `motion.ease.default` | `--ew-ease-default` | General purpose |\n| `motion.ease.in` | `--ew-ease-in` | Accelerating |\n| `motion.ease.out` | `--ew-ease-out` | Decelerating |\n| `motion.ease.inOut` | `--ew-ease-in-out` | Smooth both ways |\n| `motion.ease.spring` | `--ew-ease-spring` | Playful overshoot |\n\n```css\n.menu { transition: transform var(--ew-duration-normal) var(--ew-ease-out); }\n```\n\n### Breakpoints\nBreakpoints are raw pixel numbers — CSS variables **cannot** be used inside `@media` queries.\n\n```typescript\nimport { breakpoints } from '@achimismaili/easy-web-theme-core';\nconst isMobile = window.matchMedia(`(max-width: ${breakpoints.md}px)`).matches;\n```\n\n| Export | Value | Tailwind |\n|---|---|---|\n| `breakpoints.sm` | 640 | `sm` |\n| `breakpoints.md` | 768 | `md` |\n| `breakpoints.lg` | 1024 | `lg` |\n| `breakpoints.xl` | 1280 | `xl` |\n| `breakpoints['2xl']` | 1536 | `2xl` |\n\nCSS reference variables also available: `--ew-bp-sm`, `--ew-bp-md`, `--ew-bp-lg`, `--ew-bp-xl`, `--ew-bp-2xl`.\n\n### Z-Index Scale\n| Token | CSS Variable | Value | Use case |\n|---|---|---|---|\n| `zIndex.hide` | `--ew-z-hide` | -1 | Hidden elements |\n| `zIndex.base` | `--ew-z-base` | 0 | Default flow |\n| `zIndex.raised` | `--ew-z-raised` | 1 | Slightly elevated |\n| `zIndex.dropdown` | `--ew-z-dropdown` | 1000 | Dropdowns |\n| `zIndex.sticky` | `--ew-z-sticky` | 1100 | Sticky headers |\n| `zIndex.overlay` | `--ew-z-overlay` | 1200 | Background overlays |\n| `zIndex.modal` | `--ew-z-modal` | 1300 | Modal dialogs |\n| `zIndex.popover` | `--ew-z-popover` | 1400 | Floating tooltips |\n| `zIndex.toast` | `--ew-z-toast` | 1500 | Toast notifications |\n\n```css\n.header { position: sticky; z-index: var(--ew-z-sticky); }\n.modal  { z-index: var(--ew-z-modal); }\n```\n\n### Self-Hosted Fonts (Opt-in)\nImport `fonts.css` to activate Inter Variable + JetBrains Mono Variable. Sites that do not import it continue to use the system font stack at zero cost.\n\n**Step 1: Import the stylesheet** (after `tokens.css`)\n```typescript\nimport '@achimismaili/easy-web-theme-core/tokens.css';\nimport '@achimismaili/easy-web-theme-core/fonts.css';\n```\n\n**Step 2: Add font files** to `public/fonts/`:\n- `Inter-Variable.woff2` — [rsms/inter releases](https://github.com/rsms/inter/releases)\n- `JetBrainsMono-Variable.woff2` — [JetBrains/JetBrainsMono releases](https://github.com/JetBrains/JetBrainsMono/releases)\n\n**Step 3: Recommended — add preload hints in `<head>`**\n```html\n<link rel=\"preload\" as=\"font\" href=\"/fonts/Inter-Variable.woff2\" type=\"font/woff2\" crossorigin>\n<link rel=\"preload\" as=\"font\" href=\"/fonts/JetBrainsMono-Variable.woff2\" type=\"font/woff2\" crossorigin>\n```\n\n## Migration from v0.1\n\n| Old Key (v0.1) | New Token (v0.3) | New CSS Variable |\n|---|---|---|\n| `theme.light.bg` | `tokens.color.surface` | `var(--ew-surface)` |\n| `theme.light.fg` | `tokens.color.onSurface` | `var(--ew-on-surface)` |\n| `theme.light.accent` | `tokens.color.primary` | `var(--ew-primary)` |\n","readmeFilename":"README.md"}