@dlbcodes/ui 0.8.1 → 0.9.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.
- package/dist/index.js +449 -418
- package/dist/lib/components/form/Input.vue.d.ts +1 -1
- package/dist/lib/components/form/Textarea.vue.d.ts +1 -1
- package/dist/lib/components/form/combobox/ComboboxInput.vue.d.ts +1 -1
- package/dist/lib/components/form/multiselect/MultiSelectTrigger.vue.d.ts +1 -1
- package/dist/lib/components/form/select/SelectTrigger.vue.d.ts +1 -1
- package/dist/lib/components/primitives/Badge.vue.d.ts +1 -1
- package/dist/lib/components/primitives/alert/Alert.vue.d.ts +1 -1
- package/dist/lib/styles/tokens.css +222 -103
- package/dist/lib/variants/alert.d.ts +1 -1
- package/dist/lib/variants/badge.d.ts +1 -1
- package/dist/lib/variants/input.d.ts +1 -1
- package/package.json +7 -2
|
@@ -32,7 +32,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
|
|
|
32
32
|
"onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
|
|
33
33
|
}>, {
|
|
34
34
|
variant: "primary" | "contrast" | null;
|
|
35
|
-
size: "base" | "sm" | null;
|
|
35
|
+
size: "xl" | "lg" | "base" | "sm" | null;
|
|
36
36
|
type: string;
|
|
37
37
|
disabled: boolean;
|
|
38
38
|
invalid: boolean;
|
|
@@ -34,7 +34,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
|
|
|
34
34
|
"onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
|
|
35
35
|
}>, {
|
|
36
36
|
variant: "primary" | "contrast" | null;
|
|
37
|
-
size: "base" | "sm" | null;
|
|
37
|
+
size: "xl" | "lg" | "base" | "sm" | null;
|
|
38
38
|
disabled: boolean;
|
|
39
39
|
invalid: boolean;
|
|
40
40
|
required: boolean;
|
|
@@ -7,7 +7,7 @@ interface Props {
|
|
|
7
7
|
}
|
|
8
8
|
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
9
9
|
variant: "primary" | "contrast" | null;
|
|
10
|
-
size: "base" | "sm" | null;
|
|
10
|
+
size: "xl" | "lg" | "base" | "sm" | null;
|
|
11
11
|
placeholder: string;
|
|
12
12
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
13
13
|
export default _default;
|
|
@@ -18,7 +18,7 @@ declare function __VLS_template(): {
|
|
|
18
18
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
19
19
|
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
20
20
|
variant: "primary" | "contrast" | null;
|
|
21
|
-
size: "base" | "sm" | null;
|
|
21
|
+
size: "xl" | "lg" | "base" | "sm" | null;
|
|
22
22
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
23
23
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
24
24
|
export default _default;
|
|
@@ -19,7 +19,7 @@ declare function __VLS_template(): {
|
|
|
19
19
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
20
20
|
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
21
21
|
variant: "primary" | "contrast" | null;
|
|
22
|
-
size: "base" | "sm" | null;
|
|
22
|
+
size: "xl" | "lg" | "base" | "sm" | null;
|
|
23
23
|
placeholder: string;
|
|
24
24
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
25
25
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
@@ -14,7 +14,7 @@ declare function __VLS_template(): {
|
|
|
14
14
|
};
|
|
15
15
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
16
16
|
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
17
|
-
variant: "primary" | "destructive" | "outline" | "success" | "
|
|
17
|
+
variant: "primary" | "destructive" | "outline" | "success" | "warning" | "info" | "neutral" | null;
|
|
18
18
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
|
|
19
19
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
20
20
|
export default _default;
|
|
@@ -16,7 +16,7 @@ declare function __VLS_template(): {
|
|
|
16
16
|
};
|
|
17
17
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
18
18
|
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
19
|
-
variant: "
|
|
19
|
+
variant: "destructive" | "success" | "warning" | "info" | "neutral" | null;
|
|
20
20
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
21
21
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
22
22
|
export default _default;
|
|
@@ -1,107 +1,213 @@
|
|
|
1
|
-
@theme {
|
|
2
|
-
/* ═══════════════════════════════════════════════════════════════
|
|
3
|
-
1 · PRIMITIVES — the raw palette (internal)
|
|
4
|
-
Source colors. You normally DON'T override these; theme via the
|
|
5
|
-
semantic tokens in section 2. Override a primitive only to shift
|
|
6
|
-
every semantic token that references it at once.
|
|
7
|
-
═══════════════════════════════════════════════════════════════ */
|
|
8
|
-
|
|
9
|
-
/* Neutrals — text ramp (light → dark) */
|
|
10
|
-
--color-text-100: oklch(94.5% 0.009 96);
|
|
11
|
-
--color-text-300: oklch(87% 0.0155 96);
|
|
12
|
-
--color-text-500: oklch(76% 0.0155 97);
|
|
13
|
-
--color-text-700: oklch(55.11% 0.0092 99);
|
|
14
|
-
--color-text-900: oklch(19.08% 0.002 106.6);
|
|
15
|
-
|
|
16
|
-
/* Neutrals — background ramp (light → dark) */
|
|
17
|
-
--color-bg-0: oklch(100% 0 0);
|
|
18
|
-
--color-bg-100: oklch(98.18% 0.0054 95.1);
|
|
19
|
-
--color-bg-200: oklch(96.6% 0.0093 100);
|
|
20
|
-
--color-bg-300: oklch(94.85% 0.0109 95.2);
|
|
21
|
-
--color-bg-400: oklch(92.37% 0.0135 97.5);
|
|
22
|
-
--color-bg-600: oklch(84.5% 0.018 97);
|
|
23
|
-
--color-bg-900: oklch(0% 0 0);
|
|
24
|
-
|
|
25
|
-
/* Brand */
|
|
26
|
-
--color-brand-100: oklch(60.78% 0.1379 39.01);
|
|
27
|
-
--color-brand-200: oklch(67.24% 0.1308 38.76);
|
|
28
|
-
|
|
29
|
-
/* Accent */
|
|
30
|
-
--color-accent-pro-200: oklch(45.78% 0.143 287.89);
|
|
31
|
-
|
|
32
|
-
/* Status — success (green) */
|
|
33
|
-
--color-success-100: oklch(52% 0.13 152); /* text */
|
|
34
|
-
--color-success-200: oklch(90% 0.06 152); /* border */
|
|
35
|
-
--color-success-300: oklch(96.5% 0.03 152); /* surface */
|
|
36
|
-
|
|
37
|
-
/* Status — warning (amber) */
|
|
38
|
-
--color-warning-100: oklch(55% 0.12 75); /* text */
|
|
39
|
-
--color-warning-200: oklch(90% 0.08 85); /* border */
|
|
40
|
-
--color-warning-300: oklch(96.5% 0.04 85); /* surface */
|
|
41
|
-
|
|
42
|
-
/* Status — info (blue) */
|
|
43
|
-
--color-info-100: oklch(52% 0.15 250); /* text */
|
|
44
|
-
--color-info-200: oklch(90% 0.06 245); /* border */
|
|
45
|
-
--color-info-300: oklch(96.5% 0.03 245); /* surface */
|
|
46
|
-
|
|
47
|
-
/* Status — danger (red) */
|
|
48
|
-
--color-danger-100: oklch(52% 0.17 25); /* text */
|
|
49
|
-
--color-danger-200: oklch(90% 0.06 18); /* border */
|
|
50
|
-
--color-danger-300: oklch(96% 0.03 18); /* surface */
|
|
51
|
-
|
|
52
|
-
/* ═══════════════════════════════════════════════════════════════
|
|
53
|
-
2 · SEMANTIC TOKENS — the public theming API
|
|
54
|
-
Maps roles onto the primitives above. THIS is the layer to
|
|
55
|
-
override: set a semantic token to any value to retarget that role.
|
|
56
|
-
═══════════════════════════════════════════════════════════════ */
|
|
57
|
-
|
|
58
|
-
/* Text */
|
|
59
|
-
--color-text-primary: var(--color-text-900); /* body copy, headings */
|
|
60
|
-
--color-text-secondary: var(--color-text-700); /* labels, metadata */
|
|
61
|
-
--color-text-tertiary: var(--color-text-500); /* placeholders, hints */
|
|
62
|
-
--color-text-disabled: var(--color-text-300); /* disabled state */
|
|
63
|
-
--color-text-inverse: var(--color-text-100); /* text on dark surfaces */
|
|
64
|
-
|
|
65
|
-
/* Background */
|
|
66
|
-
--color-bg-base: var(--color-bg-100); /* page background */
|
|
67
|
-
--color-bg-surface: var(--color-bg-200); /* cards, panels */
|
|
68
|
-
--color-bg-raised: var(--color-bg-0); /* floating/selected surface */
|
|
69
|
-
--color-bg-elevated: var(--color-bg-300); /* dropdowns, tooltips */
|
|
70
|
-
--color-bg-subtle: var(--color-bg-400); /* hover states, tags */
|
|
71
|
-
--color-bg-strong: var(--color-bg-600); /* separators, badges */
|
|
72
|
-
--color-bg-inverse: var(--color-bg-900); /* dark surfaces, banners */
|
|
73
|
-
|
|
74
|
-
/* Border */
|
|
75
|
-
--color-border-subtle: var(--color-bg-300); /* soft dividers */
|
|
76
|
-
--color-border-default: var(--color-bg-400); /* inputs, cards */
|
|
77
|
-
--color-border-strong: var(--color-bg-600); /* focus, emphasis */
|
|
78
|
-
--color-border-dark: var(--color-bg-900); /* strong outline */
|
|
79
|
-
|
|
80
|
-
/* Status — success */
|
|
81
|
-
--color-success-surface: var(--color-success-300);
|
|
82
|
-
--color-success-border: var(--color-success-200);
|
|
83
|
-
--color-success-text: var(--color-success-100);
|
|
84
|
-
|
|
85
|
-
/* Status — warning */
|
|
86
|
-
--color-warning-surface: var(--color-warning-300);
|
|
87
|
-
--color-warning-border: var(--color-warning-200);
|
|
88
|
-
--color-warning-text: var(--color-warning-100);
|
|
89
|
-
|
|
90
|
-
/* Status — info */
|
|
91
|
-
--color-info-surface: var(--color-info-300);
|
|
92
|
-
--color-info-border: var(--color-info-200);
|
|
93
|
-
--color-info-text: var(--color-info-100);
|
|
94
|
-
|
|
95
|
-
/* Status — danger */
|
|
96
|
-
--color-danger-surface: var(--color-danger-300);
|
|
97
|
-
--color-danger-border: var(--color-danger-200);
|
|
98
|
-
--color-danger-text: var(--color-danger-100);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
1
|
/* ═══════════════════════════════════════════════════════════════════
|
|
102
|
-
|
|
2
|
+
@dlbcodes/ui — theme.css (exact shadcn defaults + extras)
|
|
3
|
+
|
|
4
|
+
Core tokens (background … ring, chart, sidebar, radius) are the stock
|
|
5
|
+
shadcn values. Everything under "EXTRAS" is dlbcodes-specific.
|
|
6
|
+
Override any variable on :root, .dark or a wrapper element.
|
|
103
7
|
═══════════════════════════════════════════════════════════════════ */
|
|
104
8
|
|
|
9
|
+
@custom-variant dark (&:is(.dark, .dark *));
|
|
10
|
+
|
|
11
|
+
@theme inline {
|
|
12
|
+
--color-background: var(--background);
|
|
13
|
+
--color-foreground: var(--foreground);
|
|
14
|
+
--color-card: var(--card);
|
|
15
|
+
--color-card-foreground: var(--card-foreground);
|
|
16
|
+
--color-popover: var(--popover);
|
|
17
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
18
|
+
--color-primary: var(--primary);
|
|
19
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
20
|
+
--color-secondary: var(--secondary);
|
|
21
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
22
|
+
--color-muted: var(--muted);
|
|
23
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
24
|
+
--color-accent: var(--accent);
|
|
25
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
26
|
+
--color-destructive: var(--destructive);
|
|
27
|
+
--color-border: var(--border);
|
|
28
|
+
--color-input: var(--input);
|
|
29
|
+
--color-ring: var(--ring);
|
|
30
|
+
--color-chart-1: var(--chart-1);
|
|
31
|
+
--color-chart-2: var(--chart-2);
|
|
32
|
+
--color-chart-3: var(--chart-3);
|
|
33
|
+
--color-chart-4: var(--chart-4);
|
|
34
|
+
--color-chart-5: var(--chart-5);
|
|
35
|
+
--color-sidebar: var(--sidebar);
|
|
36
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
37
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
38
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
39
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
40
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
41
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
42
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
43
|
+
|
|
44
|
+
/* Radius scale — all derived from --radius (user-changeable) */
|
|
45
|
+
--radius-sm: calc(var(--radius) * 0.6);
|
|
46
|
+
--radius-md: calc(var(--radius) * 0.8);
|
|
47
|
+
--radius-lg: var(--radius);
|
|
48
|
+
--radius-xl: calc(var(--radius) * 1.4);
|
|
49
|
+
--radius-2xl: calc(var(--radius) * 1.8);
|
|
50
|
+
--radius-3xl: calc(var(--radius) * 2.2);
|
|
51
|
+
--radius-4xl: calc(var(--radius) * 2.6);
|
|
52
|
+
|
|
53
|
+
/* ── EXTRAS ─────────────────────────────────────────────────── */
|
|
54
|
+
--color-border-subtle: var(--border-subtle);
|
|
55
|
+
--color-border-strong: var(--border-strong);
|
|
56
|
+
|
|
57
|
+
--color-brand: var(--brand);
|
|
58
|
+
--color-brand-foreground: var(--brand-foreground);
|
|
59
|
+
--color-pro: var(--pro);
|
|
60
|
+
--color-pro-foreground: var(--pro-foreground);
|
|
61
|
+
|
|
62
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
63
|
+
--color-destructive-subtle: var(--destructive-subtle);
|
|
64
|
+
--color-destructive-border: var(--destructive-border);
|
|
65
|
+
|
|
66
|
+
--color-success: var(--success);
|
|
67
|
+
--color-success-foreground: var(--success-foreground);
|
|
68
|
+
--color-success-subtle: var(--success-subtle);
|
|
69
|
+
--color-success-border: var(--success-border);
|
|
70
|
+
|
|
71
|
+
--color-warning: var(--warning);
|
|
72
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
73
|
+
--color-warning-subtle: var(--warning-subtle);
|
|
74
|
+
--color-warning-border: var(--warning-border);
|
|
75
|
+
|
|
76
|
+
--color-info: var(--info);
|
|
77
|
+
--color-info-foreground: var(--info-foreground);
|
|
78
|
+
--color-info-subtle: var(--info-subtle);
|
|
79
|
+
--color-info-border: var(--info-border);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:root {
|
|
83
|
+
--radius: 0.625rem;
|
|
84
|
+
/* --radius: 0.125rem; */
|
|
85
|
+
--background: oklch(1 0 0);
|
|
86
|
+
--foreground: oklch(0.145 0 0);
|
|
87
|
+
--card: oklch(1 0 0);
|
|
88
|
+
--card-foreground: oklch(0.145 0 0);
|
|
89
|
+
--popover: oklch(1 0 0);
|
|
90
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
91
|
+
--primary: oklch(0.205 0 0);
|
|
92
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
93
|
+
--secondary: oklch(0.97 0 0);
|
|
94
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
95
|
+
--muted: oklch(0.97 0 0);
|
|
96
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
97
|
+
--accent: oklch(0.97 0 0);
|
|
98
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
99
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
100
|
+
--border: oklch(0.922 0 0);
|
|
101
|
+
--input: oklch(0.922 0 0);
|
|
102
|
+
--ring: oklch(0.708 0 0);
|
|
103
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
104
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
105
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
106
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
107
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
108
|
+
--sidebar: oklch(0.985 0 0);
|
|
109
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
110
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
111
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
112
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
113
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
114
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
115
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
116
|
+
|
|
117
|
+
/* ── EXTRAS ─────────────────────────────────────────────────── */
|
|
118
|
+
--border-subtle: oklch(0.955 0 0);
|
|
119
|
+
--border-strong: oklch(0.87 0 0);
|
|
120
|
+
|
|
121
|
+
--brand: oklch(0.6078 0.1379 39.01);
|
|
122
|
+
--brand-foreground: oklch(1 0 0);
|
|
123
|
+
--pro: oklch(0.4578 0.143 287.89);
|
|
124
|
+
--pro-foreground: oklch(1 0 0);
|
|
125
|
+
|
|
126
|
+
--destructive-foreground: oklch(1 0 0);
|
|
127
|
+
--destructive-subtle: oklch(0.96 0.03 18);
|
|
128
|
+
--destructive-border: oklch(0.9 0.06 18);
|
|
129
|
+
|
|
130
|
+
--success: oklch(0.52 0.13 152);
|
|
131
|
+
--success-foreground: oklch(1 0 0);
|
|
132
|
+
--success-subtle: oklch(0.965 0.03 152);
|
|
133
|
+
--success-border: oklch(0.9 0.06 152);
|
|
134
|
+
|
|
135
|
+
--warning: oklch(0.55 0.12 75);
|
|
136
|
+
--warning-foreground: oklch(1 0 0);
|
|
137
|
+
--warning-subtle: oklch(0.965 0.04 85);
|
|
138
|
+
--warning-border: oklch(0.9 0.08 85);
|
|
139
|
+
|
|
140
|
+
--info: oklch(0.52 0.15 250);
|
|
141
|
+
--info-foreground: oklch(1 0 0);
|
|
142
|
+
--info-subtle: oklch(0.965 0.03 245);
|
|
143
|
+
--info-border: oklch(0.9 0.06 245);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.dark {
|
|
147
|
+
--background: oklch(0.145 0 0);
|
|
148
|
+
--foreground: oklch(0.985 0 0);
|
|
149
|
+
--card: oklch(0.205 0 0);
|
|
150
|
+
--card-foreground: oklch(0.985 0 0);
|
|
151
|
+
--popover: oklch(0.205 0 0);
|
|
152
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
153
|
+
--primary: oklch(0.922 0 0);
|
|
154
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
155
|
+
--secondary: oklch(0.269 0 0);
|
|
156
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
157
|
+
--muted: oklch(0.269 0 0);
|
|
158
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
159
|
+
--accent: oklch(0.269 0 0);
|
|
160
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
161
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
162
|
+
--border: oklch(1 0 0 / 10%);
|
|
163
|
+
--input: oklch(1 0 0 / 15%);
|
|
164
|
+
--ring: oklch(0.556 0 0);
|
|
165
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
166
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
167
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
168
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
169
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
170
|
+
--sidebar: oklch(0.205 0 0);
|
|
171
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
172
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
173
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
174
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
175
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
176
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
177
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
178
|
+
|
|
179
|
+
/* ── EXTRAS ─────────────────────────────────────────────────── */
|
|
180
|
+
--border-subtle: oklch(1 0 0 / 6%);
|
|
181
|
+
--border-strong: oklch(1 0 0 / 20%);
|
|
182
|
+
|
|
183
|
+
--brand: oklch(0.6724 0.1308 38.76);
|
|
184
|
+
--brand-foreground: oklch(0 0 0);
|
|
185
|
+
--pro: oklch(0.7 0.14 288);
|
|
186
|
+
--pro-foreground: oklch(0 0 0);
|
|
187
|
+
|
|
188
|
+
--destructive-foreground: oklch(0 0 0);
|
|
189
|
+
--destructive-subtle: oklch(0.25 0.05 20);
|
|
190
|
+
--destructive-border: oklch(0.36 0.09 20);
|
|
191
|
+
|
|
192
|
+
--success: oklch(0.78 0.14 152);
|
|
193
|
+
--success-foreground: oklch(0 0 0);
|
|
194
|
+
--success-subtle: oklch(0.25 0.04 152);
|
|
195
|
+
--success-border: oklch(0.35 0.07 152);
|
|
196
|
+
|
|
197
|
+
--warning: oklch(0.8 0.13 85);
|
|
198
|
+
--warning-foreground: oklch(0 0 0);
|
|
199
|
+
--warning-subtle: oklch(0.26 0.04 85);
|
|
200
|
+
--warning-border: oklch(0.37 0.08 85);
|
|
201
|
+
|
|
202
|
+
--info: oklch(0.75 0.13 245);
|
|
203
|
+
--info-foreground: oklch(0 0 0);
|
|
204
|
+
--info-subtle: oklch(0.25 0.04 245);
|
|
205
|
+
--info-border: oklch(0.36 0.08 245);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* ───────────────────────────────────────────────────────────────────
|
|
209
|
+
UTILITIES
|
|
210
|
+
─────────────────────────────────────────────────────────────────── */
|
|
105
211
|
@utility no-scrollbar {
|
|
106
212
|
scrollbar-width: none;
|
|
107
213
|
&::-webkit-scrollbar {
|
|
@@ -111,15 +217,28 @@
|
|
|
111
217
|
|
|
112
218
|
@utility scrollbar-thin {
|
|
113
219
|
scrollbar-width: thin;
|
|
114
|
-
scrollbar-color: var(--
|
|
220
|
+
scrollbar-color: var(--border-strong) transparent;
|
|
115
221
|
&::-webkit-scrollbar {
|
|
116
222
|
width: 6px;
|
|
117
223
|
}
|
|
118
224
|
&::-webkit-scrollbar-thumb {
|
|
119
|
-
background-color: var(--
|
|
225
|
+
background-color: var(--border-strong);
|
|
120
226
|
border-radius: 3px;
|
|
121
227
|
}
|
|
122
228
|
&::-webkit-scrollbar-track {
|
|
123
229
|
background: transparent;
|
|
124
230
|
}
|
|
125
231
|
}
|
|
232
|
+
|
|
233
|
+
/* Optional global defaults — put these in your docs/app stylesheet, not
|
|
234
|
+
in the published library:
|
|
235
|
+
|
|
236
|
+
@layer base {
|
|
237
|
+
* {
|
|
238
|
+
@apply border-border outline-ring/50;
|
|
239
|
+
}
|
|
240
|
+
body {
|
|
241
|
+
@apply bg-background text-foreground;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
export declare const alertVariants: (props?: ({
|
|
3
|
-
variant?: "
|
|
3
|
+
variant?: "destructive" | "success" | "warning" | "info" | "neutral" | null | undefined;
|
|
4
4
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
5
5
|
export type AlertVariantsProps = VariantProps<typeof alertVariants>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
export declare const badgeVariants: (props?: ({
|
|
3
|
-
variant?: "primary" | "destructive" | "outline" | "success" | "
|
|
3
|
+
variant?: "primary" | "destructive" | "outline" | "success" | "warning" | "info" | "neutral" | null | undefined;
|
|
4
4
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
5
5
|
export type BadgeProps = VariantProps<typeof badgeVariants>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
export declare const inputVariants: (props?: ({
|
|
3
3
|
variant?: "primary" | "contrast" | null | undefined;
|
|
4
|
-
size?: "base" | "sm" | null | undefined;
|
|
4
|
+
size?: "xl" | "lg" | "base" | "sm" | null | undefined;
|
|
5
5
|
invalid?: boolean | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export type InputProps = VariantProps<typeof inputVariants>;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@dlbcodes/ui",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.9.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist"
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"@headlessui-float/vue": "^0.15.0",
|
|
32
32
|
"@headlessui/vue": "^1.7.23",
|
|
33
33
|
"@phosphor-icons/vue": "^2.2.0",
|
|
34
|
+
"@vercel/analytics": "^2.0.1",
|
|
34
35
|
"@vueuse/core": "^14.3.0",
|
|
35
36
|
"@vueuse/integrations": "^14.3.0",
|
|
36
37
|
"class-variance-authority": "^0.7.1",
|
|
@@ -39,7 +40,6 @@
|
|
|
39
40
|
"tailwind-merge": "^2.5.4"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@vercel/analytics": "^2.0.1",
|
|
43
43
|
"@microsoft/api-extractor": "^7.58.7",
|
|
44
44
|
"@tailwindcss/vite": "^4.0.0",
|
|
45
45
|
"@types/node": "^24.12.3",
|
|
@@ -59,5 +59,10 @@
|
|
|
59
59
|
"vitest": "^4.1.8",
|
|
60
60
|
"vue": "^3.5.34",
|
|
61
61
|
"vue-tsc": "^3.2.8"
|
|
62
|
+
},
|
|
63
|
+
"overrides": {
|
|
64
|
+
"@vercel/analytics": {
|
|
65
|
+
"vue-router": "$vue-router"
|
|
66
|
+
}
|
|
62
67
|
}
|
|
63
68
|
}
|