@artivism/tokens 0.1.1 → 0.2.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/README.md +27 -0
- package/dist/index.css +38 -43
- package/package.json +18 -9
- package/src/base.css +0 -5
- package/src/index.css +0 -91
package/README.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# @artivism/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for the Artivism Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @artivism/tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
@import "@artivism/tokens";
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Tokens
|
|
18
|
+
|
|
19
|
+
- Colors (primary, secondary, accent, neutrals)
|
|
20
|
+
- Spacing (xs, sm, md, lg, xl, 2xl, 3xl)
|
|
21
|
+
- Typography (font families, sizes, weights, line heights)
|
|
22
|
+
- Border radius
|
|
23
|
+
- Shadows
|
|
24
|
+
|
|
25
|
+
## License
|
|
26
|
+
|
|
27
|
+
MIT
|
package/dist/index.css
CHANGED
|
@@ -1,51 +1,53 @@
|
|
|
1
1
|
@theme {
|
|
2
|
-
/* Artivism Palette
|
|
3
|
-
--artivism-blackout:
|
|
4
|
-
--artivism-guerrilla:
|
|
5
|
-
--artivism-hijack:
|
|
6
|
-
--artivism-detour:
|
|
7
|
-
--artivism-spoof:
|
|
8
|
-
|
|
9
|
-
--artivism-pasteup: #666666;
|
|
2
|
+
/* Artivism Palette */
|
|
3
|
+
--artivism-blackout: #121212;
|
|
4
|
+
--artivism-guerrilla: #1c1c1c;
|
|
5
|
+
--artivism-hijack: #212121;
|
|
6
|
+
--artivism-detour: #2a2a2a;
|
|
7
|
+
--artivism-spoof: #333333;
|
|
8
|
+
--artivism-pasteup: #666666;
|
|
10
9
|
--artivism-stickerbomb: #a1a1aa;
|
|
11
|
-
--artivism-flashmob:
|
|
12
|
-
--artivism-wheatpaste:
|
|
13
|
-
|
|
14
|
-
--artivism-green: #66ff99;
|
|
10
|
+
--artivism-flashmob: #d4d4d8;
|
|
11
|
+
--artivism-wheatpaste: #ffffff;
|
|
12
|
+
--artivism-green: #66ff99;
|
|
15
13
|
--artivism-green-hover: color-mix(in oklab, var(--artivism-green), black 15%);
|
|
16
|
-
|
|
17
|
-
--artivism-alert-red: #ef4444;
|
|
14
|
+
--artivism-alert-red: #ef4444;
|
|
18
15
|
--artivism-success-green: #22c55e;
|
|
19
16
|
|
|
20
|
-
/* Semantic
|
|
21
|
-
--color-canvas:
|
|
22
|
-
--color-surface:
|
|
23
|
-
--color-surface-muted:
|
|
17
|
+
/* Semantic (per utility Tailwind) */
|
|
18
|
+
--color-canvas: var(--artivism-blackout);
|
|
19
|
+
--color-surface: var(--artivism-guerrilla);
|
|
20
|
+
--color-surface-muted: var(--artivism-hijack);
|
|
24
21
|
--color-surface-elevated: var(--artivism-spoof);
|
|
25
|
-
|
|
26
|
-
--color-accent: var(--artivism-green);
|
|
22
|
+
--color-accent: var(--artivism-green);
|
|
27
23
|
--color-accent-hover: var(--artivism-green-hover);
|
|
28
|
-
|
|
29
|
-
--color-text:
|
|
30
|
-
--color-text-muted: var(--artivism-stickerbomb);
|
|
24
|
+
--color-text: var(--artivism-wheatpaste);
|
|
25
|
+
--color-text-muted: var(--artivism-stickerbomb);
|
|
31
26
|
--color-text-tertiary: var(--artivism-pasteup);
|
|
32
|
-
|
|
33
27
|
--color-border: var(--artivism-detour);
|
|
34
|
-
|
|
35
|
-
--color-error: var(--artivism-alert-red);
|
|
28
|
+
--color-error: var(--artivism-alert-red);
|
|
36
29
|
--color-success: var(--artivism-success-green);
|
|
37
30
|
|
|
38
|
-
/*
|
|
31
|
+
/* Shadcn components (genera bg-primary, text-primary-foreground, etc.) */
|
|
32
|
+
--color-background: var(--artivism-blackout);
|
|
33
|
+
--color-foreground: var(--artivism-wheatpaste);
|
|
34
|
+
--color-card: var(--artivism-guerrilla);
|
|
35
|
+
--color-card-foreground: var(--artivism-wheatpaste);
|
|
36
|
+
--color-primary: var(--artivism-green);
|
|
37
|
+
--color-primary-foreground: var(--artivism-blackout);
|
|
38
|
+
--color-secondary: var(--artivism-hijack);
|
|
39
|
+
--color-secondary-foreground: var(--artivism-flashmob);
|
|
40
|
+
--color-muted: var(--artivism-hijack);
|
|
41
|
+
--color-muted-foreground: var(--artivism-stickerbomb);
|
|
42
|
+
--color-accent-foreground: var(--artivism-blackout);
|
|
43
|
+
--color-destructive: var(--artivism-alert-red);
|
|
44
|
+
--color-input: var(--artivism-detour);
|
|
45
|
+
--color-ring: var(--artivism-green);
|
|
46
|
+
|
|
47
|
+
/* Typography */
|
|
39
48
|
--font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
|
|
40
49
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
41
50
|
|
|
42
|
-
--text-xs: 0.75rem;
|
|
43
|
-
--text-sm: 0.875rem;
|
|
44
|
-
--text-base: 1rem;
|
|
45
|
-
--text-lg: 1.125rem;
|
|
46
|
-
--text-xl: 1.25rem;
|
|
47
|
-
--text-2xl: 1.5rem;
|
|
48
|
-
|
|
49
51
|
/* Spacing */
|
|
50
52
|
--spacing-1: 0.25rem;
|
|
51
53
|
--spacing-2: 0.5rem;
|
|
@@ -55,6 +57,7 @@
|
|
|
55
57
|
--spacing-8: 2rem;
|
|
56
58
|
|
|
57
59
|
/* Radius */
|
|
60
|
+
--radius: 0.5rem;
|
|
58
61
|
--radius-sm: 0.25rem;
|
|
59
62
|
--radius-md: 0.5rem;
|
|
60
63
|
--radius-lg: 0.75rem;
|
|
@@ -62,13 +65,11 @@
|
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
:root {
|
|
65
|
-
/* shadcn
|
|
68
|
+
/* Keep shadcn vars for non-Tailwind use */
|
|
66
69
|
--background: var(--artivism-blackout);
|
|
67
70
|
--foreground: var(--artivism-wheatpaste);
|
|
68
71
|
--card: var(--artivism-guerrilla);
|
|
69
72
|
--card-foreground: var(--artivism-wheatpaste);
|
|
70
|
-
--popover: var(--artivism-spoof);
|
|
71
|
-
--popover-foreground: var(--artivism-wheatpaste);
|
|
72
73
|
--primary: var(--artivism-green);
|
|
73
74
|
--primary-foreground: var(--artivism-blackout);
|
|
74
75
|
--secondary: var(--artivism-hijack);
|
|
@@ -83,9 +84,3 @@
|
|
|
83
84
|
--ring: var(--artivism-green);
|
|
84
85
|
--radius: 0.5rem;
|
|
85
86
|
}
|
|
86
|
-
|
|
87
|
-
/* Aggiungi anche in @theme per generare utility */
|
|
88
|
-
@theme {
|
|
89
|
-
--background: var(--artivism-blackout);
|
|
90
|
-
--foreground: var(--artivism-wheatpaste);
|
|
91
|
-
}
|
package/package.json
CHANGED
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artivism/tokens",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
"./css": "./dist/index.css",
|
|
8
|
-
"./base": "./dist/base.css"
|
|
9
|
-
},
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Design tokens for Artivism Design System",
|
|
5
|
+
"main": "dist/index.css",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
10
7
|
"files": [
|
|
11
|
-
"dist"
|
|
12
|
-
"src"
|
|
8
|
+
"dist"
|
|
13
9
|
],
|
|
14
10
|
"scripts": {
|
|
15
11
|
"build": "node build.js"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"design-tokens",
|
|
15
|
+
"css",
|
|
16
|
+
"tailwind",
|
|
17
|
+
"artivism"
|
|
18
|
+
],
|
|
19
|
+
"author": "Artivism",
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "https://github.com/artivism/design-system.git",
|
|
24
|
+
"directory": "packages/tokens"
|
|
16
25
|
}
|
|
17
26
|
}
|
package/src/base.css
DELETED
package/src/index.css
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
@theme {
|
|
2
|
-
/* Artivism Palette (named) */
|
|
3
|
-
--artivism-blackout: #121212;
|
|
4
|
-
--artivism-guerrilla: #1c1c1c;
|
|
5
|
-
--artivism-hijack: #212121;
|
|
6
|
-
--artivism-detour: #2a2a2a;
|
|
7
|
-
--artivism-spoof: #333333;
|
|
8
|
-
|
|
9
|
-
--artivism-pasteup: #666666;
|
|
10
|
-
--artivism-stickerbomb: #a1a1aa;
|
|
11
|
-
--artivism-flashmob: #d4d4d8;
|
|
12
|
-
--artivism-wheatpaste: #ffffff;
|
|
13
|
-
|
|
14
|
-
--artivism-green: #66ff99;
|
|
15
|
-
--artivism-green-hover: color-mix(in oklab, var(--artivism-green), black 15%);
|
|
16
|
-
|
|
17
|
-
--artivism-alert-red: #ef4444;
|
|
18
|
-
--artivism-success-green: #22c55e;
|
|
19
|
-
|
|
20
|
-
/* Semantic mapping */
|
|
21
|
-
--color-canvas: var(--artivism-blackout);
|
|
22
|
-
--color-surface: var(--artivism-guerrilla);
|
|
23
|
-
--color-surface-muted: var(--artivism-hijack);
|
|
24
|
-
--color-surface-elevated: var(--artivism-spoof);
|
|
25
|
-
|
|
26
|
-
--color-accent: var(--artivism-green);
|
|
27
|
-
--color-accent-hover: var(--artivism-green-hover);
|
|
28
|
-
|
|
29
|
-
--color-text: var(--artivism-wheatpaste);
|
|
30
|
-
--color-text-muted: var(--artivism-stickerbomb);
|
|
31
|
-
--color-text-tertiary: var(--artivism-pasteup);
|
|
32
|
-
|
|
33
|
-
--color-border: var(--artivism-detour);
|
|
34
|
-
|
|
35
|
-
--color-error: var(--artivism-alert-red);
|
|
36
|
-
--color-success: var(--artivism-success-green);
|
|
37
|
-
|
|
38
|
-
/* Typography (Geist) */
|
|
39
|
-
--font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
|
|
40
|
-
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
41
|
-
|
|
42
|
-
--text-xs: 0.75rem;
|
|
43
|
-
--text-sm: 0.875rem;
|
|
44
|
-
--text-base: 1rem;
|
|
45
|
-
--text-lg: 1.125rem;
|
|
46
|
-
--text-xl: 1.25rem;
|
|
47
|
-
--text-2xl: 1.5rem;
|
|
48
|
-
|
|
49
|
-
/* Spacing */
|
|
50
|
-
--spacing-1: 0.25rem;
|
|
51
|
-
--spacing-2: 0.5rem;
|
|
52
|
-
--spacing-3: 0.75rem;
|
|
53
|
-
--spacing-4: 1rem;
|
|
54
|
-
--spacing-6: 1.5rem;
|
|
55
|
-
--spacing-8: 2rem;
|
|
56
|
-
|
|
57
|
-
/* Radius */
|
|
58
|
-
--radius-sm: 0.25rem;
|
|
59
|
-
--radius-md: 0.5rem;
|
|
60
|
-
--radius-lg: 0.75rem;
|
|
61
|
-
--radius-full: 9999px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
:root {
|
|
65
|
-
/* shadcn semantic variables */
|
|
66
|
-
--background: var(--artivism-blackout);
|
|
67
|
-
--foreground: var(--artivism-wheatpaste);
|
|
68
|
-
--card: var(--artivism-guerrilla);
|
|
69
|
-
--card-foreground: var(--artivism-wheatpaste);
|
|
70
|
-
--popover: var(--artivism-spoof);
|
|
71
|
-
--popover-foreground: var(--artivism-wheatpaste);
|
|
72
|
-
--primary: var(--artivism-green);
|
|
73
|
-
--primary-foreground: var(--artivism-blackout);
|
|
74
|
-
--secondary: var(--artivism-hijack);
|
|
75
|
-
--secondary-foreground: var(--artivism-flashmob);
|
|
76
|
-
--muted: var(--artivism-hijack);
|
|
77
|
-
--muted-foreground: var(--artivism-stickerbomb);
|
|
78
|
-
--accent: var(--artivism-green);
|
|
79
|
-
--accent-foreground: var(--artivism-blackout);
|
|
80
|
-
--destructive: var(--artivism-alert-red);
|
|
81
|
-
--border: var(--artivism-detour);
|
|
82
|
-
--input: var(--artivism-detour);
|
|
83
|
-
--ring: var(--artivism-green);
|
|
84
|
-
--radius: 0.5rem;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
/* Aggiungi anche in @theme per generare utility */
|
|
88
|
-
@theme {
|
|
89
|
-
--background: var(--artivism-blackout);
|
|
90
|
-
--foreground: var(--artivism-wheatpaste);
|
|
91
|
-
}
|