@bcc-code/design-tokens 2.0.17 → 3.0.1

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 (21) hide show
  1. package/README.md +21 -71
  2. package/build/bcc/dark.css +513 -0
  3. package/build/bcc/dark.js +803 -0
  4. package/build/bcc/light.css +511 -0
  5. package/build/bcc/light.js +799 -0
  6. package/build/bcc/primitives.js +258 -0
  7. package/build/bcc/tailwind-dark.css +539 -0
  8. package/build/bcc/tailwind-light.css +537 -0
  9. package/config/primevue.config.d.ts +5 -0
  10. package/config/primevue.config.js +121 -0
  11. package/package.json +15 -30
  12. package/build/bcc/cdn/dark.css +0 -165
  13. package/build/bcc/cdn/light.css +0 -515
  14. package/build/bcc/cdn/variables.css +0 -682
  15. package/build/bcc/primevue/index.d.ts +0 -35
  16. package/build/bcc/primevue/index.js +0 -7
  17. package/build/bcc/primevue/override.js +0 -210
  18. package/build/bcc/tailwind/dark.css +0 -165
  19. package/build/bcc/tailwind/index.css +0 -10
  20. package/build/bcc/tailwind/light.css +0 -516
  21. package/build/bcc/tailwind/utilities.css +0 -33
package/package.json CHANGED
@@ -1,30 +1,28 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "2.0.17",
4
- "description": "Design tokens with CSS variables, Tailwind v4, and framework presets.",
3
+ "version": "3.0.1",
4
+ "description": "Design tokens build system",
5
5
  "type": "module",
6
- "main": "build/bcc/cdn/variables.css",
7
6
  "exports": {
8
- "./bcc/cdn": "./build/bcc/cdn/variables.css",
9
- "./bcc/cdn/light": "./build/bcc/cdn/light.css",
10
- "./bcc/cdn/dark": "./build/bcc/cdn/dark.css",
11
- "./bcc/tailwind": "./build/bcc/tailwind/index.css",
12
- "./bcc/tailwind/light": "./build/bcc/tailwind/light.css",
13
- "./bcc/tailwind/dark": "./build/bcc/tailwind/dark.css",
14
- "./bcc/tailwind/utilities": "./build/bcc/tailwind/utilities.css",
15
- "./bcc/primevue": {
16
- "types": "./build/bcc/primevue/index.d.ts",
17
- "default": "./build/bcc/primevue/index.js"
18
- }
7
+ "./css/light": "./build/bcc/light.css",
8
+ "./css/dark": "./build/bcc/dark.css",
9
+ "./tailwind/light": "./build/bcc/tailwind-light.css",
10
+ "./tailwind/dark": "./build/bcc/tailwind-dark.css",
11
+ "./primevue": {
12
+ "import": "./config/primevue.config.js",
13
+ "types": "./config/primevue.config.d.ts"
14
+ },
15
+ "./package.json": "./package.json"
19
16
  },
20
17
  "files": [
21
18
  "build/**/*",
19
+ "config/primevue.config.js",
20
+ "config/primevue.config.d.ts",
22
21
  "README.md",
23
22
  "package.json"
24
23
  ],
25
24
  "scripts": {
26
- "build": "node build.js",
27
- "prepublishOnly": "npm run build"
25
+ "build": "node export-tokens/build.js"
28
26
  },
29
27
  "author": "BCC Code",
30
28
  "license": "MIT",
@@ -38,19 +36,6 @@
38
36
  "style-dictionary": "^5.0.0"
39
37
  },
40
38
  "peerDependencies": {
41
- "@primeuix/themes": "^1.0.0",
42
- "primevue": "^4.0.0",
43
- "tailwindcss": "^4.0.0"
44
- },
45
- "peerDependenciesMeta": {
46
- "@primevue/themes": {
47
- "optional": true
48
- },
49
- "primevue": {
50
- "optional": true
51
- },
52
- "tailwindcss": {
53
- "optional": true
54
- }
39
+ "@primeuix/themes": "^1.1.1"
55
40
  }
56
41
  }
