@bcc-code/component-library-vue 0.1.0 → 0.3.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/component-library.js +588 -581
- package/dist/component-library.umd.cjs +132 -132
- package/dist/index.css +1 -1
- package/dist/theme.css +80 -76
- package/dist-types/components/custom/BccBadge/BccBadge.vue.d.ts +3 -3
- package/dist-types/components/wrapped/BccTabs.vue.d.ts +1 -0
- package/package.json +1 -1
package/dist/theme.css
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
/* === ./styles/theme.css === */
|
|
10
10
|
@theme {
|
|
11
|
-
|
|
11
|
+
|
|
12
12
|
/* spacing variables */
|
|
13
13
|
--spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
|
|
14
14
|
--spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
|
|
@@ -27,72 +27,72 @@
|
|
|
27
27
|
--color-overlay: rgba(17, 24, 39, 0.85);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.ctx-default { @apply ctx-default }
|
|
31
|
-
.ctx-success { @apply ctx-success-subtlest }
|
|
32
|
-
.ctx-danger { @apply ctx-danger-subtlest }
|
|
33
|
-
.ctx-warning { @apply ctx-warning-subtlest }
|
|
34
|
-
.ctx-info { @apply ctx-info-subtlest }
|
|
35
|
-
|
|
36
|
-
.ctx-blue-bolder { @apply ctx-blue-bolder }
|
|
37
|
-
.ctx-blue-subtle { @apply ctx-blue-subtle }
|
|
38
|
-
.ctx-blue-subtler { @apply ctx-blue-subtler }
|
|
39
|
-
.ctx-blue-subtlest { @apply ctx-blue-subtlest }
|
|
40
|
-
.ctx-brand-boldest { @apply ctx-brand-boldest }
|
|
41
|
-
.ctx-brand-bolder { @apply ctx-brand-bolder }
|
|
42
|
-
.ctx-brand-bold { @apply ctx-brand-bold }
|
|
43
|
-
.ctx-brand-subtle { @apply ctx-brand-subtle }
|
|
44
|
-
.ctx-brand-subtler { @apply ctx-brand-subtler }
|
|
45
|
-
.ctx-brand-subtlest { @apply ctx-brand-subtlest }
|
|
46
|
-
.ctx-brown-bolder { @apply ctx-brown-bolder }
|
|
47
|
-
.ctx-brown-subtle { @apply ctx-brown-subtle }
|
|
48
|
-
.ctx-brown-subtler { @apply ctx-brown-subtler }
|
|
49
|
-
.ctx-brown-subtlest { @apply ctx-brown-subtlest }
|
|
50
|
-
.ctx-danger-subtlest { @apply ctx-danger }
|
|
51
|
-
.ctx-danger-bolder { @apply ctx-danger-bolder }
|
|
52
|
-
.ctx-gray-bolder { @apply ctx-gray-bolder }
|
|
53
|
-
.ctx-gray-subtle { @apply ctx-gray-subtle }
|
|
54
|
-
.ctx-gray-subtler { @apply ctx-gray-subtler }
|
|
55
|
-
.ctx-gray-subtlest { @apply ctx-gray-subtlest }
|
|
56
|
-
.ctx-green-bolder { @apply ctx-green-bolder }
|
|
57
|
-
.ctx-green-subtle { @apply ctx-green-subtle }
|
|
58
|
-
.ctx-green-subtler { @apply ctx-green-subtler }
|
|
59
|
-
.ctx-green-subtlest { @apply ctx-green-subtlest }
|
|
60
|
-
.ctx-info-subtlest { @apply ctx-info }
|
|
61
|
-
.ctx-info-bolder { @apply ctx-info-bolder }
|
|
62
|
-
.ctx-magenta-bolder { @apply ctx-magenta-bolder }
|
|
63
|
-
.ctx-magenta-subtle { @apply ctx-magenta-subtle }
|
|
64
|
-
.ctx-magenta-subtler { @apply ctx-magenta-subtler }
|
|
65
|
-
.ctx-magenta-subtlest { @apply ctx-magenta-subtlest }
|
|
66
|
-
.ctx-neutral-boldest { @apply ctx-neutral-boldest }
|
|
67
|
-
.ctx-neutral-bolder { @apply ctx-neutral-bolder }
|
|
68
|
-
.ctx-neutral-bold { @apply ctx-neutral-bold }
|
|
69
|
-
.ctx-neutral-subtle { @apply ctx-neutral-subtle }
|
|
70
|
-
.ctx-neutral-subtler { @apply ctx-neutral-subtler }
|
|
71
|
-
.ctx-neutral-subtlest { @apply ctx-neutral-subtlest }
|
|
72
|
-
.ctx-orange-bolder { @apply ctx-orange-bolder }
|
|
73
|
-
.ctx-orange-subtle { @apply ctx-orange-subtle }
|
|
74
|
-
.ctx-orange-subtler { @apply ctx-orange-subtler }
|
|
75
|
-
.ctx-orange-subtlest { @apply ctx-orange-subtlest }
|
|
76
|
-
.ctx-purple-bolder { @apply ctx-purple-bolder }
|
|
77
|
-
.ctx-purple-subtle { @apply ctx-purple-subtle }
|
|
78
|
-
.ctx-purple-subtler { @apply ctx-purple-subtler }
|
|
79
|
-
.ctx-purple-subtlest { @apply ctx-purple-subtlest }
|
|
80
|
-
.ctx-red-bolder { @apply ctx-red-bolder }
|
|
81
|
-
.ctx-red-subtle { @apply ctx-red-subtle }
|
|
82
|
-
.ctx-red-subtler { @apply ctx-red-subtler }
|
|
83
|
-
.ctx-red-subtlest { @apply ctx-red-subtlest }
|
|
84
|
-
.ctx-success-subtlest { @apply ctx-success }
|
|
85
|
-
.ctx-success-bolder { @apply ctx-success-bolder }
|
|
86
|
-
.ctx-teal-bolder { @apply ctx-teal-bolder }
|
|
87
|
-
.ctx-teal-subtle { @apply ctx-teal-subtle }
|
|
88
|
-
.ctx-teal-subtler { @apply ctx-teal-subtler }
|
|
89
|
-
.ctx-teal-subtlest { @apply ctx-teal-subtlest }
|
|
90
|
-
.ctx-warning-subtlest { @apply ctx-warning }
|
|
91
|
-
.ctx-warning-bolder { @apply ctx-warning-bolder }
|
|
92
|
-
.ctx-yellow-bolder { @apply ctx-yellow-bolder }
|
|
93
|
-
.ctx-yellow-subtle { @apply ctx-yellow-subtle }
|
|
94
|
-
.ctx-yellow-subtler { @apply ctx-yellow-subtler }
|
|
95
|
-
.ctx-yellow-subtlest { @apply ctx-yellow-subtlest }
|
|
30
|
+
.ctx-default { @apply ctx-default; }
|
|
31
|
+
.ctx-success { @apply ctx-success-subtlest; }
|
|
32
|
+
.ctx-danger { @apply ctx-danger-subtlest; }
|
|
33
|
+
.ctx-warning { @apply ctx-warning-subtlest; }
|
|
34
|
+
.ctx-info { @apply ctx-info-subtlest; }
|
|
35
|
+
|
|
36
|
+
.ctx-blue-bolder { @apply ctx-blue-bolder; }
|
|
37
|
+
.ctx-blue-subtle { @apply ctx-blue-subtle; }
|
|
38
|
+
.ctx-blue-subtler { @apply ctx-blue-subtler; }
|
|
39
|
+
.ctx-blue-subtlest { @apply ctx-blue-subtlest; }
|
|
40
|
+
.ctx-brand-boldest { @apply ctx-brand-boldest; }
|
|
41
|
+
.ctx-brand-bolder { @apply ctx-brand-bolder; }
|
|
42
|
+
.ctx-brand-bold { @apply ctx-brand-bold; }
|
|
43
|
+
.ctx-brand-subtle { @apply ctx-brand-subtle; }
|
|
44
|
+
.ctx-brand-subtler { @apply ctx-brand-subtler; }
|
|
45
|
+
.ctx-brand-subtlest { @apply ctx-brand-subtlest; }
|
|
46
|
+
.ctx-brown-bolder { @apply ctx-brown-bolder; }
|
|
47
|
+
.ctx-brown-subtle { @apply ctx-brown-subtle; }
|
|
48
|
+
.ctx-brown-subtler { @apply ctx-brown-subtler; }
|
|
49
|
+
.ctx-brown-subtlest { @apply ctx-brown-subtlest; }
|
|
50
|
+
.ctx-danger-subtlest { @apply ctx-danger; }
|
|
51
|
+
.ctx-danger-bolder { @apply ctx-danger-bolder; }
|
|
52
|
+
.ctx-gray-bolder { @apply ctx-gray-bolder; }
|
|
53
|
+
.ctx-gray-subtle { @apply ctx-gray-subtle; }
|
|
54
|
+
.ctx-gray-subtler { @apply ctx-gray-subtler; }
|
|
55
|
+
.ctx-gray-subtlest { @apply ctx-gray-subtlest; }
|
|
56
|
+
.ctx-green-bolder { @apply ctx-green-bolder; }
|
|
57
|
+
.ctx-green-subtle { @apply ctx-green-subtle; }
|
|
58
|
+
.ctx-green-subtler { @apply ctx-green-subtler; }
|
|
59
|
+
.ctx-green-subtlest { @apply ctx-green-subtlest; }
|
|
60
|
+
.ctx-info-subtlest { @apply ctx-info; }
|
|
61
|
+
.ctx-info-bolder { @apply ctx-info-bolder; }
|
|
62
|
+
.ctx-magenta-bolder { @apply ctx-magenta-bolder; }
|
|
63
|
+
.ctx-magenta-subtle { @apply ctx-magenta-subtle; }
|
|
64
|
+
.ctx-magenta-subtler { @apply ctx-magenta-subtler; }
|
|
65
|
+
.ctx-magenta-subtlest { @apply ctx-magenta-subtlest; }
|
|
66
|
+
.ctx-neutral-boldest { @apply ctx-neutral-boldest; }
|
|
67
|
+
.ctx-neutral-bolder { @apply ctx-neutral-bolder; }
|
|
68
|
+
.ctx-neutral-bold { @apply ctx-neutral-bold; }
|
|
69
|
+
.ctx-neutral-subtle { @apply ctx-neutral-subtle; }
|
|
70
|
+
.ctx-neutral-subtler { @apply ctx-neutral-subtler; }
|
|
71
|
+
.ctx-neutral-subtlest { @apply ctx-neutral-subtlest; }
|
|
72
|
+
.ctx-orange-bolder { @apply ctx-orange-bolder; }
|
|
73
|
+
.ctx-orange-subtle { @apply ctx-orange-subtle; }
|
|
74
|
+
.ctx-orange-subtler { @apply ctx-orange-subtler; }
|
|
75
|
+
.ctx-orange-subtlest { @apply ctx-orange-subtlest; }
|
|
76
|
+
.ctx-purple-bolder { @apply ctx-purple-bolder; }
|
|
77
|
+
.ctx-purple-subtle { @apply ctx-purple-subtle; }
|
|
78
|
+
.ctx-purple-subtler { @apply ctx-purple-subtler; }
|
|
79
|
+
.ctx-purple-subtlest { @apply ctx-purple-subtlest; }
|
|
80
|
+
.ctx-red-bolder { @apply ctx-red-bolder; }
|
|
81
|
+
.ctx-red-subtle { @apply ctx-red-subtle; }
|
|
82
|
+
.ctx-red-subtler { @apply ctx-red-subtler; }
|
|
83
|
+
.ctx-red-subtlest { @apply ctx-red-subtlest; }
|
|
84
|
+
.ctx-success-subtlest { @apply ctx-success; }
|
|
85
|
+
.ctx-success-bolder { @apply ctx-success-bolder; }
|
|
86
|
+
.ctx-teal-bolder { @apply ctx-teal-bolder; }
|
|
87
|
+
.ctx-teal-subtle { @apply ctx-teal-subtle; }
|
|
88
|
+
.ctx-teal-subtler { @apply ctx-teal-subtler; }
|
|
89
|
+
.ctx-teal-subtlest { @apply ctx-teal-subtlest; }
|
|
90
|
+
.ctx-warning-subtlest { @apply ctx-warning; }
|
|
91
|
+
.ctx-warning-bolder { @apply ctx-warning-bolder; }
|
|
92
|
+
.ctx-yellow-bolder { @apply ctx-yellow-bolder; }
|
|
93
|
+
.ctx-yellow-subtle { @apply ctx-yellow-subtle; }
|
|
94
|
+
.ctx-yellow-subtler { @apply ctx-yellow-subtler; }
|
|
95
|
+
.ctx-yellow-subtlest { @apply ctx-yellow-subtlest; }
|
|
96
96
|
|
|
97
97
|
|
|
98
98
|
/* === ./styles/semantic.css === */
|
|
@@ -1739,10 +1739,10 @@
|
|
|
1739
1739
|
@utility ctx-default {
|
|
1740
1740
|
@apply ctx-neutral-subtlest;
|
|
1741
1741
|
}
|
|
1742
|
-
@utility ctx-success { @apply ctx-success-subtlest }
|
|
1743
|
-
@utility ctx-danger { @apply ctx-danger-subtlest }
|
|
1744
|
-
@utility ctx-warning { @apply ctx-warning-subtlest }
|
|
1745
|
-
@utility ctx-info { @apply ctx-info-subtlest }
|
|
1742
|
+
@utility ctx-success { @apply ctx-success-subtlest; }
|
|
1743
|
+
@utility ctx-danger { @apply ctx-danger-subtlest; }
|
|
1744
|
+
@utility ctx-warning { @apply ctx-warning-subtlest; }
|
|
1745
|
+
@utility ctx-info { @apply ctx-info-subtlest; }
|
|
1746
1746
|
|
|
1747
1747
|
@utility text-ctx {
|
|
1748
1748
|
color: var(--ctx-text);
|
|
@@ -2123,7 +2123,7 @@
|
|
|
2123
2123
|
@apply bottom-4 left-4;
|
|
2124
2124
|
}
|
|
2125
2125
|
.bcc-graphic .center-slot {
|
|
2126
|
-
@apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center
|
|
2126
|
+
@apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
|
|
2127
2127
|
}
|
|
2128
2128
|
|
|
2129
2129
|
.bcc-graphic {
|
|
@@ -2131,17 +2131,17 @@
|
|
|
2131
2131
|
}
|
|
2132
2132
|
|
|
2133
2133
|
.bcc-graphic-banner {
|
|
2134
|
-
@apply absolute inset-0 h-full w-full object-cover object-center
|
|
2134
|
+
@apply absolute inset-0 h-full w-full object-cover object-center;
|
|
2135
2135
|
}
|
|
2136
2136
|
.bcc-graphic-banner--loading {
|
|
2137
|
-
@apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default
|
|
2137
|
+
@apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
|
|
2138
2138
|
}
|
|
2139
2139
|
|
|
2140
2140
|
.bcc-graphic-logo {
|
|
2141
|
-
@apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center
|
|
2141
|
+
@apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
|
|
2142
2142
|
}
|
|
2143
2143
|
.bcc-graphic-logo--loading {
|
|
2144
|
-
@apply animate-pulse bg-black opacity-10 blur-sm
|
|
2144
|
+
@apply animate-pulse bg-black opacity-10 blur-sm;
|
|
2145
2145
|
}
|
|
2146
2146
|
}
|
|
2147
2147
|
|
|
@@ -2232,6 +2232,10 @@
|
|
|
2232
2232
|
@apply size-full;
|
|
2233
2233
|
}
|
|
2234
2234
|
|
|
2235
|
+
.bcc-badge.border {
|
|
2236
|
+
@apply border-1;
|
|
2237
|
+
border-color: var(--ctx-background-pressed);
|
|
2238
|
+
}
|
|
2235
2239
|
.bcc-badge.bordered {
|
|
2236
2240
|
@apply border-2;
|
|
2237
2241
|
border-color: var(--ctx-background-pressed);
|
|
@@ -5,7 +5,9 @@ export type BadgeProps = {
|
|
|
5
5
|
value?: string | number | VueComponent;
|
|
6
6
|
/** Controls badge dimensions and typography scale (sm through xl). */
|
|
7
7
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
8
|
-
/** Adds a border around the badge. */
|
|
8
|
+
/** Adds a 1px border around the badge. */
|
|
9
|
+
border?: boolean;
|
|
10
|
+
/** Adds a 2px border around the badge. */
|
|
9
11
|
bordered?: boolean;
|
|
10
12
|
/** Renders with square corners; when false, badge is pill-shaped. */
|
|
11
13
|
squared?: boolean;
|
|
@@ -18,8 +20,6 @@ type __VLS_Slots = {} & {
|
|
|
18
20
|
};
|
|
19
21
|
declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
|
|
20
22
|
size: "sm" | "md" | "lg" | "xl";
|
|
21
|
-
squared: boolean;
|
|
22
|
-
bordered: boolean;
|
|
23
23
|
context: BCC_CONTEXT;
|
|
24
24
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
25
25
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
package/package.json
CHANGED