unkn0wn/nova-design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update dependancies versions and setting up new color themes and new fonts

Browse Source
This commit is contained in:
LOUIS POTEVIN
2026-05-27 12:04:06 +02:00
parent e8ed7e2a73
commit 7e803a24c4
5 changed files with 66 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+8 -8
View File
@@ -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);
}
src/styles/tokens/_colors.scss
+16 -123
View File
@@ -1,165 +1,58 @@
// ─── Semantic color tokens — Light & Dark ────────────────────────────────────
// Source: Light.tokens.json / Dark.tokens.json (Figma export)
// Usage : --nds-<category>-<variant>
@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;
src/styles/tokens/_typography.scss
+34 -97
View File
@@ -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;
}