torch-glare 1.5.2 → 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 (12) 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/Breadcrumb.tsx +1 -1
  4. package/apps/lib/components/ButtonGroup.tsx +4 -4
  5. package/apps/lib/components/Dialog.tsx +2 -2
  6. package/apps/lib/components/DropdownMenu.tsx +8 -25
  7. package/apps/lib/components/ImageAttachment.tsx +1 -1
  8. package/apps/lib/components/Popover.tsx +6 -6
  9. package/apps/lib/components/Select.tsx +6 -6
  10. package/apps/lib/components/Toggle.tsx +13 -13
  11. package/apps/lib/components/ToggleButton.tsx +6 -6
  12. 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/Breadcrumb.tsx CHANGED
@@ -255,7 +255,7 @@ const breadcrumbEllipsisStyles = cva(
255
255
  PresentationStyle: [
256
256
  "text-content-presentation-global-secondary",
257
257
  "hover:bg-background-presentation-action-hover",
258
- "hover:text-content-presentation-action-hover",
258
+ "hover:text-content-presentation-global-primary-inverse",
259
259
  ],
260
260
  SystemStyle: [
261
261
  "text-content-system-global-secondary",
package/apps/lib/components/ButtonGroup.tsx CHANGED
@@ -120,18 +120,18 @@ const buttonGroupItemStyles = cva(
120
120
  "text-content-presentation-action-light-primary",
121
121
  "border-border-presentation-action-disabled",
122
122
  "hover:bg-background-presentation-action-hover",
123
- "hover:text-content-presentation-action-hover",
123
+ "hover:text-content-presentation-global-primary-inverse",
124
124
  "data-[state=on]:bg-background-presentation-action-hover",
125
- "data-[state=on]:text-content-presentation-action-hover",
125
+ "data-[state=on]:text-content-presentation-global-primary-inverse",
126
126
  ],
127
127
  BorderStyle: [
128
128
  "bg-transparent",
129
129
  "text-content-presentation-action-light-primary",
130
130
  "border-border-presentation-action-disabled",
131
131
  "hover:bg-background-presentation-action-hover",
132
- "hover:text-content-presentation-action-hover",
132
+ "hover:text-content-presentation-global-primary-inverse",
133
133
  "data-[state=on]:bg-background-presentation-action-hover",
134
- "data-[state=on]:text-content-presentation-action-hover",
134
+ "data-[state=on]:text-content-presentation-global-primary-inverse",
135
135
  ],
136
136
  SystemStyle: [
137
137
  "bg-transparent",
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
@@ -292,9 +292,9 @@ export const MenuItemStyles = cva(
292
292
  "text-content-presentation-action-light-primary",
293
293
  "bg-background-presentation-action-dropdown-primary",
294
294
  "hover:bg-background-presentation-action-hover",
295
- "hover:text-content-presentation-action-hover",
295
+ "hover:text-content-presentation-global-primary-inverse",
296
296
  "focus:bg-background-presentation-action-hover",
297
- "focus:text-content-presentation-action-hover",
297
+ "focus:text-content-presentation-global-primary-inverse",
298
298
  "disabled:text-content-presentation-state-disabled",
299
299
  "disabled:bg-white-00",
300
300
  ],
@@ -302,29 +302,17 @@ export const MenuItemStyles = cva(
302
302
  "text-content-presentation-state-information",
303
303
  "hover:bg-background-presentation-state-information-primary",
304
304
  "focus:bg-background-presentation-state-information-primary",
305
- "focus:text-content-presentation-action-hover",
306
- "hover:text-content-presentation-action-hover",
305
+ "focus:text-content-presentation-global-primary-inverse",
306
+ "hover:text-content-presentation-global-primary-inverse",
307
307
  ],
308
308
  Negative: [
309
309
  "text-content-presentation-state-negative",
310
310
  "hover:bg-background-presentation-state-negative-primary",
311
- "hover:text-content-presentation-action-hover",
311
+ "hover:text-content-presentation-global-primary-inverse",
312
312
  "focus:bg-background-presentation-state-negative-primary",
313
- "focus:text-content-presentation-action-hover",
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/apps/lib/components/ImageAttachment.tsx CHANGED
@@ -116,7 +116,7 @@ const ExpandableImage = ({ theme, previewSrc, expandLabel, placeholderLabel = "U
116
116
  <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
117
117
  <path d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z" fill="#F9F9F9" />
118
118
  </svg>
119
- <p className='text-content-presentation-action-hover typography-labels-small-regular max-w-[50px] break-words m-0'>
119
+ <p className='text-content-presentation-global-primary-inverse typography-labels-small-regular max-w-[50px] break-words m-0'>
120
120
  {expandLabel}
121
121
  </p>
122
122
  </button>
package/apps/lib/components/Popover.tsx CHANGED
@@ -164,9 +164,9 @@ const PopoverItemStyles = cva(
164
164
  "text-content-presentation-action-light-primary",
165
165
  "bg-background-presentation-action-dropdown-primary",
166
166
  "hover:bg-background-presentation-action-hover",
167
- "hover:text-content-presentation-action-hover",
167
+ "hover:text-content-presentation-global-primary-inverse",
168
168
  "focus:bg-background-presentation-action-hover",
169
- "focus:text-content-presentation-action-hover",
169
+ "focus:text-content-presentation-global-primary-inverse",
170
170
  "disabled:text-content-presentation-state-disabled",
171
171
  "disabled:bg-white-00",
172
172
  ],
@@ -174,15 +174,15 @@ const PopoverItemStyles = cva(
174
174
  "text-content-presentation-state-information",
175
175
  "hover:bg-background-presentation-state-information-primary",
176
176
  "focus:bg-background-presentation-state-information-primary",
177
- "focus:text-content-presentation-action-hover",
178
- "hover:text-content-presentation-action-hover",
177
+ "focus:text-content-presentation-global-primary-inverse",
178
+ "hover:text-content-presentation-global-primary-inverse",
179
179
  ],
180
180
  Negative: [
181
181
  "text-content-presentation-state-negative",
182
182
  "hover:bg-background-presentation-state-negative-primary",
183
- "hover:text-content-presentation-action-hover",
183
+ "hover:text-content-presentation-global-primary-inverse",
184
184
  "focus:bg-background-presentation-state-negative-primary",
185
- "focus:text-content-presentation-action-hover",
185
+ "focus:text-content-presentation-global-primary-inverse",
186
186
  "active:text-content-presentation-state-negative",
187
187
  ],
188
188
  SystemStyle: [
package/apps/lib/components/Select.tsx CHANGED
@@ -286,9 +286,9 @@ const SelectItemStyles = cva(
286
286
  "text-content-presentation-action-light-primary",
287
287
  "bg-background-presentation-action-dropdown-primary",
288
288
  "hover:bg-background-presentation-action-hover",
289
- "hover:text-content-presentation-action-hover",
289
+ "hover:text-content-presentation-global-primary-inverse",
290
290
  "focus:bg-background-presentation-action-hover",
291
- "focus:text-content-presentation-action-hover",
291
+ "focus:text-content-presentation-global-primary-inverse",
292
292
  "disabled:text-content-presentation-state-disabled",
293
293
  "disabled:bg-white-00",
294
294
  ],
@@ -296,15 +296,15 @@ const SelectItemStyles = cva(
296
296
  "text-content-presentation-state-information",
297
297
  "hover:bg-background-presentation-state-information-primary",
298
298
  "focus:bg-background-presentation-state-information-primary",
299
- "focus:text-content-presentation-action-hover",
300
- "hover:text-content-presentation-action-hover",
299
+ "focus:text-content-presentation-global-primary-inverse",
300
+ "hover:text-content-presentation-global-primary-inverse",
301
301
  ],
302
302
  Negative: [
303
303
  "text-content-presentation-state-negative",
304
304
  "hover:bg-background-presentation-state-negative-primary",
305
- "hover:text-content-presentation-action-hover",
305
+ "hover:text-content-presentation-global-primary-inverse",
306
306
  "focus:bg-background-presentation-state-negative-primary",
307
- "focus:text-content-presentation-action-hover",
307
+ "focus:text-content-presentation-global-primary-inverse",
308
308
  "active:text-content-presentation-state-negative",
309
309
  ],
310
310
  SystemStyle: [
package/apps/lib/components/Toggle.tsx CHANGED
@@ -37,19 +37,19 @@ const toggleVariants = cva(
37
37
  "bg-background-presentation-action-secondary",
38
38
  "text-content-presentation-action-light-primary",
39
39
  "hover:bg-background-presentation-action-hover",
40
- "hover:text-content-presentation-action-hover",
40
+ "hover:text-content-presentation-global-primary-inverse",
41
41
  "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus", // Focus style only for medium screens and above
42
- "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
43
- "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-action-hover",
42
+ "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
43
+ "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
44
44
  ],
45
45
  BlueSecStyle: [
46
46
  "bg-background-presentation-action-secondary",
47
47
  "text-content-presentation-action-light-primary",
48
48
  "hover:bg-background-presentation-state-information-primary",
49
- "hover:text-content-presentation-action-hover",
49
+ "hover:text-content-presentation-global-primary-inverse",
50
50
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
51
- "active:bg-background-presentation-state-information-primary active:text-content-presentation-action-hover",
52
- "data-[state=on]:bg-background-presentation-state-information-primary data-[state=on]:text-content-presentation-action-hover",
51
+ "active:bg-background-presentation-state-information-primary active:text-content-presentation-global-primary-inverse",
52
+ "data-[state=on]:bg-background-presentation-state-information-primary data-[state=on]:text-content-presentation-global-primary-inverse",
53
53
  ],
54
54
  YelSecStyle: [
55
55
  "bg-background-presentation-action-secondary",
@@ -64,22 +64,22 @@ const toggleVariants = cva(
64
64
  "bg-background-presentation-action-secondary",
65
65
  "text-content-presentation-action-light-primary",
66
66
  "hover:bg-background-presentation-state-negative-primary",
67
- "hover:text-content-presentation-action-hover",
67
+ "hover:text-content-presentation-global-primary-inverse",
68
68
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
69
- "active:bg-background-presentation-state-negative-primary active:text-content-presentation-action-hover",
70
- "data-[state=on]:bg-background-presentation-state-negative-primary data-[state=on]:text-content-presentation-action-hover",
69
+ "active:bg-background-presentation-state-negative-primary active:text-content-presentation-global-primary-inverse",
70
+ "data-[state=on]:bg-background-presentation-state-negative-primary data-[state=on]:text-content-presentation-global-primary-inverse",
71
71
  ],
72
72
  BorderStyle: [
73
73
  "text-content-presentation-action-light-primary",
74
74
  "border border-border-presentation-action-disabled",
75
75
  "bg-background-presentation-action-borderstyle",
76
76
  "hover:bg-background-presentation-action-hover",
77
- "hover:text-content-presentation-action-hover",
77
+ "hover:text-content-presentation-global-primary-inverse",
78
78
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
79
79
  "focus:lg:text-content-presentation-action-light-primary",
80
- "focus:hover:lg:text-content-presentation-action-hover",
81
- "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
82
- "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-action-hover",
80
+ "focus:hover:lg:text-content-presentation-global-primary-inverse",
81
+ "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
82
+ "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
83
83
  ],
84
84
  PrimeContStyle: [
85
85
  "text-content-presentation-action-light-primary",
package/apps/lib/components/ToggleButton.tsx CHANGED
@@ -29,29 +29,29 @@ const toggleButtonStyles = cva(
29
29
  "bg-background-presentation-action-secondary",
30
30
  "text-content-presentation-action-light-primary",
31
31
  "hover:bg-background-presentation-action-hover",
32
- "hover:text-content-presentation-action-hover",
32
+ "hover:text-content-presentation-global-primary-inverse",
33
33
  "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
34
34
  "data-[state=on]:bg-background-presentation-action-hover",
35
- "data-[state=on]:text-content-presentation-action-hover",
35
+ "data-[state=on]:text-content-presentation-global-primary-inverse",
36
36
  ],
37
37
  BlueSecStyle: [
38
38
  "bg-background-presentation-action-secondary",
39
39
  "text-content-presentation-action-light-primary",
40
40
  "hover:bg-background-presentation-state-information-primary",
41
- "hover:text-content-presentation-action-hover",
41
+ "hover:text-content-presentation-global-primary-inverse",
42
42
  "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
43
43
  "data-[state=on]:bg-background-presentation-state-information-primary",
44
- "data-[state=on]:text-content-presentation-action-hover",
44
+ "data-[state=on]:text-content-presentation-global-primary-inverse",
45
45
  ],
46
46
  BorderStyle: [
47
47
  "bg-background-presentation-action-borderstyle",
48
48
  "text-content-presentation-action-light-primary",
49
49
  "border-border-presentation-action-disabled",
50
50
  "hover:bg-background-presentation-action-hover",
51
- "hover:text-content-presentation-action-hover",
51
+ "hover:text-content-presentation-global-primary-inverse",
52
52
  "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
53
53
  "data-[state=on]:bg-background-presentation-action-hover",
54
- "data-[state=on]:text-content-presentation-action-hover",
54
+ "data-[state=on]:text-content-presentation-global-primary-inverse",
55
55
  ],
56
56
  PrimeContStyle: [
57
57
  "bg-transparent",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "torch-glare",
3
- "version": "1.5.2",
3
+ "version": "2.1.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "files": [