torch-glare 2.0.0 → 2.1.0

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/apps/lib/components/Badge.tsx +294 -64
  2. package/apps/lib/components/BadgeField.tsx +2 -2
  3. package/apps/lib/components/Dialog.tsx +2 -2
  4. package/apps/lib/components/DropdownMenu.tsx +2 -19
  5. package/package.json +1 -1
package/apps/lib/components/Badge.tsx CHANGED
@@ -3,73 +3,182 @@ import { cva, VariantProps } from "class-variance-authority";
3
3
  import { cn } from "../utils/cn";
4
4
  import { Themes } from "../utils/types";
5
5
 
6
- export const badgeBase = cva(
6
+ const SOLID_TEXT =
7
+ "text-content-presentation-global-primary-light [&_i]:text-content-presentation-global-primary-light";
8
+
9
+ const solidCompoundVariants = [
10
+ {
11
+ badgeStyle: "solid" as const,
12
+ color: "gray" as const,
13
+ className: `bg-background-presentation-badge-gray-solid ${SOLID_TEXT}`,
14
+ },
15
+ {
16
+ badgeStyle: "solid" as const,
17
+ color: "slate" as const,
18
+ className: `bg-background-presentation-badge-slate-solid ${SOLID_TEXT}`,
19
+ },
20
+ {
21
+ badgeStyle: "solid" as const,
22
+ color: "red" as const,
23
+ className: `bg-background-presentation-badge-red-solid ${SOLID_TEXT}`,
24
+ },
25
+ {
26
+ badgeStyle: "solid" as const,
27
+ color: "orange" as const,
28
+ className: `bg-background-presentation-badge-orange-solid ${SOLID_TEXT}`,
29
+ },
30
+ {
31
+ badgeStyle: "solid" as const,
32
+ color: "yellow" as const,
33
+ className: `bg-background-presentation-badge-yellow-solid ${SOLID_TEXT}`,
34
+ },
35
+ {
36
+ badgeStyle: "solid" as const,
37
+ color: "green" as const,
38
+ className: `bg-background-presentation-badge-green-solid ${SOLID_TEXT}`,
39
+ },
40
+ {
41
+ badgeStyle: "solid" as const,
42
+ color: "ocean" as const,
43
+ className: `bg-background-presentation-badge-ocean-solid ${SOLID_TEXT}`,
44
+ },
45
+ {
46
+ badgeStyle: "solid" as const,
47
+ color: "blue" as const,
48
+ className: `bg-background-presentation-badge-blue-solid ${SOLID_TEXT}`,
49
+ },
50
+ {
51
+ badgeStyle: "solid" as const,
52
+ color: "purple" as const,
53
+ className: `bg-background-presentation-badge-purple-solid ${SOLID_TEXT}`,
54
+ },
55
+ {
56
+ badgeStyle: "solid" as const,
57
+ color: "rose" as const,
58
+ className: `bg-background-presentation-badge-rose-solid ${SOLID_TEXT}`,
59
+ },
60
+ ];
61
+
62
+ const SUBTLE_TEXT =
63
+ "text-content-presentation-global-subtle [&_i]:text-content-presentation-global-subtle mix-blend-luminosity";
64
+
65
+ const subtleCompoundVariants = [
66
+ {
67
+ badgeStyle: "subtle" as const,
68
+ color: "gray" as const,
69
+ className: `bg-background-presentation-badge-gray-subtle ${SUBTLE_TEXT}`,
70
+ },
71
+ {
72
+ badgeStyle: "subtle" as const,
73
+ color: "slate" as const,
74
+ className: `bg-background-presentation-badge-slate-subtle ${SUBTLE_TEXT}`,
75
+ },
76
+ {
77
+ badgeStyle: "subtle" as const,
78
+ color: "red" as const,
79
+ className: `bg-background-presentation-badge-red-subtle ${SUBTLE_TEXT}`,
80
+ },
81
+ {
82
+ badgeStyle: "subtle" as const,
83
+ color: "orange" as const,
84
+ className: `bg-background-presentation-badge-orange-subtle ${SUBTLE_TEXT}`,
85
+ },
86
+ {
87
+ badgeStyle: "subtle" as const,
88
+ color: "yellow" as const,
89
+ className: `bg-background-presentation-badge-yellow-subtle ${SUBTLE_TEXT}`,
90
+ },
91
+ {
92
+ badgeStyle: "subtle" as const,
93
+ color: "green" as const,
94
+ className: `bg-background-presentation-badge-green-subtle ${SUBTLE_TEXT}`,
95
+ },
96
+ {
97
+ badgeStyle: "subtle" as const,
98
+ color: "ocean" as const,
99
+ className: `bg-background-presentation-badge-ocean-subtle ${SUBTLE_TEXT}`,
100
+ },
101
+ {
102
+ badgeStyle: "subtle" as const,
103
+ color: "blue" as const,
104
+ className: `bg-background-presentation-badge-blue-subtle ${SUBTLE_TEXT}`,
105
+ },
106
+ {
107
+ badgeStyle: "subtle" as const,
108
+ color: "purple" as const,
109
+ className: `bg-background-presentation-badge-purple-subtle ${SUBTLE_TEXT}`,
110
+ },
111
+ {
112
+ badgeStyle: "subtle" as const,
113
+ color: "rose" as const,
114
+ className: `bg-background-presentation-badge-rose-subtle ${SUBTLE_TEXT}`,
115
+ },
116
+ ];
117
+
118
+ export const badgeStyles = cva(
7
119
  [
8
- "px-[6px]",
9
- "[&_div]:text-content-presentation-action-light-primary",
10
- "[&_i]:!leading-none",
11
- "flex",
12
- "justify-center",
13
- "items-center",
14
- "border",
120
+ "inline-flex items-center justify-center w-fit",
15
121
  "rounded-[6px]",
16
- "transition-all",
17
- "duration-300",
18
- "ease-in-out",
19
- "w-fit",
20
- "cursor-pointer",
21
- "[&_i]:leading-0",
122
+ "transition-all duration-200 ease-in-out",
123
+ "whitespace-nowrap",
124
+ "[&_i]:!leading-none",
22
125
  ],
23
126
  {
24
127
  variants: {
25
- size: {
26
- XS: "h-[18px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
27
- S: "h-[22px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
28
- M: "h-[26px] [&_i]:text-[16px] [&_div]:typography-body-medium-medium",
128
+ badgeStyle: {
129
+ solid: "",
130
+ subtle: "",
29
131
  },
30
- variant: {
31
- highlight: ["h-[20px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
32
- "bg-background-presentation-badge-gray border-transparent px-[3px]"
33
- ],
34
- green: "border-border-presentation-badge-green bg-background-presentation-badge-green [&_i]:text-content-presentation-badge-green",
35
- greenLight: "border-border-presentation-badge-green-light bg-background-presentation-badge-green-light [&_i]:text-content-presentation-badge-green-light",
36
- cocktailGreen: "border-border-presentation-badge-cocktail-green bg-background-presentation-badge-cocktail-green [&_i]:text-content-presentation-badge-cocktail-green",
37
- yellow: "border-border-presentation-badge-yellow bg-background-presentation-badge-yellow [&_i]:text-content-presentation-badge-yellow",
38
- redOrange: "border-border-presentation-badge-red-orange bg-background-presentation-badge-red-orange [&_i]:text-content-presentation-badge-red-orange",
39
- redLight: "border-border-presentation-badge-red bg-background-presentation-badge-red [&_i]:text-content-presentation-badge-red",
40
- rose: "border-border-presentation-badge-rose bg-background-presentation-badge-rose [&_i]:text-content-presentation-badge-rose",
41
- purple: "border-border-presentation-badge-purple bg-background-presentation-badge-purple [&_i]:text-content-presentation-badge-purple",
42
- bluePurple: "border-border-presentation-badge-blue-purple bg-background-presentation-badge-blue-purple [&_i]:text-content-presentation-badge-blue-purple",
43
- blue: "border-border-presentation-badge-blue bg-background-presentation-badge-blue [&_i]:text-content-presentation-badge-blue",
44
- navy: "border-border-presentation-badge-navy bg-background-presentation-badge-navy [&_i]:text-content-presentation-badge-navy",
45
- gray: "border-border-presentation-badge-gray bg-background-presentation-badge-gray [&_i]:text-content-presentation-badge-gray",
132
+ color: {
133
+ gray: "",
134
+ slate: "",
135
+ red: "",
136
+ orange: "",
137
+ yellow: "",
138
+ green: "",
139
+ ocean: "",
140
+ blue: "",
141
+ purple: "",
142
+ rose: "",
143
+ },
144
+ size: {
145
+ XS: "h-[18px] px-[6px] py-0 [&_i]:text-[12px] [&>div]:typography-body-small-medium",
146
+ S: "h-[22px] px-[6px] py-[2px] [&_i]:text-[12px] [&>div]:typography-body-small-medium",
147
+ M: "h-[26px] px-[8px] py-[2px] [&_i]:text-[16px] [&>div]:typography-body-medium-medium",
46
148
  },
47
149
  },
150
+ compoundVariants: [...solidCompoundVariants, ...subtleCompoundVariants],
48
151
  defaultVariants: {
152
+ badgeStyle: "subtle",
153
+ color: "gray",
49
154
  size: "S",
50
- variant: "green",
51
155
  },
52
- }
156
+ },
53
157
  );
54
158
 
55
- interface BadgeProps extends HTMLAttributes<HTMLButtonElement>,
56
- VariantProps<typeof badgeBase> {
159
+ interface BadgeProps
160
+ extends
161
+ Omit<HTMLAttributes<HTMLSpanElement>, "color">,
162
+ VariantProps<typeof badgeStyles> {
57
163
  label?: string;
58
- onUnselect?: () => void;
59
- isSelected?: boolean;
60
164
  badgeIcon?: ReactNode;
165
+ showIcon?: boolean;
166
+ isSelected?: boolean;
167
+ onUnselect?: () => void;
168
+ theme?: Themes;
61
169
  className?: string;
62
- theme?: Themes
63
170
  }
64
171
 
65
172
  export const Badge: React.FC<BadgeProps> = ({
66
173
  label,
67
- onUnselect,
68
- isSelected,
69
174
  badgeIcon,
175
+ showIcon = true,
176
+ isSelected,
177
+ onUnselect,
70
178
  theme,
71
- size = "S",
72
- variant = "green",
179
+ badgeStyle,
180
+ color,
181
+ size,
73
182
  className,
74
183
  ...props
75
184
  }) => {
@@ -78,39 +187,160 @@ export const Badge: React.FC<BadgeProps> = ({
78
187
  {...props}
79
188
  data-theme={theme}
80
189
  className={cn(
81
- badgeBase({ size, variant }),
82
- {
83
- "cursor-default": isSelected,
84
- },
85
- className
190
+ badgeStyles({ badgeStyle, color, size }),
191
+ { "cursor-default": isSelected },
192
+ className,
86
193
  )}
87
194
  >
88
- <div className={"flex justify-center items-center"}>
89
- {!badgeIcon ? (
90
- <i className={cn("ri-circle-fill !text-[8px]", { "hidden": variant === "highlight" })}></i>
91
- ) : (
92
- badgeIcon
93
- )}
94
- </div>
195
+ {showIcon && (
196
+ <div className="flex items-center justify-center">
197
+ {badgeIcon ?? <i className="ri-circle-fill !text-[8px]" />}
198
+ </div>
199
+ )}
200
+
201
+ {label && (
202
+ <div className={cn("px-[3px]", { "pt-[1px]": size === "M" })}>
203
+ {label}
204
+ </div>
205
+ )}
95
206
 
96
- <div className="px-[3px] whitespace-nowrap">{label}</div>
97
207
  {isSelected && (
98
208
  <button
209
+ type="button"
99
210
  onClick={onUnselect}
100
- className="rounded-[2px] flex justify-center items-center cursor-pointer"
101
- tabIndex={0}
102
- role="button"
103
- aria-label="Remove badge"
104
211
  onKeyDown={(e) => {
105
- if (e.key === 'Enter' || e.key === ' ') {
212
+ if (e.key === "Enter" || e.key === " ") {
106
213
  e.preventDefault();
107
214
  onUnselect?.();
108
215
  }
109
216
  }}
217
+ className="rounded-[2px] flex items-center justify-center cursor-pointer"
218
+ aria-label="Remove badge"
110
219
  >
111
- <i className="ri-close-line !text-content-presentation-action-light-primary"></i>
220
+ <i className="ri-close-line" />
112
221
  </button>
113
222
  )}
114
223
  </span>
115
224
  );
116
225
  };
226
+
227
+ /* ============================================================
228
+ * REFERENCE — original Badge implementation (pre-NEWCOLORS2)
229
+ * Kept as a commented snippet so the old token names and variant
230
+ * surface remain consultable while migrating callers. Do not
231
+ * uncomment — the referenced tokens no longer exist in the
232
+ * regenerated mapping-color-system plugin.
233
+ * ============================================================
234
+ *
235
+ * export const badgeBase = cva(
236
+ * [
237
+ * "px-[6px]",
238
+ * "[&_div]:text-content-presentation-action-light-primary",
239
+ * "[&_i]:!leading-none",
240
+ * "flex",
241
+ * "justify-center",
242
+ * "items-center",
243
+ * "border",
244
+ * "rounded-[6px]",
245
+ * "transition-all",
246
+ * "duration-300",
247
+ * "ease-in-out",
248
+ * "w-fit",
249
+ * "cursor-pointer",
250
+ * "[&_i]:leading-0",
251
+ * ],
252
+ * {
253
+ * variants: {
254
+ * size: {
255
+ * XS: "h-[18px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
256
+ * S: "h-[22px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
257
+ * M: "h-[26px] [&_i]:text-[16px] [&_div]:typography-body-medium-medium",
258
+ * },
259
+ * variant: {
260
+ * highlight: ["h-[20px] [&_i]:text-[12px] [&_div]:typography-body-small-medium",
261
+ * "bg-background-presentation-badge-gray border-transparent px-[3px]"
262
+ * ],
263
+ * green: "border-border-presentation-badge-green bg-background-presentation-badge-green [&_i]:text-content-presentation-badge-green",
264
+ * greenLight: "border-border-presentation-badge-green-light bg-background-presentation-badge-green-light [&_i]:text-content-presentation-badge-green-light",
265
+ * cocktailGreen: "border-border-presentation-badge-cocktail-green bg-background-presentation-badge-cocktail-green [&_i]:text-content-presentation-badge-cocktail-green",
266
+ * yellow: "border-border-presentation-badge-yellow bg-background-presentation-badge-yellow [&_i]:text-content-presentation-badge-yellow",
267
+ * redOrange: "border-border-presentation-badge-red-orange bg-background-presentation-badge-red-orange [&_i]:text-content-presentation-badge-red-orange",
268
+ * redLight: "border-border-presentation-badge-red bg-background-presentation-badge-red [&_i]:text-content-presentation-badge-red",
269
+ * rose: "border-border-presentation-badge-rose bg-background-presentation-badge-rose [&_i]:text-content-presentation-badge-rose",
270
+ * purple: "border-border-presentation-badge-purple bg-background-presentation-badge-purple [&_i]:text-content-presentation-badge-purple",
271
+ * bluePurple: "border-border-presentation-badge-blue-purple bg-background-presentation-badge-blue-purple [&_i]:text-content-presentation-badge-blue-purple",
272
+ * blue: "border-border-presentation-badge-blue bg-background-presentation-badge-blue [&_i]:text-content-presentation-badge-blue",
273
+ * navy: "border-border-presentation-badge-navy bg-background-presentation-badge-navy [&_i]:text-content-presentation-badge-navy",
274
+ * gray: "border-border-presentation-badge-gray bg-background-presentation-badge-gray [&_i]:text-content-presentation-badge-gray",
275
+ * },
276
+ * },
277
+ * defaultVariants: {
278
+ * size: "S",
279
+ * variant: "green",
280
+ * },
281
+ * }
282
+ * );
283
+ *
284
+ * interface BadgeProps extends HTMLAttributes<HTMLButtonElement>,
285
+ * VariantProps<typeof badgeBase> {
286
+ * label?: string;
287
+ * onUnselect?: () => void;
288
+ * isSelected?: boolean;
289
+ * badgeIcon?: ReactNode;
290
+ * className?: string;
291
+ * theme?: Themes
292
+ * }
293
+ *
294
+ * export const Badge: React.FC<BadgeProps> = ({
295
+ * label,
296
+ * onUnselect,
297
+ * isSelected,
298
+ * badgeIcon,
299
+ * theme,
300
+ * size = "S",
301
+ * variant = "green",
302
+ * className,
303
+ * ...props
304
+ * }) => {
305
+ * return (
306
+ * <span
307
+ * {...props}
308
+ * data-theme={theme}
309
+ * className={cn(
310
+ * badgeBase({ size, variant }),
311
+ * {
312
+ * "cursor-default": isSelected,
313
+ * },
314
+ * className
315
+ * )}
316
+ * >
317
+ * <div className={"flex justify-center items-center"}>
318
+ * {!badgeIcon ? (
319
+ * <i className={cn("ri-circle-fill !text-[8px]", { "hidden": variant === "highlight" })}></i>
320
+ * ) : (
321
+ * badgeIcon
322
+ * )}
323
+ * </div>
324
+ *
325
+ * <div className="px-[3px] whitespace-nowrap">{label}</div>
326
+ * {isSelected && (
327
+ * <button
328
+ * onClick={onUnselect}
329
+ * className="rounded-[2px] flex justify-center items-center cursor-pointer"
330
+ * tabIndex={0}
331
+ * role="button"
332
+ * aria-label="Remove badge"
333
+ * onKeyDown={(e) => {
334
+ * if (e.key === 'Enter' || e.key === ' ') {
335
+ * e.preventDefault();
336
+ * onUnselect?.();
337
+ * }
338
+ * }}
339
+ * >
340
+ * <i className="ri-close-line !text-content-presentation-action-light-primary"></i>
341
+ * </button>
342
+ * )}
343
+ * </span>
344
+ * );
345
+ * };
346
+ */
package/apps/lib/components/BadgeField.tsx CHANGED
@@ -124,7 +124,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
124
124
  <Badge
125
125
  key={tag.id}
126
126
  size={size}
127
- variant={tag.variant as any}
127
+ color={tag.variant as any}
128
128
  label={tag.name}
129
129
  isSelected={true}
130
130
  onUnselect={() => handleUnselectTag(tag.id)}
@@ -179,7 +179,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
179
179
  <Badge
180
180
  key={tag.id}
181
181
  size={size}
182
- variant={tag.variant as any}
182
+ color={tag.variant as any}
183
183
  label={tag.name}
184
184
  onClick={() => handleSelectTag(tag.id)}
185
185
  className={`outline-none ${focusedPopoverIndex === index ? "ring-2 ring-blue-500" : ""
package/apps/lib/components/Dialog.tsx CHANGED
@@ -94,7 +94,7 @@ const DialogTitle = React.forwardRef<
94
94
  <DialogPrimitive.Title
95
95
  ref={ref}
96
96
  className={cn(
97
- "text-lg font-semibold leading-none tracking-tight text-content-system-global-primary",
97
+ "text-lg font-semibold leading-none tracking-tight text-content-presentation-global-primary",
98
98
  className
99
99
  )}
100
100
  {...props}
@@ -108,7 +108,7 @@ const DialogDescription = React.forwardRef<
108
108
  >(({ className, ...props }, ref) => (
109
109
  <DialogPrimitive.Description
110
110
  ref={ref}
111
- className={cn("text-sm text-muted-foreground text-content-system-global-primary", className)}
111
+ className={cn("text-sm text-muted-foreground text-content-presentation-global-primary", className)}
112
112
  {...props}
113
113
  />
114
114
  ))
package/apps/lib/components/DropdownMenu.tsx CHANGED
@@ -6,7 +6,7 @@ import { Themes } from "../utils/types";
6
6
 
7
7
 
8
8
  interface DropdownMenuProps {
9
- variant?: "SystemStyle" | "PresentationStyle";
9
+ variant?: "PresentationStyle";
10
10
  className?: string;
11
11
  theme?: Themes
12
12
  }
@@ -84,7 +84,7 @@ DropdownMenuSubTrigger.displayName =
84
84
  const DropdownMenuSubContent = React.forwardRef<
85
85
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
86
86
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
87
- variant?: "SystemStyle" | "PresentationStyle";
87
+ variant?: "PresentationStyle";
88
88
  }
89
89
  >(({ className, variant = "PresentationStyle", ...props }, ref) => (
90
90
  <DropdownMenuPrimitive.SubContent
@@ -313,18 +313,6 @@ export const MenuItemStyles = cva(
313
313
  "focus:text-content-presentation-global-primary-inverse",
314
314
  "active:text-content-presentation-state-negative",
315
315
  ],
316
- SystemStyle: [
317
- "bg-background-system-body-primary",
318
- "text-content-system-global-primary",
319
- "hover:bg-background-system-action-secondary-hover",
320
- "hover:text-content-system-action-primary-hover",
321
- "hover:border-border-system-action-primary-hover",
322
- "focus:bg-background-system-action-secondary-hover",
323
- "focus:text-content-system-action-primary-hover",
324
- "focus:border-border-system-action-primary-hover",
325
- "disabled:bg-background-system-body-secondary",
326
- "disabled:text-content-system-global-disabled",
327
- ],
328
316
  },
329
317
  size: {
330
318
  S: ["typography-body-small-regular", "h-[24px]"],
@@ -380,11 +368,6 @@ export const dropdownMenuStyles = cva(
380
368
  {
381
369
  variants: {
382
370
  variant: {
383
- SystemStyle: [
384
- "border-border-system-global-secondary",
385
- "bg-background-system-body-primary",
386
- "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
387
- ],
388
371
  PresentationStyle: [
389
372
  "border-border-presentation-global-primary",
390
373
  "bg-background-presentation-form-base",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "torch-glare",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "files": [