@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
106 lines (104 loc) • 2.6 kB
JavaScript
import { defineComponentSlotStyle } from "../../core/system/config.js";
import { focusRingStyle } from "../../core/css/focus-ring.js";
//#region src/components/checkbox/checkbox.style.ts
const checkboxStyle = defineComponentSlotStyle({
base: {
group: {},
indicator: {
alignItems: "center",
borderColor: "{indicator-border-color}",
borderWidth: "2px",
boxSize: "{indicator-size}",
display: "inline-flex",
focusRingColor: "{focus-border-color}",
"input:focus-visible + &": focusRingStyle.outline,
justifyContent: "center",
_invalid: {
borderColor: "{error-border-color}",
focusRingColor: "{error-border-color}"
}
},
label: {},
root: {
"--error-border-color": "colors.border.error",
"--focus-border-color": "colorScheme.outline",
"--indicator-border-color": "colors.border.emphasized",
alignItems: "center",
display: "flex",
fontSize: "{label-size}",
gap: "2",
userSelect: "none",
_readOnly: { layerStyle: "readOnly" },
_disabled: { layerStyle: "disabled" }
}
},
props: { shape: {
rounded: { indicator: { rounded: "l1" } },
square: { indicator: { rounded: "0" } }
} },
variants: {
outline: {
indicator: { color: "colorScheme.outline" },
root: {
_checked: { "--indicator-border-color": "colorScheme.outline" },
_indeterminate: { "--indicator-border-color": "colorScheme.outline" }
}
},
solid: {
indicator: {
color: "colorScheme.contrast",
_checked: { bg: "colorScheme.solid" },
_indeterminate: { bg: "colorScheme.solid" }
},
root: {
_checked: { "--indicator-border-color": "colorScheme.solid" },
_indeterminate: { "--indicator-border-color": "colorScheme.solid" }
}
},
subtle: {
indicator: {
bg: "colorScheme.subtle",
color: "colorScheme.fg"
},
root: { "--indicator-border-color": "transparent" }
},
surface: {
indicator: {
bg: "colorScheme.subtle",
color: "colorScheme.fg"
},
root: { "--indicator-border-color": "colorScheme.muted" }
}
},
sizes: {
sm: {
indicator: { fontSize: "xs" },
root: {
"--indicator-size": "sizes.3.5",
"--label-size": "fontSizes.sm"
}
},
md: {
indicator: { fontSize: "sm" },
root: {
"--indicator-size": "sizes.4",
"--label-size": "fontSizes.md"
}
},
lg: {
indicator: { fontSize: "md" },
root: {
"--indicator-size": "sizes.5",
"--label-size": "fontSizes.lg"
}
}
},
defaultProps: {
size: "md",
variant: "solid",
shape: "rounded"
}
});
//#endregion
export { checkboxStyle };
//# sourceMappingURL=checkbox.style.js.map