diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..8c52ff9 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..28edc2f --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,11 @@ +## Summary + + + +## Changes + +- + +## Notes + + diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..2774b72 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,22 @@ +version: 2 +updates: + - package-ecosystem: npm + directory: / + schedule: + interval: weekly + commit-message: + prefix: "chore(deps):" + open-pull-requests-limit: 5 + groups: + dev-dependencies: + dependency-type: development + update-types: + - minor + - patch + + - package-ecosystem: github-actions + directory: / + schedule: + interval: weekly + commit-message: + prefix: "chore(ci):" diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 9e675e0..bee841b 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -18,4 +18,4 @@ jobs: - run: npm install - - run: npm run check + - run: npm run lint diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..b009dfb --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +lts/* diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..ea772c9 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,49 @@ +# Contributing + +Thanks for your interest in contributing to @ankh-studio/themes. + +## Setup + +```bash +git clone https://github.com/ankh-studio/themes.git +cd themes +nvm use +npm install +``` + +## Development + +```bash +npm run lint # Check CSS style +npm run build # Compile themes to dist/ +``` + +## Making Changes + +1. Create a branch from `main` +2. Make your changes in `src/` +3. Run `npm run lint` and `npm run build` +4. Submit a pull request + +## Code Style + +- CSS custom properties only (no preprocessors) +- Follow existing naming conventions +- Use tokens from `@ankh-studio/tokens` +- Run `npm run lint` before committing + +## Theme Structure + +Each theme file should: + +1. Import CSS reset +2. Import tokens (base + color palette) +3. Define base styles in `@layer base` + +## Design Decisions + +Significant changes should be discussed first. For new themes or architectural changes, consider proposing an [ADR](./docs/adr/). + +## Questions + +Open an issue for discussion before starting large changes. diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..fe3f502 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 Ankh Studio LLC + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 9077ccc..d1d46e3 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,25 @@ -# @okja/chi-themes +# @ankh-studio/themes -Pre-composed CSS themes built on Chi Design System tokens. Import one file and get reset, tokens, and base styles. +Pre-composed CSS themes built on Ankh Studio design tokens. Import one file and get reset, tokens, and base styles. -Built on [@okja/chi-tokens](https://github.com/Okja-Engineering/chi-tokens) - the foundational design tokens for the Chi Design System. +Built on [@ankh-studio/tokens](https://github.com/ankh-studio/tokens) - the foundational design tokens for the Ankh Studio design system. ## Installation ```bash -npm install @okja/chi-themes +npm install @ankh-studio/themes ``` ## Quick Start ```css -@import '@okja/chi-themes/default.css'; +@import '@ankh-studio/themes/default.css'; ``` Or in HTML: ```html - + ``` ## Available Themes @@ -62,7 +62,7 @@ All themes include design tokens: - **Shadows** - `--shadow-0` through `--shadow-5` - **Motion** - Durations and easings -See [@okja/chi-tokens](https://github.com/Okja-Engineering/chi-tokens) for the complete token reference. +See [@ankh-studio/tokens](https://github.com/ankh-studio/tokens) for the complete token reference. ## Dark Mode @@ -104,11 +104,16 @@ Each theme uses CSS Cascade Layers: ``` - **reset** - Normalize browser defaults -- **tokens** - Design tokens from @okja/chi-tokens +- **tokens** - Design tokens from @ankh-studio/tokens - **base** - Typography, links, focus states Your styles layer on top, giving you full cascade control. +## Documentation + +- [Architecture Decision Records](./docs/adr/) - Design decisions and proposals +- [Contributing](./CONTRIBUTING.md) - How to contribute + ## Changelog ### 0.1.0 diff --git a/docs/adr/000-template.md b/docs/adr/000-template.md new file mode 100644 index 0000000..8e5740d --- /dev/null +++ b/docs/adr/000-template.md @@ -0,0 +1,20 @@ +# ADR-000: Title + +**Status:** Proposed | Accepted | Implemented | Superseded +**Date:** YYYY-MM-DD + +## Context + +What problem are we solving? + +## Decision + +What are we proposing? + +## Consequences + +What are the trade-offs? + +## Open Questions + +- [ ] Unresolved items diff --git a/docs/adr/001-themes-architecture.md b/docs/adr/001-themes-architecture.md new file mode 100644 index 0000000..715dba9 --- /dev/null +++ b/docs/adr/001-themes-architecture.md @@ -0,0 +1,164 @@ +# ADR-001: Themes as Composable and Consumable Design Layer + +**Status:** Accepted +**Date:** 2026-01-30 + +## Context + +We're building a design system following well-established patterns — Material Design, Radix, Tailwind, and others have proven that tokens, themes, and layered architecture work. We're building on that foundation. + +But we have bigger intentions. + +### The Proven Foundation + +**What we know works:** +- Design tokens as single source of truth +- CSS custom properties for runtime theming +- Cascade layers for predictable specificity +- `light-dark()` and `prefers-color-scheme` for dark mode +- `prefers-reduced-motion` for accessibility +- Semantic color roles (primary, surface, error) +- Separation of structure (spacing, radius) from color + +We're aligning with Material Design 3's multi-dimensional customization: +- Color (dynamic palettes, tonal ranges) +- Typography (type scales) +- Shape (corner radii) +- Motion (springs, easing, duration) +- Spacing/Density +- Elevation + +### The Bigger Intentions + +**What we're reaching for:** + +1. **Cognitive context as a design dimension** — Not just "what color" but "what cognitive state." We're calling these "design intentions" (Expressive, Focus, Intense). The same interface might need different intentions in different contexts. + +2. **Themes as more than color swatches** — Color calibrated for cognitive context. Purple-expressive isn't just purple + generous spacing. The colors themselves shift — higher chroma for engagement, muted baseline for expert vigilance. + +3. **Granular intention control** — Not just "the whole app is Focus" but the ability for individual modules or sections to dial in their own intention. A dashboard where one panel is Intense while another is Focus. + +We're exploring ways to support this. It's ongoing. + +## Decision + +### The Layered System + +``` +┌─────────────────────────────────┐ +│ @ankh-studio/themes │ ← color palettes, modes, intention calibration +├─────────────────────────────────┤ +│ @ankh-studio/tokens │ ← structure, intentions, primitives +└─────────────────────────────────┘ +``` + +**`@ankh-studio/tokens`** provides: +- Base design tokens (spacing, typography, radius, shadow, motion) +- Design intention system (Expressive, Focus, Intense) +- Structural customization dimensions + +**`@ankh-studio/themes`** provides: +- Color palettes with chromatic identity +- Mode-aware variants (light/dark, reduced motion) +- Intention-specific color calibration +- Directly consumable theme bundles + +### Directly Consumable + +Themes work today as single imports: + +```css +@import '@ankh-studio/themes/purple.css'; +/* You get: reset + tokens + palette + base styles */ +``` + +This is the primary use case. Import a theme, build your application. + +### Granular Intention Control + +The goal is for individual modules or sections of a codebase to dial in their intention — not just a global setting. How we support this is being explored. + +Possibilities we're considering: +- Data attributes on containers +- Scoped CSS custom property overrides +- Separate intention stylesheets that can be applied per-region + +We don't have the answer yet. + +### Separation of Concerns + +**Tokens own structure:** +- Spacing, typography, radius, shadows, motion +- Design intentions (how these shift per cognitive context) + +**Themes own color:** +- Palettes (chromatic identity) +- Light/dark mode +- Reduced motion mode +- Intention-specific color calibration + +| Intention | Chroma | Contrast | Accent Usage | +|-----------|--------|----------|--------------| +| Expressive | Higher, vibrant | Softer | Liberal | +| Focus | Moderate | Balanced | Purposeful | +| Intense | Low baseline | Sharp, high-contrast alerts | Reserved for signals | + +### Cascade Layer Structure + +```css +@layer reset, tokens, intention, palette, base; +``` + +## What We're Exploring + +**Granular intention mechanics:** +- How do sections/modules opt into different intentions? +- CSS-only or does it require JavaScript coordination? +- How do nested intentions interact? + +**Color calibration:** +- How granular should intention-specific color shifts be? +- Per-role adjustments or systematic chroma/lightness transforms? + +**Mode switching:** +- Manual user control vs system preference vs hybrid +- Per-section mode overrides + +These are active questions. The answers will come from building and using the system. + +## Consequences + +### Positive + +- Following proven patterns reduces risk +- Directly consumable themes work now +- Granular intention control opens possibilities we're still discovering +- Clear separation between tokens (structure) and themes (color) + +### Negative + +- Granular intention control is unproven +- Cognitive framing is unvalidated +- We're committing to a direction before knowing the mechanics + +### Neutral + +- Current themes work as Focus-intention defaults +- We can iterate as we learn + +## Implementation Path + +1. **Phase 1** (Current): Simple palette themes — directly consumable +2. **Phase 2**: Implement intention tokens in `@ankh-studio/tokens` +3. **Phase 3**: Create intention-calibrated color variants per palette +4. **Phase 4**: Explore and validate granular intention control patterns +5. **Phase 5**: Tooling for custom palette generation + +## The Bet + +We're betting that: +- Cognitive context is a useful design dimension +- Color calibration per intention creates meaningfully different experiences +- Granular intention control (per-module, not all-or-nothing) is valuable + +These bets might be wrong. But they're worth making. diff --git a/docs/adr/README.md b/docs/adr/README.md new file mode 100644 index 0000000..c1d26bb --- /dev/null +++ b/docs/adr/README.md @@ -0,0 +1,22 @@ +# Architecture Decision Records + +This directory contains Architecture Decision Records (ADRs) for @ankh-studio/themes. + +## Status + +| Status | Meaning | +|--------|---------| +| **Proposed** | Under consideration | +| **Accepted** | Decision made | +| **Implemented** | In codebase | +| **Superseded** | Replaced by another ADR | + +## Index + +| ADR | Title | Status | +|-----|-------|--------| +| [001](./001-themes-architecture.md) | Themes as Composable and Consumable Design Layer | Accepted | + +## Creating an ADR + +Copy `000-template.md` and number sequentially. diff --git a/package-lock.json b/package-lock.json index 5827211..240101c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,24 +1,34 @@ { - "name": "@okja/chi-themes", + "name": "@ankh-studio/themes", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "@okja/chi-themes", + "name": "@ankh-studio/themes", "version": "0.1.0", "license": "MIT", "dependencies": { - "@okja/chi-tokens": "^0.5.1" + "@ankh-studio/tokens": "^0.5.2" }, "devDependencies": { "postcss": "^8.5.6", "postcss-cli": "^11.0.1", "postcss-import": "^16.1.1", + "rimraf": "^6.1.2", "stylelint": "^16.12.0", "stylelint-config-standard": "^37.0.0" + }, + "engines": { + "node": ">=20" } }, + "node_modules/@ankh-studio/tokens": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@ankh-studio/tokens/-/tokens-0.5.2.tgz", + "integrity": "sha512-WS16Fkmf1dgMzIZZ7WV+Q11OWjymu1HphgsV81ALNUMnTYbbp3BChf2Ni+jiUkYVSOUT3MKoeoYjPKhcx5FCBQ==", + "license": "MIT" + }, "node_modules/@babel/code-frame": { "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", @@ -181,6 +191,29 @@ "url": "https://github.com/sponsors/JounQin" } }, + "node_modules/@isaacs/balanced-match": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz", + "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/@isaacs/brace-expansion": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz", + "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@isaacs/balanced-match": "^4.0.1" + }, + "engines": { + "node": "20 || >=22" + } + }, "node_modules/@keyv/bigmap": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.3.0.tgz", @@ -243,12 +276,6 @@ "node": ">= 8" } }, - "node_modules/@okja/chi-tokens": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/@okja/chi-tokens/-/chi-tokens-0.5.1.tgz", - "integrity": "sha512-Rx1BGrCAob66Jb0sVhTZbau0hIQgKFZEYLzS8e7T8uw+IHyKoJXWAcf4LFECL82melXClgB0OZha4iHOdN8D8A==", - "license": "MIT" - }, "node_modules/ajv": { "version": "8.17.1", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", @@ -718,6 +745,24 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/glob": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.0.tgz", + "integrity": "sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "minimatch": "^10.1.1", + "minipass": "^7.1.2", + "path-scurry": "^2.0.0" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/glob-parent": { "version": "5.1.2", "dev": true, @@ -1099,6 +1144,16 @@ "dev": true, "license": "MIT" }, + "node_modules/lru-cache": { + "version": "11.2.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz", + "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, "node_modules/mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -1154,6 +1209,32 @@ "node": ">=8.6" } }, + "node_modules/minimatch": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz", + "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/brace-expansion": "^5.0.0" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -1186,6 +1267,13 @@ "node": ">=0.10.0" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "dev": true, + "license": "BlueOak-1.0.0" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -1223,6 +1311,23 @@ "dev": true, "license": "MIT" }, + "node_modules/path-scurry": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.1.tgz", + "integrity": "sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^11.0.0", + "minipass": "^7.1.2" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -1560,6 +1665,26 @@ "node": ">=0.10.0" } }, + "node_modules/rimraf": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-6.1.2.tgz", + "integrity": "sha512-cFCkPslJv7BAXJsYlK1dZsbP8/ZNLkCAQ0bi1hf5EKX2QHegmDFEFA6QhuYJlk7UDdc+02JjO80YSOrWPpw06g==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "glob": "^13.0.0", + "package-json-from-dist": "^1.0.1" + }, + "bin": { + "rimraf": "dist/esm/bin.mjs" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/package.json b/package.json index 2a83734..705942a 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,20 @@ { - "name": "@okja/chi-themes", + "name": "@ankh-studio/themes", "version": "0.1.0", - "description": "Pre-composed CSS themes built on Chi Design System tokens", + "description": "Pre-composed CSS themes built on Ankh Studio design tokens", "type": "module", "license": "MIT", + "author": { + "name": "Matthew Van Dusen", + "url": "https://github.com/matthewvandusen" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ankh-studio/themes.git" + }, + "engines": { + "node": ">=20" + }, "publishConfig": { "access": "public", "provenance": true @@ -23,16 +34,17 @@ ], "scripts": { "build": "postcss 'src/*.css' --dir dist --base src", - "check": "stylelint 'src/**/*.css'", - "clean": "rm -rf dist" + "clean": "rimraf dist", + "lint": "stylelint 'src/**/*.css'" }, "dependencies": { - "@okja/chi-tokens": "^0.5.1" + "@ankh-studio/tokens": "^0.5.2" }, "devDependencies": { "postcss": "^8.5.6", "postcss-cli": "^11.0.1", "postcss-import": "^16.1.1", + "rimraf": "^6.1.2", "stylelint": "^16.12.0", "stylelint-config-standard": "^37.0.0" } diff --git a/src/blue.css b/src/blue.css index 86362ef..19416ab 100644 --- a/src/blue.css +++ b/src/blue.css @@ -10,8 +10,8 @@ @import './reset.css' layer(reset); /* Tokens layer */ -@import '@okja/chi-tokens/dist/tokens.css'; -@import '@okja/chi-tokens/dist/colors/blue.css'; +@import '@ankh-studio/tokens/dist/tokens.css'; +@import '@ankh-studio/tokens/dist/colors/blue.css'; /* Custom media queries */ @import './internal/breakpoints.css'; diff --git a/src/default.css b/src/default.css index 6669991..72aef9a 100644 --- a/src/default.css +++ b/src/default.css @@ -10,8 +10,8 @@ @import './reset.css' layer(reset); /* Tokens layer */ -@import '@okja/chi-tokens/dist/tokens.css'; -@import '@okja/chi-tokens/dist/colors/grayscale.css'; +@import '@ankh-studio/tokens/dist/tokens.css' layer(tokens); +@import '@ankh-studio/tokens/dist/colors/grayscale.css' layer(tokens); /* Custom media queries */ @import './internal/breakpoints.css'; diff --git a/src/internal/base-styles.css b/src/internal/base-styles.css index 43728a7..83768a2 100644 --- a/src/internal/base-styles.css +++ b/src/internal/base-styles.css @@ -1,5 +1,5 @@ /** - * Chi Design System - Base Styles + * Ankh Studio - Base Styles * Typography, spacing, and foundational styles using design system tokens */ @@ -18,14 +18,14 @@ body { /* Responsive body typography */ @media screen and (width <= 600px) { body { - font-size: 0.875rem; - line-height: 1.25rem; + font-size: var(--font-size-2); + line-height: var(--line-height-2); } } strong, b { - font-weight: 600; + font-weight: var(--font-weight-medium); } em { @@ -68,7 +68,7 @@ code { pre { font-family: var(--font-mono); - padding: 1rem; + padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-container-high); overflow-x: auto; @@ -96,55 +96,55 @@ h6 { } h1 { - font-size: 3.5rem; - line-height: 4rem; + font-size: var(--font-size-11); + line-height: var(--line-height-11); margin: 0; } @media screen and (width <= 600px) { h1 { - font-size: 2.25rem; - line-height: 2.75rem; + font-size: var(--font-size-9); + line-height: var(--line-height-9); } } h2 { - font-size: 2.8125rem; - line-height: 3.25rem; - margin: 2rem 0; + font-size: var(--font-size-10); + line-height: var(--line-height-10); + margin: var(--space-6) 0; } @media screen and (width <= 600px) { h2 { - font-size: 2rem; - line-height: 2.5rem; + font-size: var(--font-size-8); + line-height: var(--line-height-8); } } h3 { - font-size: 2.25rem; - line-height: 2.75rem; - margin: 1.5rem 0; + font-size: var(--font-size-9); + line-height: var(--line-height-9); + margin: var(--space-5) 0; } @media screen and (width <= 600px) { h3 { - font-size: 1.75rem; - line-height: 2.25rem; + font-size: var(--font-size-7); + line-height: var(--line-height-7); } } h4 { - font-size: 1.5rem; - line-height: 2rem; - margin: 1rem 0; + font-size: var(--font-size-6); + line-height: var(--line-height-6); + margin: var(--space-4) 0; } h5 { font-size: var(--font-size-3); line-height: var(--line-height-3); font-weight: var(--font-weight-medium); - margin: 1rem 0; + margin: var(--space-4) 0; } h6 { @@ -153,7 +153,7 @@ h6 { font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-1); - margin: 1rem 0; + margin: var(--space-4) 0; } /* Form elements */ diff --git a/src/internal/breakpoints.css b/src/internal/breakpoints.css index 67ba4c1..6c81ec2 100644 --- a/src/internal/breakpoints.css +++ b/src/internal/breakpoints.css @@ -1,5 +1,5 @@ /** - * Chi Design System - Responsive Breakpoints + * Ankh Studio - Responsive Breakpoints * Based on window size classes: Compact → Medium → Expanded → Large */ diff --git a/src/purple.css b/src/purple.css index 019085f..2fe1b58 100644 --- a/src/purple.css +++ b/src/purple.css @@ -10,8 +10,8 @@ @import './reset.css' layer(reset); /* Tokens layer */ -@import '@okja/chi-tokens/dist/tokens.css'; -@import '@okja/chi-tokens/dist/colors/purple.css'; +@import '@ankh-studio/tokens/dist/tokens.css'; +@import '@ankh-studio/tokens/dist/colors/purple.css'; /* Custom media queries */ @import './internal/breakpoints.css'; diff --git a/src/reset.css b/src/reset.css index bad4a8a..60a9c6e 100644 --- a/src/reset.css +++ b/src/reset.css @@ -1,6 +1,6 @@ /** * CSS Reset - * Modern CSS reset for Chi Design System + * Modern CSS reset for Ankh Studio themes */ html,