@yamada-ui/react/dist/esm/components/toggle/toggle.style.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { defineComponentSlotStyle } from "../../core/system/config.js";
import { iconButtonStyle } from "../button/icon-button.style.js";

//#region src/components/toggle/toggle.style.ts
const toggleStyle = defineComponentSlotStyle({
	base: {
		group: {},
		root: {
			"--error-border-color": "colors.border.error",
			gap: "2"
		}
	},
	props: { fullRounded: { true: { root: { rounded: "full" } } } },
	variants: {
		ghost: { root: {
			_checked: {
				layerStyle: "solid",
				_invalid: {
					borderColor: "{error-border-color}",
					borderWidth: "1px"
				}
			},
			_notChecked: {
				layerStyle: "ghost",
				_hover: { layerStyle: "ghost.hover" },
				_invalid: {
					borderColor: "{error-border-color}",
					borderWidth: "1px"
				}
			}
		} },
		outline: { root: {
			_checked: {
				layerStyle: "solid",
				borderColor: "colorScheme.solid",
				borderWidth: "1px",
				_invalid: { borderColor: "{error-border-color}" }
			},
			_notChecked: {
				layerStyle: "outline",
				_hover: { layerStyle: "outline.hover" },
				_invalid: { borderColor: "{error-border-color}" }
			}
		} },
		solid: { root: {
			_checked: {
				layerStyle: "subtle",
				_invalid: {
					borderColor: "{error-border-color}",
					borderWidth: "1px"
				}
			},
			_notChecked: {
				layerStyle: "solid",
				_hover: { layerStyle: "solid.hover" },
				_invalid: {
					borderColor: "{error-border-color}",
					borderWidth: "1px"
				}
			}
		} },
		subtle: { root: {
			_checked: {
				layerStyle: "solid",
				_invalid: {
					borderColor: "{error-border-color}",
					borderWidth: "1px"
				}
			},
			_notChecked: {
				layerStyle: "subtle",
				_hover: { layerStyle: "subtle.hover" },
				_invalid: {
					borderColor: "{error-border-color}",
					borderWidth: "1px"
				}
			}
		} },
		surface: { root: {
			_checked: {
				layerStyle: "solid",
				_invalid: { borderColor: "{error-border-color}" }
			},
			_notChecked: {
				layerStyle: "surface",
				_hover: { layerStyle: "surface.hover" },
				_invalid: { borderColor: "{error-border-color}" }
			}
		} }
	},
	sizes: {
		xs: { root: {
			...iconButtonStyle.sizes?.xs,
			gap: "1"
		} },
		sm: { root: {
			...iconButtonStyle.sizes?.sm,
			gap: "2"
		} },
		md: { root: {
			...iconButtonStyle.sizes?.md,
			gap: "2"
		} },
		lg: { root: {
			...iconButtonStyle.sizes?.lg,
			gap: "2.5"
		} },
		xl: { root: {
			...iconButtonStyle.sizes?.xl,
			gap: "3"
		} },
		"2xl": { root: {
			...iconButtonStyle.sizes?.["2xl"],
			gap: "3"
		} }
	},
	defaultProps: {
		size: "md",
		variant: "ghost"
	}
});

//#endregion
export { toggleStyle };
//# sourceMappingURL=toggle.style.js.map