@hanzogui/demos 8.0.2 → 8.0.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/package.json +28 -28
- package/dist/cjs/BrandTokensDemo.cjs +0 -137
- package/dist/cjs/BrandTokensDemo.native.js +0 -145
- package/dist/cjs/BrandTokensDemo.native.js.map +0 -1
- package/dist/esm/BrandTokensDemo.mjs +0 -112
- package/dist/esm/BrandTokensDemo.mjs.map +0 -1
- package/dist/esm/BrandTokensDemo.native.js +0 -117
- package/dist/esm/BrandTokensDemo.native.js.map +0 -1
- package/src/BrandTokensDemo.tsx +0 -105
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzogui/demos",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.3",
|
|
4
4
|
"source": "demos/src/index.tsx",
|
|
5
5
|
"files": [
|
|
6
6
|
"src",
|
|
@@ -47,38 +47,38 @@
|
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@hanzogui/animate-presence": "8.0.0",
|
|
50
|
-
"@hanzogui/avatar": "8.0.
|
|
51
|
-
"@hanzogui/button": "8.0.
|
|
52
|
-
"@hanzogui/checkbox": "8.0.
|
|
50
|
+
"@hanzogui/avatar": "8.0.1",
|
|
51
|
+
"@hanzogui/button": "8.0.1",
|
|
52
|
+
"@hanzogui/checkbox": "8.0.1",
|
|
53
53
|
"@hanzogui/checkbox-headless": "8.0.0",
|
|
54
|
-
"@hanzogui/colors": "8.0.
|
|
55
|
-
"@hanzogui/config": "8.0.
|
|
56
|
-
"@hanzogui/context-menu": "8.0.
|
|
57
|
-
"@hanzogui/core": "8.0.
|
|
54
|
+
"@hanzogui/colors": "8.0.0",
|
|
55
|
+
"@hanzogui/config": "8.0.1",
|
|
56
|
+
"@hanzogui/context-menu": "8.0.1",
|
|
57
|
+
"@hanzogui/core": "8.0.1",
|
|
58
58
|
"@hanzogui/get-button-sized": "8.0.0",
|
|
59
|
-
"@hanzogui/image": "8.0.
|
|
60
|
-
"@hanzogui/input": "8.0.
|
|
61
|
-
"@hanzogui/linear-gradient": "8.0.
|
|
62
|
-
"@hanzogui/list-item": "8.0.
|
|
63
|
-
"@hanzogui/logo": "8.0.
|
|
64
|
-
"@hanzogui/lucide-icons-2": "8.0.
|
|
65
|
-
"@hanzogui/menu": "8.0.
|
|
66
|
-
"@hanzogui/popover": "8.0.
|
|
67
|
-
"@hanzogui/progress": "8.0.
|
|
68
|
-
"@hanzogui/radio-group": "8.0.
|
|
59
|
+
"@hanzogui/image": "8.0.1",
|
|
60
|
+
"@hanzogui/input": "8.0.1",
|
|
61
|
+
"@hanzogui/linear-gradient": "8.0.1",
|
|
62
|
+
"@hanzogui/list-item": "8.0.1",
|
|
63
|
+
"@hanzogui/logo": "8.0.2",
|
|
64
|
+
"@hanzogui/lucide-icons-2": "8.0.1",
|
|
65
|
+
"@hanzogui/menu": "8.0.1",
|
|
66
|
+
"@hanzogui/popover": "8.0.1",
|
|
67
|
+
"@hanzogui/progress": "8.0.1",
|
|
68
|
+
"@hanzogui/radio-group": "8.0.1",
|
|
69
69
|
"@hanzogui/radio-headless": "8.0.0",
|
|
70
|
-
"@hanzogui/roving-focus": "8.0.
|
|
71
|
-
"@hanzogui/select": "8.0.
|
|
72
|
-
"@hanzogui/sheet": "8.0.
|
|
73
|
-
"@hanzogui/slider": "8.0.
|
|
74
|
-
"@hanzogui/stacks": "8.0.
|
|
75
|
-
"@hanzogui/switch": "8.0.
|
|
70
|
+
"@hanzogui/roving-focus": "8.0.1",
|
|
71
|
+
"@hanzogui/select": "8.0.1",
|
|
72
|
+
"@hanzogui/sheet": "8.0.1",
|
|
73
|
+
"@hanzogui/slider": "8.0.1",
|
|
74
|
+
"@hanzogui/stacks": "8.0.1",
|
|
75
|
+
"@hanzogui/switch": "8.0.1",
|
|
76
76
|
"@hanzogui/switch-headless": "8.0.0",
|
|
77
|
-
"@hanzogui/tabs": "8.0.
|
|
78
|
-
"@hanzogui/dev-config": "8.0.
|
|
77
|
+
"@hanzogui/tabs": "8.0.1",
|
|
78
|
+
"@hanzogui/dev-config": "8.0.1",
|
|
79
79
|
"@hanzogui/theme": "8.0.0",
|
|
80
|
-
"@hanzogui/toast": "8.0.
|
|
81
|
-
"@hanzo/gui": "8.0.
|
|
80
|
+
"@hanzogui/toast": "8.0.1",
|
|
81
|
+
"@hanzo/gui": "8.0.1"
|
|
82
82
|
},
|
|
83
83
|
"devDependencies": {
|
|
84
84
|
"@hanzogui/build": "8.0.0",
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all) __defProp(target, name, {
|
|
7
|
-
get: all[name],
|
|
8
|
-
enumerable: true
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
14
|
-
get: () => from[key],
|
|
15
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
21
|
-
value: true
|
|
22
|
-
}), mod);
|
|
23
|
-
var BrandTokensDemo_exports = {};
|
|
24
|
-
__export(BrandTokensDemo_exports, {
|
|
25
|
-
BrandTokensDemo: () => BrandTokensDemo
|
|
26
|
-
});
|
|
27
|
-
module.exports = __toCommonJS(BrandTokensDemo_exports);
|
|
28
|
-
var import_hanzogui = require("hanzogui");
|
|
29
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
-
const BRANDS = ["hanzo", "lux", "zoo", "pars"];
|
|
31
|
-
const SURFACES = [["background", "$background", "#000 canvas"], ["color2", "$color2", "#0a0a0a surface"], ["color3", "$color3", "#111 raised"], ["color4", "$color4", "#171717 elevated"]];
|
|
32
|
-
function BrandTokensDemo() {
|
|
33
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Theme, {
|
|
34
|
-
name: "dark",
|
|
35
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
36
|
-
backgroundColor: "$background",
|
|
37
|
-
padding: "$6",
|
|
38
|
-
gap: "$5",
|
|
39
|
-
minHeight: 640,
|
|
40
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
41
|
-
gap: "$2",
|
|
42
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.H2, {
|
|
43
|
-
fontFamily: "$heading",
|
|
44
|
-
color: "$color12",
|
|
45
|
-
children: "Hanzo GUI \u2014 design tokens"
|
|
46
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Paragraph, {
|
|
47
|
-
color: "$color11",
|
|
48
|
-
fontFamily: "$body",
|
|
49
|
-
children: "True-black canvas \xB7 one accent per brand \xB7 Geist type system"
|
|
50
|
-
})]
|
|
51
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
52
|
-
gap: "$2",
|
|
53
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
54
|
-
color: "$color11",
|
|
55
|
-
fontFamily: "$mono",
|
|
56
|
-
fontSize: "$2",
|
|
57
|
-
children: "neutral surface ramp"
|
|
58
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.XStack, {
|
|
59
|
-
gap: "$3",
|
|
60
|
-
flexWrap: "wrap",
|
|
61
|
-
children: SURFACES.map(([name, tok, label]) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
62
|
-
backgroundColor: tok,
|
|
63
|
-
width: 160,
|
|
64
|
-
height: 96,
|
|
65
|
-
borderRadius: 12,
|
|
66
|
-
borderWidth: 1,
|
|
67
|
-
borderColor: "$borderColor",
|
|
68
|
-
padding: "$3",
|
|
69
|
-
justifyContent: "flex-end",
|
|
70
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
71
|
-
color: "$color12",
|
|
72
|
-
fontFamily: "$mono",
|
|
73
|
-
fontSize: "$3",
|
|
74
|
-
children: name
|
|
75
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
76
|
-
color: "$color10",
|
|
77
|
-
fontSize: "$2",
|
|
78
|
-
children: label
|
|
79
|
-
})]
|
|
80
|
-
}, name))
|
|
81
|
-
})]
|
|
82
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
83
|
-
gap: "$2",
|
|
84
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
85
|
-
color: "$color11",
|
|
86
|
-
fontFamily: "$mono",
|
|
87
|
-
fontSize: "$2",
|
|
88
|
-
children: "per-brand accent (applied sparingly over the shared canvas)"
|
|
89
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.XStack, {
|
|
90
|
-
gap: "$4",
|
|
91
|
-
flexWrap: "wrap",
|
|
92
|
-
children: BRANDS.map(b => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Theme, {
|
|
93
|
-
name: b,
|
|
94
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.Card, {
|
|
95
|
-
backgroundColor: "$color2",
|
|
96
|
-
borderWidth: 1,
|
|
97
|
-
borderColor: "$borderColor",
|
|
98
|
-
borderRadius: 12,
|
|
99
|
-
padding: "$4",
|
|
100
|
-
width: 210,
|
|
101
|
-
gap: "$3",
|
|
102
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.XStack, {
|
|
103
|
-
alignItems: "center",
|
|
104
|
-
gap: "$2",
|
|
105
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
|
|
106
|
-
width: 14,
|
|
107
|
-
height: 14,
|
|
108
|
-
borderRadius: 999,
|
|
109
|
-
backgroundColor: "$color9"
|
|
110
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
111
|
-
color: "$color12",
|
|
112
|
-
fontFamily: "$heading",
|
|
113
|
-
fontSize: "$5",
|
|
114
|
-
children: b
|
|
115
|
-
})]
|
|
116
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
|
|
117
|
-
height: 44,
|
|
118
|
-
borderRadius: 8,
|
|
119
|
-
backgroundColor: "$color9",
|
|
120
|
-
alignItems: "center",
|
|
121
|
-
justifyContent: "center",
|
|
122
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
123
|
-
color: "$color1",
|
|
124
|
-
fontSize: "$3",
|
|
125
|
-
fontWeight: "700",
|
|
126
|
-
children: "Primary CTA"
|
|
127
|
-
})
|
|
128
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Button, {
|
|
129
|
-
children: "Themed button"
|
|
130
|
-
})]
|
|
131
|
-
})
|
|
132
|
-
}, b))
|
|
133
|
-
})]
|
|
134
|
-
})]
|
|
135
|
-
})
|
|
136
|
-
});
|
|
137
|
-
}
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all) __defProp(target, name, {
|
|
9
|
-
get: all[name],
|
|
10
|
-
enumerable: true
|
|
11
|
-
});
|
|
12
|
-
};
|
|
13
|
-
var __copyProps = (to, from, except, desc) => {
|
|
14
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
-
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
16
|
-
get: () => from[key],
|
|
17
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
return to;
|
|
21
|
-
};
|
|
22
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
23
|
-
value: true
|
|
24
|
-
}), mod);
|
|
25
|
-
var BrandTokensDemo_exports = {};
|
|
26
|
-
__export(BrandTokensDemo_exports, {
|
|
27
|
-
BrandTokensDemo: () => BrandTokensDemo
|
|
28
|
-
});
|
|
29
|
-
module.exports = __toCommonJS(BrandTokensDemo_exports);
|
|
30
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
|
-
var import_hanzogui = require("hanzogui");
|
|
32
|
-
var BRANDS = ["hanzo", "lux", "zoo", "pars"];
|
|
33
|
-
var SURFACES = [["background", "$background", "#000 canvas"], ["color2", "$color2", "#0a0a0a surface"], ["color3", "$color3", "#111 raised"], ["color4", "$color4", "#171717 elevated"]];
|
|
34
|
-
function BrandTokensDemo() {
|
|
35
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Theme, {
|
|
36
|
-
name: "dark",
|
|
37
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
38
|
-
backgroundColor: "$background",
|
|
39
|
-
padding: "$6",
|
|
40
|
-
gap: "$5",
|
|
41
|
-
minHeight: 640,
|
|
42
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
43
|
-
gap: "$2",
|
|
44
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.H2, {
|
|
45
|
-
fontFamily: "$heading",
|
|
46
|
-
color: "$color12",
|
|
47
|
-
children: "Hanzo GUI \u2014 design tokens"
|
|
48
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Paragraph, {
|
|
49
|
-
color: "$color11",
|
|
50
|
-
fontFamily: "$body",
|
|
51
|
-
children: "True-black canvas \xB7 one accent per brand \xB7 Geist type system"
|
|
52
|
-
})]
|
|
53
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
54
|
-
gap: "$2",
|
|
55
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
56
|
-
color: "$color11",
|
|
57
|
-
fontFamily: "$mono",
|
|
58
|
-
fontSize: "$2",
|
|
59
|
-
children: "neutral surface ramp"
|
|
60
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.XStack, {
|
|
61
|
-
gap: "$3",
|
|
62
|
-
flexWrap: "wrap",
|
|
63
|
-
children: SURFACES.map(function (param) {
|
|
64
|
-
var [name, tok, label] = param;
|
|
65
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
66
|
-
backgroundColor: tok,
|
|
67
|
-
width: 160,
|
|
68
|
-
height: 96,
|
|
69
|
-
borderRadius: 12,
|
|
70
|
-
borderWidth: 1,
|
|
71
|
-
borderColor: "$borderColor",
|
|
72
|
-
padding: "$3",
|
|
73
|
-
justifyContent: "flex-end",
|
|
74
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
75
|
-
color: "$color12",
|
|
76
|
-
fontFamily: "$mono",
|
|
77
|
-
fontSize: "$3",
|
|
78
|
-
children: name
|
|
79
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
80
|
-
color: "$color10",
|
|
81
|
-
fontSize: "$2",
|
|
82
|
-
children: label
|
|
83
|
-
})]
|
|
84
|
-
}, name);
|
|
85
|
-
})
|
|
86
|
-
})]
|
|
87
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.YStack, {
|
|
88
|
-
gap: "$2",
|
|
89
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
90
|
-
color: "$color11",
|
|
91
|
-
fontFamily: "$mono",
|
|
92
|
-
fontSize: "$2",
|
|
93
|
-
children: "per-brand accent (applied sparingly over the shared canvas)"
|
|
94
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.XStack, {
|
|
95
|
-
gap: "$4",
|
|
96
|
-
flexWrap: "wrap",
|
|
97
|
-
children: BRANDS.map(function (b) {
|
|
98
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Theme, {
|
|
99
|
-
name: b,
|
|
100
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.Card, {
|
|
101
|
-
backgroundColor: "$color2",
|
|
102
|
-
borderWidth: 1,
|
|
103
|
-
borderColor: "$borderColor",
|
|
104
|
-
borderRadius: 12,
|
|
105
|
-
padding: "$4",
|
|
106
|
-
width: 210,
|
|
107
|
-
gap: "$3",
|
|
108
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_hanzogui.XStack, {
|
|
109
|
-
alignItems: "center",
|
|
110
|
-
gap: "$2",
|
|
111
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
|
|
112
|
-
width: 14,
|
|
113
|
-
height: 14,
|
|
114
|
-
borderRadius: 999,
|
|
115
|
-
backgroundColor: "$color9"
|
|
116
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
117
|
-
color: "$color12",
|
|
118
|
-
fontFamily: "$heading",
|
|
119
|
-
fontSize: "$5",
|
|
120
|
-
children: b
|
|
121
|
-
})]
|
|
122
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.YStack, {
|
|
123
|
-
height: 44,
|
|
124
|
-
borderRadius: 8,
|
|
125
|
-
backgroundColor: "$color9",
|
|
126
|
-
alignItems: "center",
|
|
127
|
-
justifyContent: "center",
|
|
128
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Text, {
|
|
129
|
-
color: "$color1",
|
|
130
|
-
fontSize: "$3",
|
|
131
|
-
fontWeight: "700",
|
|
132
|
-
children: "Primary CTA"
|
|
133
|
-
})
|
|
134
|
-
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_hanzogui.Button, {
|
|
135
|
-
children: "Themed button"
|
|
136
|
-
})]
|
|
137
|
-
})
|
|
138
|
-
}, b);
|
|
139
|
-
})
|
|
140
|
-
})]
|
|
141
|
-
})]
|
|
142
|
-
})
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
//# sourceMappingURL=BrandTokensDemo.native.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","BrandTokensDemo_exports","__export","BrandTokensDemo","module","exports","import_jsx_runtime","require","import_hanzogui","BRANDS","SURFACES","jsx","Theme","name","children","jsxs","YStack","backgroundColor","padding","gap","minHeight","H2","fontFamily","color","Paragraph","Text","fontSize","XStack","flexWrap","map","param","tok","label","width","height","borderRadius","borderWidth","borderColor","justifyContent"],"sources":["../../src/BrandTokensDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAyE,CAAAK,uBAAA;AAoBjE,IAAAK,kBAAA,GAAAC,OAAA;AAbR,IAAAC,eAAgB,GAAAD,OAAS,WAAc;AAEvC,IAAAE,MAAM,IACJ,OAAC,EACD,KAAC,EACD,KAAC,EACD,MAAC,CACH;AAEO,IAAAC,QAAS,IACd,CAGM,cACE,eAEA,aACA,CAEA,EACF,CAGE,UAEA,SACA,EAEI,iBAAC,IAEkB,QACjB,EAAO,SACP,EAAQ,aACR,CAAc,EACD,CACD,QACZ,EAAQ,SACR,EAAe,kBAEf,EAEA;AAGA,SAAAP,gBAAA;EAAA,0BAAAG,kBAAA,CAAAK,GAAA,EAAAH,eAAA,CAAAI,KAAA;IAAAC,IAfK;IAAAC,QAkBX,qBAAAR,kBAAA,CAAAS,IAAA,EAAAP,eAAA,CAAAQ,MAAA;MAAAC,eACF;MAEAC,OAAA;MACEC,GAAA;MAGAC,SAAA;MAGMN,QAAC,sBAAAR,kBAAA,CAAAS,IAAA,EAAAP,eAAA,CAAAQ,MAAA;QACCG,GAAA;QACAL,QAAA,GACA,eAAY,IAAAR,kBAAA,CAAAK,GAAA,EAAAH,eAAA,CAAAa,EAAA;UACZC,UAAc;UACdC,KAAQ;UACRT,QAAO;QACP,IAEA,mBAAAR,kBAAA,CAAAK,GAAA,EAAAH,eAAA,CAAAgB,SAAA;UAAAD,KAAA;UACED,UAAA;UAAAR,QAAC;QAAA;MACQ,IACC,eACR,IAAAR,kBAAc,CAAAS,IAAA,EAAAP,eAAA,CAAAQ,MAAA;QAAAG,GAAA,MACd;QAAgBL,QAAA,kBAClB,IAAAR,kBAAA,CAAAK,GAAA,EAAAH,eAAA,CAAAiB,IAAA;UACAF,KAAA;UAEAD,UACF;UACAI,QAAA;UAACZ,QAAA;QAAA,mBACS,IAAAR,kBAAA,CAAAK,GAAA,EAAAH,eAAA,CAAAmB,MAAA;UAAAR,GACR;UAAcS,QACd;UAAgBd,QAChB,EAAAJ,QAAW,CAAAmB,GAAA,WAAAC,KAAA;YACX,KAAAjB,IAAA,EAAAkB,GAAA,EAAeC,KAAA,IAAAF,KAAA;YAEf,0BAAAxB,kBAAA,CAAAS,IAAA,EAAAP,eAAC,CAAAQ,MAAA;cAEDC,eAAA,EAAAc,GAAA;cACFE,KAAA;cACAC,MAAA;cAAqBC,YAAA;cAAAC,WAAA;cAI7BC,WAAA;cACFnB,OAAA;cAEJoB,cAAA;cAEJxB,QAAA,G","ignoreList":[]}
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { Button, Card, H2, Paragraph, Text, Theme, XStack, YStack } from "hanzogui";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
const BRANDS = ["hanzo", "lux", "zoo", "pars"];
|
|
4
|
-
const SURFACES = [["background", "$background", "#000 canvas"], ["color2", "$color2", "#0a0a0a surface"], ["color3", "$color3", "#111 raised"], ["color4", "$color4", "#171717 elevated"]];
|
|
5
|
-
function BrandTokensDemo() {
|
|
6
|
-
return /* @__PURE__ */jsx(Theme, {
|
|
7
|
-
name: "dark",
|
|
8
|
-
children: /* @__PURE__ */jsxs(YStack, {
|
|
9
|
-
backgroundColor: "$background",
|
|
10
|
-
padding: "$6",
|
|
11
|
-
gap: "$5",
|
|
12
|
-
minHeight: 640,
|
|
13
|
-
children: [/* @__PURE__ */jsxs(YStack, {
|
|
14
|
-
gap: "$2",
|
|
15
|
-
children: [/* @__PURE__ */jsx(H2, {
|
|
16
|
-
fontFamily: "$heading",
|
|
17
|
-
color: "$color12",
|
|
18
|
-
children: "Hanzo GUI \u2014 design tokens"
|
|
19
|
-
}), /* @__PURE__ */jsx(Paragraph, {
|
|
20
|
-
color: "$color11",
|
|
21
|
-
fontFamily: "$body",
|
|
22
|
-
children: "True-black canvas \xB7 one accent per brand \xB7 Geist type system"
|
|
23
|
-
})]
|
|
24
|
-
}), /* @__PURE__ */jsxs(YStack, {
|
|
25
|
-
gap: "$2",
|
|
26
|
-
children: [/* @__PURE__ */jsx(Text, {
|
|
27
|
-
color: "$color11",
|
|
28
|
-
fontFamily: "$mono",
|
|
29
|
-
fontSize: "$2",
|
|
30
|
-
children: "neutral surface ramp"
|
|
31
|
-
}), /* @__PURE__ */jsx(XStack, {
|
|
32
|
-
gap: "$3",
|
|
33
|
-
flexWrap: "wrap",
|
|
34
|
-
children: SURFACES.map(([name, tok, label]) => /* @__PURE__ */jsxs(YStack, {
|
|
35
|
-
backgroundColor: tok,
|
|
36
|
-
width: 160,
|
|
37
|
-
height: 96,
|
|
38
|
-
borderRadius: 12,
|
|
39
|
-
borderWidth: 1,
|
|
40
|
-
borderColor: "$borderColor",
|
|
41
|
-
padding: "$3",
|
|
42
|
-
justifyContent: "flex-end",
|
|
43
|
-
children: [/* @__PURE__ */jsx(Text, {
|
|
44
|
-
color: "$color12",
|
|
45
|
-
fontFamily: "$mono",
|
|
46
|
-
fontSize: "$3",
|
|
47
|
-
children: name
|
|
48
|
-
}), /* @__PURE__ */jsx(Text, {
|
|
49
|
-
color: "$color10",
|
|
50
|
-
fontSize: "$2",
|
|
51
|
-
children: label
|
|
52
|
-
})]
|
|
53
|
-
}, name))
|
|
54
|
-
})]
|
|
55
|
-
}), /* @__PURE__ */jsxs(YStack, {
|
|
56
|
-
gap: "$2",
|
|
57
|
-
children: [/* @__PURE__ */jsx(Text, {
|
|
58
|
-
color: "$color11",
|
|
59
|
-
fontFamily: "$mono",
|
|
60
|
-
fontSize: "$2",
|
|
61
|
-
children: "per-brand accent (applied sparingly over the shared canvas)"
|
|
62
|
-
}), /* @__PURE__ */jsx(XStack, {
|
|
63
|
-
gap: "$4",
|
|
64
|
-
flexWrap: "wrap",
|
|
65
|
-
children: BRANDS.map(b => /* @__PURE__ */jsx(Theme, {
|
|
66
|
-
name: b,
|
|
67
|
-
children: /* @__PURE__ */jsxs(Card, {
|
|
68
|
-
backgroundColor: "$color2",
|
|
69
|
-
borderWidth: 1,
|
|
70
|
-
borderColor: "$borderColor",
|
|
71
|
-
borderRadius: 12,
|
|
72
|
-
padding: "$4",
|
|
73
|
-
width: 210,
|
|
74
|
-
gap: "$3",
|
|
75
|
-
children: [/* @__PURE__ */jsxs(XStack, {
|
|
76
|
-
alignItems: "center",
|
|
77
|
-
gap: "$2",
|
|
78
|
-
children: [/* @__PURE__ */jsx(YStack, {
|
|
79
|
-
width: 14,
|
|
80
|
-
height: 14,
|
|
81
|
-
borderRadius: 999,
|
|
82
|
-
backgroundColor: "$color9"
|
|
83
|
-
}), /* @__PURE__ */jsx(Text, {
|
|
84
|
-
color: "$color12",
|
|
85
|
-
fontFamily: "$heading",
|
|
86
|
-
fontSize: "$5",
|
|
87
|
-
children: b
|
|
88
|
-
})]
|
|
89
|
-
}), /* @__PURE__ */jsx(YStack, {
|
|
90
|
-
height: 44,
|
|
91
|
-
borderRadius: 8,
|
|
92
|
-
backgroundColor: "$color9",
|
|
93
|
-
alignItems: "center",
|
|
94
|
-
justifyContent: "center",
|
|
95
|
-
children: /* @__PURE__ */jsx(Text, {
|
|
96
|
-
color: "$color1",
|
|
97
|
-
fontSize: "$3",
|
|
98
|
-
fontWeight: "700",
|
|
99
|
-
children: "Primary CTA"
|
|
100
|
-
})
|
|
101
|
-
}), /* @__PURE__ */jsx(Button, {
|
|
102
|
-
children: "Themed button"
|
|
103
|
-
})]
|
|
104
|
-
})
|
|
105
|
-
}, b))
|
|
106
|
-
})]
|
|
107
|
-
})]
|
|
108
|
-
})
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
export { BrandTokensDemo };
|
|
112
|
-
//# sourceMappingURL=BrandTokensDemo.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Button","Card","H2","Paragraph","Text","Theme","XStack","YStack","jsx","jsxs","BRANDS","SURFACES","BrandTokensDemo","name","children","backgroundColor","padding","gap","minHeight","fontFamily","color","fontSize","flexWrap","map","tok","label","width","height","borderRadius","borderWidth","borderColor","justifyContent","b","alignItems","fontWeight"],"sources":["../../src/BrandTokensDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Button, Card, H2, Paragraph, Text, Theme, XStack, YStack } from "hanzogui";
|
|
3
|
-
var BRANDS = ["hanzo", "lux", "zoo", "pars"];
|
|
4
|
-
var SURFACES = [["background", "$background", "#000 canvas"], ["color2", "$color2", "#0a0a0a surface"], ["color3", "$color3", "#111 raised"], ["color4", "$color4", "#171717 elevated"]];
|
|
5
|
-
function BrandTokensDemo() {
|
|
6
|
-
return /* @__PURE__ */_jsx(Theme, {
|
|
7
|
-
name: "dark",
|
|
8
|
-
children: /* @__PURE__ */_jsxs(YStack, {
|
|
9
|
-
backgroundColor: "$background",
|
|
10
|
-
padding: "$6",
|
|
11
|
-
gap: "$5",
|
|
12
|
-
minHeight: 640,
|
|
13
|
-
children: [/* @__PURE__ */_jsxs(YStack, {
|
|
14
|
-
gap: "$2",
|
|
15
|
-
children: [/* @__PURE__ */_jsx(H2, {
|
|
16
|
-
fontFamily: "$heading",
|
|
17
|
-
color: "$color12",
|
|
18
|
-
children: "Hanzo GUI \u2014 design tokens"
|
|
19
|
-
}), /* @__PURE__ */_jsx(Paragraph, {
|
|
20
|
-
color: "$color11",
|
|
21
|
-
fontFamily: "$body",
|
|
22
|
-
children: "True-black canvas \xB7 one accent per brand \xB7 Geist type system"
|
|
23
|
-
})]
|
|
24
|
-
}), /* @__PURE__ */_jsxs(YStack, {
|
|
25
|
-
gap: "$2",
|
|
26
|
-
children: [/* @__PURE__ */_jsx(Text, {
|
|
27
|
-
color: "$color11",
|
|
28
|
-
fontFamily: "$mono",
|
|
29
|
-
fontSize: "$2",
|
|
30
|
-
children: "neutral surface ramp"
|
|
31
|
-
}), /* @__PURE__ */_jsx(XStack, {
|
|
32
|
-
gap: "$3",
|
|
33
|
-
flexWrap: "wrap",
|
|
34
|
-
children: SURFACES.map(function (param) {
|
|
35
|
-
var [name, tok, label] = param;
|
|
36
|
-
return /* @__PURE__ */_jsxs(YStack, {
|
|
37
|
-
backgroundColor: tok,
|
|
38
|
-
width: 160,
|
|
39
|
-
height: 96,
|
|
40
|
-
borderRadius: 12,
|
|
41
|
-
borderWidth: 1,
|
|
42
|
-
borderColor: "$borderColor",
|
|
43
|
-
padding: "$3",
|
|
44
|
-
justifyContent: "flex-end",
|
|
45
|
-
children: [/* @__PURE__ */_jsx(Text, {
|
|
46
|
-
color: "$color12",
|
|
47
|
-
fontFamily: "$mono",
|
|
48
|
-
fontSize: "$3",
|
|
49
|
-
children: name
|
|
50
|
-
}), /* @__PURE__ */_jsx(Text, {
|
|
51
|
-
color: "$color10",
|
|
52
|
-
fontSize: "$2",
|
|
53
|
-
children: label
|
|
54
|
-
})]
|
|
55
|
-
}, name);
|
|
56
|
-
})
|
|
57
|
-
})]
|
|
58
|
-
}), /* @__PURE__ */_jsxs(YStack, {
|
|
59
|
-
gap: "$2",
|
|
60
|
-
children: [/* @__PURE__ */_jsx(Text, {
|
|
61
|
-
color: "$color11",
|
|
62
|
-
fontFamily: "$mono",
|
|
63
|
-
fontSize: "$2",
|
|
64
|
-
children: "per-brand accent (applied sparingly over the shared canvas)"
|
|
65
|
-
}), /* @__PURE__ */_jsx(XStack, {
|
|
66
|
-
gap: "$4",
|
|
67
|
-
flexWrap: "wrap",
|
|
68
|
-
children: BRANDS.map(function (b) {
|
|
69
|
-
return /* @__PURE__ */_jsx(Theme, {
|
|
70
|
-
name: b,
|
|
71
|
-
children: /* @__PURE__ */_jsxs(Card, {
|
|
72
|
-
backgroundColor: "$color2",
|
|
73
|
-
borderWidth: 1,
|
|
74
|
-
borderColor: "$borderColor",
|
|
75
|
-
borderRadius: 12,
|
|
76
|
-
padding: "$4",
|
|
77
|
-
width: 210,
|
|
78
|
-
gap: "$3",
|
|
79
|
-
children: [/* @__PURE__ */_jsxs(XStack, {
|
|
80
|
-
alignItems: "center",
|
|
81
|
-
gap: "$2",
|
|
82
|
-
children: [/* @__PURE__ */_jsx(YStack, {
|
|
83
|
-
width: 14,
|
|
84
|
-
height: 14,
|
|
85
|
-
borderRadius: 999,
|
|
86
|
-
backgroundColor: "$color9"
|
|
87
|
-
}), /* @__PURE__ */_jsx(Text, {
|
|
88
|
-
color: "$color12",
|
|
89
|
-
fontFamily: "$heading",
|
|
90
|
-
fontSize: "$5",
|
|
91
|
-
children: b
|
|
92
|
-
})]
|
|
93
|
-
}), /* @__PURE__ */_jsx(YStack, {
|
|
94
|
-
height: 44,
|
|
95
|
-
borderRadius: 8,
|
|
96
|
-
backgroundColor: "$color9",
|
|
97
|
-
alignItems: "center",
|
|
98
|
-
justifyContent: "center",
|
|
99
|
-
children: /* @__PURE__ */_jsx(Text, {
|
|
100
|
-
color: "$color1",
|
|
101
|
-
fontSize: "$3",
|
|
102
|
-
fontWeight: "700",
|
|
103
|
-
children: "Primary CTA"
|
|
104
|
-
})
|
|
105
|
-
}), /* @__PURE__ */_jsx(Button, {
|
|
106
|
-
children: "Themed button"
|
|
107
|
-
})]
|
|
108
|
-
})
|
|
109
|
-
}, b);
|
|
110
|
-
})
|
|
111
|
-
})]
|
|
112
|
-
})]
|
|
113
|
-
})
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
export { BrandTokensDemo };
|
|
117
|
-
//# sourceMappingURL=BrandTokensDemo.native.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Button","Card","H2","Paragraph","Text","Theme","XStack","YStack","BRANDS","SURFACES","BrandTokensDemo","name","children","backgroundColor","padding","gap","minHeight","fontFamily","color","fontSize","flexWrap","map","param","tok","label","width","height","borderRadius","borderWidth","borderColor","justifyContent"],"sources":["../../src/BrandTokensDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAM,IAAIC,KAAA,QAAW,mBAAqB;AAoBnD,SACEC,MADF,EAAAC,IAAA,EAAAC,EAAA,EAAAC,SAAA,EAAAC,IAAA,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA;AAbR,IAAAC,MAAM,IAEN,OAAM,EACJ,KAAC,EACD,KAAC,EACD,MAAC,CAAkC;AAErC,IAAAC,QAAA,IAEO,CACL,YACE,EAEI,eACE,cAEA,EAGA,CAGF,UACE,WAEA,iBACA,CAEI,EAAC,SAEC,EAAiB,SACjB,EAAO,aACP,CAAQ,EACM,CACD,QACb,EAAY,SACZ,EAAQ,kBACR,CAAe,CAEf;AAEA,SAAAC,eACAA,CAAA;EAEA,sBAAAb,IAAA,CAAAQ,KAAA;IAAAM,IAAA;IAAAC,QAfK,iBAAAb,KAAA,CAAAQ,MAAA;MAgBPM,eAEJ;MAAAC,OACF;MAEAC,GAAA;MACEC,SAAA;MAGAJ,QAAA,GAGO,eAAAb,KAAA,CAAAQ,MAAA;QAAAQ,GAAA;QACCH,QAAA,GACA,eAAaf,IAAA,CAAAK,EAAA;UACbe,UAAY;UACZC,KAAA,YAAc;UACdN,QAAQ;QACR,IACA,eAAIf,IAAA,CAAAM,SAAA;UAEJe,KAAA;UAAAD,UAAA,SAAC;UACCL,QAAA;QAAA;MAAC,IACQ,eACPb,KAAQ,CAAAQ,MAAA;QAAAQ,GAAA,MACR;QAAcH,QACd,GAAgB,eAAAf,IAAA,CAAAO,IAAA;UAClBc,KAAA;UACAD,UAAA;UAEAE,QACF;UACAP,QAAA;QAAA,EAAC,iBAAAf,IAAA,CAAAS,MAAA;UAAAS,GACC;UAAQK,QACR,QAAc;UAAAR,QACd,EAAAH,QAAA,CAAgBY,GAAA,WAAAC,KAAA;YAChB,KAAAX,IAAA,EAAAY,GAAW,EAAAC,KAAA,IAAAF,KAAA;YACX,sBAAevB,KAAA,CAAAQ,MAAA;cAEfM,eAAA,EAAAU,GAAA;cAEAE,KAAA;cACFC,MAAA;cACAC,YAAA,EAAC;cAAoBC,WAAA;cAAAC,WAAA;cAI7Bf,OAAA;cACFgB,cAAA;cAEJlB,QAAA,GAEJ,eAAAf,IAAA,CAAAO,IAAA","ignoreList":[]}
|
package/src/BrandTokensDemo.tsx
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import { Button, Card, H2, Paragraph, Text, Theme, XStack, YStack } from 'hanzogui'
|
|
2
|
-
|
|
3
|
-
// Proof surface for the token layer: true-black neutral ramp, one accent per
|
|
4
|
-
// white-label brand (read straight from each brand's generated theme — the
|
|
5
|
-
// $color9 accent slot), Geist type. Open with ?demo=BrandTokens.
|
|
6
|
-
// Brand accent SoT: pkgs/core/themes/src/brands.ts.
|
|
7
|
-
|
|
8
|
-
const BRANDS = ['hanzo', 'lux', 'zoo', 'pars'] as const
|
|
9
|
-
|
|
10
|
-
const SURFACES: Array<[string, string, string]> = [
|
|
11
|
-
['background', '$background', '#000 canvas'],
|
|
12
|
-
['color2', '$color2', '#0a0a0a surface'],
|
|
13
|
-
['color3', '$color3', '#111 raised'],
|
|
14
|
-
['color4', '$color4', '#171717 elevated'],
|
|
15
|
-
]
|
|
16
|
-
|
|
17
|
-
export function BrandTokensDemo() {
|
|
18
|
-
return (
|
|
19
|
-
<Theme name="dark">
|
|
20
|
-
<YStack backgroundColor="$background" padding="$6" gap="$5" minHeight={640}>
|
|
21
|
-
<YStack gap="$2">
|
|
22
|
-
<H2 fontFamily="$heading" color="$color12">
|
|
23
|
-
Hanzo GUI — design tokens
|
|
24
|
-
</H2>
|
|
25
|
-
<Paragraph color="$color11" fontFamily="$body">
|
|
26
|
-
True-black canvas · one accent per brand · Geist type system
|
|
27
|
-
</Paragraph>
|
|
28
|
-
</YStack>
|
|
29
|
-
|
|
30
|
-
<YStack gap="$2">
|
|
31
|
-
<Text color="$color11" fontFamily="$mono" fontSize="$2">
|
|
32
|
-
neutral surface ramp
|
|
33
|
-
</Text>
|
|
34
|
-
<XStack gap="$3" flexWrap="wrap">
|
|
35
|
-
{SURFACES.map(([name, tok, label]) => (
|
|
36
|
-
<YStack
|
|
37
|
-
key={name}
|
|
38
|
-
backgroundColor={tok}
|
|
39
|
-
width={160}
|
|
40
|
-
height={96}
|
|
41
|
-
borderRadius={12}
|
|
42
|
-
borderWidth={1}
|
|
43
|
-
borderColor="$borderColor"
|
|
44
|
-
padding="$3"
|
|
45
|
-
justifyContent="flex-end"
|
|
46
|
-
>
|
|
47
|
-
<Text color="$color12" fontFamily="$mono" fontSize="$3">
|
|
48
|
-
{name}
|
|
49
|
-
</Text>
|
|
50
|
-
<Text color="$color10" fontSize="$2">
|
|
51
|
-
{label}
|
|
52
|
-
</Text>
|
|
53
|
-
</YStack>
|
|
54
|
-
))}
|
|
55
|
-
</XStack>
|
|
56
|
-
</YStack>
|
|
57
|
-
|
|
58
|
-
<YStack gap="$2">
|
|
59
|
-
<Text color="$color11" fontFamily="$mono" fontSize="$2">
|
|
60
|
-
per-brand accent (applied sparingly over the shared canvas)
|
|
61
|
-
</Text>
|
|
62
|
-
<XStack gap="$4" flexWrap="wrap">
|
|
63
|
-
{BRANDS.map((b) => (
|
|
64
|
-
<Theme key={b} name={b}>
|
|
65
|
-
<Card
|
|
66
|
-
backgroundColor="$color2"
|
|
67
|
-
borderWidth={1}
|
|
68
|
-
borderColor="$borderColor"
|
|
69
|
-
borderRadius={12}
|
|
70
|
-
padding="$4"
|
|
71
|
-
width={210}
|
|
72
|
-
gap="$3"
|
|
73
|
-
>
|
|
74
|
-
<XStack alignItems="center" gap="$2">
|
|
75
|
-
<YStack
|
|
76
|
-
width={14}
|
|
77
|
-
height={14}
|
|
78
|
-
borderRadius={999}
|
|
79
|
-
backgroundColor="$color9"
|
|
80
|
-
/>
|
|
81
|
-
<Text color="$color12" fontFamily="$heading" fontSize="$5">
|
|
82
|
-
{b}
|
|
83
|
-
</Text>
|
|
84
|
-
</XStack>
|
|
85
|
-
<YStack
|
|
86
|
-
height={44}
|
|
87
|
-
borderRadius={8}
|
|
88
|
-
backgroundColor="$color9"
|
|
89
|
-
alignItems="center"
|
|
90
|
-
justifyContent="center"
|
|
91
|
-
>
|
|
92
|
-
<Text color="$color1" fontSize="$3" fontWeight="700">
|
|
93
|
-
Primary CTA
|
|
94
|
-
</Text>
|
|
95
|
-
</YStack>
|
|
96
|
-
<Button>Themed button</Button>
|
|
97
|
-
</Card>
|
|
98
|
-
</Theme>
|
|
99
|
-
))}
|
|
100
|
-
</XStack>
|
|
101
|
-
</YStack>
|
|
102
|
-
</YStack>
|
|
103
|
-
</Theme>
|
|
104
|
-
)
|
|
105
|
-
}
|