@nebutra/tokens 0.1.1 → 0.1.3
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/CHANGELOG.md +23 -0
- package/LICENSE +21 -676
- package/README.md +41 -8
- package/brands/gsap/brand.json +133 -0
- package/brands/linear/brand.json +163 -0
- package/brands/notion/brand.json +145 -0
- package/brands/raycast/brand.json +120 -0
- package/brands/stripe/brand.json +127 -0
- package/brands/vanta/brand.json +151 -0
- package/brands/vercel/brand.json +173 -0
- package/dist/brand-package/index.d.ts +123 -0
- package/dist/brand-package/index.js +61 -0
- package/dist/brand-package/index.js.map +1 -0
- package/dist/brand-package/use-brand.d.ts +2 -0
- package/dist/brand-package/use-brand.js +12 -0
- package/dist/brand-package/use-brand.js.map +1 -0
- package/dist/chunk-ALJTP5HL.js +881 -0
- package/dist/chunk-ALJTP5HL.js.map +1 -0
- package/dist/chunk-RGUJQOLH.js +1582 -0
- package/dist/chunk-RGUJQOLH.js.map +1 -0
- package/dist/index.d.ts +81 -0
- package/dist/index.js +187 -0
- package/dist/index.js.map +1 -0
- package/dist/use-brand-C8d4DPqE.d.ts +371 -0
- package/package.json +46 -12
- package/recipe.css +435 -0
- package/skins/README.md +149 -0
- package/skins/gsap.css +159 -0
- package/skins/linear.css +198 -0
- package/skins/notion.css +158 -0
- package/skins/raycast.css +185 -0
- package/skins/stripe.css +146 -0
- package/skins/vanta.css +160 -0
- package/skins/vercel.css +202 -0
- package/styles.css +528 -169
- package/.turbo/turbo-build.log +0 -5
- package/.turbo/turbo-typecheck.log +0 -4
- package/AGENTS.md +0 -42
- package/DESIGN.md +0 -335
- package/src/index.ts +0 -37
- package/src/theme-provider.tsx +0 -244
- package/tsconfig.json +0 -11
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "stripe",
|
|
3
|
+
"name": "Stripe",
|
|
4
|
+
"darkDefault": false,
|
|
5
|
+
"version": "1.0.0",
|
|
6
|
+
"roles": {
|
|
7
|
+
"canvas": "0 0% 100%",
|
|
8
|
+
"canvasForeground": "211 78% 11%",
|
|
9
|
+
"surface": "0 0% 100%",
|
|
10
|
+
"surfaceForeground": "211 78% 11%",
|
|
11
|
+
"action": "248 98% 61%",
|
|
12
|
+
"actionForeground": "0 0% 100%",
|
|
13
|
+
"quiet": "237 100% 95%",
|
|
14
|
+
"quietForeground": "248 98% 61%",
|
|
15
|
+
"muted": "216 56% 98%",
|
|
16
|
+
"mutedForeground": "217 17% 47%",
|
|
17
|
+
"border": "210 44% 93%",
|
|
18
|
+
"input": "0 0% 100%",
|
|
19
|
+
"ring": "248 98% 61%",
|
|
20
|
+
"destructive": "0 72% 51%",
|
|
21
|
+
"destructiveForeground": "0 0% 100%",
|
|
22
|
+
"brand": "211 78% 11%",
|
|
23
|
+
"brandForeground": "0 0% 100%",
|
|
24
|
+
"info": "231 100% 73%",
|
|
25
|
+
"infoForeground": "211 78% 11%"
|
|
26
|
+
},
|
|
27
|
+
"semantic": {
|
|
28
|
+
"background": "0 0% 100%",
|
|
29
|
+
"foreground": "211 78% 11%",
|
|
30
|
+
"card": "0 0% 100%",
|
|
31
|
+
"cardForeground": "211 78% 11%",
|
|
32
|
+
"popover": "0 0% 100%",
|
|
33
|
+
"popoverForeground": "211 78% 11%",
|
|
34
|
+
"primary": "248 98% 61%",
|
|
35
|
+
"primaryForeground": "0 0% 100%",
|
|
36
|
+
"secondary": "237 100% 95%",
|
|
37
|
+
"secondaryForeground": "248 98% 61%",
|
|
38
|
+
"muted": "216 56% 98%",
|
|
39
|
+
"mutedForeground": "217 17% 47%",
|
|
40
|
+
"accent": "211 78% 11%",
|
|
41
|
+
"accentForeground": "0 0% 100%",
|
|
42
|
+
"destructive": "0 72% 51%",
|
|
43
|
+
"destructiveForeground": "0 0% 100%",
|
|
44
|
+
"border": "210 44% 93%",
|
|
45
|
+
"input": "0 0% 100%",
|
|
46
|
+
"ring": "248 98% 61%",
|
|
47
|
+
"info": "231 100% 73%",
|
|
48
|
+
"infoForeground": "211 78% 11%"
|
|
49
|
+
},
|
|
50
|
+
"recipe": {
|
|
51
|
+
"buttonDefault": "solid",
|
|
52
|
+
"density": "comfortable",
|
|
53
|
+
"badgeDefault": "muted",
|
|
54
|
+
"radii": {
|
|
55
|
+
"button": "4px",
|
|
56
|
+
"card": "4px",
|
|
57
|
+
"badge": "9999px",
|
|
58
|
+
"input": "4px",
|
|
59
|
+
"pill": "9999px"
|
|
60
|
+
},
|
|
61
|
+
"elevationTokens": {
|
|
62
|
+
"card": "0 0 #0000",
|
|
63
|
+
"control": "0 0 #0000",
|
|
64
|
+
"raised": "0 0 #0000"
|
|
65
|
+
},
|
|
66
|
+
"outlineBorder": "#b9b9f9"
|
|
67
|
+
},
|
|
68
|
+
"typography": {
|
|
69
|
+
"fontSans": "'sohne-var', 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
70
|
+
"fontDisplay": "'sohne-var', 'Inter Tight', ui-sans-serif, system-ui, sans-serif",
|
|
71
|
+
"headingWeight": 300,
|
|
72
|
+
"faces": [
|
|
73
|
+
{
|
|
74
|
+
"family": "sohne-var",
|
|
75
|
+
"src": [
|
|
76
|
+
{
|
|
77
|
+
"url": "/brand-assets/sohne-var.woff2",
|
|
78
|
+
"format": "woff2"
|
|
79
|
+
}
|
|
80
|
+
],
|
|
81
|
+
"weight": "300 400",
|
|
82
|
+
"display": "swap"
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
},
|
|
86
|
+
"motion": {
|
|
87
|
+
"easeOut": "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
|
88
|
+
"easeInOut": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
|
89
|
+
"micro": 100,
|
|
90
|
+
"flow": 180,
|
|
91
|
+
"reveal": 260,
|
|
92
|
+
"cinematic": 400
|
|
93
|
+
},
|
|
94
|
+
"spacing": {
|
|
95
|
+
"xs": "0.5rem",
|
|
96
|
+
"sm": "0.75rem",
|
|
97
|
+
"md": "1.125rem",
|
|
98
|
+
"lg": "1.75rem",
|
|
99
|
+
"xl": "2.25rem",
|
|
100
|
+
"2xl": "3.25rem"
|
|
101
|
+
},
|
|
102
|
+
"extensions": {
|
|
103
|
+
"categories": {
|
|
104
|
+
"brand": "#061b31",
|
|
105
|
+
"action": "#533afd",
|
|
106
|
+
"link": "#533afd",
|
|
107
|
+
"hover": "#7389ff",
|
|
108
|
+
"ghostBorder": "#b9b9f9",
|
|
109
|
+
"wash": "#e8e9ff",
|
|
110
|
+
"deep": "#182659",
|
|
111
|
+
"smoke": "#839bc8",
|
|
112
|
+
"steel": "#50617a"
|
|
113
|
+
},
|
|
114
|
+
"decorative": {
|
|
115
|
+
"section-band": "#f8fafd",
|
|
116
|
+
"frost": "#e5edf5"
|
|
117
|
+
},
|
|
118
|
+
"sourceUrl": "https://stripe.com",
|
|
119
|
+
"notes": [
|
|
120
|
+
"roles.action = Indigo Ink filled CTA; roles.brand = Midnight Ink wordmark.",
|
|
121
|
+
"Elevation none \u2014 tint ladder + 1px frost rules; never box-shadow.",
|
|
122
|
+
"Control radius 4px (not pill); tags may stay full-pill.",
|
|
123
|
+
"Typography weight 300 is the product signature (Inter Tight substitute).",
|
|
124
|
+
"Pair solid CTA with ghost outline (lavender border) as secondary."
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "vanta",
|
|
3
|
+
"name": "Vanta",
|
|
4
|
+
"darkDefault": false,
|
|
5
|
+
"version": "1.0.0",
|
|
6
|
+
"roles": {
|
|
7
|
+
"canvas": "220 23% 97%",
|
|
8
|
+
"canvasForeground": "240 17% 11%",
|
|
9
|
+
"surface": "0 0% 100%",
|
|
10
|
+
"surfaceForeground": "240 17% 11%",
|
|
11
|
+
"action": "268 95% 39%",
|
|
12
|
+
"actionForeground": "0 0% 100%",
|
|
13
|
+
"quiet": "250 100% 92%",
|
|
14
|
+
"quietForeground": "272 100% 14%",
|
|
15
|
+
"muted": "240 20% 93%",
|
|
16
|
+
"mutedForeground": "238 11% 48%",
|
|
17
|
+
"border": "240 17% 11%",
|
|
18
|
+
"input": "0 0% 100%",
|
|
19
|
+
"ring": "268 95% 39%",
|
|
20
|
+
"destructive": "0 72% 51%",
|
|
21
|
+
"destructiveForeground": "0 0% 100%",
|
|
22
|
+
"brand": "272 100% 14%",
|
|
23
|
+
"brandForeground": "0 0% 100%",
|
|
24
|
+
"warning": "44 100% 53%",
|
|
25
|
+
"warningForeground": "240 17% 11%",
|
|
26
|
+
"info": "270 63% 56%",
|
|
27
|
+
"infoForeground": "0 0% 100%"
|
|
28
|
+
},
|
|
29
|
+
"semantic": {
|
|
30
|
+
"background": "220 23% 97%",
|
|
31
|
+
"foreground": "240 17% 11%",
|
|
32
|
+
"card": "0 0% 100%",
|
|
33
|
+
"cardForeground": "240 17% 11%",
|
|
34
|
+
"popover": "0 0% 100%",
|
|
35
|
+
"popoverForeground": "240 17% 11%",
|
|
36
|
+
"primary": "268 95% 39%",
|
|
37
|
+
"primaryForeground": "0 0% 100%",
|
|
38
|
+
"secondary": "250 100% 92%",
|
|
39
|
+
"secondaryForeground": "272 100% 14%",
|
|
40
|
+
"muted": "240 20% 93%",
|
|
41
|
+
"mutedForeground": "238 11% 48%",
|
|
42
|
+
"accent": "272 100% 14%",
|
|
43
|
+
"accentForeground": "0 0% 100%",
|
|
44
|
+
"destructive": "0 72% 51%",
|
|
45
|
+
"destructiveForeground": "0 0% 100%",
|
|
46
|
+
"border": "240 17% 11%",
|
|
47
|
+
"input": "0 0% 100%",
|
|
48
|
+
"ring": "268 95% 39%",
|
|
49
|
+
"warning": "44 100% 53%",
|
|
50
|
+
"warningForeground": "240 17% 11%",
|
|
51
|
+
"info": "270 63% 56%",
|
|
52
|
+
"infoForeground": "0 0% 100%"
|
|
53
|
+
},
|
|
54
|
+
"recipe": {
|
|
55
|
+
"buttonDefault": "solid",
|
|
56
|
+
"density": "comfortable",
|
|
57
|
+
"badgeDefault": "muted",
|
|
58
|
+
"radii": {
|
|
59
|
+
"button": "999px",
|
|
60
|
+
"card": "16px",
|
|
61
|
+
"badge": "999px",
|
|
62
|
+
"input": "999px",
|
|
63
|
+
"pill": "9999px"
|
|
64
|
+
},
|
|
65
|
+
"elevationTokens": {
|
|
66
|
+
"card": "0 0 #0000",
|
|
67
|
+
"control": "0 0 #0000",
|
|
68
|
+
"raised": "0 0 #0000"
|
|
69
|
+
},
|
|
70
|
+
"outlineBorder": "#181822"
|
|
71
|
+
},
|
|
72
|
+
"typography": {
|
|
73
|
+
"fontSans": "'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif",
|
|
74
|
+
"fontDisplay": "'Reckless', 'Source Serif 4', 'Lora', ui-serif, Georgia, serif",
|
|
75
|
+
"headingWeight": 500,
|
|
76
|
+
"faces": [
|
|
77
|
+
{
|
|
78
|
+
"family": "Inter Variable",
|
|
79
|
+
"src": [
|
|
80
|
+
{
|
|
81
|
+
"url": "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2",
|
|
82
|
+
"format": "woff2"
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"weight": "100 900",
|
|
86
|
+
"display": "swap"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"family": "Reckless",
|
|
90
|
+
"src": [
|
|
91
|
+
{
|
|
92
|
+
"url": "/brand-assets/reckless-regular.woff2",
|
|
93
|
+
"format": "woff2"
|
|
94
|
+
}
|
|
95
|
+
],
|
|
96
|
+
"weight": 400,
|
|
97
|
+
"display": "swap"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"family": "Reckless",
|
|
101
|
+
"src": [
|
|
102
|
+
{
|
|
103
|
+
"url": "/brand-assets/reckless-medium.woff2",
|
|
104
|
+
"format": "woff2"
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
"weight": 500,
|
|
108
|
+
"display": "swap"
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
"motion": {
|
|
113
|
+
"easeOut": "cubic-bezier(0.33, 1, 0.68, 1)",
|
|
114
|
+
"easeInOut": "cubic-bezier(0.37, 0, 0.63, 1)",
|
|
115
|
+
"micro": 120,
|
|
116
|
+
"flow": 240,
|
|
117
|
+
"reveal": 380,
|
|
118
|
+
"cinematic": 620
|
|
119
|
+
},
|
|
120
|
+
"spacing": {
|
|
121
|
+
"xs": "0.75rem",
|
|
122
|
+
"sm": "1.125rem",
|
|
123
|
+
"md": "1.75rem",
|
|
124
|
+
"lg": "2.5rem",
|
|
125
|
+
"xl": "3.5rem",
|
|
126
|
+
"2xl": "5rem"
|
|
127
|
+
},
|
|
128
|
+
"extensions": {
|
|
129
|
+
"categories": {
|
|
130
|
+
"brand": "#260048",
|
|
131
|
+
"action": "#5e05c4",
|
|
132
|
+
"link": "#8f47d5",
|
|
133
|
+
"heroWash": "#ddd6ff",
|
|
134
|
+
"warning": "#ffbe0f",
|
|
135
|
+
"steel": "#9e9fb7",
|
|
136
|
+
"ash": "#dfdfe9"
|
|
137
|
+
},
|
|
138
|
+
"decorative": {
|
|
139
|
+
"hero-wash": "#ddd6ff"
|
|
140
|
+
},
|
|
141
|
+
"sourceUrl": "https://www.vanta.com",
|
|
142
|
+
"notes": [
|
|
143
|
+
"roles.action = Vivid Violet (filled CTA only).",
|
|
144
|
+
"roles.brand = Indigo Ink (logo / wordmark / brand-mark).",
|
|
145
|
+
"Elevation none \u2014 1px carbon borders frame cards; no drop-shadow.",
|
|
146
|
+
"Full-pill controls (999px); cards 16px.",
|
|
147
|
+
"UI = Inter Variable; marketing display = Reckless serif.",
|
|
148
|
+
"Lavender wash is marketing hero surface (decorative), not product chrome fill."
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "vercel",
|
|
3
|
+
"name": "Vercel",
|
|
4
|
+
"darkDefault": false,
|
|
5
|
+
"version": "1.0.0",
|
|
6
|
+
"semantic": {
|
|
7
|
+
"background": "0 0% 98%",
|
|
8
|
+
"foreground": "0 0% 9%",
|
|
9
|
+
"card": "0 0% 100%",
|
|
10
|
+
"cardForeground": "0 0% 9%",
|
|
11
|
+
"popover": "0 0% 100%",
|
|
12
|
+
"popoverForeground": "0 0% 9%",
|
|
13
|
+
"primary": "0 0% 9%",
|
|
14
|
+
"primaryForeground": "0 0% 100%",
|
|
15
|
+
"secondary": "0 0% 92%",
|
|
16
|
+
"secondaryForeground": "0 0% 30%",
|
|
17
|
+
"muted": "0 0% 92%",
|
|
18
|
+
"mutedForeground": "0 0% 40%",
|
|
19
|
+
"accent": "0 0% 92%",
|
|
20
|
+
"accentForeground": "0 0% 30%",
|
|
21
|
+
"destructive": "0 72% 51%",
|
|
22
|
+
"destructiveForeground": "0 0% 100%",
|
|
23
|
+
"border": "0 0% 92%",
|
|
24
|
+
"input": "0 0% 100%",
|
|
25
|
+
"ring": "0 0% 9%",
|
|
26
|
+
"success": "133 50% 32%",
|
|
27
|
+
"successForeground": "0 0% 100%",
|
|
28
|
+
"info": "0 0% 30%",
|
|
29
|
+
"infoForeground": "0 0% 100%"
|
|
30
|
+
},
|
|
31
|
+
"modes": {
|
|
32
|
+
"light": {
|
|
33
|
+
"semantic": {
|
|
34
|
+
"background": "0 0% 98%",
|
|
35
|
+
"foreground": "0 0% 9%",
|
|
36
|
+
"card": "0 0% 100%",
|
|
37
|
+
"cardForeground": "0 0% 9%",
|
|
38
|
+
"popover": "0 0% 100%",
|
|
39
|
+
"popoverForeground": "0 0% 9%",
|
|
40
|
+
"primary": "0 0% 9%",
|
|
41
|
+
"primaryForeground": "0 0% 100%",
|
|
42
|
+
"secondary": "0 0% 92%",
|
|
43
|
+
"secondaryForeground": "0 0% 30%",
|
|
44
|
+
"muted": "0 0% 92%",
|
|
45
|
+
"mutedForeground": "0 0% 40%",
|
|
46
|
+
"accent": "0 0% 92%",
|
|
47
|
+
"accentForeground": "0 0% 30%",
|
|
48
|
+
"destructive": "0 72% 51%",
|
|
49
|
+
"destructiveForeground": "0 0% 100%",
|
|
50
|
+
"border": "0 0% 92%",
|
|
51
|
+
"input": "0 0% 100%",
|
|
52
|
+
"ring": "0 0% 9%",
|
|
53
|
+
"success": "133 50% 32%",
|
|
54
|
+
"successForeground": "0 0% 100%",
|
|
55
|
+
"info": "0 0% 30%",
|
|
56
|
+
"infoForeground": "0 0% 100%"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"dark": {
|
|
60
|
+
"semantic": {
|
|
61
|
+
"background": "0 0% 0%",
|
|
62
|
+
"foreground": "0 0% 93%",
|
|
63
|
+
"card": "0 0% 4%",
|
|
64
|
+
"cardForeground": "0 0% 93%",
|
|
65
|
+
"popover": "0 0% 4%",
|
|
66
|
+
"popoverForeground": "0 0% 93%",
|
|
67
|
+
"primary": "0 0% 100%",
|
|
68
|
+
"primaryForeground": "0 0% 0%",
|
|
69
|
+
"secondary": "0 0% 12%",
|
|
70
|
+
"secondaryForeground": "0 0% 93%",
|
|
71
|
+
"muted": "0 0% 12%",
|
|
72
|
+
"mutedForeground": "0 0% 63%",
|
|
73
|
+
"accent": "0 0% 12%",
|
|
74
|
+
"accentForeground": "0 0% 93%",
|
|
75
|
+
"destructive": "0 72% 51%",
|
|
76
|
+
"destructiveForeground": "0 0% 100%",
|
|
77
|
+
"border": "0 0% 16%",
|
|
78
|
+
"input": "0 0% 4%",
|
|
79
|
+
"ring": "0 0% 100%",
|
|
80
|
+
"success": "133 49% 40%",
|
|
81
|
+
"successForeground": "0 0% 100%",
|
|
82
|
+
"info": "0 0% 70%",
|
|
83
|
+
"infoForeground": "0 0% 0%"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
"recipe": {
|
|
88
|
+
"buttonDefault": "solid",
|
|
89
|
+
"density": "compact",
|
|
90
|
+
"badgeDefault": "muted",
|
|
91
|
+
"radii": {
|
|
92
|
+
"button": "6px",
|
|
93
|
+
"card": "6px",
|
|
94
|
+
"badge": "6px",
|
|
95
|
+
"input": "6px",
|
|
96
|
+
"pill": "9999px"
|
|
97
|
+
},
|
|
98
|
+
"elevationTokens": {
|
|
99
|
+
"card": "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px",
|
|
100
|
+
"control": "0 0 #0000",
|
|
101
|
+
"raised": "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px"
|
|
102
|
+
},
|
|
103
|
+
"outlineBorder": "#ebebeb"
|
|
104
|
+
},
|
|
105
|
+
"typography": {
|
|
106
|
+
"fontSans": "'Geist Sans', 'Geist', ui-sans-serif, system-ui, sans-serif",
|
|
107
|
+
"fontMono": "'Geist Mono', ui-monospace, Menlo, monospace",
|
|
108
|
+
"fontDisplay": "'Geist Sans', 'Geist', ui-sans-serif, system-ui, sans-serif",
|
|
109
|
+
"headingWeight": 450,
|
|
110
|
+
"faces": [
|
|
111
|
+
{
|
|
112
|
+
"family": "Geist Sans",
|
|
113
|
+
"src": [
|
|
114
|
+
{
|
|
115
|
+
"url": "https://cdn.jsdelivr.net/fontsource/fonts/geist-sans:vf@latest/latin-wght-normal.woff2",
|
|
116
|
+
"format": "woff2"
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"weight": "100 900",
|
|
120
|
+
"display": "swap"
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
},
|
|
124
|
+
"motion": {
|
|
125
|
+
"easeOut": "cubic-bezier(0, 0, 0.2, 1)",
|
|
126
|
+
"easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
127
|
+
"micro": 100,
|
|
128
|
+
"flow": 150,
|
|
129
|
+
"reveal": 200,
|
|
130
|
+
"cinematic": 300
|
|
131
|
+
},
|
|
132
|
+
"spacing": {
|
|
133
|
+
"xs": "0.5rem",
|
|
134
|
+
"sm": "0.75rem",
|
|
135
|
+
"md": "1rem",
|
|
136
|
+
"lg": "1.5rem",
|
|
137
|
+
"xl": "2rem",
|
|
138
|
+
"2xl": "3rem"
|
|
139
|
+
},
|
|
140
|
+
"extensions": {
|
|
141
|
+
"categories": {
|
|
142
|
+
"carbon": "#000000",
|
|
143
|
+
"terminal": "#297a3a"
|
|
144
|
+
},
|
|
145
|
+
"sourceUrl": "https://vercel.com",
|
|
146
|
+
"notes": [
|
|
147
|
+
"Dual-mode monochrome \u2014 light: Obsidian CTA; dark: white CTA on carbon.",
|
|
148
|
+
"Elevation is hairline double-ring, never drop-shadow.",
|
|
149
|
+
"Spectrum/solar gradients are marketing-only decorative (not product chrome)."
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
"roles": {
|
|
153
|
+
"canvas": "0 0% 98%",
|
|
154
|
+
"canvasForeground": "0 0% 9%",
|
|
155
|
+
"surface": "0 0% 100%",
|
|
156
|
+
"surfaceForeground": "0 0% 9%",
|
|
157
|
+
"action": "0 0% 9%",
|
|
158
|
+
"actionForeground": "0 0% 100%",
|
|
159
|
+
"quiet": "0 0% 92%",
|
|
160
|
+
"quietForeground": "0 0% 30%",
|
|
161
|
+
"muted": "0 0% 92%",
|
|
162
|
+
"mutedForeground": "0 0% 40%",
|
|
163
|
+
"border": "0 0% 92%",
|
|
164
|
+
"input": "0 0% 100%",
|
|
165
|
+
"ring": "0 0% 9%",
|
|
166
|
+
"destructive": "0 72% 51%",
|
|
167
|
+
"destructiveForeground": "0 0% 100%",
|
|
168
|
+
"success": "133 50% 32%",
|
|
169
|
+
"successForeground": "0 0% 100%",
|
|
170
|
+
"info": "0 0% 30%",
|
|
171
|
+
"infoForeground": "0 0% 100%"
|
|
172
|
+
}
|
|
173
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { C as CompileResult, d as BrandPackage, m as ButtonDefaultStyle, E as ElevationStyle, D as Density, n as BrandPackageInput, o as BrandSemanticColors, a as BrandColorRoles, b as BrandElevationTokens, p as BrandModePalette } from '../use-brand-C8d4DPqE.js';
|
|
2
|
+
export { A as ApplyBrandOptions, B as BRAND_STORAGE_KEY, q as BRAND_STYLE_ELEMENT_ID, s as BadgeDefaultStyle, t as BrandExtensions, c as BrandFontFace, v as BrandFontSource, w as BrandIframePreviewOptions, x as BrandModes, e as BrandRadii, f as BrandRecipe, y as BrandRecipeInput, z as BrandTypography, F as CssColor, H as HslChannels, U as UseBrandIframePreviewResult, G as UseBrandOptions, I as UseBrandResult, g as applyBrandCss, h as applyBrandPackage, i as applyBrandToIframe, j as clearBrand, k as getActiveBrandId, r as restorePersistedBrand, u as useBrand, l as useBrandIframePreview } from '../use-brand-C8d4DPqE.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Shared helpers for Refero → Brand Package compilation.
|
|
7
|
+
* Preset builders live in compile-refero.ts; keep color/font extraction here.
|
|
8
|
+
*/
|
|
9
|
+
type Json = Record<string, unknown>;
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Compile Refero DTCG tokens.json (+ optional DESIGN.md) into a Brand Package.
|
|
13
|
+
*
|
|
14
|
+
* Structure:
|
|
15
|
+
* compile-helpers.ts — detectPreset, color/font leaf helpers
|
|
16
|
+
* presets/* — named fixture builders (linear…notion) + generic
|
|
17
|
+
* compile-refero.ts — orchestration only
|
|
18
|
+
*
|
|
19
|
+
* Named fixtures are stress-test carriers (not mood presets). Prefer extending
|
|
20
|
+
* the generic path + DESIGN.md inference over adding one-off hacks.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Compile a Refero-style DTCG tokens.json (+ optional DESIGN.md text) into a Brand Package.
|
|
25
|
+
* Known fixtures get opinionated recipes; generic brands get solid CTAs.
|
|
26
|
+
*/
|
|
27
|
+
declare function compileReferoTokens(input: {
|
|
28
|
+
tokens: Json;
|
|
29
|
+
id?: string;
|
|
30
|
+
name?: string;
|
|
31
|
+
designMd?: string;
|
|
32
|
+
}): CompileResult;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Emit carrier CSS from a normalized Brand Package.
|
|
36
|
+
* Components bind: --primary (= action), --brand-mark, --elevation-*, --radius-*.
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
type EmitBrandCssMode =
|
|
40
|
+
/** Single-skin import / Create Center inject — also binds :root (global swap) */
|
|
41
|
+
"global"
|
|
42
|
+
/** Multi-language catalog — only activates under html[data-brand] */
|
|
43
|
+
| "scoped";
|
|
44
|
+
interface EmitBrandCssOptions {
|
|
45
|
+
/**
|
|
46
|
+
* `global` (default): `:root` + `html[data-brand]` — one import recolors the app.
|
|
47
|
+
* Single-mode dark packs also include `.dark`.
|
|
48
|
+
* Dual-mode packs (`modes.light` + `modes.dark`) emit separate light/dark color blocks.
|
|
49
|
+
* `scoped`: only `html[data-brand]` (+ `html.dark[data-brand]` when dual).
|
|
50
|
+
*/
|
|
51
|
+
mode?: EmitBrandCssMode;
|
|
52
|
+
}
|
|
53
|
+
/** Global single-skin selector list — single-mode packs only. */
|
|
54
|
+
declare function emitGlobalSkinSelector(brandId: string, darkDefault: boolean): string;
|
|
55
|
+
/** Light mode selector (dual-mode). */
|
|
56
|
+
declare function emitLightModeSelector(brandId: string, mode: EmitBrandCssMode): string;
|
|
57
|
+
/** Dark mode selector (dual-mode) — never paints light colors under .dark. */
|
|
58
|
+
declare function emitDarkModeSelector(brandId: string, mode: EmitBrandCssMode): string;
|
|
59
|
+
/**
|
|
60
|
+
* Emit a single opt-in skin CSS file from a Brand Package.
|
|
61
|
+
*/
|
|
62
|
+
declare function emitBrandCss(brand: BrandPackage, options?: EmitBrandCssOptions): string;
|
|
63
|
+
|
|
64
|
+
/** Convert #rgb / #rrggbb to HSL channel triple "H S% L%" for shadcn-style vars. */
|
|
65
|
+
declare function hexToHslChannels(hex: string): string;
|
|
66
|
+
/**
|
|
67
|
+
* Normalize any common color input to HSL channel triple "H S% L%".
|
|
68
|
+
* Accepts: #hex, "H S% L%", hsl()/hsla(), rgb()/rgba().
|
|
69
|
+
*/
|
|
70
|
+
declare function colorToHslChannels(color: string): string;
|
|
71
|
+
/** Prefer {@link colorToHslChannels}; hex-only name kept for call sites. */
|
|
72
|
+
declare function tryHexToHsl(hex: string | undefined, fallback: string): string;
|
|
73
|
+
declare function tryColorToHsl(color: string | undefined, fallback: string): string;
|
|
74
|
+
|
|
75
|
+
interface InferredRecipeHints {
|
|
76
|
+
buttonDefault?: ButtonDefaultStyle;
|
|
77
|
+
elevationPreset?: ElevationStyle;
|
|
78
|
+
density?: Density;
|
|
79
|
+
/** Free radii slots from DESIGN.md tables / free-text */
|
|
80
|
+
radii?: {
|
|
81
|
+
button?: string;
|
|
82
|
+
card?: string;
|
|
83
|
+
};
|
|
84
|
+
notes: string[];
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Infer control recipe from DESIGN.md / agent prompt text.
|
|
88
|
+
* Used for generic brands and to refine known fixtures.
|
|
89
|
+
*/
|
|
90
|
+
declare function inferRecipeFromDesignMd(designMd: string): InferredRecipeHints;
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Normalize Brand Packages into the carrier contract.
|
|
94
|
+
* Accepts legacy recipe fields and missing roles; always outputs full roles + free elev/radii.
|
|
95
|
+
*/
|
|
96
|
+
|
|
97
|
+
/** Expand elevation preset → free CSS tokens. */
|
|
98
|
+
declare function elevationPresetToTokens(preset: ElevationStyle | undefined, cardShadow?: string): BrandElevationTokens;
|
|
99
|
+
declare function rolesFromSemantic(s: BrandSemanticColors, brandMark?: {
|
|
100
|
+
brand?: string;
|
|
101
|
+
brandForeground?: string;
|
|
102
|
+
}): BrandColorRoles;
|
|
103
|
+
/** roles → shadcn semantic: primary ALWAYS tracks action (CTA), never brand mark. */
|
|
104
|
+
declare function semanticFromRoles(r: BrandColorRoles): BrandSemanticColors;
|
|
105
|
+
/** Canonicalize one mode palette → full roles + semantic. */
|
|
106
|
+
declare function normalizeModePalette(palette: BrandModePalette, categoryBrand?: string): {
|
|
107
|
+
roles: BrandColorRoles;
|
|
108
|
+
semantic: BrandSemanticColors;
|
|
109
|
+
};
|
|
110
|
+
/** Ensure package has roles + free radii/elev; strip legacy recipe aliases from output. */
|
|
111
|
+
declare function normalizeBrandPackage(brand: BrandPackage | BrandPackageInput): BrandPackage;
|
|
112
|
+
/** True when package has full dual light+dark palettes. */
|
|
113
|
+
declare function isDualModeBrand(brand: BrandPackage): boolean;
|
|
114
|
+
|
|
115
|
+
interface ValidationResult {
|
|
116
|
+
ok: boolean;
|
|
117
|
+
errors: string[];
|
|
118
|
+
warnings: string[];
|
|
119
|
+
}
|
|
120
|
+
/** Validate carrier contract before Create Center publish. */
|
|
121
|
+
declare function validateBrandPackage(brand: unknown): ValidationResult;
|
|
122
|
+
|
|
123
|
+
export { BrandColorRoles, BrandElevationTokens, BrandModePalette, BrandPackage, BrandPackageInput, BrandSemanticColors, ButtonDefaultStyle, CompileResult, Density, ElevationStyle, type EmitBrandCssMode, type EmitBrandCssOptions, type InferredRecipeHints, type ValidationResult, colorToHslChannels, compileReferoTokens, elevationPresetToTokens, emitBrandCss, emitDarkModeSelector, emitGlobalSkinSelector, emitLightModeSelector, hexToHslChannels, inferRecipeFromDesignMd, isDualModeBrand, normalizeBrandPackage, normalizeModePalette, rolesFromSemantic, semanticFromRoles, tryColorToHsl, tryHexToHsl, validateBrandPackage };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import {
|
|
2
|
+
compileReferoTokens,
|
|
3
|
+
inferRecipeFromDesignMd,
|
|
4
|
+
validateBrandPackage
|
|
5
|
+
} from "../chunk-RGUJQOLH.js";
|
|
6
|
+
import {
|
|
7
|
+
BRAND_STORAGE_KEY,
|
|
8
|
+
BRAND_STYLE_ELEMENT_ID,
|
|
9
|
+
applyBrandCss,
|
|
10
|
+
applyBrandPackage,
|
|
11
|
+
applyBrandToIframe,
|
|
12
|
+
clearBrand,
|
|
13
|
+
colorToHslChannels,
|
|
14
|
+
elevationPresetToTokens,
|
|
15
|
+
emitBrandCss,
|
|
16
|
+
emitDarkModeSelector,
|
|
17
|
+
emitGlobalSkinSelector,
|
|
18
|
+
emitLightModeSelector,
|
|
19
|
+
getActiveBrandId,
|
|
20
|
+
hexToHslChannels,
|
|
21
|
+
isDualModeBrand,
|
|
22
|
+
normalizeBrandPackage,
|
|
23
|
+
normalizeModePalette,
|
|
24
|
+
restorePersistedBrand,
|
|
25
|
+
rolesFromSemantic,
|
|
26
|
+
semanticFromRoles,
|
|
27
|
+
tryColorToHsl,
|
|
28
|
+
tryHexToHsl,
|
|
29
|
+
useBrand,
|
|
30
|
+
useBrandIframePreview
|
|
31
|
+
} from "../chunk-ALJTP5HL.js";
|
|
32
|
+
export {
|
|
33
|
+
BRAND_STORAGE_KEY,
|
|
34
|
+
BRAND_STYLE_ELEMENT_ID,
|
|
35
|
+
applyBrandCss,
|
|
36
|
+
applyBrandPackage,
|
|
37
|
+
applyBrandToIframe,
|
|
38
|
+
clearBrand,
|
|
39
|
+
colorToHslChannels,
|
|
40
|
+
compileReferoTokens,
|
|
41
|
+
elevationPresetToTokens,
|
|
42
|
+
emitBrandCss,
|
|
43
|
+
emitDarkModeSelector,
|
|
44
|
+
emitGlobalSkinSelector,
|
|
45
|
+
emitLightModeSelector,
|
|
46
|
+
getActiveBrandId,
|
|
47
|
+
hexToHslChannels,
|
|
48
|
+
inferRecipeFromDesignMd,
|
|
49
|
+
isDualModeBrand,
|
|
50
|
+
normalizeBrandPackage,
|
|
51
|
+
normalizeModePalette,
|
|
52
|
+
restorePersistedBrand,
|
|
53
|
+
rolesFromSemantic,
|
|
54
|
+
semanticFromRoles,
|
|
55
|
+
tryColorToHsl,
|
|
56
|
+
tryHexToHsl,
|
|
57
|
+
useBrand,
|
|
58
|
+
useBrandIframePreview,
|
|
59
|
+
validateBrandPackage
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|