Kom i gang
Kom i gang med NTNUs designsystem
Ta i bruk designsystemet
I utgangspunktet bruker vi Tailwindcss for å bygge stiler, så i et npm-prosjekt installer avhengighetene.
npm i -D tailwindcss @tailwindcss/cli @tailwindcss/typography daisyui@latestinstalling...Done!Opprett en tom tailwind config.
touch tailwind.config.jsI CSS-fila til prosjektet setter du opp tailwind med plugins og themes.
1@import "tailwindcss" source(none);
2@plugin "@tailwindcss/typography";
3
4@plugin "daisyui" {
5 themes: false;
6 root: ":root";
7}
8
9@plugin "daisyui/theme" {
10 name: "dark";
11 default: false;
12 prefersdark: true;
13 color-scheme: "dark";
14 --color-base-100: #1e1e2e;
15 --color-base-200: #1a1b26;
16 --color-base-300: #11111b;
17 --color-base-content: #cdd6f4;
18 --color-primary: #89b4fa;
19 --color-primary-content: oklch(0% 0 0);
20 --color-secondary: #fab387;
21 --color-secondary-content: oklch(0% 0 0);
22 --color-accent: #6bd7ca;
23 --color-accent-content: oklch(0% 0 0);
24 --color-neutral: #313244;
25 --color-neutral-content: oklch(100% 0 0);
26 --color-info: #74a8fc;
27 --color-info-content: oklch(0% 0 0);
28 --color-success: #89d88b;
29 --color-success-content: oklch(0% 0 0);
30 --color-warning: #ebd391;
31 --color-warning-content: oklch(0% 0 0);
32 --color-error: #f37799;
33 --color-error-content: oklch(0% 0 0);
34 --radius-selector: 2rem;
35 --radius-field: 0.25rem;
36 --radius-box: 0rem;
37 --size-selector: 0.25rem;
38 --size-field: 0.25rem;
39 --border: 1px;
40 --depth: 1;
41 --noise: 0;
42}
43
44@plugin "daisyui/theme" {
45 name: "light";
46 default: true;
47 prefersdark: false;
48 color-scheme: "light";
49 --color-base-100: oklch(100% 0 0);
50 --color-base-200: oklch(98% 0 0);
51 --color-base-300: oklch(96% 0.001 286.375);
52 --color-base-content: oklch(0% 0 0);
53 --color-primary: #00509e;
54 --color-primary-content: oklch(100% 0 0);
55 --color-secondary: #e5edff;
56 --color-secondary-content: oklch(0% 0 0);
57 --color-accent: #b01b81;
58 --color-accent-content: oklch(100% 0 0);
59 --color-neutral: oklch(27% 0.006 286.033);
60 --color-neutral-content: oklch(100% 0 0);
61 --color-info: #482776;
62 --color-info-content: oklch(100% 0 0);
63 --color-success: oklch(53% 0.157 131.589);
64 --color-success-content: oklch(100% 0 0);
65 --color-warning: #ffd200;
66 --color-warning-content: oklch(0% 0 0);
67 --color-error: oklch(50% 0.213 27.518);
68 --color-error-content: oklch(100% 0 0);
69 --radius-selector: 2rem;
70 --radius-field: 0.25rem;
71 --radius-box: 0rem;
72 --size-selector: 0.25rem;
73 --size-field: 0.25rem;
74 --border: 1px;
75 --depth: 1;
76 --noise: 0;
77}
78
79@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
Konfigurer font
@theme {
--font-title: "Inter", "Open Sans", sans-serif;
--font-sans:
"Inter", "Open Sans", ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Vazirmatn, Arial,
Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
--font-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
Vazirmatn, Courier New, monospace;
}
html {
font-feature-settings: "cv05" 1; /* Enable lowercase l with tail */
}
Inkluder CSS i <head>
<link
rel="stylesheet"
href="https://altinncdn.no/fonts/inter/v4.1/inter.css"
integrity="sha384-OcHzc/By/OPw9uJREawUCjP2inbOGKtKb4A/I2iXxmknUfog2H8Adx71tWVZRscD"
crossorigin="anonymous"
/>