diff --git a/package-lock.json b/package-lock.json index 3cba6f0..aed9cff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,14 @@ { "name": "nova-design-system", - "version": "0.0.1", + "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "version": "0.0.1", + "name": "nova-design-system", + "version": "0.1.0", "dependencies": { - "astro": "^6.3.3" + "astro": "^6.3.8" }, "devDependencies": { "sass": "^1.99.0" @@ -1946,9 +1947,9 @@ } }, "node_modules/astro": { - "version": "6.3.3", - "resolved": "https://registry.npmjs.org/astro/-/astro-6.3.3.tgz", - "integrity": "sha512-wvLIZQYbBZt6U8gyflBW4SLBypaqdwLZUH93rT3oT53cmQ0bTGubvMAGjqBRoheOYzYcTJZtW6czztzbu4kQ5g==", + "version": "6.3.8", + "resolved": "https://registry.npmjs.org/astro/-/astro-6.3.8.tgz", + "integrity": "sha512-xH2UA8Z17IS+JaqSlSkBor7jO6gd7zXTLdmu06nKpfpDDJFbi/7KZEy3NDmWxmier+6XrCZ9Z4aitO8jhC9oiA==", "license": "MIT", "dependencies": { "@astrojs/compiler": "^4.0.0", @@ -4360,7 +4361,6 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.4.tgz", "integrity": "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==", "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -4412,7 +4412,6 @@ "integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.1.5", @@ -5000,7 +4999,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.3.tgz", "integrity": "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", diff --git a/package.json b/package.json index d44de25..9657cc4 100644 --- a/package.json +++ b/package.json @@ -20,11 +20,8 @@ "astro": "astro", "barrel": "node scripts/generate-barrel.mjs" }, - "peerDependencies": { - "astro": ">=4.0.0" - }, "dependencies": { - "astro": "^6.3.3" + "astro": "^6.3.8" }, "devDependencies": { "sass": "^1.99.0" diff --git a/src/pages/index.astro b/src/pages/index.astro index a141fe0..1eac1b4 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -181,18 +181,18 @@ import Notification from '../components/Notifications/notification.astro'; } h1 { - font-size: var(--nds-type-display-small-size); - font-weight: var(--nds-type-display-small-weight); - line-height: var(--nds-type-display-small-line-height); - letter-spacing: var(--nds-type-display-small-letter-spacing); + font-size: var(--nds-type-h1-size); + font-weight: var(--nds-type-h1-weight); + line-height: var(--nds-type-h1-line-height); + letter-spacing: var(--nds-type-h1-letter-spacing); margin-bottom: var(--nds-spacing-xl); } h2 { - font-size: var(--nds-type-heading-small-size); - font-weight: var(--nds-type-heading-small-weight); - line-height: var(--nds-type-heading-small-line-height); - letter-spacing: var(--nds-type-heading-small-letter-spacing); + font-size: var(--nds-type-h2-size); + font-weight: var(--nds-type-h2-weight); + line-height: var(--nds-type-h2-line-height); + letter-spacing: var(--nds-type-h2-letter-spacing); color: var(--nds-text-muted); margin-bottom: var(--nds-spacing-md); } diff --git a/src/styles/tokens/_colors.scss b/src/styles/tokens/_colors.scss index f9a543b..8e3c906 100644 --- a/src/styles/tokens/_colors.scss +++ b/src/styles/tokens/_colors.scss @@ -1,165 +1,58 @@ -// ─── Semantic color tokens — Light & Dark ──────────────────────────────────── -// Source: Light.tokens.json / Dark.tokens.json (Figma export) -// Usage : --nds-- - @mixin _light { - // ── Base ────────────────────────────────────────────────────────────────── - --nds-default: #1C1C1A; - --nds-icon: #1C1C1A; - --nds-overlay: rgba(28, 28, 26, 0.60); - --nds-scrim: rgba(28, 28, 26, 0.35); - - // ── Brand ───────────────────────────────────────────────────────────────── - --nds-brand-primary: #534AB7; - --nds-brand-high: #3C3489; - --nds-brand-medium: #7F77DD; - --nds-brand-low: #EEEDFE; - - // ── Neutral ─────────────────────────────────────────────────────────────── - --nds-neutral-high: #2C2C2A; - --nds-neutral-medium: #888780; - --nds-neutral-low: #F1EFE8; - - // ── Correct ─────────────────────────────────────────────────────────────── + --nds-text: #050A0A; + --nds-neutral: #7C8282; + --nds-disabled: #C2D4D4; + --nds-background: #F4FBFB; + --nds-primary: #43C9D0; + --nds-secondary: #71EAEA; + --nds-accent: #05D1D1; + --nds-correct-high: #3B6D11; --nds-correct-medium: #639922; --nds-correct-low: #EAF3DE; - // ── Error ───────────────────────────────────────────────────────────────── --nds-error-high: #A32D2D; --nds-error-medium: #E24B4A; --nds-error-low: #FCEBEB; - // ── Warning ─────────────────────────────────────────────────────────────── --nds-warning-high: #854F0B; --nds-warning-medium: #BA7517; --nds-warning-low: #FAEEDA; - // ── Info ────────────────────────────────────────────────────────────────── --nds-info-high: #185FA5; --nds-info-medium: #378ADD; --nds-info-low: #E6F1FB; - // ── Interaction ─────────────────────────────────────────────────────────── - --nds-interaction-high: #26215C; - --nds-interaction-medium: #534AB7; - --nds-interaction-low: #CECBF6; - - // ── Disabled ────────────────────────────────────────────────────────────── - --nds-disabled-high: #B4B2A9; - --nds-disabled-medium: #D3D1C7; - --nds-disabled-low: #F1EFE8; - - // ── Overlay (alpha) ─────────────────────────────────────────────────────── - --nds-overlay-high: rgba(0, 0, 0, 0.72); - --nds-overlay-medium: rgba(0, 0, 0, 0.40); - --nds-overlay-low: rgba(0, 0, 0, 0.16); - - // ── Focus ───────────────────────────────────────────────────────────────── - --nds-focus-ring: #534AB7; - - // ── Text ────────────────────────────────────────────────────────────────── - --nds-text-muted: #888780; - --nds-text-placeholder: #B4B2A9; - --nds-text-link: #534AB7; - --nds-text-on-brand: #F4F2EF; - - // ── Border colors ───────────────────────────────────────────────────────── - --nds-border-high: #B4B2A9; - --nds-border-medium: #D3D1C7; - --nds-border-low: #F1EFE8; - - // ── Component backgrounds ───────────────────────────────────────────────── - --nds-component-low: #ECEAE3; - --nds-component-medium: #F8F7F4; - --nds-component-high: #FFFFFF; - - // ── Page backgrounds ────────────────────────────────────────────────────── - --nds-page-low: #F4F2EF; - --nds-page-medium: #ECEAE3; - --nds-page-high: #E4E2DB; } @mixin _dark { - // ── Base ────────────────────────────────────────────────────────────────── - --nds-default: #F4F2EF; - --nds-icon: #F4F2EF; - --nds-overlay: rgba(0, 0, 0, 0.75); - --nds-scrim: rgba(0, 0, 0, 0.50); + + --nds-text: #F5FAFA; + --nds-neutral: #5A7878; + --nds-disabled: #7C8282; + --nds-background: #040B0B; + --nds-primary: #2FB5BC; + --nds-secondary: #288181; + --nds-accent: #2EFAFA; - // ── Brand ───────────────────────────────────────────────────────────────── - --nds-brand-primary: #7F77DD; - --nds-brand-high: #AFA9EC; - --nds-brand-medium: #534AB7; - --nds-brand-low: #26215C; - - // ── Neutral ─────────────────────────────────────────────────────────────── - --nds-neutral-high: #F1EFE8; - --nds-neutral-medium: #888780; - --nds-neutral-low: #2C2C2A; - - // ── Correct ─────────────────────────────────────────────────────────────── --nds-correct-high: #97C459; --nds-correct-medium: #97C459; --nds-correct-low: #173404; - // ── Error ───────────────────────────────────────────────────────────────── --nds-error-high: #F09595; --nds-error-medium: #A32D2D; --nds-error-low: #501313; - // ── Warning ─────────────────────────────────────────────────────────────── --nds-warning-high: #EF9F27; --nds-warning-medium: #EF9F27; --nds-warning-low: #412402; - // ── Info ────────────────────────────────────────────────────────────────── --nds-info-high: #85B7EB; --nds-info-medium: #85B7EB; --nds-info-low: #042C53; - // ── Interaction ─────────────────────────────────────────────────────────── - --nds-interaction-high: #AFA9EC; - --nds-interaction-medium: #7F77DD; - --nds-interaction-low: #26215C; - - // ── Disabled ────────────────────────────────────────────────────────────── - --nds-disabled-high: #5F5E5A; - --nds-disabled-medium: #444441; - --nds-disabled-low: #2C2C2A; - - // ── Overlay (alpha) ─────────────────────────────────────────────────────── - --nds-overlay-high: rgba(255, 255, 255, 0.80); - --nds-overlay-medium: rgba(255, 255, 255, 0.50); - --nds-overlay-low: rgba(255, 255, 255, 0.24); - - // ── Focus ───────────────────────────────────────────────────────────────── - --nds-focus-ring: #7F77DD; - - // ── Text ────────────────────────────────────────────────────────────────── - --nds-text-muted: #888780; - --nds-text-placeholder: #5F5E5A; - --nds-text-link: #7F77DD; - --nds-text-on-brand: #1C1C1A; - - // ── Border colors ───────────────────────────────────────────────────────── - --nds-border-high: #5F5E5A; - --nds-border-medium: #444441; - --nds-border-low: #2C2C2A; - - // ── Component backgrounds ───────────────────────────────────────────────── - --nds-component-low: #222220; - --nds-component-medium: #2A2A28; - --nds-component-high: #333330; - - // ── Page backgrounds ────────────────────────────────────────────────────── - --nds-page-low: #1C1C1A; - --nds-page-medium: #242422; - --nds-page-high: #2C2C2A; } -// ─── Apply themes ───────────────────────────────────────────────────────────── - :root, [data-theme="light"] { @include _light; diff --git a/src/styles/tokens/_typography.scss b/src/styles/tokens/_typography.scss index b59562b..1259349 100644 --- a/src/styles/tokens/_typography.scss +++ b/src/styles/tokens/_typography.scss @@ -1,112 +1,49 @@ -// ─── Typography tokens ──────────────────────────────────────────────────────── -// Font: Geist (Vercel) — https://vercel.com/font -// Values: size in px, line-height in px, letter-spacing as em +@import url('https://fonts.googleapis.com/css?family=Intel%20One%20Mono:700|Intel%20One%20Mono:400'); -:root { - // ── Font families ───────────────────────────────────────────────────────── - --nds-font-family-base: 'Geist', system-ui, -apple-system, sans-serif; - --nds-font-family-mono: 'Geist Mono', 'JetBrains Mono', monospace; - - // ── Font weights ────────────────────────────────────────────────────────── - --nds-font-weight-medium: 500; - --nds-font-weight-semibold: 600; - --nds-font-weight-bold: 700; - - // ── Body ────────────────────────────────────────────────────────────────── - --nds-type-body-small-size: 12px; - --nds-type-body-small-weight: var(--nds-font-weight-medium); - --nds-type-body-small-line-height: 10px; - --nds-type-body-small-letter-spacing: 0.015em; - - --nds-type-body-medium-size: 14px; - --nds-type-body-medium-weight: var(--nds-font-weight-medium); - --nds-type-body-medium-line-height: 10px; - --nds-type-body-medium-letter-spacing: 0.015em; - - --nds-type-body-large-size: 16px; - --nds-type-body-large-weight: var(--nds-font-weight-medium); - --nds-type-body-large-line-height: 12px; - --nds-type-body-large-letter-spacing: 0.015em; - - // ── Heading ─────────────────────────────────────────────────────────────── - --nds-type-heading-small-size: 20px; - --nds-type-heading-small-weight: var(--nds-font-weight-semibold); - --nds-type-heading-small-line-height: 15px; - --nds-type-heading-small-letter-spacing: 0.014em; - - --nds-type-heading-medium-size: 24px; - --nds-type-heading-medium-weight: var(--nds-font-weight-semibold); - --nds-type-heading-medium-line-height: 18px; - --nds-type-heading-medium-letter-spacing: 0.013em; - - // ── Display ─────────────────────────────────────────────────────────────── - --nds-type-display-small-size: 36px; - --nds-type-display-small-weight: var(--nds-font-weight-bold); - --nds-type-display-small-line-height: 30px; - --nds-type-display-small-letter-spacing: 0.012em; - - --nds-type-display-medium-size: 48px; - --nds-type-display-medium-weight: var(--nds-font-weight-bold); - --nds-type-display-medium-line-height: 38px; - --nds-type-display-medium-letter-spacing: 0.011em; +@mixin text-sm { + font-size: 0.600rem; + font-family: 'Intel One Mono'; + font-weight: 400; } -// ─── SASS mixins ────────────────────────────────────────────────────────────── -// Usage: @use 'path/to/tokens/typography' as typo; -// @include typo.body-small; - -@mixin body-small { - font-family: var(--nds-font-family-base); - font-size: var(--nds-type-body-small-size); - font-weight: var(--nds-type-body-small-weight); - line-height: var(--nds-type-body-small-line-height); - letter-spacing: var(--nds-type-body-small-letter-spacing); +@mixin text-base { + font-size: 0.8rem; + font-family: 'Intel One Mono'; + font-weight: 400; } -@mixin body-medium { - font-family: var(--nds-font-family-base); - font-size: var(--nds-type-body-medium-size); - font-weight: var(--nds-type-body-medium-weight); - line-height: var(--nds-type-body-medium-line-height); - letter-spacing: var(--nds-type-body-medium-letter-spacing); +@mixin text-label { + font-size: 0.8rem; + font-family: 'Intel One Mono'; + font-weight: 700; } -@mixin body-large { - font-family: var(--nds-font-family-base); - font-size: var(--nds-type-body-large-size); - font-weight: var(--nds-type-body-large-weight); - line-height: var(--nds-type-body-large-line-height); - letter-spacing: var(--nds-type-body-large-letter-spacing); +@mixin text-xl { + font-size: 1.066rem; + font-family: 'Intel One Mono'; + font-weight: 700; } -@mixin heading-small { - font-family: var(--nds-font-family-base); - font-size: var(--nds-type-heading-small-size); - font-weight: var(--nds-type-heading-small-weight); - line-height: var(--nds-type-heading-small-line-height); - letter-spacing: var(--nds-type-heading-small-letter-spacing); +@mixin text-2xl { + font-size: 1.421rem; + font-family: 'Intel One Mono'; + font-weight: 700; } -@mixin heading-medium { - font-family: var(--nds-font-family-base); - font-size: var(--nds-type-heading-medium-size); - font-weight: var(--nds-type-heading-medium-weight); - line-height: var(--nds-type-heading-medium-line-height); - letter-spacing: var(--nds-type-heading-medium-letter-spacing); +@mixin text-3xl { + font-size: 1.894rem; + font-family: 'Intel One Mono'; + font-weight: 700; } -@mixin display-small { - font-family: var(--nds-font-family-base); - font-size: var(--nds-type-display-small-size); - font-weight: var(--nds-type-display-small-weight); - line-height: var(--nds-type-display-small-line-height); - letter-spacing: var(--nds-type-display-small-letter-spacing); +@mixin text-4xl { + font-size: 2.525rem; + font-family: 'Intel One Mono'; + font-weight: 700; } -@mixin display-medium { - font-family: var(--nds-font-family-base); - font-size: var(--nds-type-display-medium-size); - font-weight: var(--nds-type-display-medium-weight); - line-height: var(--nds-type-display-medium-line-height); - letter-spacing: var(--nds-type-display-medium-letter-spacing); -} +@mixin text-5xl { + font-size: 3.366rem; + font-family: 'Intel One Mono'; + font-weight: 700; +} \ No newline at end of file