@artivism/tokens 0.1.0 → 0.1.2

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.
Files changed (5) hide show
  1. package/README.md +11 -0
  2. package/dist/index.css +68 -14
  3. package/package.json +8 -22
  4. package/src/base.css +5 -0
  5. package/src/index.css +91 -0
package/README.md ADDED
@@ -0,0 +1,11 @@
1
+ # @artivism/tokens
2
+
3
+ Design tokens for Artivism.
4
+
5
+ ## Installation
6
+
7
+ npm install @artivism/tokens
8
+
9
+ ## Usage
10
+
11
+ @import "@artivism/tokens/css";
package/dist/index.css CHANGED
@@ -1,18 +1,43 @@
1
1
  @theme {
2
- /* Colors - semantic roles */
3
- --color-surface: #ffffff;
4
- --color-surface-muted: #f5f5f5;
5
- --color-accent: #6366f1;
6
- --color-accent-hover: #4f46e5;
7
- --color-text: #171717;
8
- --color-text-muted: #737373;
9
- --color-border: #e5e5e5;
10
- --color-error: #ef4444;
11
- --color-success: #22c55e;
12
-
13
- /* Typography */
14
- --font-sans: system-ui, -apple-system, sans-serif;
15
- --font-mono: ui-monospace, monospace;
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;
16
41
 
17
42
  --text-xs: 0.75rem;
18
43
  --text-sm: 0.875rem;
@@ -35,3 +60,32 @@
35
60
  --radius-lg: 0.75rem;
36
61
  --radius-full: 9999px;
37
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
+ }
package/package.json CHANGED
@@ -1,31 +1,17 @@
1
1
  {
2
2
  "name": "@artivism/tokens",
3
- "version": "0.1.0",
4
- "description": "Design tokens for Artivism Design System",
5
- "main": "./dist/index.css",
3
+ "version": "0.1.2",
4
+ "type": "module",
6
5
  "exports": {
7
- ".": "./dist/index.css",
6
+ ".": "./src/index.ts",
7
+ "./css": "./dist/index.css",
8
8
  "./base": "./dist/base.css"
9
9
  },
10
10
  "files": [
11
- "dist"
11
+ "dist",
12
+ "src"
12
13
  ],
13
14
  "scripts": {
14
- "build": "mkdir -p dist && cp src/*.css dist/",
15
- "dev": "npm run build"
16
- },
17
- "keywords": [
18
- "design-system",
19
- "design-tokens",
20
- "css",
21
- "artivism"
22
- ],
23
- "author": "artivism",
24
- "license": "MIT",
25
- "repository": {
26
- "type": "git",
27
- "url": "https://github.com/artivism/design-system.git",
28
- "directory": "packages/tokens"
29
- },
30
- "homepage": "https://design.artivism.it"
15
+ "build": "node build.js"
16
+ }
31
17
  }
package/src/base.css ADDED
@@ -0,0 +1,5 @@
1
+ @layer tokens, components, utilities;
2
+
3
+ @layer tokens {
4
+ @import "./index.css";
5
+ }
package/src/index.css ADDED
@@ -0,0 +1,91 @@
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
+ }