diff --git a/Frontend/package.json b/Frontend/package.json index 3ab4b33..7d367b5 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -15,6 +15,7 @@ "preview": "vite preview" }, "dependencies": { + "lucide-solid": "^0.542.0", "@solidjs/start": "2.0.0-alpha.2", "@solidjs/vite-plugin-nitro-2": "^0.1.0", "postcss": "^8.5.15", diff --git a/Frontend/pnpm-lock.yaml b/Frontend/pnpm-lock.yaml index 4a282c5..ab07081 100644 --- a/Frontend/pnpm-lock.yaml +++ b/Frontend/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@solidjs/vite-plugin-nitro-2': specifier: ^0.1.0 version: 0.1.0(vite@7.3.1(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0)) + lucide-solid: + specifier: ^0.542.0 + version: 0.542.0(solid-js@1.9.11) postcss: specifier: ^8.5.15 version: 8.5.15 @@ -2151,6 +2154,11 @@ packages: lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} + lucide-solid@0.542.0: + resolution: {integrity: sha512-cMy0fZu9TEEm1IIP3BIXBJd07xJGeAYNebIE1Zti+7cnv1hJcHoNZx4+D2tHZIYKILoSB/Rhs5M0vdKzQTU33g==} + peerDependencies: + solid-js: ^1.4.7 + magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} @@ -5522,6 +5530,10 @@ snapshots: dependencies: yallist: 3.1.1 + lucide-solid@0.542.0(solid-js@1.9.11): + dependencies: + solid-js: 1.9.11 + magic-string@0.30.21: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 diff --git a/Frontend/src/lib/icons/index.ts b/Frontend/src/lib/icons/index.ts new file mode 100644 index 0000000..6c8406d --- /dev/null +++ b/Frontend/src/lib/icons/index.ts @@ -0,0 +1,3 @@ +// Path: Frontend/src/lib/icons/index.ts + +export { Bell, Check, ChevronDown, ChevronLeft, ChevronRight, Folder, FolderOpen, Home, LayoutGrid, MoreHorizontal, Plus, Search, Settings, User, X } from "lucide-solid"; diff --git a/Frontend/src/styles/base/_fonts.scss b/Frontend/src/styles/base/_fonts.scss index 88d797d..d2879a2 100644 --- a/Frontend/src/styles/base/_fonts.scss +++ b/Frontend/src/styles/base/_fonts.scss @@ -1,6 +1,11 @@ /* Path: Frontend/src/styles/base/_fonts.scss */ :root { - --font-family-sans: "Inter", "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - --font-family-mono: "Geist Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", "Roboto Mono", monospace; + --font-family-sans: + ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; + --font-family-heading: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; + --font-family-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; + --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-family-mono: + ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } diff --git a/Frontend/src/styles/base/_globals.scss b/Frontend/src/styles/base/_globals.scss index 78ab895..1b31de1 100644 --- a/Frontend/src/styles/base/_globals.scss +++ b/Frontend/src/styles/base/_globals.scss @@ -6,6 +6,7 @@ html { background: var(--color-canvas); color: var(--color-text); font-family: var(--font-family-sans); + font-synthesis: none; scroll-behavior: smooth; transition: background-color var(--motion-duration-base) var(--motion-ease-standard), @@ -15,6 +16,8 @@ html { body { background: var(--color-canvas); color: var(--color-text); + font-family: var(--font-family-sans); + @include text-body; } a, @@ -50,30 +53,48 @@ a { } h1 { + font-family: var(--font-family-display); + text-wrap: balance; @include text-display; } h2 { + font-family: var(--font-family-heading); + text-wrap: balance; @include text-heading; } h3 { + font-family: var(--font-family-heading); + text-wrap: balance; @include text-title; } h4, h5, h6 { + font-family: var(--font-family-heading); + text-wrap: balance; @include text-label; } p, -span, +li, +blockquote, +figcaption { + text-wrap: pretty; + @include text-body; +} + +label, +legend { + @include text-label; +} + button, input, textarea, -label, -li { +select { @include text-body; } @@ -82,6 +103,7 @@ pre, kbd, samp { font-family: var(--font-family-mono); + font-size: 0.95em; } #app { diff --git a/Frontend/src/styles/themes/_tokens.scss b/Frontend/src/styles/themes/_tokens.scss index 4845df5..435a110 100644 --- a/Frontend/src/styles/themes/_tokens.scss +++ b/Frontend/src/styles/themes/_tokens.scss @@ -51,4 +51,35 @@ --motion-duration-base: 220ms; --motion-duration-slow: 320ms; --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); + + // Typography + // ============================ + + --font-size-caption: 0.75rem; + --font-size-label: 0.875rem; + --font-size-body: 1rem; + --font-size-title: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); + --font-size-heading: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); + --font-size-display: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem); + + --line-height-caption: 1.4; + --line-height-label: 1.35; + --line-height-body: 1.55; + --line-height-title: 1.3; + --line-height-heading: 1.15; + --line-height-display: 1.05; + + --font-weight-caption: 500; + --font-weight-label: 600; + --font-weight-body: 400; + --font-weight-title: 600; + --font-weight-heading: 600; + --font-weight-display: 700; + + --letter-spacing-caption: 0.01em; + --letter-spacing-label: 0.005em; + --letter-spacing-body: 0; + --letter-spacing-title: -0.01em; + --letter-spacing-heading: -0.02em; + --letter-spacing-display: -0.03em; } diff --git a/Frontend/src/styles/tools/_mixins.scss b/Frontend/src/styles/tools/_mixins.scss index ad6b96c..adc3d61 100644 --- a/Frontend/src/styles/tools/_mixins.scss +++ b/Frontend/src/styles/tools/_mixins.scss @@ -19,37 +19,43 @@ } @mixin text-caption { - font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem); - font-weight: 500; - line-height: 1.4; + font-size: var(--font-size-caption); + font-weight: var(--font-weight-caption); + line-height: var(--line-height-caption); + letter-spacing: var(--letter-spacing-caption); } @mixin text-label { - font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem); - font-weight: 600; - line-height: 1.4; + font-size: var(--font-size-label); + font-weight: var(--font-weight-label); + line-height: var(--line-height-label); + letter-spacing: var(--letter-spacing-label); } @mixin text-body { - font-size: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem); - font-weight: 400; - line-height: 1.6; + font-size: var(--font-size-body); + font-weight: var(--font-weight-body); + line-height: var(--line-height-body); + letter-spacing: var(--letter-spacing-body); } @mixin text-title { - font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); - font-weight: 600; - line-height: 1.25; + font-size: var(--font-size-title); + font-weight: var(--font-weight-title); + line-height: var(--line-height-title); + letter-spacing: var(--letter-spacing-title); } @mixin text-heading { - font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); - font-weight: 650; - line-height: 1.1; + font-size: var(--font-size-heading); + font-weight: var(--font-weight-heading); + line-height: var(--line-height-heading); + letter-spacing: var(--letter-spacing-heading); } @mixin text-display { - font-size: clamp(2rem, 1.45rem + 2.1vw, 3.5rem); - font-weight: 700; - line-height: 1; + font-size: var(--font-size-display); + font-weight: var(--font-weight-display); + line-height: var(--line-height-display); + letter-spacing: var(--letter-spacing-display); }