import * as CSS from "csstype" import { Config } from "../utils/prop-config" import { t, Token } from "../utils" export const border: Config = { border: t.borders("border"), borderWidth: t.borderWidths("borderWidth"), borderStyle: t.borderStyles("borderStyle"), borderColor: t.colors("borderColor"), borderRadius: t.radii("borderRadius"), borderTop: t.borders("borderTop"), borderBlockStart: t.borders("borderBlockStart"), borderTopLeftRadius: t.radii("borderTopLeftRadius"), borderStartStartRadius: t.logical({ scale: "radii", property: { ltr: "borderTopLeftRadius", rtl: "borderTopRightRadius", }, }), borderEndStartRadius: t.logical({ scale: "radii", property: { ltr: "borderBottomLeftRadius", rtl: "borderBottomRightRadius", }, }), borderTopRightRadius: t.radii("borderTopRightRadius"), borderStartEndRadius: t.logical({ scale: "radii", property: { ltr: "borderTopRightRadius", rtl: "borderTopLeftRadius", }, }), borderEndEndRadius: t.logical({ scale: "radii", property: { ltr: "borderBottomRightRadius", rtl: "borderBottomLeftRadius", }, }), borderRight: t.borders("borderRight"), borderInlineEnd: t.borders("borderInlineEnd"), borderBottom: t.borders("borderBottom"), borderBlockEnd: t.borders("borderBlockEnd"), borderBottomLeftRadius: t.radii("borderBottomLeftRadius"), borderBottomRightRadius: t.radii("borderBottomRightRadius"), borderLeft: t.borders("borderLeft"), borderInlineStart: { property: "borderInlineStart", scale: "borders", }, borderInlineStartRadius: t.logical({ scale: "radii", property: { ltr: ["borderTopLeftRadius", "borderBottomLeftRadius"], rtl: ["borderTopRightRadius", "borderBottomRightRadius"], }, }), borderInlineEndRadius: t.logical({ scale: "radii", property: { ltr: ["borderTopRightRadius", "borderBottomRightRadius"], rtl: ["borderTopLeftRadius", "borderBottomLeftRadius"], }, }), borderX: t.borders(["borderLeft", "borderRight"]), borderInline: t.borders("borderInline"), borderY: t.borders(["borderTop", "borderBottom"]), borderBlock: t.borders("borderBlock"), borderTopWidth: t.borderWidths("borderTopWidth"), borderBlockStartWidth: t.borderWidths("borderBlockStartWidth"), borderTopColor: t.colors("borderTopColor"), borderBlockStartColor: t.colors("borderBlockStartColor"), borderTopStyle: t.borderStyles("borderTopStyle"), borderBlockStartStyle: t.borderStyles("borderBlockStartStyle"), borderBottomWidth: t.borderWidths("borderBottomWidth"), borderBlockEndWidth: t.borderWidths("borderBlockEndWidth"), borderBottomColor: t.colors("borderBottomColor"), borderBlockEndColor: t.colors("borderBlockEndColor"), borderBottomStyle: t.borderStyles("borderBottomStyle"), borderBlockEndStyle: t.borderStyles("borderBlockEndStyle"), borderLeftWidth: t.borderWidths("borderLeftWidth"), borderInlineStartWidth: t.borderWidths("borderInlineStartWidth"), borderLeftColor: t.colors("borderLeftColor"), borderInlineStartColor: t.colors("borderInlineStartColor"), borderLeftStyle: t.borderStyles("borderLeftStyle"), borderInlineStartStyle: t.borderStyles("borderInlineStartStyle"), borderRightWidth: t.borderWidths("borderRightWidth"), borderInlineEndWidth: t.borderWidths("borderInlineEndWidth"), borderRightColor: t.colors("borderRightColor"), borderInlineEndColor: t.colors("borderInlineEndColor"), borderRightStyle: t.borderStyles("borderRightStyle"), borderInlineEndStyle: t.borderStyles("borderInlineEndStyle"), borderTopRadius: t.radii(["borderTopLeftRadius", "borderTopRightRadius"]), borderBottomRadius: t.radii([ "borderBottomLeftRadius", "borderBottomRightRadius", ]), borderLeftRadius: t.radii(["borderTopLeftRadius", "borderBottomLeftRadius"]), borderRightRadius: t.radii([ "borderTopRightRadius", "borderBottomRightRadius", ]), } Object.assign(border, { rounded: border.borderRadius, roundedTop: border.borderTopRadius, roundedTopLeft: border.borderTopLeftRadius, roundedTopRight: border.borderTopRightRadius, roundedTopStart: border.borderStartStartRadius, roundedTopEnd: border.borderStartEndRadius, roundedBottom: border.borderBottomRadius, roundedBottomLeft: border.borderBottomLeftRadius, roundedBottomRight: border.borderBottomRightRadius, roundedBottomStart: border.borderEndStartRadius, roundedBottomEnd: border.borderEndEndRadius, roundedLeft: border.borderLeftRadius, roundedRight: border.borderRightRadius, roundedStart: border.borderInlineStartRadius, roundedEnd: border.borderInlineEndRadius, borderStart: border.borderInlineStart, borderEnd: border.borderInlineEnd, borderTopStartRadius: border.borderStartStartRadius, borderTopEndRadius: border.borderStartEndRadius, borderBottomStartRadius: border.borderEndStartRadius, borderBottomEndRadius: border.borderEndEndRadius, borderStartRadius: border.borderInlineStartRadius, borderEndRadius: border.borderInlineEndRadius, borderStartWidth: border.borderInlineStartWidth, borderEndWidth: border.borderInlineEndWidth, borderStartColor: border.borderInlineStartColor, borderEndColor: border.borderInlineEndColor, borderStartStyle: border.borderInlineStartStyle, borderEndStyle: border.borderInlineEndStyle, }) /** * The prop types for border properties listed above */ export interface BorderProps { /** * The CSS `border` property */ border?: Token /** * The CSS `border-width` property */ borderWidth?: Token /** * The CSS `border-style` property */ borderStyle?: Token /** * The CSS `border-color` property */ borderColor?: Token /** * The CSS `border-radius` property */ borderRadius?: Token /** * The CSS `border-radius` property */ rounded?: Token /** * The CSS `border-top` property */ borderTop?: Token borderBlockStart?: Token /** * The CSS `border-top-width` property */ borderTopWidth?: Token borderBlockStartWidth?: Token /** * The CSS `border-bottom-width` property */ borderBottomWidth?: Token borderBlockEndWidth?: Token /** * The CSS `border-left-width` property */ borderLeftWidth?: Token borderStartWidth?: Token borderInlineStartWidth?: Token /** * The CSS `border-right-width` property */ borderRightWidth?: Token borderEndWidth?: Token borderInlineEndWidth?: Token /** * The CSS `border-top-style` property */ borderTopStyle?: Token borderBlockStartStyle?: Token /** * The CSS `border-bottom-style` property */ borderBottomStyle?: Token borderBlockEndStyle?: Token /** * The CSS `border-left-style` property */ borderLeftStyle?: Token borderStartStyle?: Token borderInlineStartStyle?: Token /** * The CSS `border-right-styles` property */ borderRightStyle?: Token borderEndStyle?: Token borderInlineEndStyle?: Token /** * The CSS `border-top-color` property */ borderTopColor?: Token borderBlockStartColor?: Token /** * The CSS `border-bottom-color` property */ borderBottomColor?: Token borderBlockEndColor?: Token /** * The CSS `border-left-color` property */ borderLeftColor?: Token borderStartColor?: Token borderInlineStartColor?: Token /** * The CSS `border-right-color` property */ borderRightColor?: Token borderEndColor?: Token borderInlineEndColor?: Token /** * The CSS `border-right` property */ borderRight?: Token borderEnd?: Token borderInlineEnd?: Token /** * The CSS `border-bottom` property */ borderBottom?: Token borderBlockEnd?: Token /** * The CSS `border-left` property */ borderLeft?: Token borderStart?: Token borderInlineStart?: Token /** * The CSS `border-top-radius` property */ borderTopRadius?: Token /** * The CSS `border-top-radius` property */ roundedTop?: Token /** * The CSS `border-right-radius` property */ borderRightRadius?: Token /** * The CSS `border-right-radius` property */ roundedRight?: Token /** * When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`. * When direction is `rtl`, `roundedEnd` is equivalent to `borderLeftRadius`. */ roundedEnd?: Token /** * When direction is `ltr`, `borderInlineEndRadius` is equivalent to `borderRightRadius`. * When direction is `rtl`, `borderInlineEndRadius` is equivalent to `borderLeftRadius`. */ borderInlineEndRadius?: Token /** * When direction is `ltr`, `borderEndRadius` is equivalent to `borderRightRadius`. * When direction is `rtl`, `borderEndRadius` is equivalent to `borderLeftRadius`. */ borderEndRadius?: Token /** * The CSS `border-bottom-radius` property */ borderBottomRadius?: Token /** * The CSS `border-bottom-radius` property */ roundedBottom?: Token /** * The CSS `border-left-radius` property */ borderLeftRadius?: Token /** * The CSS `border-left-radius` property */ roundedLeft?: Token /** * When direction is `ltr`, `roundedEnd` is equivalent to `borderRightRadius`. * When direction is `rtl`, `roundedEnd` is equivalent to `borderLeftRadius`. */ roundedStart?: Token /** * When direction is `ltr`, `borderInlineStartRadius` is equivalent to `borderLeftRadius`. * When direction is `rtl`, `borderInlineStartRadius` is equivalent to `borderRightRadius`. */ borderInlineStartRadius?: Token /** * When direction is `ltr`, `borderStartRadius` is equivalent to `borderLeftRadius`. * When direction is `rtl`, `borderStartRadius` is equivalent to `borderRightRadius`. */ borderStartRadius?: Token /** * The CSS `border-top-left-radius` property */ borderTopLeftRadius?: Token borderTopStartRadius?: Token borderStartStartRadius?: Token< CSS.Property.BorderStartStartRadius | number, "radii" > /** * The CSS `border-top-left-radius` property */ roundedTopLeft?: Token roundedTopStart?: Token /** * The CSS `border-top-right-radius` property */ borderTopRightRadius?: Token borderTopEndRadius?: Token borderStartEndRadius?: Token< CSS.Property.BorderStartEndRadius | number, "radii" > /** * The CSS `border-top-right-radius` property */ roundedTopRight?: Token roundedTopEnd?: Token /** * The CSS `border-bottom-left-radius` property */ borderBottomLeftRadius?: Token borderBottomStartRadius?: Token borderEndStartRadius?: Token< CSS.Property.BorderEndStartRadius | number, "radii" > /** * The CSS `border-bottom-left-radius` property */ roundedBottomLeft?: Token roundedBottomStart?: Token /** * The CSS `border-bottom-right-radius` property */ borderBottomRightRadius?: Token borderBottomEndRadius?: Token borderEndEndRadius?: Token /** * The CSS `border-bottom-right-radius` property */ roundedBottomRight?: Token roundedBottomEnd?: Token /** * The CSS `border-right` and `border-left` property */ borderX?: Token borderInline?: Token /** * The CSS `border-top` and `border-bottom` property */ borderY?: Token borderBlock?: Token }