@unabridged/midwest 0.7.0 → 0.8.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import './midwest/tailwind.css';
|
|
2
2
|
|
|
3
3
|
@layer
|
|
4
|
-
midwest.color-system, midwest.responsive, midwest.dark-mode, midwest.typography, midwest.form-group, midwest.scrollbars, midwest.badge, midwest.button, midwest.card, midwest.input, midwest.file-input, midwest.label, midwest.checkbox, midwest.radio, midwest.select, midwest.switch, midwest.field-group, midwest.grid, midwest.icon, midwest.layout, midwest.prose, midwest.banner, midwest.callout, midwest.dropdown, midwest.avatar, midwest.dialog, midwest.video, midwest.tabs, midwest.tab, midwest.dropdown-item, midwest.tooltip, midwest.popover, midwest.step, midwest.steps, midwest.carousel, midwest.slide, midwest.form-live-summary;
|
|
4
|
+
midwest.color-system, midwest.responsive, midwest.dark-mode, midwest.typography, midwest.form-group, midwest.scrollbars, midwest.badge, midwest.button, midwest.card, midwest.input, midwest.file-input, midwest.label, midwest.checkbox, midwest.radio, midwest.select, midwest.switch, midwest.field-group, midwest.grid, midwest.icon, midwest.layout, midwest.prose, midwest.banner, midwest.callout, midwest.dropdown, midwest.avatar, midwest.dialog, midwest.video, midwest.tabs, midwest.tab, midwest.dropdown-item, midwest.tooltip, midwest.popover, midwest.step, midwest.steps, midwest.carousel, midwest.slide, midwest.form-live-summary, midwest.card-option;
|
|
5
5
|
|
|
6
6
|
@import './midwest/color-system.css';
|
|
7
7
|
@import './midwest/responsive-system.css';
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
@import "../../components/midwest/carousel_component/carousel_component.css";
|
|
41
41
|
@import "../../components/midwest/slide_component/slide_component.css";
|
|
42
42
|
@import "../../components/midwest/form/live_summary_component/live_summary_component.css";
|
|
43
|
+
@import "../../components/midwest/form/card_option_component/card_option_component.css";
|
|
43
44
|
|
|
44
45
|
/* COMPONENTS */
|
|
45
46
|
|
package/config/tailwind.theme.js
CHANGED
|
@@ -5,6 +5,17 @@
|
|
|
5
5
|
// const { midwestTheme } = require('@unabridged/midwest/config/tailwind.theme')
|
|
6
6
|
// module.exports = { theme: { ...midwestTheme, extend: { ...midwestTheme.extend } } }
|
|
7
7
|
|
|
8
|
+
const colorScaleWithChannels = (name) =>
|
|
9
|
+
Object.fromEntries(
|
|
10
|
+
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((shade) => [
|
|
11
|
+
shade,
|
|
12
|
+
({ opacityValue }) =>
|
|
13
|
+
opacityValue !== undefined
|
|
14
|
+
? `rgb(var(--${name}-${shade}-channels) / ${opacityValue})`
|
|
15
|
+
: `rgb(var(--${name}-${shade}-channels))`,
|
|
16
|
+
])
|
|
17
|
+
);
|
|
18
|
+
|
|
8
19
|
const midwestTheme = {
|
|
9
20
|
extend: {
|
|
10
21
|
fontFamily: {
|
|
@@ -16,51 +27,9 @@ const midwestTheme = {
|
|
|
16
27
|
currentColor: "currentColor",
|
|
17
28
|
black: "#000000",
|
|
18
29
|
white: "#ffffff",
|
|
19
|
-
theme:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
2: "var(--theme-2)",
|
|
23
|
-
3: "var(--theme-3)",
|
|
24
|
-
4: "var(--theme-4)",
|
|
25
|
-
5: "var(--theme-5)",
|
|
26
|
-
6: "var(--theme-6)",
|
|
27
|
-
7: "var(--theme-7)",
|
|
28
|
-
8: "var(--theme-8)",
|
|
29
|
-
9: "var(--theme-9)",
|
|
30
|
-
10: "var(--theme-10)",
|
|
31
|
-
11: "var(--theme-11)",
|
|
32
|
-
12: "var(--theme-12)",
|
|
33
|
-
},
|
|
34
|
-
complement: {
|
|
35
|
-
0: "var(--complement-0)",
|
|
36
|
-
1: "var(--complement-1)",
|
|
37
|
-
2: "var(--complement-2)",
|
|
38
|
-
3: "var(--complement-3)",
|
|
39
|
-
4: "var(--complement-4)",
|
|
40
|
-
5: "var(--complement-5)",
|
|
41
|
-
6: "var(--complement-6)",
|
|
42
|
-
7: "var(--complement-7)",
|
|
43
|
-
8: "var(--complement-8)",
|
|
44
|
-
9: "var(--complement-9)",
|
|
45
|
-
10: "var(--complement-10)",
|
|
46
|
-
11: "var(--complement-11)",
|
|
47
|
-
12: "var(--complement-12)",
|
|
48
|
-
},
|
|
49
|
-
gray: {
|
|
50
|
-
0: "var(--gray-0)",
|
|
51
|
-
1: "var(--gray-1)",
|
|
52
|
-
2: "var(--gray-2)",
|
|
53
|
-
3: "var(--gray-3)",
|
|
54
|
-
4: "var(--gray-4)",
|
|
55
|
-
5: "var(--gray-5)",
|
|
56
|
-
6: "var(--gray-6)",
|
|
57
|
-
7: "var(--gray-7)",
|
|
58
|
-
8: "var(--gray-8)",
|
|
59
|
-
9: "var(--gray-9)",
|
|
60
|
-
10: "var(--gray-10)",
|
|
61
|
-
11: "var(--gray-11)",
|
|
62
|
-
12: "var(--gray-12)",
|
|
63
|
-
},
|
|
30
|
+
theme: colorScaleWithChannels("theme"),
|
|
31
|
+
complement: colorScaleWithChannels("complement"),
|
|
32
|
+
gray: colorScaleWithChannels("gray"),
|
|
64
33
|
},
|
|
65
34
|
};
|
|
66
35
|
|