From 5bcfe7364f991e10b9e7ab26a18bd4cfc59cce9f Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Thu, 11 May 2023 17:18:05 -0600 Subject: [PATCH] WIP --- src/types/style.ts | 156 ++++++++++++++++++++++++++++++++++++++++ src/utils/styleProps.ts | 42 ++++++++++- 2 files changed, 197 insertions(+), 1 deletion(-) diff --git a/src/types/style.ts b/src/types/style.ts index 6ddc7c6f..28c00a5d 100644 --- a/src/types/style.ts +++ b/src/types/style.ts @@ -18,6 +18,149 @@ export interface StyleProps { maxHeight?: string | number; } +// These support more properties than specific arize components +// but still based on arize global/alias variables. +export interface ViewStyleProps extends StyleProps { + /** The background color for the element. */ + backgroundColor?: Responsive; + + /** The width of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */ + borderWidth?: Responsive; + /** The width of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width). */ + borderStartWidth?: Responsive; + /** The width of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width). */ + borderEndWidth?: Responsive; + // borderLeftWidth?: BorderSizeValue, + // borderRightWidth?: BorderSizeValue, + /** The width of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width). */ + borderTopWidth?: Responsive; + /** The width of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width). */ + borderBottomWidth?: Responsive; + /** The width of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */ + borderXWidth?: Responsive; + /** The width of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */ + borderYWidth?: Responsive; + + /** The color of the element's border on all four sides. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */ + borderColor?: Responsive; + /** The color of the border on the logical start side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color). */ + borderStartColor?: Responsive; + /** The color of the border on the logical end side, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color). */ + borderEndColor?: Responsive; + // borderLeftColor?: BorderColorValue, + // borderRightColor?: BorderColorValue, + /** The color of the top border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color). */ + borderTopColor?: Responsive; + /** The color of the bottom border. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color). */ + borderBottomColor?: Responsive; + /** The color of the left and right borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color). */ + borderXColor?: Responsive; + /** The color of the top and bottom borders. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width). */ + borderYColor?: Responsive; + + /** The border radius on all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius). */ + borderRadius?: Responsive; + /** The border radius for the top start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius). */ + borderTopStartRadius?: Responsive; + /** The border radius for the top end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius). */ + borderTopEndRadius?: Responsive; + /** The border radius for the bottom start corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius). */ + borderBottomStartRadius?: Responsive; + /** The border radius for the bottom end corner of the element, depending on the layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius). */ + borderBottomEndRadius?: Responsive; + // borderTopLeftRadius?: BorderRadiusValue, + // borderTopRightRadius?: BorderRadiusValue, + // borderBottomLeftRadius?: BorderRadiusValue, + // borderBottomRightRadius?: BorderRadiusValue, + + /** The padding for all four sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */ + padding?: Responsive; + /** The padding for the logical start side of the element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start). */ + paddingStart?: Responsive; + /** The padding for the logical end side of an element, depending on layout direction. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end). */ + paddingEnd?: Responsive; + // paddingLeft?: Responsive, + // paddingRight?: Responsive, + /** The padding for the top side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top). */ + paddingTop?: Responsive; + /** The padding for the bottom side of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). */ + paddingBottom?: Responsive; + /** The padding for both the left and right sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */ + paddingX?: Responsive; + /** The padding for both the top and bottom sides of the element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding). */ + paddingY?: Responsive; + + /** Species what to do when the element's content is too long to fit its size. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). */ + overflow?: Responsive; + // ... + // shadows? + // transforms? +} + +export interface BoxAlignmentStyleProps { + /** + * The distribution of space around items along the main axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). + * @default 'stretch' + */ + justifyContent?: Responsive< + | 'start' + | 'end' + | 'center' + | 'left' + | 'right' + | 'space-between' + | 'space-around' + | 'space-evenly' + | 'stretch' + | 'baseline' + | 'first baseline' + | 'last baseline' + | 'safe center' + | 'unsafe center' + >; + /** + * The distribution of space around child items along the cross axis. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content). + * @default 'start' + */ + alignContent?: Responsive< + | 'start' + | 'end' + | 'center' + | 'space-between' + | 'space-around' + | 'space-evenly' + | 'stretch' + | 'baseline' + | 'first baseline' + | 'last baseline' + | 'safe center' + | 'unsafe center' + >; + /** + * The alignment of children within their container. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items). + * @default 'stretch' + */ + alignItems?: Responsive< + | 'start' + | 'end' + | 'center' + | 'stretch' + | 'self-start' + | 'self-end' + | 'baseline' + | 'first baseline' + | 'last baseline' + | 'safe center' + | 'unsafe center' + >; + /** The space to display between both rows and columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). */ + gap?: Responsive; + /** The space to display between columns. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). */ + columnGap?: Responsive; + /** The space to display between rows. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). */ + rowGap?: Responsive; +} + export type ResponsiveProp = { base?: T; S?: T; @@ -26,4 +169,17 @@ export type ResponsiveProp = { [custom: string]: T | undefined; }; +export interface FlexStyleProps extends BoxAlignmentStyleProps, StyleProps { + /** + * The direction in which to layout children. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction). + * @default 'row' + */ + direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>; + /** + * Whether to wrap items onto multiple lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap). + * @default false + */ + wrap?: Responsive; +} + export type Responsive = T | ResponsiveProp; diff --git a/src/utils/styleProps.ts b/src/utils/styleProps.ts index a8c27b53..1dc6388c 100644 --- a/src/utils/styleProps.ts +++ b/src/utils/styleProps.ts @@ -1,3 +1,4 @@ +import { CSSProperties } from 'react'; import { DimensionValue } from '../types'; const UNIT_RE = /(%|px|em|rem|vw|vh|auto|cm|mm|in|pt|pc|ex|ch|rem|vmin|vmax|fr)$/; @@ -16,9 +17,48 @@ export function dimensionValue(value: DimensionValue) { if (FUNC_RE.test(value)) { return value.replace( AC_VARIABLE_RE, - 'var(--ac-global-dimension-$&, var(--spectrum-alias-$&))' + 'var(--ac-global-dimension-$&, var(--ac-alias-$&))' ); } return `var(--ac-global-dimension-${value})`; } + +export function convertStyleProps( + props: ViewStyleProps, + handlers: StyleHandlers, + direction: Direction, + matchedBreakpoints: Breakpoint[] +) { + let style: CSSProperties = {}; + for (let key in props) { + let styleProp = handlers[key]; + if (!styleProp || props[key] == null) { + continue; + } + + let [name, convert] = styleProp; + if (typeof name === 'function') { + name = name(direction); + } + + let prop = getResponsiveProp(props[key], matchedBreakpoints); + let value = convert(prop); + if (Array.isArray(name)) { + for (let k of name) { + style[k] = value; + } + } else { + style[name] = value; + } + } + + for (let prop in borderStyleProps) { + if (style[prop]) { + style[borderStyleProps[prop]] = 'solid'; + style.boxSizing = 'border-box'; + } + } + + return style; +}