@abhir9/pd-design-system 0.1.0 → 0.1.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.cjs +147 -193
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +118 -118
- package/dist/index.css.map +1 -1
- package/dist/index.js +147 -193
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1069 -36
- package/package.json +11 -6
package/dist/index.cjs
CHANGED
|
@@ -144,7 +144,7 @@ function getAvailableIconNames() {
|
|
|
144
144
|
);
|
|
145
145
|
}
|
|
146
146
|
var buttonVariants = classVarianceAuthority.cva(
|
|
147
|
-
"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--
|
|
147
|
+
"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-blue)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
148
148
|
{
|
|
149
149
|
variants: {
|
|
150
150
|
variant: {
|
|
@@ -171,105 +171,105 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
171
171
|
{
|
|
172
172
|
variant: "primary",
|
|
173
173
|
intent: "primary",
|
|
174
|
-
class: "bg-[var(--
|
|
174
|
+
class: "bg-[var(--background-invert)] text-[var(--content-on-color)] hover:bg-[var(--background-invert-light)] active:bg-[var(--background-invert)] disabled:bg-[var(--background-secondary)] disabled:text-[var(--content-subtle)]"
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
177
|
variant: "primary",
|
|
178
178
|
intent: "success",
|
|
179
|
-
class: "bg-[var(--
|
|
179
|
+
class: "bg-[var(--background-green)] text-[var(--content-green)] hover:bg-[var(--background-green-on-hover)] active:bg-[var(--background-green)] border-[var(--border-green)]"
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
variant: "primary",
|
|
183
183
|
intent: "warning",
|
|
184
|
-
class: "bg-[var(--
|
|
184
|
+
class: "bg-[var(--background-yellow)] text-[var(--content-yellow)] hover:bg-[var(--background-yellow-on-hover)] active:bg-[var(--background-yellow)] border-[var(--border-yellow)]"
|
|
185
185
|
},
|
|
186
186
|
{
|
|
187
187
|
variant: "primary",
|
|
188
188
|
intent: "danger",
|
|
189
|
-
class: "bg-[var(--
|
|
189
|
+
class: "bg-[var(--background-red)] text-[var(--content-red)] hover:bg-[var(--background-red-on-hover)] hover:text-[var(--content-red-on-hover)] active:bg-[var(--background-red)] border-[var(--border-red)] disabled:bg-[var(--background-red)] disabled:text-[var(--content-subtle)]"
|
|
190
190
|
},
|
|
191
191
|
{
|
|
192
192
|
variant: "primary",
|
|
193
193
|
intent: "neutral",
|
|
194
|
-
class: "bg-[var(--
|
|
194
|
+
class: "bg-[var(--background-secondary)] text-[var(--content-primary)] hover:bg-[var(--background-low-on-hover)] active:bg-[var(--background-tertiary)] border-[var(--border-primary)]"
|
|
195
195
|
},
|
|
196
196
|
// Secondary variant - using new semantic tokens
|
|
197
197
|
{
|
|
198
198
|
variant: "secondary",
|
|
199
199
|
intent: "primary",
|
|
200
|
-
class: "bg-[var(--
|
|
200
|
+
class: "bg-[var(--background-secondary)] text-[var(--content-primary)] hover:bg-[var(--background-low-on-hover)] active:bg-[var(--background-secondary)] border border-[var(--border-secondary)] disabled:bg-[var(--background-tertiary)] disabled:text-[var(--content-subtle)] disabled:border-[var(--border-subtle)]"
|
|
201
201
|
},
|
|
202
202
|
{
|
|
203
203
|
variant: "secondary",
|
|
204
204
|
intent: "success",
|
|
205
|
-
class: "bg-[var(--
|
|
205
|
+
class: "bg-[var(--background-green)] text-[var(--content-green)] hover:bg-[var(--background-green-on-hover)] active:bg-[var(--background-green)] border-[var(--border-green-subtle)]"
|
|
206
206
|
},
|
|
207
207
|
{
|
|
208
208
|
variant: "secondary",
|
|
209
209
|
intent: "warning",
|
|
210
|
-
class: "bg-[var(--
|
|
210
|
+
class: "bg-[var(--background-yellow)] text-[var(--content-yellow)] hover:bg-[var(--background-yellow-on-hover)] active:bg-[var(--background-yellow)] border-[var(--border-yellow-subtle)]"
|
|
211
211
|
},
|
|
212
212
|
{
|
|
213
213
|
variant: "secondary",
|
|
214
214
|
intent: "danger",
|
|
215
|
-
class: "bg-[var(--
|
|
215
|
+
class: "bg-[var(--background-red)] text-[var(--content-red)] hover:bg-[var(--background-red-on-hover)] hover:text-[var(--content-red-on-hover)] active:bg-[var(--background-red)] border border-[var(--border-red)]"
|
|
216
216
|
},
|
|
217
217
|
{
|
|
218
218
|
variant: "secondary",
|
|
219
219
|
intent: "neutral",
|
|
220
|
-
class: "bg-[var(--
|
|
220
|
+
class: "bg-[var(--background-low)] text-[var(--content-primary)] hover:bg-[var(--background-low-on-hover)] active:bg-[var(--background-tertiary)] border-[var(--border-subtle)]"
|
|
221
221
|
},
|
|
222
222
|
// Ghost variant - using new semantic tokens
|
|
223
223
|
{
|
|
224
224
|
variant: "ghost",
|
|
225
225
|
intent: "primary",
|
|
226
|
-
class: "text-[var(--
|
|
226
|
+
class: "text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:text-[var(--content-primary)] disabled:text-[var(--content-subtle)]"
|
|
227
227
|
},
|
|
228
228
|
{
|
|
229
229
|
variant: "ghost",
|
|
230
230
|
intent: "success",
|
|
231
|
-
class: "hover:bg-[var(--
|
|
231
|
+
class: "hover:bg-[var(--background-green)] text-[var(--content-green)] hover:text-[var(--content-green-on-hover)]"
|
|
232
232
|
},
|
|
233
233
|
{
|
|
234
234
|
variant: "ghost",
|
|
235
235
|
intent: "warning",
|
|
236
|
-
class: "hover:bg-[var(--
|
|
236
|
+
class: "hover:bg-[var(--background-yellow)] text-[var(--content-yellow)] hover:text-[var(--content-yellow-on-hover)]"
|
|
237
237
|
},
|
|
238
238
|
{
|
|
239
239
|
variant: "ghost",
|
|
240
240
|
intent: "danger",
|
|
241
|
-
class: "text-[var(--
|
|
241
|
+
class: "text-[var(--content-red)] hover:bg-[var(--background-red)] hover:text-[var(--content-red-on-hover)]"
|
|
242
242
|
},
|
|
243
243
|
{
|
|
244
244
|
variant: "ghost",
|
|
245
245
|
intent: "neutral",
|
|
246
|
-
class: "hover:bg-[var(--
|
|
246
|
+
class: "hover:bg-[var(--background-low)] text-[var(--content-secondary)] hover:text-[var(--content-primary)]"
|
|
247
247
|
},
|
|
248
248
|
// Outline variant - using new semantic tokens
|
|
249
249
|
{
|
|
250
250
|
variant: "outline",
|
|
251
251
|
intent: "primary",
|
|
252
|
-
class: "border-[var(--
|
|
252
|
+
class: "border-[var(--border-primary)] text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:border-[var(--border-secondary)]"
|
|
253
253
|
},
|
|
254
254
|
{
|
|
255
255
|
variant: "outline",
|
|
256
256
|
intent: "success",
|
|
257
|
-
class: "border-[var(--
|
|
257
|
+
class: "border-[var(--border-green)] text-[var(--content-green)] hover:bg-[var(--background-green)] hover:border-[var(--border-green-on-hover)]"
|
|
258
258
|
},
|
|
259
259
|
{
|
|
260
260
|
variant: "outline",
|
|
261
261
|
intent: "warning",
|
|
262
|
-
class: "border-[var(--
|
|
262
|
+
class: "border-[var(--border-yellow)] text-[var(--content-yellow)] hover:bg-[var(--background-yellow)] hover:border-[var(--border-yellow-on-hover)]"
|
|
263
263
|
},
|
|
264
264
|
{
|
|
265
265
|
variant: "outline",
|
|
266
266
|
intent: "danger",
|
|
267
|
-
class: "border border-[var(--
|
|
267
|
+
class: "border border-[var(--border-red)] text-[var(--content-red)] hover:bg-[var(--background-red)] hover:text-[var(--content-red-on-hover)] hover:border-[var(--border-red-on-hover)]"
|
|
268
268
|
},
|
|
269
269
|
{
|
|
270
270
|
variant: "outline",
|
|
271
271
|
intent: "neutral",
|
|
272
|
-
class: "border-[var(--
|
|
272
|
+
class: "border-[var(--border-primary)] text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:border-[var(--border-secondary)]"
|
|
273
273
|
}
|
|
274
274
|
],
|
|
275
275
|
defaultVariants: {
|
|
@@ -357,10 +357,10 @@ function renderButtonContent({
|
|
|
357
357
|
LucideIcons.Loader2,
|
|
358
358
|
{
|
|
359
359
|
"aria-hidden": "true",
|
|
360
|
-
className: `${spinnerSizeClass} ${iconSpacing} animate-spin text-[var(--
|
|
360
|
+
className: `${spinnerSizeClass} ${iconSpacing} animate-spin text-[var(--content-secondary)]`
|
|
361
361
|
}
|
|
362
362
|
),
|
|
363
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--
|
|
363
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--content-secondary)]", children: loadingText || children }),
|
|
364
364
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: loadingText ? `Loading: ${loadingText}` : "Loading" })
|
|
365
365
|
] });
|
|
366
366
|
}
|
|
@@ -1029,122 +1029,125 @@ function createTheme(name, mode) {
|
|
|
1029
1029
|
const border = isLight ? borderTokens.light : borderTokens.dark;
|
|
1030
1030
|
const content = isLight ? contentTokens.light : contentTokens.dark;
|
|
1031
1031
|
const background = isLight ? backgroundTokens.light : backgroundTokens.dark;
|
|
1032
|
+
const toKebabCase = (str) => {
|
|
1033
|
+
return str.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
1034
|
+
};
|
|
1032
1035
|
const cssVariables = {
|
|
1033
1036
|
// Base colors
|
|
1034
|
-
"--
|
|
1035
|
-
"--
|
|
1037
|
+
"--color-white": colors.white,
|
|
1038
|
+
"--color-black": colors.black,
|
|
1036
1039
|
// Intent colors
|
|
1037
|
-
"--
|
|
1038
|
-
"--
|
|
1039
|
-
"--
|
|
1040
|
-
"--
|
|
1041
|
-
"--
|
|
1042
|
-
"--
|
|
1043
|
-
"--
|
|
1044
|
-
"--
|
|
1045
|
-
"--
|
|
1046
|
-
"--
|
|
1047
|
-
"--
|
|
1048
|
-
"--
|
|
1049
|
-
"--
|
|
1050
|
-
"--
|
|
1051
|
-
"--
|
|
1052
|
-
"--
|
|
1053
|
-
"--
|
|
1054
|
-
"--
|
|
1055
|
-
"--
|
|
1056
|
-
"--
|
|
1057
|
-
"--
|
|
1058
|
-
"--
|
|
1059
|
-
"--
|
|
1060
|
-
"--
|
|
1061
|
-
"--
|
|
1062
|
-
"--
|
|
1063
|
-
"--
|
|
1064
|
-
"--
|
|
1065
|
-
"--
|
|
1066
|
-
"--
|
|
1067
|
-
"--
|
|
1068
|
-
"--
|
|
1069
|
-
"--
|
|
1070
|
-
"--
|
|
1071
|
-
"--
|
|
1072
|
-
"--
|
|
1073
|
-
"--
|
|
1074
|
-
"--
|
|
1075
|
-
"--
|
|
1076
|
-
"--
|
|
1040
|
+
"--intent-primary": semantic.intent.primary.color,
|
|
1041
|
+
"--intent-primary-hover": semantic.intent.primary.colorHover,
|
|
1042
|
+
"--intent-primary-active": semantic.intent.primary.colorActive,
|
|
1043
|
+
"--intent-primary-bg": semantic.intent.primary.background,
|
|
1044
|
+
"--intent-primary-bg-hover": semantic.intent.primary.backgroundHover,
|
|
1045
|
+
"--intent-primary-bg-active": semantic.intent.primary.backgroundActive,
|
|
1046
|
+
"--intent-primary-border": semantic.intent.primary.border,
|
|
1047
|
+
"--intent-primary-text": semantic.intent.primary.text,
|
|
1048
|
+
"--intent-success": semantic.intent.success.color,
|
|
1049
|
+
"--intent-success-hover": semantic.intent.success.colorHover,
|
|
1050
|
+
"--intent-success-active": semantic.intent.success.colorActive,
|
|
1051
|
+
"--intent-success-bg": semantic.intent.success.background,
|
|
1052
|
+
"--intent-success-bg-hover": semantic.intent.success.backgroundHover,
|
|
1053
|
+
"--intent-success-bg-active": semantic.intent.success.backgroundActive,
|
|
1054
|
+
"--intent-success-border": semantic.intent.success.border,
|
|
1055
|
+
"--intent-success-text": semantic.intent.success.text,
|
|
1056
|
+
"--intent-warning": semantic.intent.warning.color,
|
|
1057
|
+
"--intent-warning-hover": semantic.intent.warning.colorHover,
|
|
1058
|
+
"--intent-warning-active": semantic.intent.warning.colorActive,
|
|
1059
|
+
"--intent-warning-bg": semantic.intent.warning.background,
|
|
1060
|
+
"--intent-warning-bg-hover": semantic.intent.warning.backgroundHover,
|
|
1061
|
+
"--intent-warning-bg-active": semantic.intent.warning.backgroundActive,
|
|
1062
|
+
"--intent-warning-border": semantic.intent.warning.border,
|
|
1063
|
+
"--intent-warning-text": semantic.intent.warning.text,
|
|
1064
|
+
"--intent-danger": semantic.intent.danger.color,
|
|
1065
|
+
"--intent-danger-hover": semantic.intent.danger.colorHover,
|
|
1066
|
+
"--intent-danger-active": semantic.intent.danger.colorActive,
|
|
1067
|
+
"--intent-danger-bg": semantic.intent.danger.background,
|
|
1068
|
+
"--intent-danger-bg-hover": semantic.intent.danger.backgroundHover,
|
|
1069
|
+
"--intent-danger-bg-active": semantic.intent.danger.backgroundActive,
|
|
1070
|
+
"--intent-danger-border": semantic.intent.danger.border,
|
|
1071
|
+
"--intent-danger-text": semantic.intent.danger.text,
|
|
1072
|
+
"--intent-neutral": semantic.intent.neutral.color,
|
|
1073
|
+
"--intent-neutral-hover": semantic.intent.neutral.colorHover,
|
|
1074
|
+
"--intent-neutral-active": semantic.intent.neutral.colorActive,
|
|
1075
|
+
"--intent-neutral-bg": semantic.intent.neutral.background,
|
|
1076
|
+
"--intent-neutral-bg-hover": semantic.intent.neutral.backgroundHover,
|
|
1077
|
+
"--intent-neutral-bg-active": semantic.intent.neutral.backgroundActive,
|
|
1078
|
+
"--intent-neutral-border": semantic.intent.neutral.border,
|
|
1079
|
+
"--intent-neutral-text": semantic.intent.neutral.text,
|
|
1077
1080
|
// Surface
|
|
1078
|
-
"--
|
|
1079
|
-
"--
|
|
1080
|
-
"--
|
|
1081
|
-
"--
|
|
1082
|
-
"--
|
|
1081
|
+
"--surface-base": semantic.surface.base.background,
|
|
1082
|
+
"--surface-base-border": semantic.surface.base.border,
|
|
1083
|
+
"--surface-elevated": semantic.surface.elevated.background,
|
|
1084
|
+
"--surface-elevated-border": semantic.surface.elevated.border,
|
|
1085
|
+
"--surface-overlay": semantic.surface.overlay.background,
|
|
1083
1086
|
// Text
|
|
1084
|
-
"--
|
|
1085
|
-
"--
|
|
1086
|
-
"--
|
|
1087
|
-
"--
|
|
1087
|
+
"--text-heading": semantic.text.heading,
|
|
1088
|
+
"--text-body": semantic.text.body,
|
|
1089
|
+
"--text-muted": semantic.text.muted,
|
|
1090
|
+
"--text-disabled": semantic.text.disabled,
|
|
1088
1091
|
// Spacing
|
|
1089
|
-
"--
|
|
1090
|
-
"--
|
|
1091
|
-
"--
|
|
1092
|
-
"--
|
|
1093
|
-
"--
|
|
1094
|
-
"--
|
|
1095
|
-
"--
|
|
1096
|
-
"--
|
|
1097
|
-
"--
|
|
1098
|
-
"--
|
|
1099
|
-
"--
|
|
1100
|
-
"--
|
|
1101
|
-
"--
|
|
1092
|
+
"--spacing-0": spacing[0],
|
|
1093
|
+
"--spacing-1": spacing[1],
|
|
1094
|
+
"--spacing-2": spacing[2],
|
|
1095
|
+
"--spacing-3": spacing[3],
|
|
1096
|
+
"--spacing-4": spacing[4],
|
|
1097
|
+
"--spacing-5": spacing[5],
|
|
1098
|
+
"--spacing-6": spacing[6],
|
|
1099
|
+
"--spacing-8": spacing[8],
|
|
1100
|
+
"--spacing-10": spacing[10],
|
|
1101
|
+
"--spacing-12": spacing[12],
|
|
1102
|
+
"--spacing-16": spacing[16],
|
|
1103
|
+
"--spacing-20": spacing[20],
|
|
1104
|
+
"--spacing-24": spacing[24],
|
|
1102
1105
|
// Radius
|
|
1103
|
-
"--
|
|
1104
|
-
"--
|
|
1105
|
-
"--
|
|
1106
|
-
"--
|
|
1107
|
-
"--
|
|
1108
|
-
"--
|
|
1109
|
-
"--
|
|
1110
|
-
"--
|
|
1111
|
-
"--
|
|
1106
|
+
"--radius-none": radius.none,
|
|
1107
|
+
"--radius-sm": radius.sm,
|
|
1108
|
+
"--radius-base": radius.base,
|
|
1109
|
+
"--radius-md": radius.md,
|
|
1110
|
+
"--radius-lg": radius.lg,
|
|
1111
|
+
"--radius-xl": radius.xl,
|
|
1112
|
+
"--radius-2xl": radius["2xl"],
|
|
1113
|
+
"--radius-3xl": radius["3xl"],
|
|
1114
|
+
"--radius-full": radius.full,
|
|
1112
1115
|
// Shadows
|
|
1113
|
-
"--
|
|
1114
|
-
"--
|
|
1115
|
-
"--
|
|
1116
|
-
"--
|
|
1117
|
-
"--
|
|
1118
|
-
"--
|
|
1119
|
-
"--
|
|
1120
|
-
"--
|
|
1116
|
+
"--shadow-sm": shadows.sm,
|
|
1117
|
+
"--shadow-base": shadows.base,
|
|
1118
|
+
"--shadow-md": shadows.md,
|
|
1119
|
+
"--shadow-lg": shadows.lg,
|
|
1120
|
+
"--shadow-xl": shadows.xl,
|
|
1121
|
+
"--shadow-2xl": shadows["2xl"],
|
|
1122
|
+
"--shadow-inner": shadows.inner,
|
|
1123
|
+
"--shadow-none": shadows.none,
|
|
1121
1124
|
// Z-index
|
|
1122
|
-
"--
|
|
1123
|
-
"--
|
|
1124
|
-
"--
|
|
1125
|
-
"--
|
|
1126
|
-
"--
|
|
1127
|
-
"--
|
|
1128
|
-
"--
|
|
1125
|
+
"--z-dropdown": String(zIndex.dropdown),
|
|
1126
|
+
"--z-sticky": String(zIndex.sticky),
|
|
1127
|
+
"--z-fixed": String(zIndex.fixed),
|
|
1128
|
+
"--z-modal-backdrop": String(zIndex.modalBackdrop),
|
|
1129
|
+
"--z-modal": String(zIndex.modal),
|
|
1130
|
+
"--z-popover": String(zIndex.popover),
|
|
1131
|
+
"--z-tooltip": String(zIndex.tooltip),
|
|
1129
1132
|
// Typography
|
|
1130
|
-
"--
|
|
1131
|
-
"--
|
|
1132
|
-
"--
|
|
1133
|
-
"--
|
|
1134
|
-
"--
|
|
1135
|
-
"--
|
|
1136
|
-
"--
|
|
1137
|
-
"--
|
|
1138
|
-
"--
|
|
1139
|
-
"--
|
|
1140
|
-
"--
|
|
1141
|
-
"--
|
|
1142
|
-
"--
|
|
1143
|
-
"--
|
|
1144
|
-
"--
|
|
1145
|
-
"--
|
|
1146
|
-
"--
|
|
1147
|
-
"--
|
|
1133
|
+
"--font-sans": typography.fontFamily.sans.join(", "),
|
|
1134
|
+
"--font-mono": typography.fontFamily.mono.join(", "),
|
|
1135
|
+
"--font-size-xs": typography.fontSize.xs,
|
|
1136
|
+
"--font-size-sm": typography.fontSize.sm,
|
|
1137
|
+
"--font-size-base": typography.fontSize.base,
|
|
1138
|
+
"--font-size-lg": typography.fontSize.lg,
|
|
1139
|
+
"--font-size-xl": typography.fontSize.xl,
|
|
1140
|
+
"--font-size-2xl": typography.fontSize["2xl"],
|
|
1141
|
+
"--font-size-3xl": typography.fontSize["3xl"],
|
|
1142
|
+
"--font-size-4xl": typography.fontSize["4xl"],
|
|
1143
|
+
"--font-size-5xl": typography.fontSize["5xl"],
|
|
1144
|
+
"--font-weight-normal": typography.fontWeight.normal,
|
|
1145
|
+
"--font-weight-medium": typography.fontWeight.medium,
|
|
1146
|
+
"--font-weight-semibold": typography.fontWeight.semibold,
|
|
1147
|
+
"--font-weight-bold": typography.fontWeight.bold,
|
|
1148
|
+
"--line-height-tight": typography.lineHeight.tight,
|
|
1149
|
+
"--line-height-normal": typography.lineHeight.normal,
|
|
1150
|
+
"--line-height-relaxed": typography.lineHeight.relaxed,
|
|
1148
1151
|
// shadcn/ui CSS variable mappings for compatibility
|
|
1149
1152
|
"--background": semantic.surface.base.background,
|
|
1150
1153
|
"--foreground": semantic.text.body,
|
|
@@ -1167,70 +1170,21 @@ function createTheme(name, mode) {
|
|
|
1167
1170
|
"--ring": semantic.intent.primary.color,
|
|
1168
1171
|
"--radius": radius.md,
|
|
1169
1172
|
// New semantic token CSS variables (border, content, background)
|
|
1170
|
-
// Border tokens
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
"--pd-border-yellow": border.yellow,
|
|
1186
|
-
"--pd-border-yellowSubtle": border.yellowSubtle,
|
|
1187
|
-
"--pd-border-yellowOnHover": border.yellowOnHover,
|
|
1188
|
-
"--pd-border-green": border.green,
|
|
1189
|
-
"--pd-border-greenSubtle": border.greenSubtle,
|
|
1190
|
-
"--pd-border-greenOnHover": border.greenOnHover,
|
|
1191
|
-
// Content tokens
|
|
1192
|
-
"--pd-content-primary": content.primary,
|
|
1193
|
-
"--pd-content-secondary": content.secondary,
|
|
1194
|
-
"--pd-content-subtle": content.subtle,
|
|
1195
|
-
"--pd-content-onColor": content.onColor,
|
|
1196
|
-
"--pd-content-alwaysWhite": content.alwaysWhite,
|
|
1197
|
-
"--pd-content-alwaysBlack": content.alwaysBlack,
|
|
1198
|
-
"--pd-content-onColorInverse": content.onColorInverse,
|
|
1199
|
-
"--pd-content-blue": content.blue,
|
|
1200
|
-
"--pd-content-blueDisabled": content.blueDisabled,
|
|
1201
|
-
"--pd-content-blueOnHover": content.blueOnHover,
|
|
1202
|
-
"--pd-content-green": content.green,
|
|
1203
|
-
"--pd-content-greenDisabled": content.greenDisabled,
|
|
1204
|
-
"--pd-content-greenOnHover": content.greenOnHover,
|
|
1205
|
-
"--pd-content-red": content.red,
|
|
1206
|
-
"--pd-content-redDisabled": content.redDisabled,
|
|
1207
|
-
"--pd-content-redOnHover": content.redOnHover,
|
|
1208
|
-
"--pd-content-orange": content.orange,
|
|
1209
|
-
"--pd-content-orangeDisabled": content.orangeDisabled,
|
|
1210
|
-
"--pd-content-orangeOnHover": content.orangeOnHover,
|
|
1211
|
-
"--pd-content-yellow": content.yellow,
|
|
1212
|
-
"--pd-content-yellowDisabled": content.yellowDisabled,
|
|
1213
|
-
"--pd-content-yellowOnHover": content.yellowOnHover,
|
|
1214
|
-
// Background tokens
|
|
1215
|
-
"--pd-background-base": background.base,
|
|
1216
|
-
"--pd-background-primary": background.primary,
|
|
1217
|
-
"--pd-background-primaryOnHover": background.primaryOnHover,
|
|
1218
|
-
"--pd-background-secondary": background.secondary,
|
|
1219
|
-
"--pd-background-tertiary": background.tertiary,
|
|
1220
|
-
"--pd-background-invert": background.invert,
|
|
1221
|
-
"--pd-background-invertLight": background.invertLight,
|
|
1222
|
-
"--pd-background-green": background.green,
|
|
1223
|
-
"--pd-background-greenOnHover": background.greenOnHover,
|
|
1224
|
-
"--pd-background-red": background.red,
|
|
1225
|
-
"--pd-background-redOnHover": background.redOnHover,
|
|
1226
|
-
"--pd-background-orange": background.orange,
|
|
1227
|
-
"--pd-background-orangeOnHover": background.orangeOnHover,
|
|
1228
|
-
"--pd-background-yellow": background.yellow,
|
|
1229
|
-
"--pd-background-yellowOnHover": background.yellowOnHover,
|
|
1230
|
-
"--pd-background-low": background.low,
|
|
1231
|
-
"--pd-background-lowOnHover": background.lowOnHover,
|
|
1232
|
-
"--pd-background-info": background.info,
|
|
1233
|
-
"--pd-background-infoOnHover": background.infoOnHover
|
|
1173
|
+
// Border tokens - convert camelCase keys to kebab-case
|
|
1174
|
+
...Object.entries(border).reduce((acc, [key, value]) => {
|
|
1175
|
+
acc[`--border-${toKebabCase(key)}`] = value;
|
|
1176
|
+
return acc;
|
|
1177
|
+
}, {}),
|
|
1178
|
+
// Content tokens - convert camelCase keys to kebab-case
|
|
1179
|
+
...Object.entries(content).reduce((acc, [key, value]) => {
|
|
1180
|
+
acc[`--content-${toKebabCase(key)}`] = value;
|
|
1181
|
+
return acc;
|
|
1182
|
+
}, {}),
|
|
1183
|
+
// Background tokens - convert camelCase keys to kebab-case
|
|
1184
|
+
...Object.entries(background).reduce((acc, [key, value]) => {
|
|
1185
|
+
acc[`--background-${toKebabCase(key)}`] = value;
|
|
1186
|
+
return acc;
|
|
1187
|
+
}, {})
|
|
1234
1188
|
};
|
|
1235
1189
|
return {
|
|
1236
1190
|
name,
|