@sk-web-gui/core 3.10.0 → 3.11.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/cjs/aria-plugin.js +101 -1
- package/dist/cjs/aria-plugin.js.map +1 -1
- package/dist/cjs/base.js +60 -1
- package/dist/cjs/base.js.map +1 -1
- package/dist/cjs/colors.js +724 -1
- package/dist/cjs/colors.js.map +1 -1
- package/dist/cjs/components/accordion.js +211 -1
- package/dist/cjs/components/accordion.js.map +1 -1
- package/dist/cjs/components/ai/ai-corner-module.js +344 -1
- package/dist/cjs/components/ai/ai-corner-module.js.map +1 -1
- package/dist/cjs/components/ai/ai-feed.js +74 -1
- package/dist/cjs/components/ai/ai-feed.js.map +1 -1
- package/dist/cjs/components/ai/ai-service-module.js +225 -1
- package/dist/cjs/components/ai/ai-service-module.js.map +1 -1
- package/dist/cjs/components/ai/assistant-presentation.js +65 -1
- package/dist/cjs/components/ai/assistant-presentation.js.map +1 -1
- package/dist/cjs/components/ai/assistant-switch.js +58 -1
- package/dist/cjs/components/ai/assistant-switch.js.map +1 -1
- package/dist/cjs/components/ai/bubble.js +127 -1
- package/dist/cjs/components/ai/bubble.js.map +1 -1
- package/dist/cjs/components/ai/feedback.js +40 -1
- package/dist/cjs/components/ai/feedback.js.map +1 -1
- package/dist/cjs/components/ai/input-section.js +34 -1
- package/dist/cjs/components/ai/input-section.js.map +1 -1
- package/dist/cjs/components/ai/markdown-rendered.js +33 -1
- package/dist/cjs/components/ai/markdown-rendered.js.map +1 -1
- package/dist/cjs/components/ai/new-session-button.js +29 -1
- package/dist/cjs/components/ai/new-session-button.js.map +1 -1
- package/dist/cjs/components/ai/typing-bubble.js +31 -1
- package/dist/cjs/components/ai/typing-bubble.js.map +1 -1
- package/dist/cjs/components/ai/typing-sequence.js +91 -1
- package/dist/cjs/components/ai/typing-sequence.js.map +1 -1
- package/dist/cjs/components/avatar.js +104 -1
- package/dist/cjs/components/avatar.js.map +1 -1
- package/dist/cjs/components/badge.js +93 -1
- package/dist/cjs/components/badge.js.map +1 -1
- package/dist/cjs/components/breadcrumb.js +49 -1
- package/dist/cjs/components/breadcrumb.js.map +1 -1
- package/dist/cjs/components/button-group.js +38 -1
- package/dist/cjs/components/button-group.js.map +1 -1
- package/dist/cjs/components/button.js +306 -1
- package/dist/cjs/components/button.js.map +1 -1
- package/dist/cjs/components/callout.js +96 -1
- package/dist/cjs/components/callout.js.map +1 -1
- package/dist/cjs/components/card.js +282 -1
- package/dist/cjs/components/card.js.map +1 -1
- package/dist/cjs/components/checkbox.js +141 -1
- package/dist/cjs/components/checkbox.js.map +1 -1
- package/dist/cjs/components/chip.js +50 -1
- package/dist/cjs/components/chip.js.map +1 -1
- package/dist/cjs/components/code.js +22 -1
- package/dist/cjs/components/code.js.map +1 -1
- package/dist/cjs/components/combobox.js +102 -1
- package/dist/cjs/components/combobox.js.map +1 -1
- package/dist/cjs/components/cookie-consent.js +54 -1
- package/dist/cjs/components/cookie-consent.js.map +1 -1
- package/dist/cjs/components/dialog.js +82 -1
- package/dist/cjs/components/dialog.js.map +1 -1
- package/dist/cjs/components/divider.js +63 -1
- package/dist/cjs/components/divider.js.map +1 -1
- package/dist/cjs/components/dot.js +115 -1
- package/dist/cjs/components/dot.js.map +1 -1
- package/dist/cjs/components/file-upload.js +230 -1
- package/dist/cjs/components/file-upload.js.map +1 -1
- package/dist/cjs/components/filter.js +27 -1
- package/dist/cjs/components/filter.js.map +1 -1
- package/dist/cjs/components/footer.js +44 -1
- package/dist/cjs/components/footer.js.map +1 -1
- package/dist/cjs/components/forms.js +37 -1
- package/dist/cjs/components/forms.js.map +1 -1
- package/dist/cjs/components/header.js +41 -1
- package/dist/cjs/components/header.js.map +1 -1
- package/dist/cjs/components/icon.js +117 -1
- package/dist/cjs/components/icon.js.map +1 -1
- package/dist/cjs/components/input.js +302 -1
- package/dist/cjs/components/input.js.map +1 -1
- package/dist/cjs/components/kbd.js +20 -1
- package/dist/cjs/components/kbd.js.map +1 -1
- package/dist/cjs/components/label.js +96 -1
- package/dist/cjs/components/label.js.map +1 -1
- package/dist/cjs/components/link.js +62 -1
- package/dist/cjs/components/link.js.map +1 -1
- package/dist/cjs/components/list.js +66 -1
- package/dist/cjs/components/list.js.map +1 -1
- package/dist/cjs/components/logo.js +61 -1
- package/dist/cjs/components/logo.js.map +1 -1
- package/dist/cjs/components/menu-vertical.js +256 -1
- package/dist/cjs/components/menu-vertical.js.map +1 -1
- package/dist/cjs/components/menubar.js +104 -1
- package/dist/cjs/components/menubar.js.map +1 -1
- package/dist/cjs/components/modal.js +61 -1
- package/dist/cjs/components/modal.js.map +1 -1
- package/dist/cjs/components/pagination.js +114 -1
- package/dist/cjs/components/pagination.js.map +1 -1
- package/dist/cjs/components/popup-menu.js +153 -1
- package/dist/cjs/components/popup-menu.js.map +1 -1
- package/dist/cjs/components/progress-bar.js +82 -1
- package/dist/cjs/components/progress-bar.js.map +1 -1
- package/dist/cjs/components/progress-stepper.js +83 -1
- package/dist/cjs/components/progress-stepper.js.map +1 -1
- package/dist/cjs/components/radio.js +143 -1
- package/dist/cjs/components/radio.js.map +1 -1
- package/dist/cjs/components/search-field.js +48 -1
- package/dist/cjs/components/search-field.js.map +1 -1
- package/dist/cjs/components/select.js +267 -1
- package/dist/cjs/components/select.js.map +1 -1
- package/dist/cjs/components/snackbar.js +43 -1
- package/dist/cjs/components/snackbar.js.map +1 -1
- package/dist/cjs/components/spinner.js +82 -1
- package/dist/cjs/components/spinner.js.map +1 -1
- package/dist/cjs/components/switch.js +93 -1
- package/dist/cjs/components/switch.js.map +1 -1
- package/dist/cjs/components/table.js +308 -1
- package/dist/cjs/components/table.js.map +1 -1
- package/dist/cjs/components/tabs.js +128 -1
- package/dist/cjs/components/tabs.js.map +1 -1
- package/dist/cjs/components/tooltip.js +71 -1
- package/dist/cjs/components/tooltip.js.map +1 -1
- package/dist/cjs/components/user-menu.js +27 -1
- package/dist/cjs/components/user-menu.js.map +1 -1
- package/dist/cjs/components.js +415 -1
- package/dist/cjs/components.js.map +1 -1
- package/dist/cjs/data-plugin.js +67 -1
- package/dist/cjs/data-plugin.js.map +1 -1
- package/dist/cjs/fonts.js +19 -1
- package/dist/cjs/fonts.js.map +1 -1
- package/dist/cjs/index.js +38 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/plugin.js +144 -1
- package/dist/cjs/plugin.js.map +1 -1
- package/dist/cjs/preset.js +164 -1
- package/dist/cjs/preset.js.map +1 -1
- package/dist/cjs/theme.js +209 -1
- package/dist/cjs/theme.js.map +1 -1
- package/dist/cjs/units.js +415 -1
- package/dist/cjs/units.js.map +1 -1
- package/dist/cjs/with-opacity.js +19 -1
- package/dist/cjs/with-opacity.js.map +1 -1
- package/dist/esm/aria-plugin.js +86 -1
- package/dist/esm/aria-plugin.js.map +1 -1
- package/dist/esm/base.js +51 -1
- package/dist/esm/base.js.map +1 -1
- package/dist/esm/colors.js +715 -1
- package/dist/esm/colors.js.map +1 -1
- package/dist/esm/components/accordion.js +201 -1
- package/dist/esm/components/accordion.js.map +1 -1
- package/dist/esm/components/ai/ai-corner-module.js +334 -1
- package/dist/esm/components/ai/ai-corner-module.js.map +1 -1
- package/dist/esm/components/ai/ai-feed.js +64 -1
- package/dist/esm/components/ai/ai-feed.js.map +1 -1
- package/dist/esm/components/ai/ai-service-module.js +215 -1
- package/dist/esm/components/ai/ai-service-module.js.map +1 -1
- package/dist/esm/components/ai/assistant-presentation.js +55 -1
- package/dist/esm/components/ai/assistant-presentation.js.map +1 -1
- package/dist/esm/components/ai/assistant-switch.js +48 -1
- package/dist/esm/components/ai/assistant-switch.js.map +1 -1
- package/dist/esm/components/ai/bubble.js +117 -1
- package/dist/esm/components/ai/bubble.js.map +1 -1
- package/dist/esm/components/ai/feedback.js +30 -1
- package/dist/esm/components/ai/feedback.js.map +1 -1
- package/dist/esm/components/ai/input-section.js +24 -1
- package/dist/esm/components/ai/input-section.js.map +1 -1
- package/dist/esm/components/ai/markdown-rendered.js +23 -1
- package/dist/esm/components/ai/markdown-rendered.js.map +1 -1
- package/dist/esm/components/ai/new-session-button.js +19 -1
- package/dist/esm/components/ai/new-session-button.js.map +1 -1
- package/dist/esm/components/ai/typing-bubble.js +21 -1
- package/dist/esm/components/ai/typing-bubble.js.map +1 -1
- package/dist/esm/components/ai/typing-sequence.js +81 -1
- package/dist/esm/components/ai/typing-sequence.js.map +1 -1
- package/dist/esm/components/avatar.js +94 -1
- package/dist/esm/components/avatar.js.map +1 -1
- package/dist/esm/components/badge.js +83 -1
- package/dist/esm/components/badge.js.map +1 -1
- package/dist/esm/components/breadcrumb.js +39 -1
- package/dist/esm/components/breadcrumb.js.map +1 -1
- package/dist/esm/components/button-group.js +28 -1
- package/dist/esm/components/button-group.js.map +1 -1
- package/dist/esm/components/button.js +296 -1
- package/dist/esm/components/button.js.map +1 -1
- package/dist/esm/components/callout.js +86 -1
- package/dist/esm/components/callout.js.map +1 -1
- package/dist/esm/components/card.js +272 -1
- package/dist/esm/components/card.js.map +1 -1
- package/dist/esm/components/checkbox.js +131 -1
- package/dist/esm/components/checkbox.js.map +1 -1
- package/dist/esm/components/chip.js +40 -1
- package/dist/esm/components/chip.js.map +1 -1
- package/dist/esm/components/code.js +12 -1
- package/dist/esm/components/code.js.map +1 -1
- package/dist/esm/components/combobox.js +92 -1
- package/dist/esm/components/combobox.js.map +1 -1
- package/dist/esm/components/cookie-consent.js +44 -1
- package/dist/esm/components/cookie-consent.js.map +1 -1
- package/dist/esm/components/dialog.js +72 -1
- package/dist/esm/components/dialog.js.map +1 -1
- package/dist/esm/components/divider.js +53 -1
- package/dist/esm/components/divider.js.map +1 -1
- package/dist/esm/components/dot.js +105 -1
- package/dist/esm/components/dot.js.map +1 -1
- package/dist/esm/components/file-upload.js +220 -1
- package/dist/esm/components/file-upload.js.map +1 -1
- package/dist/esm/components/filter.js +17 -1
- package/dist/esm/components/filter.js.map +1 -1
- package/dist/esm/components/footer.js +34 -1
- package/dist/esm/components/footer.js.map +1 -1
- package/dist/esm/components/forms.js +27 -1
- package/dist/esm/components/forms.js.map +1 -1
- package/dist/esm/components/header.js +31 -1
- package/dist/esm/components/header.js.map +1 -1
- package/dist/esm/components/icon.js +107 -1
- package/dist/esm/components/icon.js.map +1 -1
- package/dist/esm/components/input.js +292 -1
- package/dist/esm/components/input.js.map +1 -1
- package/dist/esm/components/kbd.js +10 -1
- package/dist/esm/components/kbd.js.map +1 -1
- package/dist/esm/components/label.js +86 -1
- package/dist/esm/components/label.js.map +1 -1
- package/dist/esm/components/link.js +52 -1
- package/dist/esm/components/link.js.map +1 -1
- package/dist/esm/components/list.js +56 -1
- package/dist/esm/components/list.js.map +1 -1
- package/dist/esm/components/logo.js +51 -1
- package/dist/esm/components/logo.js.map +1 -1
- package/dist/esm/components/menu-vertical.js +241 -1
- package/dist/esm/components/menu-vertical.js.map +1 -1
- package/dist/esm/components/menubar.js +94 -1
- package/dist/esm/components/menubar.js.map +1 -1
- package/dist/esm/components/modal.js +51 -1
- package/dist/esm/components/modal.js.map +1 -1
- package/dist/esm/components/pagination.js +104 -1
- package/dist/esm/components/pagination.js.map +1 -1
- package/dist/esm/components/popup-menu.js +143 -1
- package/dist/esm/components/popup-menu.js.map +1 -1
- package/dist/esm/components/progress-bar.js +72 -1
- package/dist/esm/components/progress-bar.js.map +1 -1
- package/dist/esm/components/progress-stepper.js +73 -1
- package/dist/esm/components/progress-stepper.js.map +1 -1
- package/dist/esm/components/radio.js +133 -1
- package/dist/esm/components/radio.js.map +1 -1
- package/dist/esm/components/search-field.js +38 -1
- package/dist/esm/components/search-field.js.map +1 -1
- package/dist/esm/components/select.js +257 -1
- package/dist/esm/components/select.js.map +1 -1
- package/dist/esm/components/snackbar.js +33 -1
- package/dist/esm/components/snackbar.js.map +1 -1
- package/dist/esm/components/spinner.js +72 -1
- package/dist/esm/components/spinner.js.map +1 -1
- package/dist/esm/components/switch.js +83 -1
- package/dist/esm/components/switch.js.map +1 -1
- package/dist/esm/components/table.js +298 -1
- package/dist/esm/components/table.js.map +1 -1
- package/dist/esm/components/tabs.js +118 -1
- package/dist/esm/components/tabs.js.map +1 -1
- package/dist/esm/components/tooltip.js +61 -1
- package/dist/esm/components/tooltip.js.map +1 -1
- package/dist/esm/components/user-menu.js +17 -1
- package/dist/esm/components/user-menu.js.map +1 -1
- package/dist/esm/components.js +407 -1
- package/dist/esm/components.js.map +1 -1
- package/dist/esm/data-plugin.js +52 -1
- package/dist/esm/data-plugin.js.map +1 -1
- package/dist/esm/fonts.js +9 -1
- package/dist/esm/fonts.js.map +1 -1
- package/dist/esm/index.js +7 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/plugin.js +121 -1
- package/dist/esm/plugin.js.map +1 -1
- package/dist/esm/preset.js +109 -1
- package/dist/esm/preset.js.map +1 -1
- package/dist/esm/theme.js +195 -1
- package/dist/esm/theme.js.map +1 -1
- package/dist/esm/units.js +406 -1
- package/dist/esm/units.js.map +1 -1
- package/dist/esm/with-opacity.js +9 -1
- package/dist/esm/with-opacity.js.map +1 -1
- package/dist/types/components/checkbox.d.ts +19 -3
- package/dist/types/components/input.d.ts +12 -0
- package/dist/types/components/radio.d.ts +8 -0
- package/dist/types/components/select.d.ts +7 -0
- package/package.json +10 -8
|
@@ -1,2 +1,297 @@
|
|
|
1
|
-
function _define_property(obj,key,
|
|
1
|
+
function _define_property(obj, key, value) {
|
|
2
|
+
if (key in obj) {
|
|
3
|
+
Object.defineProperty(obj, key, {
|
|
4
|
+
value: value,
|
|
5
|
+
enumerable: true,
|
|
6
|
+
configurable: true,
|
|
7
|
+
writable: true
|
|
8
|
+
});
|
|
9
|
+
} else {
|
|
10
|
+
obj[key] = value;
|
|
11
|
+
}
|
|
12
|
+
return obj;
|
|
13
|
+
}
|
|
14
|
+
function _object_spread(target) {
|
|
15
|
+
for(var i = 1; i < arguments.length; i++){
|
|
16
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
17
|
+
var ownKeys = Object.keys(source);
|
|
18
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
19
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
20
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
21
|
+
}));
|
|
22
|
+
}
|
|
23
|
+
ownKeys.forEach(function(key) {
|
|
24
|
+
_define_property(target, key, source[key]);
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
}
|
|
29
|
+
function ownKeys(object, enumerableOnly) {
|
|
30
|
+
var keys = Object.keys(object);
|
|
31
|
+
if (Object.getOwnPropertySymbols) {
|
|
32
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
33
|
+
if (enumerableOnly) {
|
|
34
|
+
symbols = symbols.filter(function(sym) {
|
|
35
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
keys.push.apply(keys, symbols);
|
|
39
|
+
}
|
|
40
|
+
return keys;
|
|
41
|
+
}
|
|
42
|
+
function _object_spread_props(target, source) {
|
|
43
|
+
source = source != null ? source : {};
|
|
44
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
45
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
46
|
+
} else {
|
|
47
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
48
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
return target;
|
|
52
|
+
}
|
|
53
|
+
function buttonPrimary(colors) {
|
|
54
|
+
var _obj;
|
|
55
|
+
return {
|
|
56
|
+
'&-primary': _object_spread_props(_object_spread({
|
|
57
|
+
'@apply text-light-primary': {},
|
|
58
|
+
/* hover */ '@apply hover:bg-primary-surface-hover': {}
|
|
59
|
+
}, colors.reduce(function(styles, color) {
|
|
60
|
+
var _obj, _obj1;
|
|
61
|
+
return _object_spread_props(_object_spread({}, styles), _define_property({}, '&[data-color="'.concat(color, '"]'), (_obj1 = {}, _define_property(_obj1, "@apply bg-".concat(color, "-surface-primary text-").concat(color, "-text-secondary"), {}), // hover
|
|
62
|
+
_define_property(_obj1, "@apply hover:bg-".concat(color, "-surface-primary-hover hover:text-light-primary"), {}), // keyboard active
|
|
63
|
+
_define_property(_obj1, '&.active', _define_property({}, "@apply bg-".concat(color, "-surface-primary-hover"), {})), _define_property(_obj1, "@apply active:bg-".concat(color, "-surface-primary-hover"), {}), _define_property(_obj1, '&[data-inverted="true"]', (_obj = {
|
|
64
|
+
'@apply text-inverted-light-primary': {}
|
|
65
|
+
}, _define_property(_obj, "@apply bg-inverted-".concat(color, "-surface-primary text-inverted-").concat(color, "-text-secondary"), {}), // hover
|
|
66
|
+
_define_property(_obj, "@apply hover:bg-inverted-".concat(color, "-surface-primary-hover hover:text-inverted-light-primary"), {}), // keyboard active
|
|
67
|
+
_define_property(_obj, '&.active', _define_property({}, "@apply bg-inverted-".concat(color, "-surface-primary-hover"), {})), _define_property(_obj, "@apply active:bg-inverted-".concat(color, "-surface-primary-hover"), {}), _obj)), _obj1)));
|
|
68
|
+
}, {})), {
|
|
69
|
+
"&[data-color='primary']": (_obj = {
|
|
70
|
+
'@apply bg-primary-surface': {},
|
|
71
|
+
'@apply hover:bg-primary-surface-hover': {},
|
|
72
|
+
'&.active': {
|
|
73
|
+
'@apply bg-primary-surface-hover': {}
|
|
74
|
+
}
|
|
75
|
+
}, _define_property(_obj, "@apply active:bg-primary-surface-hover", {}), _define_property(_obj, '&[data-inverted="true"]', _define_property({
|
|
76
|
+
'@apply text-inverted-light-primary': {},
|
|
77
|
+
'@apply bg-inverted-primary-surface': {},
|
|
78
|
+
'@apply hover:bg-inverted-primary-surface-hover': {},
|
|
79
|
+
'&.active': {
|
|
80
|
+
'@apply bg-inverted-primary-surface-hover': {}
|
|
81
|
+
}
|
|
82
|
+
}, "@apply active:bg-inverted-primary-surface-hover", {})), _obj)
|
|
83
|
+
})
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
function buttonSecondary() {
|
|
87
|
+
return {
|
|
88
|
+
'&-secondary': {
|
|
89
|
+
'@apply border-secondary-outline': {},
|
|
90
|
+
'@apply text-dark-secondary': {},
|
|
91
|
+
'@apply bg-secondary-surface': {},
|
|
92
|
+
/* hover */ '@apply hover:border-secondary-outline-hover': {},
|
|
93
|
+
'@apply hover:bg-secondary-surface-hover': {},
|
|
94
|
+
/* focus */ '@apply focus-visible:border-background-content': {},
|
|
95
|
+
// State
|
|
96
|
+
'&.sk-btn-disabled, &[aria-disabled="true"]': {
|
|
97
|
+
'@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important': {}
|
|
98
|
+
},
|
|
99
|
+
'&[data-inverted="true"]': {
|
|
100
|
+
'@apply border-inverted-secondary-outline': {},
|
|
101
|
+
'@apply text-inverted-dark-secondary': {},
|
|
102
|
+
'@apply bg-inverted-secondary-surface': {},
|
|
103
|
+
/* hover */ '@apply hover:border-inverted-secondary-outline-hover': {},
|
|
104
|
+
'@apply hover:bg-inverted-secondary-surface-hover': {},
|
|
105
|
+
/* focus */ '@apply focus-visible:border-inverted-background-content': {},
|
|
106
|
+
// State
|
|
107
|
+
'&.sk-btn-disabled, &[aria-disabled="true"]': {
|
|
108
|
+
'@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important': {}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
function buttonTertiary() {
|
|
115
|
+
return {
|
|
116
|
+
'&-tertiary': {
|
|
117
|
+
'@apply text-dark-secondary': {},
|
|
118
|
+
'@apply bg-tertiary-surface': {},
|
|
119
|
+
/* hover */ '@apply hover:bg-tertiary-surface-hover': {},
|
|
120
|
+
// State
|
|
121
|
+
'&.sk-btn-disabled, &[aria-disabled="true"]': {
|
|
122
|
+
'@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {}
|
|
123
|
+
},
|
|
124
|
+
'&[data-inverted="true"]': {
|
|
125
|
+
'@apply text-inverted-dark-secondary': {},
|
|
126
|
+
'@apply bg-inverted-tertiary-surface': {},
|
|
127
|
+
/* hover */ '@apply hover:bg-inverted-tertiary-surface-hover': {},
|
|
128
|
+
'&.sk-btn-disabled, &[aria-disabled="true"]': {
|
|
129
|
+
'@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
function buttonGhost() {
|
|
136
|
+
return {
|
|
137
|
+
'&-ghost': {
|
|
138
|
+
'@apply text-dark-secondary': {},
|
|
139
|
+
'@apply bg-transparent': {},
|
|
140
|
+
'@apply border-transparent': {},
|
|
141
|
+
/* hover */ '@apply hover:bg-transparent': {},
|
|
142
|
+
'@apply hover:border-transparent': {},
|
|
143
|
+
// State
|
|
144
|
+
'&.sk-btn-disabled, &[aria-disabled="true"]': {
|
|
145
|
+
'@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {}
|
|
146
|
+
},
|
|
147
|
+
'&[data-inverted="true"]': {
|
|
148
|
+
'@apply text-inverted-dark-secondary': {}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
}
|
|
153
|
+
function buttonLink(colors) {
|
|
154
|
+
return {
|
|
155
|
+
'&-link': _object_spread({
|
|
156
|
+
'@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},
|
|
157
|
+
'&.active': {
|
|
158
|
+
'@apply underline': {}
|
|
159
|
+
},
|
|
160
|
+
// dark colors
|
|
161
|
+
'@apply dark:text-neutral-200': {},
|
|
162
|
+
'@apply dark:active:text-neutral-500': {}
|
|
163
|
+
}, colors.reduce(function(styles, color) {
|
|
164
|
+
return _object_spread_props(_object_spread({}, styles), _define_property({}, '&[data-color="'.concat(color, '"]'), _define_property({}, "@apply text-".concat(color, "-text active:text-").concat(color, "-text"), {})));
|
|
165
|
+
}, {}))
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
export var Button = function(colors) {
|
|
169
|
+
return {
|
|
170
|
+
'.sk-btn': _object_spread_props(_object_spread({
|
|
171
|
+
'@apply box-border': {},
|
|
172
|
+
'@apply border-2 border-transparent': {},
|
|
173
|
+
'@apply cursor-pointer': {},
|
|
174
|
+
'@apply relative': {},
|
|
175
|
+
'@apply m-0': {},
|
|
176
|
+
'@apply px-24 py-8 gap-8': {},
|
|
177
|
+
'@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},
|
|
178
|
+
'@apply rounded-button': {},
|
|
179
|
+
transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',
|
|
180
|
+
'@apply duration-75 ease-out': {},
|
|
181
|
+
'@apply outline-none appearance-none select-none whitespace-nowrap': {},
|
|
182
|
+
'@apply focus-visible:outline-none': {},
|
|
183
|
+
'@apply focus-visible:ring': {},
|
|
184
|
+
"&[data-rounded='true']": {
|
|
185
|
+
'@apply rounded-circular': {}
|
|
186
|
+
},
|
|
187
|
+
// sizing
|
|
188
|
+
'&-sm': {
|
|
189
|
+
'@apply text-label-small': {},
|
|
190
|
+
'@apply px-14 py-8 gap-6': {},
|
|
191
|
+
'@apply max-h-32 h-32': {},
|
|
192
|
+
'@apply rounded-button-sm': {},
|
|
193
|
+
'svg, .sk-icon': {
|
|
194
|
+
'@apply h-16 w-16': {}
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
'&-md': {
|
|
198
|
+
'@apply text-label-medium': {},
|
|
199
|
+
'@apply px-18 py-8 gap-8': {},
|
|
200
|
+
'@apply max-h-40 h-40': {},
|
|
201
|
+
'@apply rounded-button-md': {},
|
|
202
|
+
'svg, .sk-icon': {
|
|
203
|
+
'@apply h-18 w-18': {}
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
'&-lg': {
|
|
207
|
+
'@apply text-label-large': {},
|
|
208
|
+
'@apply px-24 py-8 gap-8': {},
|
|
209
|
+
'@apply max-h-48 h-48': {},
|
|
210
|
+
'@apply rounded-button-lg': {},
|
|
211
|
+
'svg, .sk-icon': {
|
|
212
|
+
'@apply h-20 w-20': {}
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
// State
|
|
216
|
+
'&-disabled, &[aria-disabled="true"]': {
|
|
217
|
+
'@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},
|
|
218
|
+
'@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important': {}
|
|
219
|
+
},
|
|
220
|
+
'&-loading': {
|
|
221
|
+
'&-spinner': {
|
|
222
|
+
'@apply absolute mr-0': {},
|
|
223
|
+
'&[data-hastext="true"]': {
|
|
224
|
+
'@apply relative mr-2': {}
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
'&-text': {
|
|
228
|
+
'@apply opacity-0': {}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}, buttonPrimary(colors), buttonSecondary(), buttonTertiary(), buttonGhost(), buttonLink(colors)), {
|
|
232
|
+
'&[data-background="false"]:not(:hover)': {
|
|
233
|
+
'@apply bg-transparent': {}
|
|
234
|
+
},
|
|
235
|
+
'.sk-btn-has-icon': {
|
|
236
|
+
'&-left': {
|
|
237
|
+
'@apply h-full flex items-center justify-center -ml-2': {},
|
|
238
|
+
'.sk-icon': {
|
|
239
|
+
'@apply bg-transparent': {},
|
|
240
|
+
color: 'currentColor'
|
|
241
|
+
}
|
|
242
|
+
},
|
|
243
|
+
'&-right': {
|
|
244
|
+
'@apply h-full flex items-center justify-center -mr-2': {},
|
|
245
|
+
'.sk-icon': {
|
|
246
|
+
'@apply bg-transparent': {},
|
|
247
|
+
color: 'currentColor'
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
'&-lg .sk-btn-has-icon-left': {
|
|
252
|
+
'@apply -ml-4': {}
|
|
253
|
+
},
|
|
254
|
+
'&-lg .sk-btn-has-icon-right': {
|
|
255
|
+
'@apply -mr-4': {}
|
|
256
|
+
},
|
|
257
|
+
'&[data-icon=true]': {
|
|
258
|
+
'@apply p-0': {},
|
|
259
|
+
'.sk-icon': {
|
|
260
|
+
'@apply bg-transparent': {},
|
|
261
|
+
color: 'currentColor'
|
|
262
|
+
},
|
|
263
|
+
"&[data-rounded='true']": {
|
|
264
|
+
'@apply rounded-full': {}
|
|
265
|
+
},
|
|
266
|
+
'&.sk-btn-sm': {
|
|
267
|
+
'@apply w-32 min-w-32 max-w-32': {},
|
|
268
|
+
'svg, .sk-icon': {
|
|
269
|
+
'@apply h-20 w-20': {}
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
'&.sk-btn-md': {
|
|
273
|
+
'@apply w-40 min-w-40 max-w-40': {},
|
|
274
|
+
'svg, .sk-icon': {
|
|
275
|
+
'@apply h-20 w-20': {}
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
'&.sk-btn-lg': {
|
|
279
|
+
'@apply w-48 min-w-48 max-w-48': {},
|
|
280
|
+
'svg, .sk-icon': {
|
|
281
|
+
'@apply h-24 w-24': {}
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
'.sk-btn-has-icon': {
|
|
285
|
+
'&-left': {
|
|
286
|
+
'@apply m-0': {}
|
|
287
|
+
},
|
|
288
|
+
'&-right': {
|
|
289
|
+
'@apply m-0': {}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
})
|
|
294
|
+
};
|
|
295
|
+
};
|
|
296
|
+
|
|
2
297
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n return {\r\n '&-primary': {\r\n '@apply text-light-primary': {},\r\n /* hover */\r\n '@apply hover:bg-primary-surface-hover': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply bg-primary-surface': {},\r\n '@apply hover:bg-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-inverted-primary-surface': {},\r\n '@apply hover:bg-inverted-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-inverted-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonSecondary() {\r\n return {\r\n '&-secondary': {\r\n '@apply border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-secondary-outline-hover': {},\r\n '@apply hover:bg-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-secondary-outline': {},\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-inverted-secondary-outline-hover': {},\r\n '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n return {\r\n '&-tertiary': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonGhost() {\r\n return {\r\n '&-ghost': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-transparent': {},\r\n '@apply border-transparent': {},\r\n /* hover */\r\n '@apply hover:bg-transparent': {},\r\n '@apply hover:border-transparent': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n // dark colors\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n '.sk-btn': {\r\n '@apply box-border': {},\r\n '@apply border-2 border-transparent': {},\r\n '@apply cursor-pointer': {},\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply rounded-button': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n '@apply focus-visible:ring': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n '@apply px-14 py-8 gap-6': {},\r\n '@apply max-h-32 h-32': {},\r\n '@apply rounded-button-sm': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-16 w-16': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n '@apply px-18 py-8 gap-8': {},\r\n '@apply max-h-40 h-40': {},\r\n '@apply rounded-button-md': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-18 w-18': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply max-h-48 h-48': {},\r\n '@apply rounded-button-lg': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-20 w-20': {},\r\n },\r\n },\r\n\r\n // State\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&-loading': {\r\n '&-spinner': {\r\n '@apply absolute mr-0': {},\r\n '&[data-hastext=\"true\"]': {\r\n '@apply relative mr-2': {},\r\n },\r\n },\r\n '&-text': {\r\n '@apply opacity-0': {},\r\n },\r\n },\r\n // variants\r\n ...buttonPrimary(colors),\r\n ...buttonSecondary(),\r\n ...buttonTertiary(),\r\n ...buttonGhost(),\r\n ...buttonLink(colors),\r\n\r\n '&[data-background=\"false\"]:not(:hover)': {\r\n '@apply bg-transparent': {},\r\n },\r\n '.sk-btn-has-icon': {\r\n '&-left': {\r\n '@apply h-full flex items-center justify-center -ml-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n '&-right': {\r\n '@apply h-full flex items-center justify-center -mr-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n },\r\n '&-lg .sk-btn-has-icon-left': {\r\n '@apply -ml-4': {},\r\n },\r\n '&-lg .sk-btn-has-icon-right': {\r\n '@apply -mr-4': {},\r\n },\r\n '&[data-icon=true]': {\r\n '@apply p-0': {},\r\n\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&.sk-btn-sm': {\r\n '@apply w-32 min-w-32 max-w-32': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-20 w-20': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-md': {\r\n '@apply w-40 min-w-40 max-w-40': {},\r\n\r\n 'svg, .sk-icon': {\r\n '@apply h-20 w-20': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-lg': {\r\n '@apply w-48 min-w-48 max-w-48': {},\r\n\r\n 'svg, .sk-icon': {\r\n '@apply h-24 w-24': {},\r\n },\r\n },\r\n '.sk-btn-has-icon': {\r\n '&-left': {\r\n '@apply m-0': {},\r\n },\r\n '&-right': {\r\n '@apply m-0': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["buttonPrimary","colors","reduce","styles","color","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","Button","transitionProperty"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/button.ts"],"sourcesContent":["function buttonPrimary(colors: string[]) {\r\n return {\r\n '&-primary': {\r\n '@apply text-light-primary': {},\r\n /* hover */\r\n '@apply hover:bg-primary-surface-hover': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-${color}-surface-primary-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n // hover\r\n [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply bg-primary-surface': {},\r\n '@apply hover:bg-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-primary-surface-hover`]: {},\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-inverted-primary-surface': {},\r\n '@apply hover:bg-inverted-primary-surface-hover': {},\r\n '&.active': {\r\n '@apply bg-inverted-primary-surface-hover': {},\r\n },\r\n [`@apply active:bg-inverted-primary-surface-hover`]: {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonSecondary() {\r\n return {\r\n '&-secondary': {\r\n '@apply border-secondary-outline': {},\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-secondary-outline-hover': {},\r\n '@apply hover:bg-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply border-inverted-secondary-outline': {},\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-secondary-surface': {},\r\n /* hover */\r\n '@apply hover:border-inverted-secondary-outline-hover': {},\r\n '@apply hover:bg-inverted-secondary-surface-hover': {},\r\n /* focus */\r\n '@apply focus-visible:border-inverted-background-content': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonTertiary() {\r\n return {\r\n '&-tertiary': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-tertiary-surface-hover': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n '@apply bg-inverted-tertiary-surface': {},\r\n /* hover */\r\n '@apply hover:bg-inverted-tertiary-surface-hover': {},\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n },\r\n },\r\n };\r\n}\r\nfunction buttonGhost() {\r\n return {\r\n '&-ghost': {\r\n '@apply text-dark-secondary': {},\r\n '@apply bg-transparent': {},\r\n '@apply border-transparent': {},\r\n /* hover */\r\n '@apply hover:bg-transparent': {},\r\n '@apply hover:border-transparent': {},\r\n\r\n // State\r\n '&.sk-btn-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '@apply text-inverted-dark-secondary': {},\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors: string[]) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-text active:text-${color}-text`]: {},\r\n // dark colors\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nexport const Button = (colors: string[]) => ({\r\n '.sk-btn': {\r\n '@apply box-border': {},\r\n '@apply border-2 border-transparent': {},\r\n '@apply cursor-pointer': {},\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply rounded-button': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n '@apply focus-visible:ring': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-circular': {},\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-label-small': {},\r\n '@apply px-14 py-8 gap-6': {},\r\n '@apply max-h-32 h-32': {},\r\n '@apply rounded-button-sm': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-16 w-16': {},\r\n },\r\n },\r\n\r\n '&-md': {\r\n '@apply text-label-medium': {},\r\n '@apply px-18 py-8 gap-8': {},\r\n '@apply max-h-40 h-40': {},\r\n '@apply rounded-button-md': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-18 w-18': {},\r\n },\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-label-large': {},\r\n '@apply px-24 py-8 gap-8': {},\r\n '@apply max-h-48 h-48': {},\r\n '@apply rounded-button-lg': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-20 w-20': {},\r\n },\r\n },\r\n\r\n // State\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},\r\n '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':\r\n {},\r\n },\r\n\r\n '&-loading': {\r\n '&-spinner': {\r\n '@apply absolute mr-0': {},\r\n '&[data-hastext=\"true\"]': {\r\n '@apply relative mr-2': {},\r\n },\r\n },\r\n '&-text': {\r\n '@apply opacity-0': {},\r\n },\r\n },\r\n // variants\r\n ...buttonPrimary(colors),\r\n ...buttonSecondary(),\r\n ...buttonTertiary(),\r\n ...buttonGhost(),\r\n ...buttonLink(colors),\r\n\r\n '&[data-background=\"false\"]:not(:hover)': {\r\n '@apply bg-transparent': {},\r\n },\r\n '.sk-btn-has-icon': {\r\n '&-left': {\r\n '@apply h-full flex items-center justify-center -ml-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n '&-right': {\r\n '@apply h-full flex items-center justify-center -mr-2': {},\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n },\r\n },\r\n '&-lg .sk-btn-has-icon-left': {\r\n '@apply -ml-4': {},\r\n },\r\n '&-lg .sk-btn-has-icon-right': {\r\n '@apply -mr-4': {},\r\n },\r\n '&[data-icon=true]': {\r\n '@apply p-0': {},\r\n\r\n '.sk-icon': {\r\n '@apply bg-transparent': {},\r\n color: 'currentColor',\r\n },\r\n\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n\r\n '&.sk-btn-sm': {\r\n '@apply w-32 min-w-32 max-w-32': {},\r\n 'svg, .sk-icon': {\r\n '@apply h-20 w-20': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-md': {\r\n '@apply w-40 min-w-40 max-w-40': {},\r\n\r\n 'svg, .sk-icon': {\r\n '@apply h-20 w-20': {},\r\n },\r\n },\r\n\r\n '&.sk-btn-lg': {\r\n '@apply w-48 min-w-48 max-w-48': {},\r\n\r\n 'svg, .sk-icon': {\r\n '@apply h-24 w-24': {},\r\n },\r\n },\r\n '.sk-btn-has-icon': {\r\n '&-left': {\r\n '@apply m-0': {},\r\n },\r\n '&-right': {\r\n '@apply m-0': {},\r\n },\r\n },\r\n },\r\n },\r\n});\r\n"],"names":["buttonPrimary","colors","reduce","styles","color","buttonSecondary","buttonTertiary","buttonGhost","buttonLink","Button","transitionProperty"],"mappings":"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"}
|
|
@@ -1,2 +1,87 @@
|
|
|
1
|
-
function _define_property(obj,key,
|
|
1
|
+
function _define_property(obj, key, value) {
|
|
2
|
+
if (key in obj) {
|
|
3
|
+
Object.defineProperty(obj, key, {
|
|
4
|
+
value: value,
|
|
5
|
+
enumerable: true,
|
|
6
|
+
configurable: true,
|
|
7
|
+
writable: true
|
|
8
|
+
});
|
|
9
|
+
} else {
|
|
10
|
+
obj[key] = value;
|
|
11
|
+
}
|
|
12
|
+
return obj;
|
|
13
|
+
}
|
|
14
|
+
function _object_spread(target) {
|
|
15
|
+
for(var i = 1; i < arguments.length; i++){
|
|
16
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
17
|
+
var ownKeys = Object.keys(source);
|
|
18
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
19
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
20
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
21
|
+
}));
|
|
22
|
+
}
|
|
23
|
+
ownKeys.forEach(function(key) {
|
|
24
|
+
_define_property(target, key, source[key]);
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
}
|
|
29
|
+
function ownKeys(object, enumerableOnly) {
|
|
30
|
+
var keys = Object.keys(object);
|
|
31
|
+
if (Object.getOwnPropertySymbols) {
|
|
32
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
33
|
+
if (enumerableOnly) {
|
|
34
|
+
symbols = symbols.filter(function(sym) {
|
|
35
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
keys.push.apply(keys, symbols);
|
|
39
|
+
}
|
|
40
|
+
return keys;
|
|
41
|
+
}
|
|
42
|
+
function _object_spread_props(target, source) {
|
|
43
|
+
source = source != null ? source : {};
|
|
44
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
45
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
46
|
+
} else {
|
|
47
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
48
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
return target;
|
|
52
|
+
}
|
|
53
|
+
export var Callout = function(colors) {
|
|
54
|
+
return {
|
|
55
|
+
'.sk-callout': _object_spread_props(_object_spread({
|
|
56
|
+
'@apply inline-flex': {},
|
|
57
|
+
'@apply p-4': {}
|
|
58
|
+
}, colors.reduce(function(styles, color) {
|
|
59
|
+
return _object_spread_props(_object_spread({}, styles), _define_property({}, '&[data-color="'.concat(color, '"]'), {
|
|
60
|
+
'.sk-callout-content': _define_property({}, "@apply bg-".concat(color, "-surface-primary text-").concat(color, "-text-secondary"), {}),
|
|
61
|
+
'&[data-inverted="true"]': {
|
|
62
|
+
'.sk-callout-content': _define_property({
|
|
63
|
+
'@apply text-inverted-light-primary': {}
|
|
64
|
+
}, "@apply bg-inverted-".concat(color, "-surface-primary text-inverted-").concat(color, "-text-secondary"), {})
|
|
65
|
+
}
|
|
66
|
+
}));
|
|
67
|
+
}, {})), {
|
|
68
|
+
"&[data-color='tertiary']": {
|
|
69
|
+
'.sk-callout-content': {
|
|
70
|
+
'@apply bg-primary-surface': {}
|
|
71
|
+
},
|
|
72
|
+
'&[data-inverted="true"]': {
|
|
73
|
+
'.sk-callout-content': {
|
|
74
|
+
'@apply text-inverted-light-primary': {},
|
|
75
|
+
'@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
'&-content': {
|
|
80
|
+
'@apply rounded-full': {},
|
|
81
|
+
'@apply h-8 w-8': {}
|
|
82
|
+
}
|
|
83
|
+
})
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
|
|
2
87
|
//# sourceMappingURL=callout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/callout.ts"],"sourcesContent":["export const Callout = (colors: string[]) => ({\r\n '.sk-callout': {\r\n '@apply inline-flex': {},\r\n '@apply p-4': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n '.sk-callout-content': {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '.sk-callout-content': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n },\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='tertiary']\": {\r\n '.sk-callout-content': {\r\n '@apply bg-primary-surface': {},\r\n },\r\n '&[data-inverted=\"true\"]': {\r\n '.sk-callout-content': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {},\r\n },\r\n },\r\n },\r\n\r\n '&-content': {\r\n '@apply rounded-full': {},\r\n '@apply h-8 w-8': {},\r\n },\r\n },\r\n});\r\n"],"names":["Callout","colors","reduce","styles","color"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/callout.ts"],"sourcesContent":["export const Callout = (colors: string[]) => ({\r\n '.sk-callout': {\r\n '@apply inline-flex': {},\r\n '@apply p-4': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n '.sk-callout-content': {\r\n [`@apply bg-${color}-surface-primary text-${color}-text-secondary`]: {},\r\n },\r\n\r\n '&[data-inverted=\"true\"]': {\r\n '.sk-callout-content': {\r\n '@apply text-inverted-light-primary': {},\r\n [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},\r\n },\r\n },\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='tertiary']\": {\r\n '.sk-callout-content': {\r\n '@apply bg-primary-surface': {},\r\n },\r\n '&[data-inverted=\"true\"]': {\r\n '.sk-callout-content': {\r\n '@apply text-inverted-light-primary': {},\r\n '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {},\r\n },\r\n },\r\n },\r\n\r\n '&-content': {\r\n '@apply rounded-full': {},\r\n '@apply h-8 w-8': {},\r\n },\r\n },\r\n});\r\n"],"names":["Callout","colors","reduce","styles","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAMA,UAAU,SAACC;WAAsB;QAC5C,eAAe;YACb,sBAAsB,CAAC;YACvB,cAAc,CAAC;WAEZA,OAAOC,MAAM,CACd,SAACC,QAAQC;mBAAW,wCACfD,SACH,qBAAC,AAAC,iBAAsB,OAANC,OAAM,OAAM;gBAC5B,uBACE,qBAAC,AAAC,aAA2CA,OAA/BA,OAAM,2BAA+B,OAANA,OAAM,oBAAmB,CAAC;gBAGzE,2BAA2B;oBACzB,uBAEE;wBADA,sCAAsC,CAAC;uBACtC,AAAC,sBAA4DA,OAAvCA,OAAM,mCAAuC,OAANA,OAAM,oBAAmB,CAAC;gBAE5F;YACF;WAEF,CAAC;YAGH,4BAA4B;gBAC1B,uBAAuB;oBACrB,6BAA6B,CAAC;gBAChC;gBACA,2BAA2B;oBACzB,uBAAuB;wBACrB,sCAAsC,CAAC;wBACvC,+DAA+D,CAAC;oBAClE;gBACF;YACF;YAEA,aAAa;gBACX,uBAAuB,CAAC;gBACxB,kBAAkB,CAAC;YACrB;;IAEJ;EAAG"}
|