@chan.run/theme 0.3.0 → 0.3.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.
- package/dist/index.mjs +86 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -65,6 +65,86 @@ const adminChromeSlotRecipe = defineSlotRecipe({
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
});
|
|
68
|
+
// src/recipes/alert.recipe.ts
|
|
69
|
+
const alertSlotRecipe = defineSlotRecipe({
|
|
70
|
+
slots: [
|
|
71
|
+
"title",
|
|
72
|
+
"description",
|
|
73
|
+
"root",
|
|
74
|
+
"indicator",
|
|
75
|
+
"content"
|
|
76
|
+
],
|
|
77
|
+
variants: { variant: { chan: {
|
|
78
|
+
root: {
|
|
79
|
+
maxW: "440px",
|
|
80
|
+
textAlign: "left",
|
|
81
|
+
border: "1px dashed",
|
|
82
|
+
borderColor: "chan.border",
|
|
83
|
+
borderRadius: "6px",
|
|
84
|
+
bg: "chan.bg.code",
|
|
85
|
+
color: "chan.text.faint",
|
|
86
|
+
fontFamily: "body",
|
|
87
|
+
px: "14px",
|
|
88
|
+
py: "10px"
|
|
89
|
+
},
|
|
90
|
+
title: {
|
|
91
|
+
fontSize: "9.5px",
|
|
92
|
+
fontWeight: "normal",
|
|
93
|
+
letterSpacing: "0.2em",
|
|
94
|
+
textTransform: "uppercase",
|
|
95
|
+
mb: "6px"
|
|
96
|
+
},
|
|
97
|
+
description: {
|
|
98
|
+
fontSize: "xs",
|
|
99
|
+
lineHeight: "1.5",
|
|
100
|
+
wordBreak: "break-word"
|
|
101
|
+
}
|
|
102
|
+
} } }
|
|
103
|
+
});
|
|
104
|
+
// src/recipes/badge.recipe.ts
|
|
105
|
+
const badgeRecipe = defineRecipe({
|
|
106
|
+
variants: { variant: { chan: {
|
|
107
|
+
bg: "chan.orange",
|
|
108
|
+
color: "chan.bg",
|
|
109
|
+
fontFamily: "body",
|
|
110
|
+
textTransform: "uppercase",
|
|
111
|
+
borderRadius: "3px"
|
|
112
|
+
} } },
|
|
113
|
+
compoundVariants: [{
|
|
114
|
+
variant: "chan",
|
|
115
|
+
css: {
|
|
116
|
+
fontSize: "10px",
|
|
117
|
+
letterSpacing: "0.14em",
|
|
118
|
+
px: "8px",
|
|
119
|
+
py: "3px"
|
|
120
|
+
}
|
|
121
|
+
}]
|
|
122
|
+
});
|
|
123
|
+
// src/recipes/button.recipe.ts
|
|
124
|
+
const chanButton = {
|
|
125
|
+
fontFamily: "body",
|
|
126
|
+
fontWeight: "500",
|
|
127
|
+
borderRadius: "sm"
|
|
128
|
+
};
|
|
129
|
+
const buttonRecipe = defineRecipe({ variants: { variant: {
|
|
130
|
+
chan: {
|
|
131
|
+
...chanButton,
|
|
132
|
+
bg: "chan.orange",
|
|
133
|
+
color: "chan.bg",
|
|
134
|
+
_hover: { bg: "chan.orange.glow" }
|
|
135
|
+
},
|
|
136
|
+
chanGhost: {
|
|
137
|
+
...chanButton,
|
|
138
|
+
bg: "transparent",
|
|
139
|
+
color: "chan.text.dim",
|
|
140
|
+
border: "1px solid",
|
|
141
|
+
borderColor: "chan.border",
|
|
142
|
+
_hover: {
|
|
143
|
+
color: "chan.text",
|
|
144
|
+
bg: "chan.bg.hover"
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
} } });
|
|
68
148
|
// src/recipes/codeBlock.recipe.ts
|
|
69
149
|
const codeBlockSlotRecipe = defineSlotRecipe({
|
|
70
150
|
slots: [
|
|
@@ -312,6 +392,8 @@ const emptyStateSlotRecipe = defineSlotRecipe({
|
|
|
312
392
|
md: "8xl"
|
|
313
393
|
},
|
|
314
394
|
lineHeight: "1",
|
|
395
|
+
letterSpacing: "0.12em",
|
|
396
|
+
me: "-0.12em",
|
|
315
397
|
color: "chan.orange"
|
|
316
398
|
},
|
|
317
399
|
title: {
|
|
@@ -894,13 +976,16 @@ const config = defineConfig({
|
|
|
894
976
|
},
|
|
895
977
|
recipes: {
|
|
896
978
|
lbl: lblRecipe,
|
|
897
|
-
statusDot: statusDotRecipe
|
|
979
|
+
statusDot: statusDotRecipe,
|
|
980
|
+
badge: badgeRecipe,
|
|
981
|
+
button: buttonRecipe
|
|
898
982
|
},
|
|
899
983
|
slotRecipes: {
|
|
900
984
|
splash: splashSlotRecipe,
|
|
901
985
|
panel: panelSlotRecipe,
|
|
902
986
|
dataTable: dataTableSlotRecipe,
|
|
903
987
|
adminChrome: adminChromeSlotRecipe,
|
|
988
|
+
alert: alertSlotRecipe,
|
|
904
989
|
codeBlock: codeBlockSlotRecipe,
|
|
905
990
|
dialog: dialogSlotRecipe,
|
|
906
991
|
emptyState: emptyStateSlotRecipe,
|