package/build/bcc/cdn/dark.css DELETED
@@ -1,165 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- @media (prefers-color-scheme: dark) {
6
- :root {
7
-
8
- /* COLOR: TEXT */
9
- --color-text-default: var(--color-dark-neutral-1100);
10
- --color-text-subtle: var(--color-dark-neutral-600);
11
- --color-text-subtler: var(--color-dark-neutral-400);
12
- --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
13
- --color-text-selected: var(--color-bcc-400);
14
- --color-text-inverse: var(--color-dark-neutral-0);
15
- --color-text-brand: var(--color-bcc-400);
16
- --color-text-success: var(--color-green-500);
17
- --color-text-warning: var(--color-red-500);
18
- --color-text-information: var(--color-neutral-0);
19
- --color-text-danger: var(--color-neutral-0);
20
- --color-text-accent-orange-default: var(--color-orange-400);
21
- --color-text-accent-orange-bold: var(--color-orange-300);
22
- --color-text-accent-yellow-default: var(--color-red-400);
23
- --color-text-accent-yellow-bold: var(--color-red-300);
24
- --color-text-accent-green-default: var(--color-green-400);
25
- --color-text-accent-green-bold: var(--color-green-300);
26
- --color-text-accent-teal-default: var(--color-teal-400);
27
- --color-text-accent-teal-bold: var(--color-teal-300);
28
- --color-text-accent-brown-default: var(--color-brown-400);
29
- --color-text-accent-brown-bold: var(--color-brown-300);
30
- --color-text-accent-blue-default: var(--color-blue-400);
31
- --color-text-accent-blue-bold: var(--color-blue-300);
32
- --color-text-accent-purple-default: var(--color-purple-400);
33
- --color-text-accent-purple-bold: var(--color-purple-300);
34
- --color-text-accent-magenta-default: var(--color-magenta-400);
35
- --color-text-accent-magenta-bold: var(--color-magenta-300);
36
-
37
- /* COLOR: LINK */
38
- --color-link-default: var(--color-blue-500);
39
- --color-link-hover: var(--color-blue-400);
40
- --color-link-visited-default: var(--color-blue-200);
41
- --color-link-visited-hover: var(--color-blue-200);
42
-
43
- /* COLOR: BACKGROUND */
44
- --color-background-brand-default: var(--color-bcc-500);
45
- --color-background-brand-hover: var(--color-bcc-400);
46
- --color-background-brand-pressed: var(--color-bcc-300);
47
- --color-background-brand-subtler-default: var(--color-bcc-200);
48
- --color-background-brand-subtler-hover: var(--color-bcc-300);
49
- --color-background-brand-subtler-pressed: var(--color-bcc-400);
50
- --color-background-brand-subtle-default: var(--color-bcc-400);
51
- --color-background-brand-subtle-hover: var(--color-bcc-500);
52
- --color-background-brand-subtle-pressed: var(--color-bcc-500);
53
- --color-background-brand-bold-default: var(--color-bcc-300);
54
- --color-background-brand-bold-hover: var(--color-bcc-200);
55
- --color-background-brand-bold-pressed: var(--color-bcc-1000);
56
- --color-background-accent-red-default: var(--color-red-500);
57
- --color-background-accent-red-hover: var(--color-red-400);
58
- --color-background-accent-red-pressed: var(--color-red-300);
59
- --color-background-accent-red-subtler-default: var(--color-red-200);
60
- --color-background-accent-red-subtler-hover: var(--color-red-300);
61
- --color-background-accent-red-subtler-pressed: var(--color-red-400);
62
- --color-background-accent-red-subtle-default: var(--color-red-400);
63
- --color-background-accent-red-subtle-hover: var(--color-red-500);
64
- --color-background-accent-red-subtle-pressed: var(--color-red-500);
65
- --color-background-accent-red-bold-default: var(--color-red-300);
66
- --color-background-accent-red-bold-hover: var(--color-red-400);
67
- --color-background-accent-red-bold-pressed: var(--color-red-500);
68
- --color-background-accent-orange-default: var(--color-orange-500);
69
- --color-background-accent-orange-hover: var(--color-orange-400);
70
- --color-background-accent-orange-pressed: var(--color-orange-300);
71
- --color-background-accent-orange-subtler-default: var(--color-orange-200);
72
- --color-background-accent-orange-subtler-hover: var(--color-orange-300);
73
- --color-background-accent-orange-subtler-pressed: var(--color-orange-400);
74
- --color-background-accent-orange-subtle-default: var(--color-orange-400);
75
- --color-background-accent-orange-subtle-hover: var(--color-orange-500);
76
- --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
77
- --color-background-accent-orange-bold-default: var(--color-orange-300);
78
- --color-background-accent-orange-bold-hover: var(--color-orange-400);
79
- --color-background-accent-orange-bold-pressed: var(--color-orange-500);
80
- --color-background-accent-green-default: var(--color-green-500);
81
- --color-background-accent-green-hover: var(--color-green-500);
82
- --color-background-accent-green-pressed: var(--color-green-400);
83
- --color-background-accent-green-subtler-default: var(--color-green-200);
84
- --color-background-accent-green-subtler-hover: var(--color-green-300);
85
- --color-background-accent-green-subtler-pressed: var(--color-green-400);
86
- --color-background-accent-green-subtle-default: var(--color-green-400);
87
- --color-background-accent-green-subtle-hover: var(--color-green-500);
88
- --color-background-accent-green-subtle-pressed: var(--color-green-500);
89
- --color-background-accent-green-bold-default: var(--color-green-300);
90
- --color-background-accent-green-bold-hover: var(--color-green-400);
91
- --color-background-accent-green-bold-pressed: var(--color-green-500);
92
- --color-background-accent-teal-default: var(--color-teal-500);
93
- --color-background-accent-teal-hover: var(--color-teal-400);
94
- --color-background-accent-teal-pressed: var(--color-teal-300);
95
- --color-background-accent-teal-subtler-default: var(--color-teal-200);
96
- --color-background-accent-teal-subtler-hover: var(--color-teal-300);
97
- --color-background-accent-teal-subtle-default: var(--color-teal-400);
98
- --color-background-accent-teal-bold-default: var(--color-teal-300);
99
- --color-background-accent-sand-default: var(--color-brown-500);
100
- --color-background-accent-sand-subtler-default: var(--color-brown-200);
101
- --color-background-accent-sand-subtler-hover: var(--color-brown-300);
102
- --color-background-accent-sand-subtle-default: var(--color-brown-400);
103
- --color-background-accent-sand-bold-default: var(--color-brown-300);
104
- --color-background-accent-blue-default: var(--color-blue-500);
105
- --color-background-accent-blue-subtler-default: var(--color-blue-200);
106
- --color-background-accent-blue-subtle-default: var(--color-blue-400);
107
- --color-background-accent-blue-bold-default: var(--color-blue-300);
108
- --color-background-accent-purple-default: var(--color-purple-500);
109
- --color-background-accent-purple-subtler-default: var(--color-purple-200);
110
- --color-background-accent-purple-subtle-default: var(--color-purple-400);
111
- --color-background-accent-purple-bold-default: var(--color-purple-300);
112
- --color-background-accent-magenta-default: var(--color-magenta-500);
113
- --color-background-accent-magenta-subtler-default: var(--color-magenta-200);
114
- --color-background-accent-magenta-subtle-default: var(--color-magenta-400);
115
- --color-background-accent-magenta-bold-default: var(--color-magenta-300);
116
- --color-background-neutral-default: var(--color-neutral-alpha-300-a);
117
- --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
118
- --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
119
- --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-200-a);
120
- --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-100-a);
121
- --color-background-neutral-subtle-hover: var(--color-neutral-alpha-200-a);
122
- --color-background-neutral-bold-hover: var(--color-neutral-alpha-100-a);
123
- --color-background-neutral-bold-pressed: var(--color-neutral-alpha-200-a);
124
-
125
- /* COLOR: BORDER */
126
- --color-border-default: var(--color-neutral-100);
127
- --color-border-bold: var(--color-neutral-200);
128
- --color-border-disabled: var(--color-neutral-100);
129
- --color-border-selected: var(--color-bcc-500);
130
- --color-border-accent-red: var(--color-red-500);
131
- --color-border-accent-orange: var(--color-orange-500);
132
- --color-border-accent-green: var(--color-green-500);
133
- --color-border-accent-teal: var(--color-teal-500);
134
- --color-border-accent-sand: var(--color-brown-500);
135
- --color-border-accent-blue: var(--color-blue-500);
136
- --color-border-accent-purple: var(--color-purple-500);
137
- --color-border-accent-magenta: var(--color-magenta-500);
138
-
139
- /* COLOR: ICON */
140
- --color-icon-default: var(--color-neutral-100);
141
- --color-icon-bold: var(--color-neutral-200);
142
- --color-icon-disabled: var(--color-neutral-100);
143
- --color-icon-selected: var(--color-bcc-500);
144
- --color-icon-accent-red: var(--color-red-500);
145
- --color-icon-accent-orage: var(--color-orange-500);
146
- --color-icon-accent-green: var(--color-green-500);
147
- --color-icon-accent-teal: var(--color-teal-500);
148
- --color-icon-accent-sand: var(--color-brown-500);
149
- --color-icon-accent-blue: var(--color-blue-500);
150
- --color-icon-accent-purple: var(--color-purple-500);
151
- --color-icon-accent-magenta: var(--color-magenta-500);
152
-
153
- /* COLOR: ELEVATION */
154
- --color-elevation-surface-default: var(--color-dark-neutral-100);
155
- --color-elevation-surface-hovered: var(--color-dark-neutral-200);
156
- --color-elevation-surface-pressed: var(--color-dark-neutral-300);
157
- --color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
158
- --color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
159
- --color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
160
- --color-elevation-surface-raised-default: var(--color-dark-neutral-200);
161
- --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
162
- --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
163
- --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
164
- }
165
- }