Skip to content

Commit 5c654e0

Browse files
author
Joshua Stübner
committed
feat: update ui-generator with new styles
1 parent 2f80fc2 commit 5c654e0

File tree

10 files changed

+65
-17
lines changed

10 files changed

+65
-17
lines changed

‎apps/ui-generator/public/assets/fonts/ArminGrotesk-Normal.woff2‎

25.9 KB
Binary file not shown.

‎apps/ui-generator/public/assets/fonts/ArminGrotesk-Regular.woff2‎

26 KB
Binary file not shown.

‎apps/ui-generator/public/assets/fonts/ArminGrotesk-SemiBold.woff2‎

26.2 KB
Binary file not shown.

‎apps/ui-generator/public/assets/fonts/ArminGrotesk-UltraBold.woff2‎

26.2 KB
Binary file not shown.

‎apps/ui-generator/public/assets/fonts/DMMono-Regular.woff2‎

18.6 KB
Binary file not shown.

‎apps/ui-generator/public/assets/fonts/fonts.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@font-face {
2+
font-family: "Armin Grotesk";
3+
src: url("ArminGrotesk-Regular.woff2") format("woff2");
4+
font-display: swap;
5+
font-style: normal;
6+
font-weight: 400;
7+
}
8+
9+
@font-face {
10+
font-family: "Armin Grotesk";
11+
src: url("ArminGrotesk-UltraBold.woff2") format("woff2");
12+
font-display: swap;
13+
font-style: normal;
14+
font-weight: 800;
15+
}
16+
17+
@font-face {
18+
font-family: "Armin Grotesk";
19+
src: url("ArminGrotesk-SemiBold.woff2") format("woff2");
20+
font-display: optional;
21+
font-style: normal;
22+
font-weight: 600;
23+
}

‎apps/ui-generator/src/layouts/Layout.astro‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,31 @@ const { title } = Astro.props;
1919
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
2020
<meta name="generator" content={Astro.generator} />
2121
<title>{title}</title>
22+
23+
<link
24+
rel="preload"
25+
href="/assets/fonts/ArminGrotesk-Regular.woff2"
26+
as="font"
27+
type="font/woff2"
28+
crossorigin="anonymous"
29+
/>
30+
<link
31+
rel="preload"
32+
href="/assets/fonts/ArminGrotesk-UltraBold.woff2"
33+
as="font"
34+
type="font/woff2"
35+
crossorigin="anonymous"
36+
/>
37+
38+
<link
39+
rel="preload"
40+
href="/assets/fonts/ArminGrotesk-SemiBold.woff2"
41+
as="font"
42+
type="font/woff2"
43+
crossorigin="anonymous"
44+
/>
45+
46+
<link rel="stylesheet" href="/assets/fonts/fonts.css" />
2247
</head>
2348
<body class="live-theme">
2449
<header>

‎apps/ui-generator/src/modules/components/components/ComponentPreview.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const {
7575
}
7676
{
7777
examples ? (
78-
<div class="nc-stack">
78+
<div class="nc-stack -contained">
7979
<SectionTitle sectionId="examples" title="Examples"></SectionTitle>
8080
{
8181
examples?.map(ex => (

‎apps/ui-generator/src/modules/store/configStore.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export type ConfigStore = {
135135
const defaultStore: ConfigStore = {
136136
// TYPOGRAPHY
137137
fontFamilyMono: 'monospace',
138-
fontFamilySans: 'system-ui, sans-serif',
138+
fontFamilySans: '"Armin Grotesk", system-ui, sans-serif',
139139
fontFamilySerif: 'serif',
140140
fontFamilyDefault: 'sans',
141141

@@ -158,7 +158,7 @@ const defaultStore: ConfigStore = {
158158
trackingStandard: 0,
159159
trackingWide: 0.06,
160160

161-
fontWeightHeading: 600,
161+
fontWeightHeading: 800,
162162
fontWeightDefault: 400,
163163
fontWeightActive: 600,
164164
fontWeightStrong: 600,
@@ -216,41 +216,41 @@ const defaultStore: ConfigStore = {
216216
// COLORS
217217

218218
// basics
219-
lightnessMax: 0.99,
219+
lightnessMax: 1,
220220
lightnessMin: 0.03,
221221
neutralChromaScale: 0.95,
222222
transparencyWeaker: 0.8,
223223

224224
primaryHue: 265,
225225
primaryLightness: 56,
226-
primaryLightnessDark: 75,
227-
primaryChroma: 0.3,
228-
secondaryHue: 215,
229-
secondaryLightness: 51,
230-
secondaryLightnessDark: 76,
231-
secondaryChroma: 0.4,
226+
primaryLightnessDark: 57,
227+
primaryChroma: 0.2515,
228+
secondaryHue: 245,
229+
secondaryLightness: 65,
230+
secondaryLightnessDark: 65,
231+
secondaryChroma: 0.208,
232232

233233
useSecondaryColorForFG: false,
234234
useSecondaryColorForBG: false,
235235
useSecondaryColorForBorders: false,
236236
lightNeutralChromaFG: 0.03,
237-
lightNeutralChromaBG: 0.03,
237+
lightNeutralChromaBG: 0.013,
238238
lightNeutralChromaBorder: 0.03,
239239
lightNeutralTextLightness: 28,
240-
lightNeutralSurfaceLightness: 99,
240+
lightNeutralSurfaceLightness: 100,
241241
lightNeutralBorderLightness: 87,
242-
lightTextLightnessScaleFactor: 1.25,
243-
lightSurfaceLightnessScaleFactor: 0.98,
242+
lightTextLightnessScaleFactor: 1.3,
243+
lightSurfaceLightnessScaleFactor: 0.975,
244244
lightBorderLightnessScaleFactor: 1.025,
245245

246-
darkNeutralChromaFG: 0.05,
246+
darkNeutralChromaFG: 0.04,
247247
darkNeutralChromaBG: 0.05,
248248
darkNeutralChromaBorder: 0.05,
249249
darkNeutralTextLightness: 88,
250250
darkNeutralSurfaceLightness: 15,
251251
darkNeutralBorderLightness: 30,
252252
darkTextLightnessScaleFactor: 0.88,
253-
darkSurfaceLightnessScaleFactor: 1.3,
253+
darkSurfaceLightnessScaleFactor: 1.25,
254254
darkBorderLightnessScaleFactor: 0.98,
255255

256256
controlHeightBase: 2.5,

‎apps/ui-generator/src/modules/typography/components/TypographyPreview.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const measures = {
3939
'--measure-small': 'max-width: var(--measure-small)',
4040
};
4141
42-
const text = 'Dies ist eine Text, der zum Beispiel als Headline funktioniert.';
42+
const text = 'Dies ist ein Text, der zum Beispiel als Headline funktioniert.';
4343
const longText =
4444
'Dies ist ein langer Text für dich Lukas. Ich hoffe, du kannst ihn lesen und er tut deinen Augen nicht weh.';
4545
---

0 commit comments

Comments
 (0)