@epfl-sti/poesis 0.3.6 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tokens.css +86 -0
- package/package.json +5 -3
- package/src/tokens.css +86 -0
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/* ──────────────────────────────────────────────
|
|
2
|
+
Poesis Design Tokens — Tailwind v4 Theme
|
|
3
|
+
──────────────────────────────────────────────
|
|
4
|
+
Import this file in consuming apps that use Tailwind v4
|
|
5
|
+
to get Poesis utility classes (bg-bg-primary, gap-md, etc.).
|
|
6
|
+
|
|
7
|
+
Usage in your app's CSS entry point:
|
|
8
|
+
|
|
9
|
+
@import "tailwindcss";
|
|
10
|
+
@import "@epfl-sti/poesis/tokens.css";
|
|
11
|
+
|
|
12
|
+
The actual color values for light/dark mode are injected
|
|
13
|
+
at runtime by the library JS — this file only registers
|
|
14
|
+
the token names with Tailwind's @theme so it generates
|
|
15
|
+
the corresponding utility classes.
|
|
16
|
+
────────────────────────────────────────────── */
|
|
17
|
+
|
|
18
|
+
@theme {
|
|
19
|
+
/* ── EPFL Brand Colors ── */
|
|
20
|
+
--color-epfl-red: #ff0000;
|
|
21
|
+
--color-epfl-red-dark: #b51f1f;
|
|
22
|
+
--color-epfl-leman: #00a79f;
|
|
23
|
+
--color-epfl-canard: #007480;
|
|
24
|
+
--color-epfl-canard-dark: #004248;
|
|
25
|
+
|
|
26
|
+
/* ── Primary Action Color (theme-aware) ── */
|
|
27
|
+
--color-primary: var(--action-primary);
|
|
28
|
+
--color-primary-hover: var(--action-primary-hover);
|
|
29
|
+
|
|
30
|
+
/* ── Semantic Surface & Text (resolved via custom properties) ── */
|
|
31
|
+
--color-bg-primary: var(--bg-primary);
|
|
32
|
+
--color-bg-secondary: var(--bg-secondary);
|
|
33
|
+
--color-bg-tertiary: var(--bg-tertiary);
|
|
34
|
+
--color-border: var(--border-default);
|
|
35
|
+
--color-border-strong: var(--border-strong);
|
|
36
|
+
--color-text-primary: var(--text-primary);
|
|
37
|
+
--color-text-secondary: var(--text-secondary);
|
|
38
|
+
--color-text-muted: var(--text-muted);
|
|
39
|
+
|
|
40
|
+
/* ── Semantic Status Colors ── */
|
|
41
|
+
--color-success: var(--semantic-success);
|
|
42
|
+
--color-success-bg: var(--semantic-success-bg);
|
|
43
|
+
--color-warning: var(--semantic-warning);
|
|
44
|
+
--color-warning-bg: var(--semantic-warning-bg);
|
|
45
|
+
--color-error: var(--semantic-error);
|
|
46
|
+
--color-error-bg: var(--semantic-error-bg);
|
|
47
|
+
--color-info: var(--semantic-info);
|
|
48
|
+
--color-info-bg: var(--semantic-info-bg);
|
|
49
|
+
|
|
50
|
+
/* ── Border Radius ── */
|
|
51
|
+
--radius-sm: 4px;
|
|
52
|
+
--radius-md: 8px;
|
|
53
|
+
--radius-lg: 12px;
|
|
54
|
+
--radius-full: 9999px;
|
|
55
|
+
|
|
56
|
+
/* ── Box Shadows (light defaults, overridden in .dark) ── */
|
|
57
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
58
|
+
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
59
|
+
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
60
|
+
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
61
|
+
|
|
62
|
+
/* ── Spacing ── */
|
|
63
|
+
--spacing-xs: 4px;
|
|
64
|
+
--spacing-sm: 8px;
|
|
65
|
+
--spacing-md: 16px;
|
|
66
|
+
--spacing-lg: 24px;
|
|
67
|
+
--spacing-xl: 32px;
|
|
68
|
+
--spacing-2xl: 48px;
|
|
69
|
+
|
|
70
|
+
/* ── Font Family ── */
|
|
71
|
+
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
72
|
+
|
|
73
|
+
/* ── Font Sizes ── */
|
|
74
|
+
--text-h1: 2rem;
|
|
75
|
+
--text-h1--line-height: 1.2;
|
|
76
|
+
--text-h2: 1.5rem;
|
|
77
|
+
--text-h2--line-height: 1.3;
|
|
78
|
+
--text-h3: 1.25rem;
|
|
79
|
+
--text-h3--line-height: 1.4;
|
|
80
|
+
--text-body: 0.9375rem;
|
|
81
|
+
--text-body--line-height: 1.5;
|
|
82
|
+
--text-small: 0.8125rem;
|
|
83
|
+
--text-small--line-height: 1.5;
|
|
84
|
+
--text-caption: 0.75rem;
|
|
85
|
+
--text-caption--line-height: 1.4;
|
|
86
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epfl-sti/poesis",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"authors": [
|
|
6
6
|
"Andrii Babarytskyi",
|
|
@@ -15,17 +15,19 @@
|
|
|
15
15
|
".": {
|
|
16
16
|
"types": "./dist/lib.d.ts",
|
|
17
17
|
"import": "./dist/poesis.js"
|
|
18
|
-
}
|
|
18
|
+
},
|
|
19
|
+
"./tokens.css": "./dist/tokens.css"
|
|
19
20
|
},
|
|
20
21
|
"files": [
|
|
21
22
|
"dist",
|
|
23
|
+
"src/tokens.css",
|
|
22
24
|
"LICENSE",
|
|
23
25
|
"README.md"
|
|
24
26
|
],
|
|
25
27
|
"sideEffects": true,
|
|
26
28
|
"scripts": {
|
|
27
29
|
"dev": "vite",
|
|
28
|
-
"build": "vite build && tsc -p tsconfig.lib.json",
|
|
30
|
+
"build": "vite build && tsc -p tsconfig.lib.json && cp src/tokens.css dist/tokens.css",
|
|
29
31
|
"format": "prettier --write .",
|
|
30
32
|
"format:check": "prettier --check .",
|
|
31
33
|
"lint": "eslint .",
|
package/src/tokens.css
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/* ──────────────────────────────────────────────
|
|
2
|
+
Poesis Design Tokens — Tailwind v4 Theme
|
|
3
|
+
──────────────────────────────────────────────
|
|
4
|
+
Import this file in consuming apps that use Tailwind v4
|
|
5
|
+
to get Poesis utility classes (bg-bg-primary, gap-md, etc.).
|
|
6
|
+
|
|
7
|
+
Usage in your app's CSS entry point:
|
|
8
|
+
|
|
9
|
+
@import "tailwindcss";
|
|
10
|
+
@import "@epfl-sti/poesis/tokens.css";
|
|
11
|
+
|
|
12
|
+
The actual color values for light/dark mode are injected
|
|
13
|
+
at runtime by the library JS — this file only registers
|
|
14
|
+
the token names with Tailwind's @theme so it generates
|
|
15
|
+
the corresponding utility classes.
|
|
16
|
+
────────────────────────────────────────────── */
|
|
17
|
+
|
|
18
|
+
@theme {
|
|
19
|
+
/* ── EPFL Brand Colors ── */
|
|
20
|
+
--color-epfl-red: #ff0000;
|
|
21
|
+
--color-epfl-red-dark: #b51f1f;
|
|
22
|
+
--color-epfl-leman: #00a79f;
|
|
23
|
+
--color-epfl-canard: #007480;
|
|
24
|
+
--color-epfl-canard-dark: #004248;
|
|
25
|
+
|
|
26
|
+
/* ── Primary Action Color (theme-aware) ── */
|
|
27
|
+
--color-primary: var(--action-primary);
|
|
28
|
+
--color-primary-hover: var(--action-primary-hover);
|
|
29
|
+
|
|
30
|
+
/* ── Semantic Surface & Text (resolved via custom properties) ── */
|
|
31
|
+
--color-bg-primary: var(--bg-primary);
|
|
32
|
+
--color-bg-secondary: var(--bg-secondary);
|
|
33
|
+
--color-bg-tertiary: var(--bg-tertiary);
|
|
34
|
+
--color-border: var(--border-default);
|
|
35
|
+
--color-border-strong: var(--border-strong);
|
|
36
|
+
--color-text-primary: var(--text-primary);
|
|
37
|
+
--color-text-secondary: var(--text-secondary);
|
|
38
|
+
--color-text-muted: var(--text-muted);
|
|
39
|
+
|
|
40
|
+
/* ── Semantic Status Colors ── */
|
|
41
|
+
--color-success: var(--semantic-success);
|
|
42
|
+
--color-success-bg: var(--semantic-success-bg);
|
|
43
|
+
--color-warning: var(--semantic-warning);
|
|
44
|
+
--color-warning-bg: var(--semantic-warning-bg);
|
|
45
|
+
--color-error: var(--semantic-error);
|
|
46
|
+
--color-error-bg: var(--semantic-error-bg);
|
|
47
|
+
--color-info: var(--semantic-info);
|
|
48
|
+
--color-info-bg: var(--semantic-info-bg);
|
|
49
|
+
|
|
50
|
+
/* ── Border Radius ── */
|
|
51
|
+
--radius-sm: 4px;
|
|
52
|
+
--radius-md: 8px;
|
|
53
|
+
--radius-lg: 12px;
|
|
54
|
+
--radius-full: 9999px;
|
|
55
|
+
|
|
56
|
+
/* ── Box Shadows (light defaults, overridden in .dark) ── */
|
|
57
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
58
|
+
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
59
|
+
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
60
|
+
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
61
|
+
|
|
62
|
+
/* ── Spacing ── */
|
|
63
|
+
--spacing-xs: 4px;
|
|
64
|
+
--spacing-sm: 8px;
|
|
65
|
+
--spacing-md: 16px;
|
|
66
|
+
--spacing-lg: 24px;
|
|
67
|
+
--spacing-xl: 32px;
|
|
68
|
+
--spacing-2xl: 48px;
|
|
69
|
+
|
|
70
|
+
/* ── Font Family ── */
|
|
71
|
+
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
72
|
+
|
|
73
|
+
/* ── Font Sizes ── */
|
|
74
|
+
--text-h1: 2rem;
|
|
75
|
+
--text-h1--line-height: 1.2;
|
|
76
|
+
--text-h2: 1.5rem;
|
|
77
|
+
--text-h2--line-height: 1.3;
|
|
78
|
+
--text-h3: 1.25rem;
|
|
79
|
+
--text-h3--line-height: 1.4;
|
|
80
|
+
--text-body: 0.9375rem;
|
|
81
|
+
--text-body--line-height: 1.5;
|
|
82
|
+
--text-small: 0.8125rem;
|
|
83
|
+
--text-small--line-height: 1.5;
|
|
84
|
+
--text-caption: 0.75rem;
|
|
85
|
+
--text-caption--line-height: 1.4;
|
|
86
|
+
}
|