@bcc-code/design-tokens 5.1.73 → 5.1.74
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/build/bcc/css/tailwind.css +51 -23
- package/package.json +1 -1
|
@@ -5,6 +5,32 @@
|
|
|
5
5
|
|
|
6
6
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
7
7
|
|
|
8
|
+
:root {
|
|
9
|
+
--spacing-0: 0rem; /** 0px */
|
|
10
|
+
--spacing-25: 0.125rem; /** 2px */
|
|
11
|
+
--spacing-50: 0.25rem; /** 4px */
|
|
12
|
+
--spacing-75: 0.375rem; /** 6px */
|
|
13
|
+
--spacing-100: 0.5rem; /** 8px */
|
|
14
|
+
--spacing-150: 0.75rem; /** 12px */
|
|
15
|
+
--spacing-200: 1rem; /** 16px */
|
|
16
|
+
--spacing-250: 1.25rem; /** 20px */
|
|
17
|
+
--spacing-300: 1.5rem; /** 24px */
|
|
18
|
+
--spacing-400: 2rem; /** 32px */
|
|
19
|
+
--spacing-500: 2.5rem; /** 40px */
|
|
20
|
+
--spacing-600: 3rem; /** 48px */
|
|
21
|
+
--spacing-800: 4rem; /** 64px */
|
|
22
|
+
--spacing-1000: 5rem; /** 80px */
|
|
23
|
+
--spacing-negative-25: -0.125rem; /** -2px */
|
|
24
|
+
--spacing-negative-50: -0.25rem; /** -4px */
|
|
25
|
+
--spacing-negative-75: -0.375rem; /** -6px */
|
|
26
|
+
--spacing-negative-100: -0.5rem; /** -8px */
|
|
27
|
+
--spacing-negative-150: -0.75rem; /** -12px */
|
|
28
|
+
--spacing-negative-200: -1rem; /** -16px */
|
|
29
|
+
--spacing-negative-250: -1.25rem; /** -20px */
|
|
30
|
+
--spacing-negative-300: -1.5rem; /** -24px */
|
|
31
|
+
--spacing-negative-400: -2rem; /** -32px */
|
|
32
|
+
}
|
|
33
|
+
|
|
8
34
|
@theme {
|
|
9
35
|
--color-neutral-0: #ffffff;
|
|
10
36
|
--color-neutral-100: #f8f8f8;
|
|
@@ -152,29 +178,6 @@
|
|
|
152
178
|
--color-blanket-danger: rgba(239, 92, 72, 0.08); /** Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements */
|
|
153
179
|
--color-interaction-hovered: rgba(0, 0, 0, 0.16); /** Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars. */
|
|
154
180
|
--color-interaction-pressed: rgba(0, 0, 0, 0.32); /** Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars. */
|
|
155
|
-
--spacing-0: 0rem; /** 0px */
|
|
156
|
-
--spacing-25: 0.125rem; /** 2px */
|
|
157
|
-
--spacing-50: 0.25rem; /** 4px */
|
|
158
|
-
--spacing-75: 0.375rem; /** 6px */
|
|
159
|
-
--spacing-100: 0.5rem; /** 8px */
|
|
160
|
-
--spacing-150: 0.75rem; /** 12px */
|
|
161
|
-
--spacing-200: 1rem; /** 16px */
|
|
162
|
-
--spacing-250: 1.25rem; /** 20px */
|
|
163
|
-
--spacing-300: 1.5rem; /** 24px */
|
|
164
|
-
--spacing-400: 2rem; /** 32px */
|
|
165
|
-
--spacing-500: 2.5rem; /** 40px */
|
|
166
|
-
--spacing-600: 3rem; /** 48px */
|
|
167
|
-
--spacing-800: 4rem; /** 64px */
|
|
168
|
-
--spacing-1000: 5rem; /** 80px */
|
|
169
|
-
--spacing-negative-25: -0.125rem; /** -2px */
|
|
170
|
-
--spacing-negative-50: -0.25rem; /** -4px */
|
|
171
|
-
--spacing-negative-75: -0.375rem; /** -6px */
|
|
172
|
-
--spacing-negative-100: -0.5rem; /** -8px */
|
|
173
|
-
--spacing-negative-150: -0.75rem; /** -12px */
|
|
174
|
-
--spacing-negative-200: -1rem; /** -16px */
|
|
175
|
-
--spacing-negative-250: -1.25rem; /** -20px */
|
|
176
|
-
--spacing-negative-300: -1.5rem; /** -24px */
|
|
177
|
-
--spacing-negative-400: -2rem; /** -32px */
|
|
178
181
|
--radius-none: 0; /** 0 */
|
|
179
182
|
--radius-2xs: 0.125rem; /** 2px */
|
|
180
183
|
--radius-xs: 0.25rem; /** 4px */
|
|
@@ -2086,3 +2089,28 @@
|
|
|
2086
2089
|
@utility -ml-spacing-400 {
|
|
2087
2090
|
margin-left: var(--spacing-negative-400);
|
|
2088
2091
|
}
|
|
2092
|
+
|
|
2093
|
+
@utility size-icon-xs {
|
|
2094
|
+
width: var(--icon-size-xs);
|
|
2095
|
+
height: var(--icon-size-xs);
|
|
2096
|
+
}
|
|
2097
|
+
|
|
2098
|
+
@utility size-icon-sm {
|
|
2099
|
+
width: var(--icon-size-sm);
|
|
2100
|
+
height: var(--icon-size-sm);
|
|
2101
|
+
}
|
|
2102
|
+
|
|
2103
|
+
@utility size-icon-md {
|
|
2104
|
+
width: var(--icon-size-md);
|
|
2105
|
+
height: var(--icon-size-md);
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
@utility size-icon-lg {
|
|
2109
|
+
width: var(--icon-size-lg);
|
|
2110
|
+
height: var(--icon-size-lg);
|
|
2111
|
+
}
|
|
2112
|
+
|
|
2113
|
+
@utility size-icon-xl {
|
|
2114
|
+
width: var(--icon-size-xl);
|
|
2115
|
+
height: var(--icon-size-xl);
|
|
2116
|
+
}
|