Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: Icons and Typography

Browse Source
This commit is contained in:
MangoPig
2026-06-13 12:39:11 +01:00
parent fa45b46cd2
commit fdd6fc8376
7 changed files with 103 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Frontend/package.json
View File

@@ -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",

12
Frontend/pnpm-lock.yaml generated
View File

@@ -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

3
Frontend/src/lib/icons/index.ts Normal file
View File

@@ -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";

9
Frontend/src/styles/base/_fonts.scss
View File

@@ -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;
}

28
Frontend/src/styles/base/_globals.scss
View File

@@ -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 {

31
Frontend/src/styles/themes/_tokens.scss
View File

@@ -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;
}

42
Frontend/src/styles/tools/_mixins.scss
View File

@@ -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);
}