@blockle/blocks 0.20.0-alpha1 → 1.0.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/README.md +1 -70
- package/dist/index.cjs +21 -71
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -0
- package/dist/index.spec.d.ts +0 -0
- package/dist/reset.cjs +1 -2
- package/dist/reset.d.ts +0 -2
- package/dist/reset.js +1 -0
- package/package.json +24 -81
- package/LICENSE +0 -21
- package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.cjs +0 -19
- package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.mjs +0 -20
- package/dist/components/accessibility/VisuallyHidden/index.cjs +0 -1
- package/dist/components/accessibility/VisuallyHidden/index.mjs +0 -1
- package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.cjs +0 -15
- package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.mjs +0 -16
- package/dist/components/display/Divider/Divider.cjs +0 -25
- package/dist/components/display/Divider/Divider.mjs +0 -26
- package/dist/components/display/Divider/divider.css.cjs +0 -15
- package/dist/components/display/Divider/divider.css.mjs +0 -16
- package/dist/components/display/Divider/index.cjs +0 -1
- package/dist/components/display/Divider/index.mjs +0 -1
- package/dist/components/feedback/Progress/Progress.cjs +0 -53
- package/dist/components/feedback/Progress/Progress.mjs +0 -54
- package/dist/components/feedback/Progress/index.cjs +0 -1
- package/dist/components/feedback/Progress/index.mjs +0 -1
- package/dist/components/feedback/Spinner/Spinner.cjs +0 -25
- package/dist/components/feedback/Spinner/Spinner.mjs +0 -26
- package/dist/components/feedback/Spinner/index.cjs +0 -1
- package/dist/components/feedback/Spinner/index.mjs +0 -1
- package/dist/components/form/Button/Button.cjs +0 -58
- package/dist/components/form/Button/Button.css.cjs +0 -15
- package/dist/components/form/Button/Button.css.mjs +0 -16
- package/dist/components/form/Button/Button.mjs +0 -59
- package/dist/components/form/Button/index.cjs +0 -1
- package/dist/components/form/Button/index.mjs +0 -1
- package/dist/components/form/Checkbox/Checkbox.cjs +0 -78
- package/dist/components/form/Checkbox/Checkbox.mjs +0 -79
- package/dist/components/form/Checkbox/checkbox.css.cjs +0 -31
- package/dist/components/form/Checkbox/checkbox.css.mjs +0 -32
- package/dist/components/form/Checkbox/index.cjs +0 -1
- package/dist/components/form/Checkbox/index.mjs +0 -1
- package/dist/components/form/Input/Input.cjs +0 -50
- package/dist/components/form/Input/Input.mjs +0 -51
- package/dist/components/form/Input/index.cjs +0 -1
- package/dist/components/form/Input/index.mjs +0 -1
- package/dist/components/form/Input/input.css.cjs +0 -20
- package/dist/components/form/Input/input.css.mjs +0 -21
- package/dist/components/form/Label/Label.cjs +0 -29
- package/dist/components/form/Label/Label.mjs +0 -30
- package/dist/components/form/Label/index.cjs +0 -1
- package/dist/components/form/Label/index.mjs +0 -1
- package/dist/components/form/Radio/Radio.cjs +0 -47
- package/dist/components/form/Radio/Radio.mjs +0 -48
- package/dist/components/form/Radio/RadioGroup.cjs +0 -1
- package/dist/components/form/Radio/RadioGroup.mjs +0 -1
- package/dist/components/form/Radio/index.cjs +0 -1
- package/dist/components/form/Radio/index.mjs +0 -1
- package/dist/components/form/Radio/radio.css.cjs +0 -31
- package/dist/components/form/Radio/radio.css.mjs +0 -32
- package/dist/components/form/Select/Select.cjs +0 -64
- package/dist/components/form/Select/Select.mjs +0 -65
- package/dist/components/form/Select/index.cjs +0 -1
- package/dist/components/form/Select/index.mjs +0 -1
- package/dist/components/form/Select/select.css.cjs +0 -37
- package/dist/components/form/Select/select.css.mjs +0 -38
- package/dist/components/form/Slider/Slider.cjs +0 -139
- package/dist/components/form/Slider/Slider.mjs +0 -142
- package/dist/components/form/Slider/index.cjs +0 -1
- package/dist/components/form/Slider/index.mjs +0 -1
- package/dist/components/form/Slider/slider.css.cjs +0 -74
- package/dist/components/form/Slider/slider.css.mjs +0 -75
- package/dist/components/form/Slider/usePointerProgress.cjs +0 -44
- package/dist/components/form/Slider/usePointerProgress.mjs +0 -45
- package/dist/components/form/Switch/Switch.cjs +0 -71
- package/dist/components/form/Switch/Switch.mjs +0 -74
- package/dist/components/form/Switch/index.cjs +0 -1
- package/dist/components/form/Switch/index.mjs +0 -1
- package/dist/components/form/Switch/switch.css.cjs +0 -26
- package/dist/components/form/Switch/switch.css.mjs +0 -27
- package/dist/components/layout/Box/Box.cjs +0 -27
- package/dist/components/layout/Box/Box.mjs +0 -28
- package/dist/components/layout/Box/index.cjs +0 -1
- package/dist/components/layout/Box/index.mjs +0 -1
- package/dist/components/layout/Inline/Inline.cjs +0 -29
- package/dist/components/layout/Inline/Inline.mjs +0 -30
- package/dist/components/layout/Inline/index.cjs +0 -1
- package/dist/components/layout/Inline/index.mjs +0 -1
- package/dist/components/layout/Stack/Stack.cjs +0 -29
- package/dist/components/layout/Stack/Stack.mjs +0 -30
- package/dist/components/layout/Stack/index.cjs +0 -1
- package/dist/components/layout/Stack/index.mjs +0 -1
- package/dist/components/navigation/Link/Link.cjs +0 -31
- package/dist/components/navigation/Link/Link.mjs +0 -32
- package/dist/components/navigation/Link/index.cjs +0 -1
- package/dist/components/navigation/Link/index.mjs +0 -1
- package/dist/components/other/BlocksProvider/BlocksProvider.cjs +0 -36
- package/dist/components/other/BlocksProvider/BlocksProvider.mjs +0 -39
- package/dist/components/other/BlocksProvider/context.cjs +0 -4
- package/dist/components/other/BlocksProvider/context.mjs +0 -7
- package/dist/components/other/BlocksProvider/index.cjs +0 -1
- package/dist/components/other/BlocksProvider/index.mjs +0 -1
- package/dist/components/other/Portal/Portal.cjs +0 -7
- package/dist/components/other/Portal/Portal.mjs +0 -8
- package/dist/components/other/Portal/index.cjs +0 -1
- package/dist/components/other/Portal/index.mjs +0 -1
- package/dist/components/overlay/Dialog/Dialog.cjs +0 -77
- package/dist/components/overlay/Dialog/Dialog.mjs +0 -80
- package/dist/components/overlay/Dialog/dialog.css.cjs +0 -21
- package/dist/components/overlay/Dialog/dialog.css.mjs +0 -22
- package/dist/components/overlay/Dialog/dialogHelper.cjs +0 -20
- package/dist/components/overlay/Dialog/dialogHelper.mjs +0 -21
- package/dist/components/overlay/Dialog/index.cjs +0 -1
- package/dist/components/overlay/Dialog/index.mjs +0 -1
- package/dist/components/overlay/Popover/Popover.cjs +0 -111
- package/dist/components/overlay/Popover/Popover.mjs +0 -112
- package/dist/components/overlay/Popover/popover-utils.cjs +0 -61
- package/dist/components/overlay/Popover/popover-utils.mjs +0 -62
- package/dist/components/overlay/Tooltip/Tooltip.cjs +0 -71
- package/dist/components/overlay/Tooltip/Tooltip.mjs +0 -74
- package/dist/components/overlay/Tooltip/index.cjs +0 -1
- package/dist/components/overlay/Tooltip/index.mjs +0 -1
- package/dist/components/typography/Heading/Heading.cjs +0 -23
- package/dist/components/typography/Heading/Heading.mjs +0 -24
- package/dist/components/typography/Heading/heading.css.cjs +0 -15
- package/dist/components/typography/Heading/heading.css.mjs +0 -16
- package/dist/components/typography/Heading/index.cjs +0 -1
- package/dist/components/typography/Heading/index.mjs +0 -1
- package/dist/components/typography/Text/Text.cjs +0 -20
- package/dist/components/typography/Text/Text.mjs +0 -21
- package/dist/components/typography/Text/index.cjs +0 -1
- package/dist/components/typography/Text/index.mjs +0 -1
- package/dist/components/typography/Text/text.css.cjs +0 -15
- package/dist/components/typography/Text/text.css.mjs +0 -16
- package/dist/hooks/useClickOutside/useClickOutside.cjs +0 -22
- package/dist/hooks/useClickOutside/useClickOutside.mjs +0 -23
- package/dist/hooks/useControlledValue/useControlledValue.cjs +0 -31
- package/dist/hooks/useControlledValue/useControlledValue.mjs +0 -32
- package/dist/hooks/useIsomorphicLayoutEffect/index.cjs +0 -1
- package/dist/hooks/useIsomorphicLayoutEffect/index.mjs +0 -1
- package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs +0 -4
- package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs +0 -7
- package/dist/hooks/useKeyboard/index.cjs +0 -1
- package/dist/hooks/useKeyboard/index.mjs +0 -1
- package/dist/hooks/useKeyboard/useKeyboard.cjs +0 -19
- package/dist/hooks/useKeyboard/useKeyboard.mjs +0 -22
- package/dist/hooks/useLayer/index.cjs +0 -1
- package/dist/hooks/useLayer/index.mjs +0 -1
- package/dist/hooks/useLayer/useLayer.cjs +0 -25
- package/dist/hooks/useLayer/useLayer.mjs +0 -26
- package/dist/hooks/usePreventBodyScroll/index.cjs +0 -1
- package/dist/hooks/usePreventBodyScroll/index.mjs +0 -1
- package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs +0 -29
- package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.mjs +0 -30
- package/dist/hooks/useRestoreFocus/index.cjs +0 -1
- package/dist/hooks/useRestoreFocus/index.mjs +0 -1
- package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs +0 -17
- package/dist/hooks/useRestoreFocus/useRestoreFocus.mjs +0 -18
- package/dist/hooks/useRootAriaHidden/index.cjs +0 -1
- package/dist/hooks/useRootAriaHidden/index.mjs +0 -1
- package/dist/hooks/useRootAriaHidden/useRootAriaHidden.cjs +0 -11
- package/dist/hooks/useRootAriaHidden/useRootAriaHidden.mjs +0 -12
- package/dist/hooks/useVisibilityState/index.cjs +0 -1
- package/dist/hooks/useVisibilityState/index.mjs +0 -1
- package/dist/hooks/useVisibilityState/useVisibilityState.cjs +0 -15
- package/dist/hooks/useVisibilityState/useVisibilityState.mjs +0 -16
- package/dist/index.d.mts +0 -1
- package/dist/index.mjs +0 -73
- package/dist/lib/asChildRenderer/createAsChildTemplate.cjs +0 -72
- package/dist/lib/asChildRenderer/createAsChildTemplate.mjs +0 -73
- package/dist/lib/css/atoms/atomicProperties.cjs +0 -89
- package/dist/lib/css/atoms/atomicProperties.mjs +0 -90
- package/dist/lib/css/atoms/atoms.cjs +0 -2
- package/dist/lib/css/atoms/atoms.mjs +0 -1
- package/dist/lib/css/atoms/breakpoints.cjs +0 -13
- package/dist/lib/css/atoms/breakpoints.mjs +0 -14
- package/dist/lib/css/atoms/index.cjs +0 -2
- package/dist/lib/css/atoms/index.mjs +0 -1
- package/dist/lib/css/atoms/sprinkles.css.cjs +0 -38
- package/dist/lib/css/atoms/sprinkles.css.mjs +0 -39
- package/dist/lib/css/flexbox/flexbox.cjs +0 -16
- package/dist/lib/css/flexbox/flexbox.mjs +0 -17
- package/dist/lib/css/layers/layers.css.cjs +0 -7
- package/dist/lib/css/layers/layers.css.mjs +0 -8
- package/dist/lib/css/reset/reset.css.cjs +0 -38
- package/dist/lib/css/reset/reset.css.mjs +0 -37
- package/dist/lib/css/style/style.cjs +0 -28
- package/dist/lib/css/style/style.mjs +0 -29
- package/dist/lib/css/utils/cssUtils.cjs +0 -5
- package/dist/lib/css/utils/cssUtils.mjs +0 -6
- package/dist/lib/react/mergeProps.cjs +0 -42
- package/dist/lib/react/mergeProps.mjs +0 -43
- package/dist/lib/react/refs.cjs +0 -16
- package/dist/lib/react/refs.mjs +0 -17
- package/dist/lib/theme/makeComponentTheme.cjs +0 -5
- package/dist/lib/theme/makeComponentTheme.mjs +0 -6
- package/dist/lib/theme/makeTheme.cjs +0 -12
- package/dist/lib/theme/makeTheme.mjs +0 -13
- package/dist/lib/theme/makeVanillaTheme.cjs +0 -19
- package/dist/lib/theme/makeVanillaTheme.mjs +0 -20
- package/dist/lib/theme/store/theme.cjs +0 -92
- package/dist/lib/theme/store/theme.mjs +0 -93
- package/dist/lib/theme/tokens.cjs +0 -81
- package/dist/lib/theme/tokens.mjs +0 -82
- package/dist/lib/theme/vars.css.cjs +0 -9
- package/dist/lib/theme/vars.css.mjs +0 -10
- package/dist/lib/utils/atom-props.cjs +0 -15
- package/dist/lib/utils/atom-props.mjs +0 -16
- package/dist/lib/utils/classnames.cjs +0 -6
- package/dist/lib/utils/classnames.mjs +0 -7
- package/dist/lib/utils/dom.cjs +0 -12
- package/dist/lib/utils/dom.mjs +0 -13
- package/dist/lib/utils/math.cjs +0 -12
- package/dist/lib/utils/math.mjs +0 -13
- package/dist/momotaro.chunk.d.ts +0 -906
- package/dist/reset.d.mts +0 -2
- package/dist/reset.mjs +0 -2
- package/dist/themes/momotaro/components/button.css.cjs +0 -103
- package/dist/themes/momotaro/components/button.css.mjs +0 -104
- package/dist/themes/momotaro/components/checkbox.css.cjs +0 -59
- package/dist/themes/momotaro/components/checkbox.css.mjs +0 -60
- package/dist/themes/momotaro/components/dialog.css.cjs +0 -78
- package/dist/themes/momotaro/components/dialog.css.mjs +0 -79
- package/dist/themes/momotaro/components/divider.css.cjs +0 -15
- package/dist/themes/momotaro/components/divider.css.mjs +0 -16
- package/dist/themes/momotaro/components/helpers.css.cjs +0 -43
- package/dist/themes/momotaro/components/helpers.css.mjs +0 -44
- package/dist/themes/momotaro/components/index.cjs +0 -34
- package/dist/themes/momotaro/components/index.mjs +0 -35
- package/dist/themes/momotaro/components/input.css.cjs +0 -41
- package/dist/themes/momotaro/components/input.css.mjs +0 -42
- package/dist/themes/momotaro/components/label.css.cjs +0 -33
- package/dist/themes/momotaro/components/label.css.mjs +0 -34
- package/dist/themes/momotaro/components/link.css.cjs +0 -53
- package/dist/themes/momotaro/components/link.css.mjs +0 -54
- package/dist/themes/momotaro/components/popover.css.cjs +0 -32
- package/dist/themes/momotaro/components/popover.css.mjs +0 -33
- package/dist/themes/momotaro/components/progress.css.cjs +0 -55
- package/dist/themes/momotaro/components/progress.css.mjs +0 -56
- package/dist/themes/momotaro/components/radio.css.cjs +0 -60
- package/dist/themes/momotaro/components/radio.css.mjs +0 -61
- package/dist/themes/momotaro/components/select.css.cjs +0 -44
- package/dist/themes/momotaro/components/select.css.mjs +0 -45
- package/dist/themes/momotaro/components/slider.css.cjs +0 -89
- package/dist/themes/momotaro/components/slider.css.mjs +0 -90
- package/dist/themes/momotaro/components/spinner.css.cjs +0 -43
- package/dist/themes/momotaro/components/spinner.css.mjs +0 -44
- package/dist/themes/momotaro/components/switch.css.cjs +0 -58
- package/dist/themes/momotaro/components/switch.css.mjs +0 -59
- package/dist/themes/momotaro/components/tooltip.css.cjs +0 -30
- package/dist/themes/momotaro/components/tooltip.css.mjs +0 -31
- package/dist/themes/momotaro/components/transitions.cjs +0 -3
- package/dist/themes/momotaro/components/transitions.mjs +0 -4
- package/dist/themes/momotaro/index.cjs +0 -2
- package/dist/themes/momotaro/index.mjs +0 -1
- package/dist/themes/momotaro/momotaro.css.cjs +0 -13
- package/dist/themes/momotaro/momotaro.css.mjs +0 -14
- package/dist/themes/momotaro/tokens.css.cjs +0 -85
- package/dist/themes/momotaro/tokens.css.mjs +0 -86
- package/dist/themes/momotaro.cjs +0 -4
- package/dist/themes/momotaro.d.mts +0 -1
- package/dist/themes/momotaro.d.ts +0 -1
- package/dist/themes/momotaro.mjs +0 -4
- package/reset/index.d.ts +0 -1
- package/reset/package.json +0 -5
- package/themes/momotaro/index.d.ts +0 -1
- package/themes/momotaro/package.json +0 -5
package/dist/reset.d.mts
DELETED
package/dist/reset.mjs
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
3
|
-
const css = require("@vanilla-extract/css");
|
|
4
|
-
const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
|
|
5
|
-
const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
|
|
6
|
-
const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
|
|
7
|
-
const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
|
|
8
|
-
fileScope.setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
|
|
9
|
-
const intentColor = css.createVar("intentColor");
|
|
10
|
-
const hoverBackgroundColor = css.createVar("hoverBackgroundColor");
|
|
11
|
-
const button = lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
|
|
12
|
-
base: lib_css_style_style_cjs.style([{
|
|
13
|
-
display: "inline-flex",
|
|
14
|
-
placeItems: "center",
|
|
15
|
-
fontSize: "medium",
|
|
16
|
-
borderRadius: "medium",
|
|
17
|
-
fontWeight: "medium",
|
|
18
|
-
// Space between `startSlot | children | endSlot`
|
|
19
|
-
gap: "small",
|
|
20
|
-
selectors: {
|
|
21
|
-
"&:hover:not(:disabled)": {
|
|
22
|
-
backgroundColor: hoverBackgroundColor
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}, themes_momotaro_components_helpers_css_cjs.clickable]),
|
|
26
|
-
variants: {
|
|
27
|
-
variant: {
|
|
28
|
-
solid: lib_css_style_style_cjs.style({
|
|
29
|
-
color: lib_theme_vars_css_cjs.vars.color.white,
|
|
30
|
-
backgroundColor: intentColor,
|
|
31
|
-
border: "none"
|
|
32
|
-
}),
|
|
33
|
-
outline: lib_css_style_style_cjs.style({
|
|
34
|
-
color: intentColor,
|
|
35
|
-
borderWidth: "small",
|
|
36
|
-
borderStyle: "solid",
|
|
37
|
-
borderColor: intentColor,
|
|
38
|
-
background: "transparent"
|
|
39
|
-
}),
|
|
40
|
-
ghost: lib_css_style_style_cjs.style({
|
|
41
|
-
color: intentColor,
|
|
42
|
-
background: "transparent"
|
|
43
|
-
})
|
|
44
|
-
},
|
|
45
|
-
size: {
|
|
46
|
-
small: lib_css_style_style_cjs.style({
|
|
47
|
-
paddingInline: "large",
|
|
48
|
-
height: 40
|
|
49
|
-
}),
|
|
50
|
-
medium: lib_css_style_style_cjs.style({
|
|
51
|
-
paddingInline: "xlarge",
|
|
52
|
-
height: 56
|
|
53
|
-
}),
|
|
54
|
-
large: lib_css_style_style_cjs.style({
|
|
55
|
-
paddingInline: "xlarge",
|
|
56
|
-
height: 72
|
|
57
|
-
})
|
|
58
|
-
},
|
|
59
|
-
intent: {
|
|
60
|
-
neutral: lib_css_style_style_cjs.style({
|
|
61
|
-
vars: {
|
|
62
|
-
[intentColor]: lib_theme_vars_css_cjs.vars.color.primary,
|
|
63
|
-
[hoverBackgroundColor]: lib_theme_vars_css_cjs.vars.color.primaryLight
|
|
64
|
-
}
|
|
65
|
-
}),
|
|
66
|
-
danger: lib_css_style_style_cjs.style({
|
|
67
|
-
vars: {
|
|
68
|
-
[intentColor]: lib_theme_vars_css_cjs.vars.color.danger,
|
|
69
|
-
[hoverBackgroundColor]: "#fff8f7",
|
|
70
|
-
[themes_momotaro_components_helpers_css_cjs.focusRingColor]: lib_theme_vars_css_cjs.vars.color.danger
|
|
71
|
-
}
|
|
72
|
-
})
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
compoundVariants: [{
|
|
76
|
-
variants: {
|
|
77
|
-
variant: "solid",
|
|
78
|
-
intent: "neutral"
|
|
79
|
-
},
|
|
80
|
-
style: lib_css_style_style_cjs.style({
|
|
81
|
-
vars: {
|
|
82
|
-
[hoverBackgroundColor]: lib_theme_vars_css_cjs.vars.color.primaryDark
|
|
83
|
-
}
|
|
84
|
-
})
|
|
85
|
-
}, {
|
|
86
|
-
variants: {
|
|
87
|
-
variant: "solid",
|
|
88
|
-
intent: "danger"
|
|
89
|
-
},
|
|
90
|
-
style: lib_css_style_style_cjs.style({
|
|
91
|
-
vars: {
|
|
92
|
-
[hoverBackgroundColor]: "#f9b1a9"
|
|
93
|
-
}
|
|
94
|
-
})
|
|
95
|
-
}],
|
|
96
|
-
defaultVariants: {
|
|
97
|
-
size: "small",
|
|
98
|
-
variant: "solid",
|
|
99
|
-
intent: "neutral"
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
fileScope.endFileScope();
|
|
103
|
-
exports.button = button;
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
|
|
2
|
-
import { createVar } from "@vanilla-extract/css";
|
|
3
|
-
import { style } from "../../../lib/css/style/style.mjs";
|
|
4
|
-
import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
|
|
5
|
-
import { vars } from "../../../lib/theme/vars.css.mjs";
|
|
6
|
-
import { focusRingColor, clickable } from "./helpers.css.mjs";
|
|
7
|
-
setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
|
|
8
|
-
const intentColor = createVar("intentColor");
|
|
9
|
-
const hoverBackgroundColor = createVar("hoverBackgroundColor");
|
|
10
|
-
const button = makeComponentTheme("button", {
|
|
11
|
-
base: style([{
|
|
12
|
-
display: "inline-flex",
|
|
13
|
-
placeItems: "center",
|
|
14
|
-
fontSize: "medium",
|
|
15
|
-
borderRadius: "medium",
|
|
16
|
-
fontWeight: "medium",
|
|
17
|
-
// Space between `startSlot | children | endSlot`
|
|
18
|
-
gap: "small",
|
|
19
|
-
selectors: {
|
|
20
|
-
"&:hover:not(:disabled)": {
|
|
21
|
-
backgroundColor: hoverBackgroundColor
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}, clickable]),
|
|
25
|
-
variants: {
|
|
26
|
-
variant: {
|
|
27
|
-
solid: style({
|
|
28
|
-
color: vars.color.white,
|
|
29
|
-
backgroundColor: intentColor,
|
|
30
|
-
border: "none"
|
|
31
|
-
}),
|
|
32
|
-
outline: style({
|
|
33
|
-
color: intentColor,
|
|
34
|
-
borderWidth: "small",
|
|
35
|
-
borderStyle: "solid",
|
|
36
|
-
borderColor: intentColor,
|
|
37
|
-
background: "transparent"
|
|
38
|
-
}),
|
|
39
|
-
ghost: style({
|
|
40
|
-
color: intentColor,
|
|
41
|
-
background: "transparent"
|
|
42
|
-
})
|
|
43
|
-
},
|
|
44
|
-
size: {
|
|
45
|
-
small: style({
|
|
46
|
-
paddingInline: "large",
|
|
47
|
-
height: 40
|
|
48
|
-
}),
|
|
49
|
-
medium: style({
|
|
50
|
-
paddingInline: "xlarge",
|
|
51
|
-
height: 56
|
|
52
|
-
}),
|
|
53
|
-
large: style({
|
|
54
|
-
paddingInline: "xlarge",
|
|
55
|
-
height: 72
|
|
56
|
-
})
|
|
57
|
-
},
|
|
58
|
-
intent: {
|
|
59
|
-
neutral: style({
|
|
60
|
-
vars: {
|
|
61
|
-
[intentColor]: vars.color.primary,
|
|
62
|
-
[hoverBackgroundColor]: vars.color.primaryLight
|
|
63
|
-
}
|
|
64
|
-
}),
|
|
65
|
-
danger: style({
|
|
66
|
-
vars: {
|
|
67
|
-
[intentColor]: vars.color.danger,
|
|
68
|
-
[hoverBackgroundColor]: "#fff8f7",
|
|
69
|
-
[focusRingColor]: vars.color.danger
|
|
70
|
-
}
|
|
71
|
-
})
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
compoundVariants: [{
|
|
75
|
-
variants: {
|
|
76
|
-
variant: "solid",
|
|
77
|
-
intent: "neutral"
|
|
78
|
-
},
|
|
79
|
-
style: style({
|
|
80
|
-
vars: {
|
|
81
|
-
[hoverBackgroundColor]: vars.color.primaryDark
|
|
82
|
-
}
|
|
83
|
-
})
|
|
84
|
-
}, {
|
|
85
|
-
variants: {
|
|
86
|
-
variant: "solid",
|
|
87
|
-
intent: "danger"
|
|
88
|
-
},
|
|
89
|
-
style: style({
|
|
90
|
-
vars: {
|
|
91
|
-
[hoverBackgroundColor]: "#f9b1a9"
|
|
92
|
-
}
|
|
93
|
-
})
|
|
94
|
-
}],
|
|
95
|
-
defaultVariants: {
|
|
96
|
-
size: "small",
|
|
97
|
-
variant: "solid",
|
|
98
|
-
intent: "neutral"
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
endFileScope();
|
|
102
|
-
export {
|
|
103
|
-
button
|
|
104
|
-
};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
3
|
-
const css = require("@vanilla-extract/css");
|
|
4
|
-
const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
|
|
5
|
-
const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
|
|
6
|
-
const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
|
|
7
|
-
const themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
|
|
8
|
-
const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
|
|
9
|
-
fileScope.setFileScope("src/themes/momotaro/components/checkbox.css.ts", "@blockle/blocks");
|
|
10
|
-
const checkbox = lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
|
|
11
|
-
base: css.style([{
|
|
12
|
-
display: "flex",
|
|
13
|
-
alignItems: "center",
|
|
14
|
-
justifyContent: "center",
|
|
15
|
-
inlineSize: 24,
|
|
16
|
-
blockSize: 24,
|
|
17
|
-
"@media": {
|
|
18
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
19
|
-
transition: `background-color ${lib_theme_vars_css_cjs.vars.transition.normal}, box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
selectors: {
|
|
23
|
-
"&:hover:not(:has(input:disabled))": {
|
|
24
|
-
backgroundColor: lib_theme_vars_css_cjs.vars.color.primaryDark
|
|
25
|
-
},
|
|
26
|
-
"&:has(input:checked)": {
|
|
27
|
-
backgroundColor: lib_theme_vars_css_cjs.vars.color.primary
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}, lib_css_atoms_sprinkles_css_cjs.atoms({
|
|
31
|
-
backgroundColor: "primaryLight",
|
|
32
|
-
borderRadius: "small"
|
|
33
|
-
}), themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
|
|
34
|
-
icon: css.style({
|
|
35
|
-
inlineSize: "1rem",
|
|
36
|
-
blockSize: "1rem",
|
|
37
|
-
color: "white",
|
|
38
|
-
transform: "scale(0)",
|
|
39
|
-
selectors: {
|
|
40
|
-
"input:checked ~ &": {
|
|
41
|
-
transform: "scale(1)"
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
"@media": {
|
|
45
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
46
|
-
transition: `transform ${lib_theme_vars_css_cjs.vars.transition.normal} ${themes_momotaro_components_transitions_cjs.bounceOut}`
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}, "checkbox_icon"),
|
|
50
|
-
label: lib_css_atoms_sprinkles_css_cjs.atoms({
|
|
51
|
-
display: "flex",
|
|
52
|
-
flexDirection: "row",
|
|
53
|
-
padding: "xsmall",
|
|
54
|
-
gap: "medium",
|
|
55
|
-
cursor: "pointer"
|
|
56
|
-
})
|
|
57
|
-
});
|
|
58
|
-
fileScope.endFileScope();
|
|
59
|
-
exports.checkbox = checkbox;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
|
|
2
|
-
import { style } from "@vanilla-extract/css";
|
|
3
|
-
import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
|
|
4
|
-
import { vars } from "../../../lib/theme/vars.css.mjs";
|
|
5
|
-
import { focusable } from "./helpers.css.mjs";
|
|
6
|
-
import { bounceOut } from "./transitions.mjs";
|
|
7
|
-
import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
|
|
8
|
-
setFileScope("src/themes/momotaro/components/checkbox.css.ts", "@blockle/blocks");
|
|
9
|
-
const checkbox = makeComponentTheme("checkbox", {
|
|
10
|
-
base: style([{
|
|
11
|
-
display: "flex",
|
|
12
|
-
alignItems: "center",
|
|
13
|
-
justifyContent: "center",
|
|
14
|
-
inlineSize: 24,
|
|
15
|
-
blockSize: 24,
|
|
16
|
-
"@media": {
|
|
17
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
18
|
-
transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
selectors: {
|
|
22
|
-
"&:hover:not(:has(input:disabled))": {
|
|
23
|
-
backgroundColor: vars.color.primaryDark
|
|
24
|
-
},
|
|
25
|
-
"&:has(input:checked)": {
|
|
26
|
-
backgroundColor: vars.color.primary
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}, atoms({
|
|
30
|
-
backgroundColor: "primaryLight",
|
|
31
|
-
borderRadius: "small"
|
|
32
|
-
}), focusable], "checkbox_base"),
|
|
33
|
-
icon: style({
|
|
34
|
-
inlineSize: "1rem",
|
|
35
|
-
blockSize: "1rem",
|
|
36
|
-
color: "white",
|
|
37
|
-
transform: "scale(0)",
|
|
38
|
-
selectors: {
|
|
39
|
-
"input:checked ~ &": {
|
|
40
|
-
transform: "scale(1)"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
"@media": {
|
|
44
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
45
|
-
transition: `transform ${vars.transition.normal} ${bounceOut}`
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}, "checkbox_icon"),
|
|
49
|
-
label: atoms({
|
|
50
|
-
display: "flex",
|
|
51
|
-
flexDirection: "row",
|
|
52
|
-
padding: "xsmall",
|
|
53
|
-
gap: "medium",
|
|
54
|
-
cursor: "pointer"
|
|
55
|
-
})
|
|
56
|
-
});
|
|
57
|
-
endFileScope();
|
|
58
|
-
export {
|
|
59
|
-
checkbox
|
|
60
|
-
};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
3
|
-
const css = require("@vanilla-extract/css");
|
|
4
|
-
const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
|
|
5
|
-
const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
|
|
6
|
-
fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
|
|
7
|
-
const dialog = lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
|
|
8
|
-
dialog: css.style([lib_css_atoms_sprinkles_css_cjs.atoms({
|
|
9
|
-
display: "flex",
|
|
10
|
-
flexDirection: "column",
|
|
11
|
-
padding: "gutter",
|
|
12
|
-
border: "none",
|
|
13
|
-
overflow: "auto",
|
|
14
|
-
borderRadius: "medium",
|
|
15
|
-
boxShadow: "large"
|
|
16
|
-
}), {
|
|
17
|
-
maxHeight: "90%",
|
|
18
|
-
minWidth: "300px",
|
|
19
|
-
"::backdrop": {
|
|
20
|
-
backgroundColor: "rgba(0, 0, 0, 0.5)"
|
|
21
|
-
},
|
|
22
|
-
selectors: {
|
|
23
|
-
"&[open]": {
|
|
24
|
-
transform: "translate(0, 0)",
|
|
25
|
-
opacity: 1,
|
|
26
|
-
// @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
|
|
27
|
-
"@starting-style": {
|
|
28
|
-
transform: "translate(0, -120px)",
|
|
29
|
-
opacity: 0
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
"&[open]::backdrop": {
|
|
33
|
-
opacity: 1,
|
|
34
|
-
"@starting-style": {
|
|
35
|
-
opacity: 0
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
// Apply the animation only if the user has not requested reduced motion
|
|
40
|
-
"@media": {
|
|
41
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
42
|
-
// Ending style
|
|
43
|
-
transform: "translate(0, -120px)",
|
|
44
|
-
opacity: 0,
|
|
45
|
-
transitionBehavior: "allow-discrete",
|
|
46
|
-
transitionProperty: "opacity, transform, overlay, display",
|
|
47
|
-
transitionDuration: "240ms, 160ms, 240ms, 240ms",
|
|
48
|
-
"::backdrop": {
|
|
49
|
-
opacity: 0,
|
|
50
|
-
transitionBehavior: "allow-discrete",
|
|
51
|
-
transitionProperty: "opacity, overlay, display",
|
|
52
|
-
transitionDuration: "160ms, 240ms, 240ms"
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}], "dialog_dialog"),
|
|
57
|
-
variants: {
|
|
58
|
-
size: {
|
|
59
|
-
small: css.style({
|
|
60
|
-
width: "400px",
|
|
61
|
-
maxWidth: "min(400px, 90%)"
|
|
62
|
-
}, "dialog_variants_size_small"),
|
|
63
|
-
medium: css.style({
|
|
64
|
-
width: "600px",
|
|
65
|
-
maxWidth: "min(600px, 90%)"
|
|
66
|
-
}, "dialog_variants_size_medium"),
|
|
67
|
-
large: css.style({
|
|
68
|
-
width: "800px",
|
|
69
|
-
maxWidth: "min(800px, 90%)"
|
|
70
|
-
}, "dialog_variants_size_large")
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
defaultVariants: {
|
|
74
|
-
size: "small"
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
fileScope.endFileScope();
|
|
78
|
-
exports.dialog = dialog;
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
|
|
2
|
-
import { style } from "@vanilla-extract/css";
|
|
3
|
-
import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
|
|
4
|
-
import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
|
|
5
|
-
setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
|
|
6
|
-
const dialog = makeComponentTheme("dialog", {
|
|
7
|
-
dialog: style([atoms({
|
|
8
|
-
display: "flex",
|
|
9
|
-
flexDirection: "column",
|
|
10
|
-
padding: "gutter",
|
|
11
|
-
border: "none",
|
|
12
|
-
overflow: "auto",
|
|
13
|
-
borderRadius: "medium",
|
|
14
|
-
boxShadow: "large"
|
|
15
|
-
}), {
|
|
16
|
-
maxHeight: "90%",
|
|
17
|
-
minWidth: "300px",
|
|
18
|
-
"::backdrop": {
|
|
19
|
-
backgroundColor: "rgba(0, 0, 0, 0.5)"
|
|
20
|
-
},
|
|
21
|
-
selectors: {
|
|
22
|
-
"&[open]": {
|
|
23
|
-
transform: "translate(0, 0)",
|
|
24
|
-
opacity: 1,
|
|
25
|
-
// @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
|
|
26
|
-
"@starting-style": {
|
|
27
|
-
transform: "translate(0, -120px)",
|
|
28
|
-
opacity: 0
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
"&[open]::backdrop": {
|
|
32
|
-
opacity: 1,
|
|
33
|
-
"@starting-style": {
|
|
34
|
-
opacity: 0
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
// Apply the animation only if the user has not requested reduced motion
|
|
39
|
-
"@media": {
|
|
40
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
41
|
-
// Ending style
|
|
42
|
-
transform: "translate(0, -120px)",
|
|
43
|
-
opacity: 0,
|
|
44
|
-
transitionBehavior: "allow-discrete",
|
|
45
|
-
transitionProperty: "opacity, transform, overlay, display",
|
|
46
|
-
transitionDuration: "240ms, 160ms, 240ms, 240ms",
|
|
47
|
-
"::backdrop": {
|
|
48
|
-
opacity: 0,
|
|
49
|
-
transitionBehavior: "allow-discrete",
|
|
50
|
-
transitionProperty: "opacity, overlay, display",
|
|
51
|
-
transitionDuration: "160ms, 240ms, 240ms"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}], "dialog_dialog"),
|
|
56
|
-
variants: {
|
|
57
|
-
size: {
|
|
58
|
-
small: style({
|
|
59
|
-
width: "400px",
|
|
60
|
-
maxWidth: "min(400px, 90%)"
|
|
61
|
-
}, "dialog_variants_size_small"),
|
|
62
|
-
medium: style({
|
|
63
|
-
width: "600px",
|
|
64
|
-
maxWidth: "min(600px, 90%)"
|
|
65
|
-
}, "dialog_variants_size_medium"),
|
|
66
|
-
large: style({
|
|
67
|
-
width: "800px",
|
|
68
|
-
maxWidth: "min(800px, 90%)"
|
|
69
|
-
}, "dialog_variants_size_large")
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
defaultVariants: {
|
|
73
|
-
size: "small"
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
endFileScope();
|
|
77
|
-
export {
|
|
78
|
-
dialog
|
|
79
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
3
|
-
const css = require("@vanilla-extract/css");
|
|
4
|
-
const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
|
|
5
|
-
fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
|
|
6
|
-
const divider = lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
|
|
7
|
-
base: css.style({
|
|
8
|
-
blockSize: 1
|
|
9
|
-
}, "divider_base"),
|
|
10
|
-
defaultVariants: {
|
|
11
|
-
color: "textLight"
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
fileScope.endFileScope();
|
|
15
|
-
exports.divider = divider;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
|
|
2
|
-
import { style } from "@vanilla-extract/css";
|
|
3
|
-
import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
|
|
4
|
-
setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
|
|
5
|
-
const divider = makeComponentTheme("divider", {
|
|
6
|
-
base: style({
|
|
7
|
-
blockSize: 1
|
|
8
|
-
}, "divider_base"),
|
|
9
|
-
defaultVariants: {
|
|
10
|
-
color: "textLight"
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
endFileScope();
|
|
14
|
-
export {
|
|
15
|
-
divider
|
|
16
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
3
|
-
const css = require("@vanilla-extract/css");
|
|
4
|
-
const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
|
|
5
|
-
fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
|
|
6
|
-
const focusRingColor = css.createVar("focusRingColor");
|
|
7
|
-
const focusable = css.style({
|
|
8
|
-
"@media": {
|
|
9
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
10
|
-
transition: `box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
|
|
11
|
-
}
|
|
12
|
-
},
|
|
13
|
-
":focus-visible": {
|
|
14
|
-
outline: "2px solid transparent",
|
|
15
|
-
outlineOffset: "2px",
|
|
16
|
-
boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`
|
|
17
|
-
},
|
|
18
|
-
selectors: {
|
|
19
|
-
"&:disabled, &[disabled]": {
|
|
20
|
-
opacity: 0.5,
|
|
21
|
-
cursor: "auto",
|
|
22
|
-
pointerEvents: "none"
|
|
23
|
-
},
|
|
24
|
-
"&:has(input:focus-visible)": {
|
|
25
|
-
outline: "2px solid transparent",
|
|
26
|
-
outlineOffset: "2px",
|
|
27
|
-
boxShadow: lib_theme_vars_css_cjs.vars.focus.boxShadow
|
|
28
|
-
},
|
|
29
|
-
"&:has(input:disabled)": {
|
|
30
|
-
opacity: 0.5,
|
|
31
|
-
cursor: "auto"
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}, "focusable");
|
|
35
|
-
const clickable = css.style([focusable, {
|
|
36
|
-
":active": {
|
|
37
|
-
transform: "scale(0.975)"
|
|
38
|
-
}
|
|
39
|
-
}], "clickable");
|
|
40
|
-
fileScope.endFileScope();
|
|
41
|
-
exports.clickable = clickable;
|
|
42
|
-
exports.focusRingColor = focusRingColor;
|
|
43
|
-
exports.focusable = focusable;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
|
|
2
|
-
import { style, fallbackVar, createVar } from "@vanilla-extract/css";
|
|
3
|
-
import { vars } from "../../../lib/theme/vars.css.mjs";
|
|
4
|
-
setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
|
|
5
|
-
const focusRingColor = createVar("focusRingColor");
|
|
6
|
-
const focusable = style({
|
|
7
|
-
"@media": {
|
|
8
|
-
"(prefers-reduced-motion: no-preference)": {
|
|
9
|
-
transition: `box-shadow ${vars.transition.fast}`
|
|
10
|
-
}
|
|
11
|
-
},
|
|
12
|
-
":focus-visible": {
|
|
13
|
-
outline: "2px solid transparent",
|
|
14
|
-
outlineOffset: "2px",
|
|
15
|
-
boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`
|
|
16
|
-
},
|
|
17
|
-
selectors: {
|
|
18
|
-
"&:disabled, &[disabled]": {
|
|
19
|
-
opacity: 0.5,
|
|
20
|
-
cursor: "auto",
|
|
21
|
-
pointerEvents: "none"
|
|
22
|
-
},
|
|
23
|
-
"&:has(input:focus-visible)": {
|
|
24
|
-
outline: "2px solid transparent",
|
|
25
|
-
outlineOffset: "2px",
|
|
26
|
-
boxShadow: vars.focus.boxShadow
|
|
27
|
-
},
|
|
28
|
-
"&:has(input:disabled)": {
|
|
29
|
-
opacity: 0.5,
|
|
30
|
-
cursor: "auto"
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}, "focusable");
|
|
34
|
-
const clickable = style([focusable, {
|
|
35
|
-
":active": {
|
|
36
|
-
transform: "scale(0.975)"
|
|
37
|
-
}
|
|
38
|
-
}], "clickable");
|
|
39
|
-
endFileScope();
|
|
40
|
-
export {
|
|
41
|
-
clickable,
|
|
42
|
-
focusRingColor,
|
|
43
|
-
focusable
|
|
44
|
-
};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
|
|
3
|
-
const themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
|
|
4
|
-
const themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
|
|
5
|
-
const themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
|
|
6
|
-
const themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
|
|
7
|
-
const themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
|
|
8
|
-
const themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
|
|
9
|
-
const themes_momotaro_components_popover_css_cjs = require("./popover.css.cjs");
|
|
10
|
-
const themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
|
|
11
|
-
const themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
|
|
12
|
-
const themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
|
|
13
|
-
const themes_momotaro_components_slider_css_cjs = require("./slider.css.cjs");
|
|
14
|
-
const themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
|
|
15
|
-
const themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
|
|
16
|
-
const themes_momotaro_components_tooltip_css_cjs = require("./tooltip.css.cjs");
|
|
17
|
-
const components = {
|
|
18
|
-
button: themes_momotaro_components_button_css_cjs.button,
|
|
19
|
-
checkbox: themes_momotaro_components_checkbox_css_cjs.checkbox,
|
|
20
|
-
dialog: themes_momotaro_components_dialog_css_cjs.dialog,
|
|
21
|
-
divider: themes_momotaro_components_divider_css_cjs.divider,
|
|
22
|
-
input: themes_momotaro_components_input_css_cjs.input,
|
|
23
|
-
label: themes_momotaro_components_label_css_cjs.label,
|
|
24
|
-
link: themes_momotaro_components_link_css_cjs.link,
|
|
25
|
-
popover: themes_momotaro_components_popover_css_cjs.popover,
|
|
26
|
-
progress: themes_momotaro_components_progress_css_cjs.progress,
|
|
27
|
-
radio: themes_momotaro_components_radio_css_cjs.radio,
|
|
28
|
-
select: themes_momotaro_components_select_css_cjs.select,
|
|
29
|
-
slider: themes_momotaro_components_slider_css_cjs.slider,
|
|
30
|
-
spinner: themes_momotaro_components_spinner_css_cjs.spinner,
|
|
31
|
-
switch: themes_momotaro_components_switch_css_cjs.switchTheme,
|
|
32
|
-
tooltip: themes_momotaro_components_tooltip_css_cjs.tooltip
|
|
33
|
-
};
|
|
34
|
-
exports.components = components;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { button } from "./button.css.mjs";
|
|
2
|
-
import { checkbox } from "./checkbox.css.mjs";
|
|
3
|
-
import { dialog } from "./dialog.css.mjs";
|
|
4
|
-
import { divider } from "./divider.css.mjs";
|
|
5
|
-
import { input } from "./input.css.mjs";
|
|
6
|
-
import { label } from "./label.css.mjs";
|
|
7
|
-
import { link } from "./link.css.mjs";
|
|
8
|
-
import { popover } from "./popover.css.mjs";
|
|
9
|
-
import { progress } from "./progress.css.mjs";
|
|
10
|
-
import { radio } from "./radio.css.mjs";
|
|
11
|
-
import { select } from "./select.css.mjs";
|
|
12
|
-
import { slider } from "./slider.css.mjs";
|
|
13
|
-
import { spinner } from "./spinner.css.mjs";
|
|
14
|
-
import { switchTheme } from "./switch.css.mjs";
|
|
15
|
-
import { tooltip } from "./tooltip.css.mjs";
|
|
16
|
-
const components = {
|
|
17
|
-
button,
|
|
18
|
-
checkbox,
|
|
19
|
-
dialog,
|
|
20
|
-
divider,
|
|
21
|
-
input,
|
|
22
|
-
label,
|
|
23
|
-
link,
|
|
24
|
-
popover,
|
|
25
|
-
progress,
|
|
26
|
-
radio,
|
|
27
|
-
select,
|
|
28
|
-
slider,
|
|
29
|
-
spinner,
|
|
30
|
-
switch: switchTheme,
|
|
31
|
-
tooltip
|
|
32
|
-
};
|
|
33
|
-
export {
|
|
34
|
-
components
|
|
35
|
-
};
|