From f18571ad84896454bb793c64d3766cd6259efc6b Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Wed, 4 Oct 2023 10:23:13 -0400 Subject: [PATCH 01/27] style system --- .../src/styled-system/StylingContext.ts | 34 + .../src/styling/src/styled-system/index.ts | 3 + .../src/styled-system/props-handler.ts | 1492 +++++++++++++++++ .../src/styled-system/theme-vars-utils.ts | 25 + .../src/styled-system/useStyledSystem.ts | 1410 +--------------- .../styling/src/theming/createThemeVars.ts | 86 - .../src/styling/src/theming/index.ts | 1 - 7 files changed, 1558 insertions(+), 1493 deletions(-) create mode 100644 packages/components/src/styling/src/styled-system/StylingContext.ts create mode 100644 packages/components/src/styling/src/styled-system/props-handler.ts create mode 100644 packages/components/src/styling/src/styled-system/theme-vars-utils.ts delete mode 100644 packages/components/src/styling/src/theming/createThemeVars.ts diff --git a/packages/components/src/styling/src/styled-system/StylingContext.ts b/packages/components/src/styling/src/styled-system/StylingContext.ts new file mode 100644 index 000000000..998d4856e --- /dev/null +++ b/packages/components/src/styling/src/styled-system/StylingContext.ts @@ -0,0 +1,34 @@ +import { Breakpoint } from "../BreakpointProvider"; +import { CSSProperties } from "react"; +import { isNil } from "../../../shared"; + +export class StylingContext { + private classes: string[]; + private style: Record; + matchedBreakpoints: Breakpoint[]; + + constructor(className: string, style: CSSProperties, matchedBreakpoints: Breakpoint[]) { + this.classes = !isNil(className) ? [className] : []; + this.style = style ?? {}; + this.matchedBreakpoints = matchedBreakpoints; + } + + addClass(className: string) { + if (!this.classes.includes(className)) { + this.classes.push(className); + } + } + + addStyleValue(name: string, value: any) { + if (isNil(this.style[name])) { + this.style[name] = value; + } + } + + computeStyling() { + const className = this.classes.length !== 0 ? this.classes.join(" ") : undefined; + const styleValue = Object.keys(this.style).length !== 0 ? this.style : undefined; + + return { className, style: styleValue }; + } +} diff --git a/packages/components/src/styling/src/styled-system/index.ts b/packages/components/src/styling/src/styled-system/index.ts index 23669e4b7..3920fae43 100644 --- a/packages/components/src/styling/src/styled-system/index.ts +++ b/packages/components/src/styling/src/styled-system/index.ts @@ -1 +1,4 @@ export * from "./useStyledSystem"; +export * from "./StylingContext"; +export * from "./props-handler"; +export * from "./theme-vars-utils"; diff --git a/packages/components/src/styling/src/styled-system/props-handler.ts b/packages/components/src/styling/src/styled-system/props-handler.ts new file mode 100644 index 000000000..0c705397d --- /dev/null +++ b/packages/components/src/styling/src/styled-system/props-handler.ts @@ -0,0 +1,1492 @@ +import { BorderRadiusPrefix, BoxShadowPrefix, ColorPrefix, DimensionsPrefix, FontSizePrefix, FontWeightPrefix, LineHeightPrefix, normalizeVariable } from "./theme-vars-utils"; +import { Breakpoint } from "../BreakpointProvider"; +import { Globals, Property } from "csstype"; +import { ResponsiveProp, parseResponsiveValue } from "../useResponsiveValue"; +import { LiteralUnion } from "type-fest"; +import { isNil } from "../../../shared"; +import { StylingContext } from "./StylingContext"; + +const GlobalValues = [ + "inherit", + "initial", + "revert", + "unset" +]; + +export const ColorExpressionTypes = [ + "#", + "rgb", + "rgba", + "hsl", + "hsla" +] as const; + +const DimensionsScale = [ + 1280, + 960, + 800, + 640, + 480, + 400, + 320, + 240, + 160, + 80, + 40, + 20, + 0 +] as const; + +const OrbiterColors = [ + "toad-200", + "toad-100", + "toad-75", + "toad-50", + "toad-25", + "fog-900", + "fog-800", + "fog-700", + "fog-600", + "fog-500", + "fog-400", + "fog-300", + "fog-200", + "fog-100", + "fog-75", + "fog-50", + "fog-25", + "sapphire-900", + "sapphire-800", + "sapphire-700", + "sapphire-600", + "sapphire-500", + "sapphire-400", + "sapphire-300", + "sapphire-200", + "sapphire-100", + "sapphire-75", + "sapphire-50", + "sapphire-25", + "orchid-bloom-900", + "orchid-bloom-800", + "orchid-bloom-700", + "orchid-bloom-600", + "orchid-bloom-500", + "orchid-bloom-400", + "orchid-bloom-300", + "orchid-bloom-200", + "orchid-bloom-100", + "orchid-bloom-75", + "orchid-bloom-50", + "orchid-bloom-25", + "quetzal-900", + "quetzal-800", + "quetzal-700", + "quetzal-600", + "quetzal-500", + "quetzal-400", + "quetzal-300", + "quetzal-200", + "quetzal-100", + "quetzal-75", + "quetzal-50", + "quetzal-25", + "coastal-900", + "coastal-800", + "coastal-700", + "coastal-600", + "coastal-500", + "coastal-400", + "coastal-300", + "coastal-200", + "coastal-100", + "coastal-75", + "coastal-50", + "coastal-25" +] as const; + +const BackgroundColorAliases = [ + "status-positive-surface", + "status-inactive-surface", + "status-negative-surface", + "status-caution-surface", + "status-option4-surface", + "status-option3-surface", + "status-option2-surface", + "status-option1-surface", + "status-option5-surface", + "status-option6-surface", + "status-progress-surface", + "status-neutral-surface", + "information-surface", + "success-surface", + "warning-surface", + "neutral-surface", + "decorative-option1-surface", + "decorative-option2-surface", + "decorative-option3-surface", + "decorative-option4-surface", + "decorative-option6-surface", + "decorative-option5-surface", + "decorative-option7-surface", + "decorative-option8-surface", + "decorative-option9-surface", + "primary-surface", + "danger-surface", + "upsell-surface", + "status-positive-surface-strong", + "status-inactive-surface-strong", + "status-negative-surface-strong", + "status-caution-surface-strong", + "status-option4-surface-strong", + "status-option3-surface-strong", + "status-option2-surface-strong", + "status-option1-surface-strong", + "status-option5-surface-strong", + "status-option6-surface-strong", + "status-progress-surface-strong", + "status-neutral-surface-strong", + "information-surface-weak", + "information-surface-strong", + "success-surface-weak", + "success-surface-strong", + "warning-surface-weak", + "warning-surface-strong", + "neutral-surface-weakest", + "neutral-surface-weak-hover", + "neutral-surface-hover", + "neutral-surface-strong", + "neutral-surface-weak", + "neutral-surface-active", + "neutral-surface-disabled", + "neutral-surface-weakest-hover", + "neutral-surface-weakest-active", + "decorative-option1-surface-hover", + "decorative-option1-surface-strong", + "decorative-option1-surface-weakest", + "decorative-option1-surface-weak", + "decorative-option2-surface-hover", + "decorative-option2-surface-weak", + "decorative-option3-surface-hover", + "decorative-option3-surface-strong", + "decorative-option3-surface-weakest", + "decorative-option3-surface-weak", + "decorative-option4-surface-hover", + "decorative-option4-surface-strong", + "decorative-option6-surface-strong", + "decorative-option6-surface-hover", + "decorative-option6-surface-weak", + "decorative-option5-surface-hover", + "decorative-option5-surface-strong", + "decorative-option7-surface-hover", + "decorative-option7-surface-strong", + "decorative-option8-surface-strong", + "decorative-option8-surface-hover", + "decorative-option9-surface-hover", + "decorative-option9-surface-strong", + "primary-surface-active", + "primary-surface-hover", + "primary-surface-strong-hover", + "primary-surface-strong-active", + "primary-surface-strong", + "primary-surface-weak", + "primary-surface-focus", + "primary-surface-disabled", + "danger-surface-active", + "danger-surface-weak", + "danger-surface-strong-hover", + "danger-surface-strong", + "danger-surface-hover", + "danger-surface-disabled", + "upsell-surface-active", + "upsell-surface-disabled", + "upsell-surface-weak", + "upsell-surface-hover" +] as const; + +const BorderWidthAndStyle = "1px solid"; + +const BorderColorAliases = [ + "information-border", + "success-border", + "warning-border", + "neutral-border-weakest", + "neutral-border-active", + "neutral-border-hover", + "neutral-border-weak", + "neutral-border", + "neutral-border-strong", + "neutral-border-disabled", + "decorative-option1-border", + "decorative-option2-border", + "decorative-option3-border", + "decorative-option4-border", + "decorative-option6-border", + "decorative-option5-border", + "decorative-option7-border", + "decorative-option8-border", + "decorative-option9-border", + "primary-border", + "primary-border-focus", + "primary-border-active", + "danger-border", + "danger-border-strong", + "danger-border-active", + "upsell-border-disabled", + "upsell-border", + "upsell-border-active" +] as const; + +const IconColorAliases = [ + "status-positive-icon", + "status-inactive-icon", + "status-negative-icon", + "status-caution-icon", + "status-option4-icon", + "status-option3-icon", + "status-option2-icon", + "status-option1-icon", + "status-option5-icon", + "status-option6-icon", + "status-progress-icon", + "status-neutral-icon", + "information-icon", + "information-icon-weak", + "information-icon-weakest", + "success-icon", + "success-icon-weakest", + "success-icon-weak", + "warning-icon", + "warning-icon-weak", + "warning-icon-weakest", + "neutral-icon-active", + "neutral-icon-hover", + "neutral-icon-strong", + "neutral-icon-weakest", + "neutral-icon-weak-hover", + "neutral-icon-weak", + "neutral-icon", + "neutral-icon-disabled", + "decorative-option1-icon", + "decorative-option2-icon", + "decorative-option3-icon", + "decorative-option4-icon", + "decorative-option6-icon", + "decorative-option5-icon", + "decorative-option7-icon", + "decorative-option8-icon", + "decorative-option9-icon", + "primary-icon-disabled", + "primary-icon-hover", + "primary-icon", + "primary-icon-strong-hover", + "primary-icon-strong", + "primary-icon-active", + "danger-icon-disabled", + "danger-icon-hover", + "danger-icon-strong-hover", + "danger-icon-strong", + "danger-icon-weak", + "danger-icon", + "danger-icon-active", + "upsell-icon", + "upsell-icon-active", + "upsell-icon-weak", + "upsell-icon-weakest" +] as const; + +const TextColorAliases = [ + "status-positive-text", + "status-inactive-text", + "status-negative-text", + "status-caution-text", + "status-option4-text", + "status-option3-text", + "status-option2-text", + "status-option1-text", + "status-option5-text", + "status-option6-text", + "status-progress-text", + "status-neutral-text", + "information-text", + "success-text", + "warning-text", + "neutral-text", + "decorative-option1-text", + "decorative-option2-text", + "decorative-option3-text", + "decorative-option4-text", + "decorative-option6-text", + "decorative-option5-text", + "decorative-option7-text", + "decorative-option8-text", + "decorative-option9-text", + "primary-text", + "danger-text", + "upsell-text", + "information-text-weak", + "success-text-hover", + "success-text-weak", + "warning-text-weak", + "neutral-text-weakest", + "neutral-text-strong", + "neutral-text-active", + "neutral-text-disabled", + "neutral-text-weak", + "neutral-text-hover", + "decorative-option1-text-weak", + "decorative-option2-text-weak", + "decorative-option3-text-weak", + "decorative-option4-text-weak", + "decorative-option6-text-weak", + "decorative-option5-text-weak", + "decorative-option7-text-weak", + "decorative-option8-text-weak", + "decorative-option9-text-weak", + "primary-text-hover", + "primary-text-strong-hover", + "primary-text-strong", + "primary-text-disabled", + "primary-text-active", + "danger-text-disabled", + "danger-text-strong-hover", + "danger-text-strong", + "danger-text-weak", + "danger-text-hover", + "danger-text-active", + "upsell-text-disabled", + "upsell-text-hover", + "upsell-text-active" +] as const; + +const BorderRadiusScale = [ + 0, + 1, + 2, + 3, + 4, + 9999 +] as const; + +const BoxShadowScale = [ + "none", + "sm", + "md", + "lg" +] as const; + +const BoxShadowAliases = [ + "none", + "raised", + "lifted", + "floating" +] as const; + +const FontSizeScale = [ + 480, + 360, + 320, + 280, + 240, + 200, + 180, + 160, + 140, + 120 +] as const; + +const FontWeightScale = [ // TODO: Make sure we are not setting font weight variation. This comment should not be in a PR + 690, + 680, + 590, + 580, + 505, + 410, + 400 +] as const; + +const LineHeightScale = [ + "1-50", + "1-4285", + "1-33", + "1-25", + "1-20", + "1-14", + "1-125" +] as const; + +function createValuesMapping(values: T, template: (value: T[number]) => string) { + const mapping = {} as Record; + + values.reduce((acc, x) => { + acc[x] = template(x); + + return acc; + }, mapping); + + return mapping; +} + +function composePrefixes(...rest) { + return rest.reduce((acc, prefix) => { + return !isNil(prefix) ? `${acc}${acc !== "" ? "-" : ""}${prefix}` : acc; + }, ""); +} + +function createPrefixedValueTemplate(prefix: string) { + return (value: string | number) => `var(${normalizeVariable(value, prefix)})`; +} + +export const SpacingMapping = createValuesMapping(DimensionsScale, createPrefixedValueTemplate(DimensionsPrefix)); + +export const SizingMapping = createValuesMapping(DimensionsScale, createPrefixedValueTemplate(DimensionsPrefix)); + +export const ColorMapping = createValuesMapping(OrbiterColors, createPrefixedValueTemplate(ColorPrefix)); + +export const BackgroundColorMapping = { + ...createValuesMapping(BackgroundColorAliases, createPrefixedValueTemplate(composePrefixes(ColorPrefix, "bg"))), + ...ColorMapping +}; + +export const BorderMapping = { + ...createValuesMapping(BorderColorAliases, value => `${BorderWidthAndStyle} var(${normalizeVariable(value, composePrefixes(ColorPrefix, "b"))})`), + ...createValuesMapping(OrbiterColors, value => `${BorderWidthAndStyle} var(${normalizeVariable(value, ColorPrefix)})`) +}; + +export const BorderRadiusMapping = createValuesMapping(BorderRadiusScale, createPrefixedValueTemplate(BorderRadiusPrefix)); + +export const BoxShadowMapping = { + ...createValuesMapping(BoxShadowScale, createPrefixedValueTemplate(BoxShadowPrefix)), + ...createValuesMapping(BoxShadowAliases, createPrefixedValueTemplate(BoxShadowPrefix)) +}; + +export const FontSizeMapping = createValuesMapping(FontSizeScale, createPrefixedValueTemplate(FontSizePrefix)); + +const fontVariationSettingsValueTemplate = (value: string | number) => `'wght' var(${normalizeVariable(value, FontWeightPrefix)})`; + +export const FontWeightMapping = createValuesMapping(FontWeightScale, fontVariationSettingsValueTemplate); + +export const IconColorMapping = { + ...createValuesMapping(IconColorAliases, createPrefixedValueTemplate(composePrefixes(ColorPrefix, "icon"))), + ...ColorMapping +}; + +export const LineHeightMapping = createValuesMapping(LineHeightScale, createPrefixedValueTemplate(LineHeightPrefix)); + +export const TextColorMapping = { + ...createValuesMapping(TextColorAliases, createPrefixedValueTemplate(composePrefixes(ColorPrefix, "text"))), + ...ColorMapping +}; + +// Custom CSS color type to use instead of Property.Color to offer less useless values in intellisense and +// stop showing too many values in props docs. +// eslint-disable-next-line @typescript-eslint/ban-types +export type CssColor = Globals | "currentcolor" | (string & {}); + +// Custom fill type to use instead of Property.Fill to offer less useless values in intellisense and +// stop showing too many values in props docs. +// eslint-disable-next-line @typescript-eslint/ban-types +export type Fill = Globals | "child" | "context-fill" | "context-stroke" | "none" | (string & {}); + +export type BackgroundColorValue = keyof typeof BackgroundColorMapping | CssColor; +export type BorderValue = keyof typeof BorderMapping | Property.Border; +export type BorderRadiusValue = keyof typeof BorderRadiusMapping | Property.BorderRadius; +export type BoxShadowValue = keyof typeof BoxShadowMapping | Property.BoxShadow; +export type ColorValue = keyof typeof TextColorMapping | CssColor; +export type ColumnGapValue = keyof typeof SpacingMapping | Property.ColumnGap; +export type FillValue = keyof typeof IconColorMapping | Fill; +export type FontSizeValue = keyof typeof FontSizeMapping | Property.FontSize; +export type FontWeightValue = keyof typeof FontWeightMapping | typeof GlobalValues[number]; +export type GapValue = keyof typeof SpacingMapping | Property.Gap; +export type GridAutoColumnsValue = keyof typeof SizingMapping | Property.GridAutoColumns; +export type GridAutoRowsValue = keyof typeof SizingMapping | Property.GridAutoRows; +export type GridTemplateColumnsValue = keyof typeof SizingMapping | Property.GridTemplateColumns; +export type GridTemplateRowsValue = keyof typeof SizingMapping | Property.GridTemplateRows; +export type HeightValue = keyof typeof SizingMapping | Property.Height; +export type LineHeightValue = keyof typeof LineHeightMapping | Property.LineHeight; +export type MarginValue = keyof typeof SpacingMapping | Property.Margin; +export type PaddingValue = keyof typeof SpacingMapping | Property.Padding; +export type RowGapValue = keyof typeof SpacingMapping | Property.RowGap; +export type SizingValue = LiteralUnion; +export type SpacingValue = LiteralUnion; +export type StrokeValue = keyof typeof IconColorMapping | Property.Stroke; +export type WidthValue = keyof typeof SizingMapping | Property.Width; + +export type AlignContentProp = ResponsiveProp; +export type AlignItemsProp = ResponsiveProp; +export type AlignSelfProp = ResponsiveProp; +export type AspectRatioProp = ResponsiveProp; +export type BackgroundColorProp = ResponsiveProp; +export type BackgroundImageProp = ResponsiveProp; +export type BackgroundPositionProp = ResponsiveProp; +export type BackgroundRepeatProp = ResponsiveProp; +export type BackgroundSizeProp = ResponsiveProp; +export type BorderProp = ResponsiveProp; +export type BorderBottomProp = BorderProp; +export type BorderLeftProp = BorderProp; +export type BorderRightProp = BorderProp; +export type BorderTopProp = BorderProp; +export type BorderRadiusProp = ResponsiveProp; +export type BorderBottomLeftRadiusProp = BorderRadiusProp; +export type BorderBottomRightRadiusProp = BorderRadiusProp; +export type BorderTopLeftRadiusProp = BorderRadiusProp; +export type BorderTopRightRadiusProp = BorderRadiusProp; +export type BottomProp = ResponsiveProp; +export type BoxShadowProp = ResponsiveProp; +export type ColorProp = ResponsiveProp; +export type ColumnGapProp = ResponsiveProp; +export type ContentProp = ResponsiveProp; +export type ContentVisibilityProp = ResponsiveProp; +export type CursorProp = ResponsiveProp; +export type DisplayProp = ResponsiveProp; +export type FillProp = ResponsiveProp; +export type FilterProp = ResponsiveProp; +export type FlexProp = ResponsiveProp; +export type FlexBasisProp = ResponsiveProp; +export type FlexDirectionProp = ResponsiveProp; +export type FlexFlowProp = ResponsiveProp; +export type FlexGrowProp = ResponsiveProp; +export type FlexShrinkProp = ResponsiveProp; +export type FlexWrapProp = ResponsiveProp; +export type FontSizeProp = ResponsiveProp; +export type FontStyleProp = ResponsiveProp; +export type FontWeightProp = ResponsiveProp; +export type GapProp = ResponsiveProp; +export type GridProp = ResponsiveProp; +export type GridAreaProp = ResponsiveProp; +export type GridAutoColumnsProp = ResponsiveProp; +export type GridAutoFlowProp = ResponsiveProp; +export type GridAutoRowsProp = ResponsiveProp; +export type GridColumnProp = ResponsiveProp; +export type GridColumnEndProp = ResponsiveProp; +export type GridColumnSpanProp = ResponsiveProp; +export type GridColumnStartProp = ResponsiveProp; +export type GridRowProp = ResponsiveProp; +export type GridRowEndProp = ResponsiveProp; +export type GridRowStartProp = ResponsiveProp; +export type GridRowSpanProp = ResponsiveProp; +export type GridTemplateProp = ResponsiveProp; +export type GridTemplateAreasProp = ResponsiveProp; +export type GridTemplateColumnsProp = ResponsiveProp; +export type GridTemplateRowsProp = ResponsiveProp; +export type HeightProp = ResponsiveProp; +export type JustifyContentProp = ResponsiveProp; +export type JustifyItemsProp = ResponsiveProp; +export type JustifySelfProp = ResponsiveProp; +export type LeftProp = ResponsiveProp; +export type LetterSpacingProp = ResponsiveProp; +export type LineHeightProp = ResponsiveProp; +export type MarginProp = ResponsiveProp; +export type MarginBottomProp = MarginProp; +export type MarginLeftProp = MarginProp; +export type MarginRightProp = MarginProp; +export type MarginTopProp = MarginProp; +export type MarginXProp = MarginProp; +export type MarginYProp = MarginProp; +export type MaxHeightProp = ResponsiveProp; +export type MaxWidthProp = ResponsiveProp; +export type MinHeightProp = ResponsiveProp; +export type MinWidthProp = ResponsiveProp; +export type ObjectFitProp = ResponsiveProp; +export type ObjectPositionProp = ResponsiveProp; +export type OpacityProp = ResponsiveProp; +export type OrderProp = ResponsiveProp; +export type OutlineProp = ResponsiveProp; +export type OverflowProp = ResponsiveProp; +export type OverflowXProp = ResponsiveProp; +export type OverflowYProp = ResponsiveProp; +export type PaddingProp = ResponsiveProp; +export type PaddingBottomProp = PaddingProp; +export type PaddingLeftProp = PaddingProp; +export type PaddingRightProp = PaddingProp; +export type PaddingTopProp = PaddingProp; +export type PaddingXProp = PaddingProp; +export type PaddingYProp = PaddingProp; +export type PointerEventsProp = ResponsiveProp; +export type PositionProp = ResponsiveProp; +export type ResizeProp = ResponsiveProp; +export type RightProp = ResponsiveProp; +export type RowGapProp = ResponsiveProp; +export type StrokeProp = ResponsiveProp; +export type TextAlignProp = ResponsiveProp; +export type TextDecorationProp = ResponsiveProp; +export type TextOverflowProp = ResponsiveProp; +export type TextTransformProp = ResponsiveProp; +export type TopProp = ResponsiveProp; +export type TransformProp = ResponsiveProp; +export type TransformOriginProp = ResponsiveProp; +export type TransformStyleProp = ResponsiveProp; +export type VerticalAlignProp = ResponsiveProp; +export type VisibilityProp = ResponsiveProp; +export type WhiteSpaceProp = ResponsiveProp; +export type WidthProp = ResponsiveProp; +export type WillChangeProp = ResponsiveProp; +export type WordBreakProp = ResponsiveProp; +export type ZIndexProp = ResponsiveProp; + +export interface StyledSystemProps { + /** + * @ignore + */ + alignContent?: AlignContentProp; + /** + * @ignore + */ + alignItems?: AlignItemsProp; + /** + * @ignore + */ + alignSelf?: AlignSelfProp; + /** + * @ignore + */ + aspectRatio?: AspectRatioProp; + /** + * @ignore + */ + backgroundColor?: BackgroundColorProp; + /** + * @ignore + */ + backgroundColorActive?: BackgroundColorProp; + /** + * @ignore + */ + backgroundColorFocus?: BackgroundColorProp; + /** + * @ignore + */ + backgroundColorHover?: BackgroundColorProp; + /** + * @ignore + */ + backgroundImage?: BackgroundImageProp; + /** + * @ignore + */ + backgroundPosition?: BackgroundPositionProp; + /** + * @ignore + */ + backgroundRepeat?: BackgroundRepeatProp; + /** + * @ignore + */ + backgroundSize?: BackgroundSizeProp; + /** + * @ignore + */ + border?: BorderProp; + /** + * @ignore + */ + borderBottom?: BorderBottomProp; + /** + * @ignore + */ + borderBottomActive?: BorderBottomProp; + /** + * @ignore + */ + borderBottomFocus?: BorderBottomProp; + /** + * @ignore + */ + borderBottomHover?: BorderBottomProp; + /** + * @ignore + */ + borderBottomLeftRadius?: BorderRadiusProp; + /** + * @ignore + */ + borderBottomRightRadius?: BorderRadiusProp; + /** + * @ignore + */ + borderActive?: BorderProp; + /** + * @ignore + */ + borderFocus?: BorderProp; + /** + * @ignore + */ + borderHover?: BorderProp; + /** + * @ignore + */ + borderLeft?: BorderLeftProp; + /** + * @ignore + */ + borderLeftActive?: BorderLeftProp; + /** + * @ignore + */ + borderLeftFocus?: BorderLeftProp; + /** + * @ignore + */ + borderLeftHover?: BorderLeftProp; + /** + * @ignore + */ + borderRadius?: BorderRadiusProp; + /** + * @ignore + */ + borderRight?: BorderRightProp; + /** + * @ignore + */ + borderRightActive?: BorderRightProp; + /** + * @ignore + */ + borderRightFocus?: BorderRightProp; + /** + * @ignore + */ + borderRightHover?: BorderRightProp; + /** + * @ignore + */ + borderTop?: BorderTopProp; + /** + * @ignore + */ + borderTopActive?: BorderTopProp; + /** + * @ignore + */ + borderTopFocus?: BorderTopProp; + /** + * @ignore + */ + borderTopHover?: BorderTopProp; + /** + * @ignore + */ + borderTopLeftRadius?: BorderRadiusProp; + /** + * @ignore + */ + borderTopRightRadius?: BorderRadiusProp; + /** + * @ignore + */ + bottom?: BottomProp; + /** + * @ignore + */ + boxShadow?: BoxShadowProp; + /** + * @ignore + */ + boxShadowActive?: BoxShadowProp; + /** + * @ignore + */ + boxShadowFocus?: BoxShadowProp; + /** + * @ignore + */ + boxShadowHover?: BoxShadowProp; + /** + * @ignore + */ + color?: ColorProp; + /** + * @ignore + */ + colorActive?: ColorProp; + /** + * @ignore + */ + colorFocus?: ColorProp; + /** + * @ignore + */ + colorHover?: ColorProp; + /** + * @ignore + */ + columnGap?: ColumnGapProp; + /** + * @ignore + */ + content?: ContentProp; + /** + * @ignore + */ + contentVisibility?: ContentVisibilityProp; + /** + * @ignore + */ + cursor?: CursorProp; + /** + * @ignore + */ + cursorHover?: CursorProp; + /** + * @ignore + */ + display?: DisplayProp; + /** + * @ignore + */ + fill?: FillProp; + /** + * @ignore + */ + fillFocus?: FillProp; + /** + * @ignore + */ + fillHover?: FillProp; + /** + * @ignore + */ + filter?: FilterProp; + /** + * @ignore + */ + flex?: FlexProp; + /** + * @ignore + */ + flexBasis?: FlexBasisProp; + /** + * @ignore + */ + flexDirection?: FlexDirectionProp; + /** + * @ignore + */ + flexFlow?: FlexFlowProp; + /** + * @ignore + */ + flexGrow?: FlexGrowProp; + /** + * @ignore + */ + flexShrink?: FlexShrinkProp; + /** + * @ignore + */ + flexWrap?: FlexWrapProp; + /** + * @ignore + */ + fontSize?: FontSizeProp; + /** + * @ignore + */ + fontStyle?: FontStyleProp; + /** + * @ignore + */ + fontWeight?: FontWeightProp; + /** + * @ignore + */ + gap?: GapProp; + /** + * @ignore + */ + grid?: GridProp; + /** + * @ignore + */ + gridArea?: GridAreaProp; + /** + * @ignore + */ + gridAutoColumns?: GridAutoColumnsProp; + /** + * @ignore + */ + gridAutoFlow?: GridAutoFlowProp; + /** + * @ignore + */ + gridAutoRows?: GridAutoRowsProp; + /** + * @ignore + */ + gridColumn?: GridColumnProp; + /** + * @ignore + */ + gridColumnEnd?: GridColumnEndProp; + /** + * @ignore + */ + gridColumnSpan?: GridColumnSpanProp; + /** + * @ignore + */ + gridColumnStart?: GridColumnStartProp; + /** + * @ignore + */ + gridRow?: GridRowProp; + /** + * @ignore + */ + gridRowEnd?: GridRowEndProp; + /** + * @ignore + */ + gridRowSpan?: GridRowSpanProp; + /** + * @ignore + */ + gridRowStart?: GridRowStartProp; + /** + * @ignore + */ + gridTemplate?: GridTemplateProp; + /** + * @ignore + */ + gridTemplateAreas?: GridTemplateAreasProp; + /** + * @ignore + */ + gridTemplateColumns?: GridTemplateColumnsProp; + /** + * @ignore + */ + gridTemplateRows?: GridTemplateRowsProp; + /** + * @ignore + */ + height?: HeightProp; + /** + * @ignore + */ + justifyContent?: JustifyContentProp; + /** + * @ignore + */ + justifyItems?: JustifyItemsProp; + /** + * @ignore + */ + justifySelf?: JustifySelfProp; + /** + * @ignore + */ + left?: LeftProp; + /** + * @ignore + */ + letterSpacing?: LetterSpacingProp; + /** + * @ignore + */ + lineHeight?: LineHeightProp; + /** + * @ignore + */ + margin?: MarginProp; + /** + * @ignore + */ + marginBottom?: MarginBottomProp; + /** + * @ignore + */ + marginLeft?: MarginLeftProp; + /** + * @ignore + */ + marginRight?: MarginRightProp; + /** + * @ignore + */ + marginTop?: MarginTopProp; + /** + * @ignore + */ + marginX?: MarginXProp; + /** + * @ignore + */ + marginY?: MarginYProp; + /** + * @ignore + */ + maxHeight?: MaxHeightProp; + /** + * @ignore + */ + maxWidth?: MaxWidthProp; + /** + * @ignore + */ + minHeight?: MinHeightProp; + /** + * @ignore + */ + minWidth?: MinWidthProp; + /** + * @ignore + */ + objectFit?: ObjectFitProp; + /** + * @ignore + */ + objectPosition?: ObjectPositionProp; + /** + * @ignore + */ + opacity?: OpacityProp; + /** + * @ignore + */ + opacityActive?: OpacityProp; + /** + * @ignore + */ + opacityFocus?: OpacityProp; + /** + * @ignore + */ + opacityHover?: OpacityProp; + /** + * @ignore + */ + order?: OrderProp; + /** + * @ignore + */ + outline?: OutlineProp; + /** + * @ignore + */ + outlineFocus?: OutlineProp; + /** + * @ignore + */ + overflow?: OverflowProp; + /** + * @ignore + */ + overflowX?: OverflowXProp; + /** + * @ignore + */ + overflowY?: OverflowYProp; + /** + * @ignore + */ + padding?: PaddingProp; + /** + * @ignore + */ + paddingBottom?: PaddingBottomProp; + /** + * @ignore + */ + paddingLeft?: PaddingLeftProp; + /** + * @ignore + */ + paddingRight?: PaddingRightProp; + /** + * @ignore + */ + paddingTop?: PaddingTopProp; + /** + * @ignore + */ + paddingX?: PaddingXProp; + /** + * @ignore + */ + paddingY?: PaddingYProp; + /** + * @ignore + */ + pointerEvents?: PointerEventsProp; + /** + * @ignore + */ + position?: PositionProp; + /** + * @ignore + */ + resize?: ResizeProp; + /** + * @ignore + */ + right?: RightProp; + /** + * @ignore + */ + rowGap?: RowGapProp; + /** + * @ignore + */ + stroke?: StrokeProp; + /** + * @ignore + */ + textAlign?: TextAlignProp; + /** + * @ignore + */ + textDecoration?: TextDecorationProp; + /** + * @ignore + */ + textOverflow?: TextOverflowProp; + /** + * @ignore + */ + textTransform?: TextTransformProp; + /** + * @ignore + */ + top?: TopProp; + /** + * @ignore + */ + transform?: TransformProp; + /** + * @ignore + */ + transformOrigin?: TransformOriginProp; + /** + * @ignore + */ + transformStyle?: TransformStyleProp; + /** + * @ignore + */ + verticalAlign?: VerticalAlignProp; + /** + * @ignore + */ + visibility?: VisibilityProp; + /** + * @ignore + */ + whiteSpace?: WhiteSpaceProp; + /** + * @ignore + */ + width?: WidthProp; + /** + * @ignore + */ + willChange?: WillChangeProp; + /** + * @ignore + */ + wordBreak?: WordBreakProp; + /** + * @ignore + */ + zIndex?: ZIndexProp; +} + +type PropHandler = (name: string, value: TValue, context: StylingContext) => void; + +function getSystemValue>(value: keyof T, systemValues: T) { + return systemValues[value as keyof typeof systemValues]; +} + +export function getSizingValue(value: string | keyof typeof SizingMapping) { + const systemValue = getSystemValue(value as keyof typeof SizingMapping, SizingMapping); + + return systemValue ?? value; +} + +function parseResponsiveSystemValue(value: TValue, systemValues: Record, matchedBreakpoints: Breakpoint[]) { + if (isNil(value)) { + return value; + } + + // Quick lookup since most values will be a non responsive system value and will not requires to parse for a responsive value. + const systemValue = getSystemValue(value, systemValues); + + if (!isNil(systemValue)) { + return systemValue; + } + + const underlyingValue = parseResponsiveValue(value, matchedBreakpoints); + + if (!isNil(underlyingValue)) { + const underlyingSystemValue = getSystemValue(underlyingValue, systemValues); + + if (!isNil(underlyingSystemValue)) { + return underlyingSystemValue; + } + } + + return underlyingValue; +} + +function createHandler(systemValues?: Record): PropHandler { + const systemValueHandler: PropHandler = (name, value, context) => { + const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addStyleValue(name, parsedValue); + } + }; + + const passThroughHandler: PropHandler = (name, value, context: StylingContext) => { + const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addStyleValue(name, parsedValue); + } + }; + + return !isNil(systemValues) ? systemValueHandler : passThroughHandler; +} + +function createPseudoHandler(pseudoClassName, pseudoVariable, systemValues?: Record): PropHandler { + const systemValueHandler: PropHandler = (name, value, context) => { + const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addClass(pseudoClassName); + context.addStyleValue(pseudoVariable, parsedValue); + } + }; + + const passThroughHandler: PropHandler = (name, value, context) => { + const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addClass(pseudoClassName); + context.addStyleValue(pseudoVariable, parsedValue); + } + }; + + return !isNil(systemValues) ? systemValueHandler : passThroughHandler; +} + +// Custom handler for borders to allow the following syntax: +// - border="warning-10" -> style="1px solid var(--o-ui-warning-10)" +// - border="hsla(223, 12%, 87%, 1)" -> style="1px solid hsla(223, 12%, 87%, 1)" +function createBorderHandler(systemValues: Record): PropHandler { + return (name, value, context) => { + const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + if (ColorExpressionTypes.some(x => parsedValue.startsWith(x))) { + context.addStyleValue(name, `${BorderWidthAndStyle} ${parsedValue}`); + } else { + context.addStyleValue(name, parsedValue); + } + } + }; +} + +function createBorderPseudoHandler(pseudoClassName: string, pseudoVariable: string, systemValues: Record): PropHandler { + return (name, value, context) => { + const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addClass(pseudoClassName); + + if (ColorExpressionTypes.some(x => parsedValue.startsWith(x))) { + context.addStyleValue(pseudoVariable, `${BorderWidthAndStyle} ${parsedValue}`); + } else { + context.addStyleValue(pseudoVariable, parsedValue); + } + } + }; +} + +// Custom handler for font-weight because of "fontVariationSettings". +const fontWeightHandler: PropHandler = (name, value, context) => { + const parsedValue = parseResponsiveSystemValue(value, FontWeightMapping, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addStyleValue("fontVariationSettings", parsedValue); + + if (!GlobalValues.includes(parsedValue as string)) { + context.addStyleValue("fontWeight", "400"); + } + } +}; + +const gridColumnSpanHandler: PropHandler = (name, value, context) => { + const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addStyleValue("gridColumn", `span ${parsedValue} / span ${parsedValue}`); + } +}; + +const gridRowSpanHandler: PropHandler = (name, value, context) => { + const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); + + if (!isNil(parsedValue)) { + context.addStyleValue("gridRow", `span ${parsedValue} / span ${parsedValue}`); + } +}; + +function createAxisHandler(firstPropName: string, secondPropName: string, systemValues: Record): PropHandler { + const firstHandler = createHandler(systemValues); + const secondHandler = createHandler(systemValues); + + return (name, value, context) => { + firstHandler(firstPropName, value, context); + secondHandler(secondPropName, value, context); + }; +} + +export const PropsHandlers: Record> = { + alignContent: createHandler(), + alignItems: createHandler(), + alignSelf: createHandler(), + aspectRatio: createHandler(), + backgroundColor: createHandler(BackgroundColorMapping), + backgroundColorActive: createPseudoHandler("o-ui-bg-active", "--o-ui-bg-active", BackgroundColorMapping), + backgroundColorFocus: createPseudoHandler("o-ui-bg-focus", "--o-ui-bg-focus", BackgroundColorMapping), + backgroundColorHover: createPseudoHandler("o-ui-bg-hover", "--o-ui-bg-hover", BackgroundColorMapping), + backgroundImage: createHandler(), + backgroundPosition: createHandler(), + backgroundRepeat: createHandler(), + backgroundSize: createHandler(), + border: createBorderHandler(BorderMapping), + borderBottom: createBorderHandler(BorderMapping), + borderBottomActive: createBorderPseudoHandler("o-ui-bb-active", "--o-ui-bb-active", BorderMapping), + borderBottomFocus: createBorderPseudoHandler("o-ui-bb-focus", "--o-ui-bb-focus", BorderMapping), + borderBottomHover: createBorderPseudoHandler("o-ui-bb-hover", "--o-ui-bb-hover", BorderMapping), + borderBottomLeftRadius: createHandler(BorderRadiusMapping), + borderBottomRightRadius: createHandler(BorderRadiusMapping), + borderActive: createBorderPseudoHandler("o-ui-b-active", "--o-ui-b-active", BorderMapping), + borderFocus: createBorderPseudoHandler("o-ui-b-focus", "--o-ui-b-focus", BorderMapping), + borderHover: createBorderPseudoHandler("o-ui-b-hover", "--o-ui-b-hover", BorderMapping), + borderLeft: createBorderHandler(BorderMapping), + borderLeftActive: createBorderPseudoHandler("o-ui-bl-active", "--o-ui-bl-active", BorderMapping), + borderLeftFocus: createBorderPseudoHandler("o-ui-bl-focus", "--o-ui-bl-focus", BorderMapping), + borderLeftHover: createBorderPseudoHandler("o-ui-bl-hover", "--o-ui-bl-hover", BorderMapping), + borderRadius: createHandler(BorderRadiusMapping), + borderRight: createBorderHandler(BorderMapping), + borderRightActive: createBorderPseudoHandler("o-ui-br-active", "--o-ui-br-active", BorderMapping), + borderRightFocus: createBorderPseudoHandler("o-ui-br-focus", "--o-ui-br-focus", BorderMapping), + borderRightHover: createBorderPseudoHandler("o-ui-br-hover", "--o-ui-br-hover", BorderMapping), + borderTop: createBorderHandler(BorderMapping), + borderTopActive: createBorderPseudoHandler("o-ui-bt-active", "--o-ui-bt-active", BorderMapping), + borderTopFocus: createBorderPseudoHandler("o-ui-bt-focus", "--o-ui-bt-focus", BorderMapping), + borderTopHover: createBorderPseudoHandler("o-ui-bt-hover", "--o-ui-bt-hover", BorderMapping), + borderTopLeftRadius: createHandler(BorderRadiusMapping), + borderTopRightRadius: createHandler(BorderRadiusMapping), + bottom: createHandler(), + boxShadow: createHandler(BoxShadowMapping), + boxShadowActive: createPseudoHandler("o-ui-bs-active", "--o-ui-bs-active", BoxShadowMapping), + boxShadowFocus: createPseudoHandler("o-ui-bs-focus", "--o-ui-bs-focus", BoxShadowMapping), + boxShadowHover: createPseudoHandler("o-ui-bs-hover", "--o-ui-bs-hover", BoxShadowMapping), + color: createHandler(TextColorMapping), + colorActive: createPseudoHandler("o-ui-c-active", "--o-ui-c-active", TextColorMapping), + colorFocus: createPseudoHandler("o-ui-c-focus", "--o-ui-c-focus", TextColorMapping), + colorHover: createPseudoHandler("o-ui-c-hover", "--o-ui-c-hover", TextColorMapping), + columnGap: createHandler(SpacingMapping), + content: createHandler(), + contentVisibility: createHandler(), + cursor: createHandler(), + cursorHover: createPseudoHandler("o-ui-cs-hover", "--o-ui-cs-hover"), + display: createHandler(), + fill: createHandler(IconColorMapping), + fillFocus: createPseudoHandler("o-ui-f-focus", "--o-ui-f-focus", IconColorMapping), + fillHover: createPseudoHandler("o-ui-f-hover", "--o-ui-f-hover", IconColorMapping), + filter: createHandler(), + flex: createHandler(), + flexBasis: createHandler(), + flexDirection: createHandler(), + flexFlow: createHandler(), + flexGrow: createHandler(), + flexShrink: createHandler(), + flexWrap: createHandler(), + fontSize: createHandler(FontSizeMapping), + fontStyle: createHandler(), + fontWeight: fontWeightHandler, + gap: createHandler(SpacingMapping), + grid: createHandler(), + gridArea: createHandler(), + gridAutoColumns: createHandler(SizingMapping), + gridAutoFlow: createHandler(), + gridAutoRows: createHandler(SizingMapping), + gridColumn: createHandler(), + gridColumnEnd: createHandler(), + gridColumnSpan: gridColumnSpanHandler, + gridColumnStart: createHandler(), + gridRow: createHandler(), + gridRowEnd: createHandler(), + gridRowSpan: gridRowSpanHandler, + gridRowStart: createHandler(), + gridTemplate: createHandler(), + gridTemplateAreas: createHandler(), + gridTemplateColumns: createHandler(SizingMapping), + gridTemplateRows: createHandler(SizingMapping), + height: createHandler(SizingMapping), + justifyContent: createHandler(), + justifyItems: createHandler(), + justifySelf: createHandler(), + left: createHandler(), + letterSpacing: createHandler(), + lineHeight: createHandler(LineHeightMapping), + margin: createHandler(SpacingMapping), + marginBottom: createHandler(SpacingMapping), + marginLeft: createHandler(SpacingMapping), + marginRight: createHandler(SpacingMapping), + marginTop: createHandler(SpacingMapping), + marginX: createAxisHandler("marginLeft", "marginRight", SpacingMapping), + marginY: createAxisHandler("marginBottom", "marginTop", SpacingMapping), + maxHeight: createHandler(SizingMapping), + maxWidth: createHandler(SizingMapping), + minHeight: createHandler(SizingMapping), + minWidth: createHandler(SizingMapping), + objectFit: createHandler(), + objectPosition: createHandler(), + opacity: createHandler(), + opacityActive: createPseudoHandler("o-ui-o-active", "--o-ui-o-active"), + opacityFocus: createPseudoHandler("o-ui-o-focus", "--o-ui-o-focus"), + opacityHover: createPseudoHandler("o-ui-o-hover", "--o-ui-o-hover"), + order: createHandler(), + outline: createHandler(), + outlineFocus: createPseudoHandler("o-ui-ol-focus", "--o-ui-ol-focus"), + overflow: createHandler(), + overflowX: createHandler(), + overflowY: createHandler(), + padding: createHandler(SpacingMapping), + paddingBottom: createHandler(SpacingMapping), + paddingLeft: createHandler(SpacingMapping), + paddingRight: createHandler(SpacingMapping), + paddingTop: createHandler(SpacingMapping), + paddingX: createAxisHandler("paddingLeft", "paddingRight", SpacingMapping), + paddingY: createAxisHandler("paddingBottom", "paddingTop", SpacingMapping), + pointerEvents: createHandler(), + position: createHandler(), + resize: createHandler(), + right: createHandler(), + rowGap: createHandler(SpacingMapping), + stroke: createHandler(IconColorMapping), + textAlign: createHandler(), + textDecoration: createHandler(), + textOverflow: createHandler(), + textTransform: createHandler(), + top: createHandler(), + transform: createHandler(), + transformOrigin: createHandler(), + transformStyle: createHandler(), + verticalAlign: createHandler(), + visibility: createHandler(), + whiteSpace: createHandler(), + width: createHandler(SizingMapping), + willChange: createHandler(), + wordBreak: createHandler(), + zIndex: createHandler() +}; diff --git a/packages/components/src/styling/src/styled-system/theme-vars-utils.ts b/packages/components/src/styling/src/styled-system/theme-vars-utils.ts new file mode 100644 index 000000000..3fdaa0c36 --- /dev/null +++ b/packages/components/src/styling/src/styled-system/theme-vars-utils.ts @@ -0,0 +1,25 @@ +import { isNil } from "../../../shared"; + +export function normalizeVariable(name: string | number, prefix?: string) { + return isNil(prefix) ? `--o-ui-${name}` : `--o-ui-${prefix}-${name}`; +} + +// core +export const BorderRadiusPrefix = "border-radius"; +export const ColorPrefix = null; +export const DimensionsPrefix = "space"; +export const FontFamilyPrefix = "font-family"; +export const FontSizePrefix = "font-size"; +export const FontWeightPrefix = "font-weight"; +export const LineHeightPrefix = "line-height"; +export const BoxShadowPrefix = "shadow"; + +// semantic +export const BorderRadiusSemanticPrefix = "shape"; +// color no prefix +// dimension same as non-semantic +export const FontFamilySemanticSuffix = "font-family"; +export const FontSizeSemanticSuffix = "font-size"; +export const FontWeightSemanticSuffix = "font-weight"; +export const LineHeightSemanticSuffix = "line-height"; +// box shadow same as non-semantic diff --git a/packages/components/src/styling/src/styled-system/useStyledSystem.ts b/packages/components/src/styling/src/styled-system/useStyledSystem.ts index c32e7f13f..4799c1e41 100644 --- a/packages/components/src/styling/src/styled-system/useStyledSystem.ts +++ b/packages/components/src/styling/src/styled-system/useStyledSystem.ts @@ -1,11 +1,8 @@ -import { BorderRadiusPrefix, BoxShadowPrefix, ColorPrefix, FontSizePrefix, FontWeightPrefix, LineHeightPrefix, SizingPrefix, SpacePrefix, normalizeVariable } from "../theming"; -import { Breakpoint, useMatchedBreakpoints } from "../BreakpointProvider"; -import { CSSProperties, useMemo } from "react"; -import { Globals, Property } from "csstype"; -import { ResponsiveProp, parseResponsiveValue } from "../useResponsiveValue"; - -import { LiteralUnion } from "type-fest"; +import { useMatchedBreakpoints } from "../BreakpointProvider"; +import { useMemo } from "react"; import { isNil } from "../../../shared"; +import { StylingContext } from "./StylingContext"; +import { PropsHandlers, StyledSystemProps } from "./props-handler"; /* SYNTAX: @@ -35,1405 +32,6 @@ SYNTAX: */ -const GlobalValues = [ - "inherit", - "initial", - "revert", - "unset" -]; - -export const ColorExpressionTypes = [ - "#", - "rgb", - "rgba", - "hsl", - "hsla" -] as const; - -const SizingScale = [ - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 13, - 14, - 15, - 16, - 17, - 18 -] as const; - -const SpacingScale = [ - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 13 -] as const; - -const OrbiterColors = [ - "white", - "black", - "gray", - // Purple - "purple-1", - "purple-2", - "purple-3", - "purple-4", - "purple-5", - "purple-6", - "purple-7", - "purple-8", - "purple-9", - "purple-10", - // Orange - "orange-1", - "orange-2", - "orange-3", - "orange-4", - "orange-5", - "orange-6", - "orange-7", - "orange-8", - "orange-9", - "orange-10", - // Green - "green-1", - "green-2", - "green-3", - "green-4", - "green-5", - "green-6", - "green-7", - "green-8", - "green-9", - "green-10", - // Alert - "alert-1", - "alert-2", - "alert-3", - "alert-4", - "alert-5", - "alert-6", - "alert-7", - "alert-8", - "alert-9", - "alert-10", - // Warning - "warning-1", - "warning-2", - "warning-3", - "warning-4", - "warning-5", - "warning-6", - "warning-7", - "warning-8", - "warning-9", - "warning-10", - // Success - "success-1", - "success-2", - "success-3", - "success-4", - "success-5", - "success-6", - "success-7", - "success-8", - "success-9", - "success-10", - // Neutral - "neutral-1", - "neutral-2", - "neutral-3", - "neutral-4", - "neutral-5", - "neutral-6", - "neutral-7", - "neutral-8", - "neutral-9", - "neutral-10", - // Accent - "accent-1", - "accent-2", - "accent-3", - "accent-4", - "accent-5", - "accent-6", - "accent-7", - "accent-8", - "accent-9", - "accent-10" -] as const; - -const BackgroundColorAliases = [ - "alias-body", - "alias-surface", - "alias-soft-break", - "alias-hard-break", - "alias-mid-break", - "alias-basic", - "alias-basic-hover", - "alias-basic-active", - "alias-basic-transparent", - "alias-basic-transparent-hover", - "alias-basic-transparent-active", - "alias-static-white", - "alias-grey-hover", - "alias-grey-active", - "alias-accent", - "alias-accent-hover", - "alias-accent-active", - "alias-accent-faint", - "alias-accent-light", - "alias-accent-transparent", - "alias-accent-transparent-hover", - "alias-accent-transparent-active", - "alias-alert", - "alias-alert-hover", - "alias-alert-active", - "alias-alert-faint", - "alias-alert-light", - "alias-alert-transparent", - "alias-alert-transparent-hover", - "alias-alert-transparent-active", - "alias-warning", - "alias-warning-hover", - "alias-warning-active", - "alias-warning-faint", - "alias-warning-light", - "alias-success", - "alias-success-hover", - "alias-success-active", - "alias-success-faint", - "alias-success-light", - "alias-transparent", - "alias-underlay", - "alias-input-selection" -] as const; - -const BorderWidthAndStyle = "1px solid"; - -const BorderColorAliases = [ - "alias-low-break", - "alias-mid-break", - "alias-high-break", - "alias-accent-active", - "alias-alert", - "alias-alert-hover", - "alias-alert-active", - "alias-warning", - "alias-warning-hover", - "alias-warning-active", - "alias-success", - "alias-success-hover", - "alias-success-active" -] as const; - -const IconColorAliases = [ - "alias-primary", - "alias-primary-hover", - "alias-secondary", - "alias-tertiary", - "alias-faint", - "alias-accent", - "alias-accent-hover", - "alias-accent-active", - "alias-alert", - "alias-alert-hover", - "alias-warning", - "alias-success", - "alias-static-white", - "alias-input-placeholder" -] as const; - -const TextColorAliases = [ - "alias-primary", - "alias-primary-hover", - "alias-secondary", - "alias-tertiary", - "alias-faint", - "alias-accent", - "alias-accent-hover", - "alias-accent-active", - "alias-alert", - "alias-alert-hover", - "alias-warning", - "alias-success", - "alias-static-white", - "alias-input-placeholder" -] as const; - -const BorderRadiusScale = [ - 1, - 2, - 3, - 4, - "pill", - "circular" -] as const; - -const BoxShadowScale = [ - 1, - 2 -] as const; - -const BoxShadowAliases = [ - "alias-floating", - "alias-lifted" -] as const; - -const FontSizeScale = [ - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11 -] as const; - -const FontWeightScale = [ - 1, - 2, - 3 -] as const; - -const LineHeightScale = [ - 1, - 2, - 3, - 4, - 5, - 6 -] as const; - -function createValuesMapping(values: T, template: (value: T[number]) => string) { - const mapping = {} as Record; - - values.reduce((acc, x) => { - acc[x] = template(x); - - return acc; - }, mapping); - - return mapping; -} - -function composePrefixes(...rest) { - return rest.reduce((acc, prefix) => { - return !isNil(prefix) ? `${acc}${acc !== "" ? "-" : ""}${prefix}` : acc; - }, ""); -} - -function createPrefixedValueTemplate(prefix: string) { - return (value: string | number) => `var(${normalizeVariable(value, prefix)})`; -} - -export const SpacingMapping = createValuesMapping(SpacingScale, createPrefixedValueTemplate(SpacePrefix)); - -export const SizingMapping = createValuesMapping(SizingScale, createPrefixedValueTemplate(SizingPrefix)); - -export const ColorMapping = createValuesMapping(OrbiterColors, createPrefixedValueTemplate(ColorPrefix)); - -export const BackgroundColorMapping = { - ...createValuesMapping(BackgroundColorAliases, createPrefixedValueTemplate(composePrefixes(ColorPrefix, "bg"))), - ...ColorMapping -}; - -export const BorderMapping = { - ...createValuesMapping(BorderColorAliases, value => `${BorderWidthAndStyle} var(${normalizeVariable(value, composePrefixes(ColorPrefix, "b"))})`), - ...createValuesMapping(OrbiterColors, value => `${BorderWidthAndStyle} var(${normalizeVariable(value, ColorPrefix)})`) -}; - -export const BorderRadiusMapping = createValuesMapping(BorderRadiusScale, createPrefixedValueTemplate(BorderRadiusPrefix)); - -export const BoxShadowMapping = { - ...createValuesMapping(BoxShadowScale, createPrefixedValueTemplate(BoxShadowPrefix)), - ...createValuesMapping(BoxShadowAliases, createPrefixedValueTemplate(BoxShadowPrefix)) -}; - -export const FontSizeMapping = createValuesMapping(FontSizeScale, createPrefixedValueTemplate(FontSizePrefix)); - -const fontVariationSettingsValueTemplate = (value: string | number) => `'wght' var(${normalizeVariable(value, FontWeightPrefix)})`; - -export const FontWeightMapping = createValuesMapping(FontWeightScale, fontVariationSettingsValueTemplate); - -export const IconColorMapping = { - ...createValuesMapping(IconColorAliases, createPrefixedValueTemplate(composePrefixes(ColorPrefix, "icon"))), - ...ColorMapping -}; - -export const LineHeightMapping = createValuesMapping(LineHeightScale, createPrefixedValueTemplate(LineHeightPrefix)); - -export const TextColorMapping = { - ...createValuesMapping(TextColorAliases, createPrefixedValueTemplate(composePrefixes(ColorPrefix, "text"))), - ...ColorMapping -}; - -// Custom CSS color type to use instead of Property.Color to offer less useless values in intellisense and -// stop showing too many values in props docs. -// eslint-disable-next-line @typescript-eslint/ban-types -export type CssColor = Globals | "currentcolor" | (string & {}); - -// Custom fill type to use instead of Property.Fill to offer less useless values in intellisense and -// stop showing too many values in props docs. -// eslint-disable-next-line @typescript-eslint/ban-types -export type Fill = Globals | "child" | "context-fill" | "context-stroke" | "none" | (string & {}); - -export type BackgroundColorValue = keyof typeof BackgroundColorMapping | CssColor; -export type BorderValue = keyof typeof BorderMapping | Property.Border; -export type BorderRadiusValue = keyof typeof BorderRadiusMapping | Property.BorderRadius; -export type BoxShadowValue = keyof typeof BoxShadowMapping | Property.BoxShadow; -export type ColorValue = keyof typeof TextColorMapping | CssColor; -export type ColumnGapValue = keyof typeof SpacingMapping | Property.ColumnGap; -export type FillValue = keyof typeof IconColorMapping | Fill; -export type FontSizeValue = keyof typeof FontSizeMapping | Property.FontSize; -export type FontWeightValue = keyof typeof FontWeightMapping | typeof GlobalValues[number]; -export type GapValue = keyof typeof SpacingMapping | Property.Gap; -export type GridAutoColumnsValue = keyof typeof SizingMapping | Property.GridAutoColumns; -export type GridAutoRowsValue = keyof typeof SizingMapping | Property.GridAutoRows; -export type GridTemplateColumnsValue = keyof typeof SizingMapping | Property.GridTemplateColumns; -export type GridTemplateRowsValue = keyof typeof SizingMapping | Property.GridTemplateRows; -export type HeightValue = keyof typeof SizingMapping | Property.Height; -export type LineHeightValue = keyof typeof LineHeightMapping | Property.LineHeight; -export type MarginValue = keyof typeof SpacingMapping | Property.Margin; -export type PaddingValue = keyof typeof SpacingMapping | Property.Padding; -export type RowGapValue = keyof typeof SpacingMapping | Property.RowGap; -export type SizingValue = LiteralUnion; -export type SpacingValue = LiteralUnion; -export type StrokeValue = keyof typeof IconColorMapping | Property.Stroke; -export type WidthValue = keyof typeof SizingMapping | Property.Width; - -export type AlignContentProp = ResponsiveProp; -export type AlignItemsProp = ResponsiveProp; -export type AlignSelfProp = ResponsiveProp; -export type AspectRatioProp = ResponsiveProp; -export type BackgroundColorProp = ResponsiveProp; -export type BackgroundImageProp = ResponsiveProp; -export type BackgroundPositionProp = ResponsiveProp; -export type BackgroundRepeatProp = ResponsiveProp; -export type BackgroundSizeProp = ResponsiveProp; -export type BorderProp = ResponsiveProp; -export type BorderBottomProp = BorderProp; -export type BorderLeftProp = BorderProp; -export type BorderRightProp = BorderProp; -export type BorderTopProp = BorderProp; -export type BorderRadiusProp = ResponsiveProp; -export type BorderBottomLeftRadiusProp = BorderRadiusProp; -export type BorderBottomRightRadiusProp = BorderRadiusProp; -export type BorderTopLeftRadiusProp = BorderRadiusProp; -export type BorderTopRightRadiusProp = BorderRadiusProp; -export type BottomProp = ResponsiveProp; -export type BoxShadowProp = ResponsiveProp; -export type ColorProp = ResponsiveProp; -export type ColumnGapProp = ResponsiveProp; -export type ContentProp = ResponsiveProp; -export type ContentVisibilityProp = ResponsiveProp; -export type CursorProp = ResponsiveProp; -export type DisplayProp = ResponsiveProp; -export type FillProp = ResponsiveProp; -export type FilterProp = ResponsiveProp; -export type FlexProp = ResponsiveProp; -export type FlexBasisProp = ResponsiveProp; -export type FlexDirectionProp = ResponsiveProp; -export type FlexFlowProp = ResponsiveProp; -export type FlexGrowProp = ResponsiveProp; -export type FlexShrinkProp = ResponsiveProp; -export type FlexWrapProp = ResponsiveProp; -export type FontSizeProp = ResponsiveProp; -export type FontStyleProp = ResponsiveProp; -export type FontWeightProp = ResponsiveProp; -export type GapProp = ResponsiveProp; -export type GridProp = ResponsiveProp; -export type GridAreaProp = ResponsiveProp; -export type GridAutoColumnsProp = ResponsiveProp; -export type GridAutoFlowProp = ResponsiveProp; -export type GridAutoRowsProp = ResponsiveProp; -export type GridColumnProp = ResponsiveProp; -export type GridColumnEndProp = ResponsiveProp; -export type GridColumnSpanProp = ResponsiveProp; -export type GridColumnStartProp = ResponsiveProp; -export type GridRowProp = ResponsiveProp; -export type GridRowEndProp = ResponsiveProp; -export type GridRowStartProp = ResponsiveProp; -export type GridRowSpanProp = ResponsiveProp; -export type GridTemplateProp = ResponsiveProp; -export type GridTemplateAreasProp = ResponsiveProp; -export type GridTemplateColumnsProp = ResponsiveProp; -export type GridTemplateRowsProp = ResponsiveProp; -export type HeightProp = ResponsiveProp; -export type JustifyContentProp = ResponsiveProp; -export type JustifyItemsProp = ResponsiveProp; -export type JustifySelfProp = ResponsiveProp; -export type LeftProp = ResponsiveProp; -export type LetterSpacingProp = ResponsiveProp; -export type LineHeightProp = ResponsiveProp; -export type MarginProp = ResponsiveProp; -export type MarginBottomProp = MarginProp; -export type MarginLeftProp = MarginProp; -export type MarginRightProp = MarginProp; -export type MarginTopProp = MarginProp; -export type MarginXProp = MarginProp; -export type MarginYProp = MarginProp; -export type MaxHeightProp = ResponsiveProp; -export type MaxWidthProp = ResponsiveProp; -export type MinHeightProp = ResponsiveProp; -export type MinWidthProp = ResponsiveProp; -export type ObjectFitProp = ResponsiveProp; -export type ObjectPositionProp = ResponsiveProp; -export type OpacityProp = ResponsiveProp; -export type OrderProp = ResponsiveProp; -export type OutlineProp = ResponsiveProp; -export type OverflowProp = ResponsiveProp; -export type OverflowXProp = ResponsiveProp; -export type OverflowYProp = ResponsiveProp; -export type PaddingProp = ResponsiveProp; -export type PaddingBottomProp = PaddingProp; -export type PaddingLeftProp = PaddingProp; -export type PaddingRightProp = PaddingProp; -export type PaddingTopProp = PaddingProp; -export type PaddingXProp = PaddingProp; -export type PaddingYProp = PaddingProp; -export type PointerEventsProp = ResponsiveProp; -export type PositionProp = ResponsiveProp; -export type ResizeProp = ResponsiveProp; -export type RightProp = ResponsiveProp; -export type RowGapProp = ResponsiveProp; -export type StrokeProp = ResponsiveProp; -export type TextAlignProp = ResponsiveProp; -export type TextDecorationProp = ResponsiveProp; -export type TextOverflowProp = ResponsiveProp; -export type TextTransformProp = ResponsiveProp; -export type TopProp = ResponsiveProp; -export type TransformProp = ResponsiveProp; -export type TransformOriginProp = ResponsiveProp; -export type TransformStyleProp = ResponsiveProp; -export type VerticalAlignProp = ResponsiveProp; -export type VisibilityProp = ResponsiveProp; -export type WhiteSpaceProp = ResponsiveProp; -export type WidthProp = ResponsiveProp; -export type WillChangeProp = ResponsiveProp; -export type WordBreakProp = ResponsiveProp; -export type ZIndexProp = ResponsiveProp; - -export interface StyledSystemProps { - /** - * @ignore - */ - alignContent?: AlignContentProp; - /** - * @ignore - */ - alignItems?: AlignItemsProp; - /** - * @ignore - */ - alignSelf?: AlignSelfProp; - /** - * @ignore - */ - aspectRatio?: AspectRatioProp; - /** - * @ignore - */ - backgroundColor?: BackgroundColorProp; - /** - * @ignore - */ - backgroundColorActive?: BackgroundColorProp; - /** - * @ignore - */ - backgroundColorFocus?: BackgroundColorProp; - /** - * @ignore - */ - backgroundColorHover?: BackgroundColorProp; - /** - * @ignore - */ - backgroundImage?: BackgroundImageProp; - /** - * @ignore - */ - backgroundPosition?: BackgroundPositionProp; - /** - * @ignore - */ - backgroundRepeat?: BackgroundRepeatProp; - /** - * @ignore - */ - backgroundSize?: BackgroundSizeProp; - /** - * @ignore - */ - border?: BorderProp; - /** - * @ignore - */ - borderBottom?: BorderBottomProp; - /** - * @ignore - */ - borderBottomActive?: BorderBottomProp; - /** - * @ignore - */ - borderBottomFocus?: BorderBottomProp; - /** - * @ignore - */ - borderBottomHover?: BorderBottomProp; - /** - * @ignore - */ - borderBottomLeftRadius?: BorderRadiusProp; - /** - * @ignore - */ - borderBottomRightRadius?: BorderRadiusProp; - /** - * @ignore - */ - borderActive?: BorderProp; - /** - * @ignore - */ - borderFocus?: BorderProp; - /** - * @ignore - */ - borderHover?: BorderProp; - /** - * @ignore - */ - borderLeft?: BorderLeftProp; - /** - * @ignore - */ - borderLeftActive?: BorderLeftProp; - /** - * @ignore - */ - borderLeftFocus?: BorderLeftProp; - /** - * @ignore - */ - borderLeftHover?: BorderLeftProp; - /** - * @ignore - */ - borderRadius?: BorderRadiusProp; - /** - * @ignore - */ - borderRight?: BorderRightProp; - /** - * @ignore - */ - borderRightActive?: BorderRightProp; - /** - * @ignore - */ - borderRightFocus?: BorderRightProp; - /** - * @ignore - */ - borderRightHover?: BorderRightProp; - /** - * @ignore - */ - borderTop?: BorderTopProp; - /** - * @ignore - */ - borderTopActive?: BorderTopProp; - /** - * @ignore - */ - borderTopFocus?: BorderTopProp; - /** - * @ignore - */ - borderTopHover?: BorderTopProp; - /** - * @ignore - */ - borderTopLeftRadius?: BorderRadiusProp; - /** - * @ignore - */ - borderTopRightRadius?: BorderRadiusProp; - /** - * @ignore - */ - bottom?: BottomProp; - /** - * @ignore - */ - boxShadow?: BoxShadowProp; - /** - * @ignore - */ - boxShadowActive?: BoxShadowProp; - /** - * @ignore - */ - boxShadowFocus?: BoxShadowProp; - /** - * @ignore - */ - boxShadowHover?: BoxShadowProp; - /** - * @ignore - */ - color?: ColorProp; - /** - * @ignore - */ - colorActive?: ColorProp; - /** - * @ignore - */ - colorFocus?: ColorProp; - /** - * @ignore - */ - colorHover?: ColorProp; - /** - * @ignore - */ - columnGap?: ColumnGapProp; - /** - * @ignore - */ - content?: ContentProp; - /** - * @ignore - */ - contentVisibility?: ContentVisibilityProp; - /** - * @ignore - */ - cursor?: CursorProp; - /** - * @ignore - */ - cursorHover?: CursorProp; - /** - * @ignore - */ - display?: DisplayProp; - /** - * @ignore - */ - fill?: FillProp; - /** - * @ignore - */ - fillFocus?: FillProp; - /** - * @ignore - */ - fillHover?: FillProp; - /** - * @ignore - */ - filter?: FilterProp; - /** - * @ignore - */ - flex?: FlexProp; - /** - * @ignore - */ - flexBasis?: FlexBasisProp; - /** - * @ignore - */ - flexDirection?: FlexDirectionProp; - /** - * @ignore - */ - flexFlow?: FlexFlowProp; - /** - * @ignore - */ - flexGrow?: FlexGrowProp; - /** - * @ignore - */ - flexShrink?: FlexShrinkProp; - /** - * @ignore - */ - flexWrap?: FlexWrapProp; - /** - * @ignore - */ - fontSize?: FontSizeProp; - /** - * @ignore - */ - fontStyle?: FontStyleProp; - /** - * @ignore - */ - fontWeight?: FontWeightProp; - /** - * @ignore - */ - gap?: GapProp; - /** - * @ignore - */ - grid?: GridProp; - /** - * @ignore - */ - gridArea?: GridAreaProp; - /** - * @ignore - */ - gridAutoColumns?: GridAutoColumnsProp; - /** - * @ignore - */ - gridAutoFlow?: GridAutoFlowProp; - /** - * @ignore - */ - gridAutoRows?: GridAutoRowsProp; - /** - * @ignore - */ - gridColumn?: GridColumnProp; - /** - * @ignore - */ - gridColumnEnd?: GridColumnEndProp; - /** - * @ignore - */ - gridColumnSpan?: GridColumnSpanProp; - /** - * @ignore - */ - gridColumnStart?: GridColumnStartProp; - /** - * @ignore - */ - gridRow?: GridRowProp; - /** - * @ignore - */ - gridRowEnd?: GridRowEndProp; - /** - * @ignore - */ - gridRowSpan?: GridRowSpanProp; - /** - * @ignore - */ - gridRowStart?: GridRowStartProp; - /** - * @ignore - */ - gridTemplate?: GridTemplateProp; - /** - * @ignore - */ - gridTemplateAreas?: GridTemplateAreasProp; - /** - * @ignore - */ - gridTemplateColumns?: GridTemplateColumnsProp; - /** - * @ignore - */ - gridTemplateRows?: GridTemplateRowsProp; - /** - * @ignore - */ - height?: HeightProp; - /** - * @ignore - */ - justifyContent?: JustifyContentProp; - /** - * @ignore - */ - justifyItems?: JustifyItemsProp; - /** - * @ignore - */ - justifySelf?: JustifySelfProp; - /** - * @ignore - */ - left?: LeftProp; - /** - * @ignore - */ - letterSpacing?: LetterSpacingProp; - /** - * @ignore - */ - lineHeight?: LineHeightProp; - /** - * @ignore - */ - margin?: MarginProp; - /** - * @ignore - */ - marginBottom?: MarginBottomProp; - /** - * @ignore - */ - marginLeft?: MarginLeftProp; - /** - * @ignore - */ - marginRight?: MarginRightProp; - /** - * @ignore - */ - marginTop?: MarginTopProp; - /** - * @ignore - */ - marginX?: MarginXProp; - /** - * @ignore - */ - marginY?: MarginYProp; - /** - * @ignore - */ - maxHeight?: MaxHeightProp; - /** - * @ignore - */ - maxWidth?: MaxWidthProp; - /** - * @ignore - */ - minHeight?: MinHeightProp; - /** - * @ignore - */ - minWidth?: MinWidthProp; - /** - * @ignore - */ - objectFit?: ObjectFitProp; - /** - * @ignore - */ - objectPosition?: ObjectPositionProp; - /** - * @ignore - */ - opacity?: OpacityProp; - /** - * @ignore - */ - opacityActive?: OpacityProp; - /** - * @ignore - */ - opacityFocus?: OpacityProp; - /** - * @ignore - */ - opacityHover?: OpacityProp; - /** - * @ignore - */ - order?: OrderProp; - /** - * @ignore - */ - outline?: OutlineProp; - /** - * @ignore - */ - outlineFocus?: OutlineProp; - /** - * @ignore - */ - overflow?: OverflowProp; - /** - * @ignore - */ - overflowX?: OverflowXProp; - /** - * @ignore - */ - overflowY?: OverflowYProp; - /** - * @ignore - */ - padding?: PaddingProp; - /** - * @ignore - */ - paddingBottom?: PaddingBottomProp; - /** - * @ignore - */ - paddingLeft?: PaddingLeftProp; - /** - * @ignore - */ - paddingRight?: PaddingRightProp; - /** - * @ignore - */ - paddingTop?: PaddingTopProp; - /** - * @ignore - */ - paddingX?: PaddingXProp; - /** - * @ignore - */ - paddingY?: PaddingYProp; - /** - * @ignore - */ - pointerEvents?: PointerEventsProp; - /** - * @ignore - */ - position?: PositionProp; - /** - * @ignore - */ - resize?: ResizeProp; - /** - * @ignore - */ - right?: RightProp; - /** - * @ignore - */ - rowGap?: RowGapProp; - /** - * @ignore - */ - stroke?: StrokeProp; - /** - * @ignore - */ - textAlign?: TextAlignProp; - /** - * @ignore - */ - textDecoration?: TextDecorationProp; - /** - * @ignore - */ - textOverflow?: TextOverflowProp; - /** - * @ignore - */ - textTransform?: TextTransformProp; - /** - * @ignore - */ - top?: TopProp; - /** - * @ignore - */ - transform?: TransformProp; - /** - * @ignore - */ - transformOrigin?: TransformOriginProp; - /** - * @ignore - */ - transformStyle?: TransformStyleProp; - /** - * @ignore - */ - verticalAlign?: VerticalAlignProp; - /** - * @ignore - */ - visibility?: VisibilityProp; - /** - * @ignore - */ - whiteSpace?: WhiteSpaceProp; - /** - * @ignore - */ - width?: WidthProp; - /** - * @ignore - */ - willChange?: WillChangeProp; - /** - * @ignore - */ - wordBreak?: WordBreakProp; - /** - * @ignore - */ - zIndex?: ZIndexProp; -} - -class StylingContext { - private classes: string[]; - private style: Record; - matchedBreakpoints: Breakpoint[]; - - constructor(className: string, style: CSSProperties, matchedBreakpoints: Breakpoint[]) { - this.classes = !isNil(className) ? [className] : []; - this.style = style ?? {}; - this.matchedBreakpoints = matchedBreakpoints; - } - - addClass(className: string) { - if (!this.classes.includes(className)) { - this.classes.push(className); - } - } - - addStyleValue(name: string, value: any) { - if (isNil(this.style[name])) { - this.style[name] = value; - } - } - - computeStyling() { - const className = this.classes.length !== 0 ? this.classes.join(" ") : undefined; - const styleValue = Object.keys(this.style).length !== 0 ? this.style : undefined; - - return { className, style: styleValue }; - } -} - -type PropHandler = (name: string, value: TValue, context: StylingContext) => void; - -function getSystemValue>(value: keyof T, systemValues: T) { - return systemValues[value as keyof typeof systemValues]; -} - -export function getSizingValue(value: string | keyof typeof SizingMapping) { - const systemValue = getSystemValue(value as keyof typeof SizingMapping, SizingMapping); - - return systemValue ?? value; -} - -function parseResponsiveSystemValue(value: TValue, systemValues: Record, matchedBreakpoints: Breakpoint[]) { - if (isNil(value)) { - return value; - } - - // Quick lookup since most values will be a non responsive system value and will not requires to parse for a responsive value. - const systemValue = getSystemValue(value, systemValues); - - if (!isNil(systemValue)) { - return systemValue; - } - - const underlyingValue = parseResponsiveValue(value, matchedBreakpoints); - - if (!isNil(underlyingValue)) { - const underlyingSystemValue = getSystemValue(underlyingValue, systemValues); - - if (!isNil(underlyingSystemValue)) { - return underlyingSystemValue; - } - } - - return underlyingValue; -} - -function createHandler(systemValues?: Record): PropHandler { - const systemValueHandler: PropHandler = (name, value, context) => { - const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addStyleValue(name, parsedValue); - } - }; - - const passThroughHandler: PropHandler = (name, value, context: StylingContext) => { - const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addStyleValue(name, parsedValue); - } - }; - - return !isNil(systemValues) ? systemValueHandler : passThroughHandler; -} - -function createPseudoHandler(pseudoClassName, pseudoVariable, systemValues?: Record): PropHandler { - const systemValueHandler: PropHandler = (name, value, context) => { - const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addClass(pseudoClassName); - context.addStyleValue(pseudoVariable, parsedValue); - } - }; - - const passThroughHandler: PropHandler = (name, value, context) => { - const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addClass(pseudoClassName); - context.addStyleValue(pseudoVariable, parsedValue); - } - }; - - return !isNil(systemValues) ? systemValueHandler : passThroughHandler; -} - -// Custom handler for borders to allow the following syntax: -// - border="warning-10" -> style="1px solid var(--o-ui-warning-10)" -// - border="hsla(223, 12%, 87%, 1)" -> style="1px solid hsla(223, 12%, 87%, 1)" -function createBorderHandler(systemValues: Record): PropHandler { - return (name, value, context) => { - const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - if (ColorExpressionTypes.some(x => parsedValue.startsWith(x))) { - context.addStyleValue(name, `${BorderWidthAndStyle} ${parsedValue}`); - } else { - context.addStyleValue(name, parsedValue); - } - } - }; -} - -function createBorderPseudoHandler(pseudoClassName: string, pseudoVariable: string, systemValues: Record): PropHandler { - return (name, value, context) => { - const parsedValue = parseResponsiveSystemValue(value, systemValues, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addClass(pseudoClassName); - - if (ColorExpressionTypes.some(x => parsedValue.startsWith(x))) { - context.addStyleValue(pseudoVariable, `${BorderWidthAndStyle} ${parsedValue}`); - } else { - context.addStyleValue(pseudoVariable, parsedValue); - } - } - }; -} - -// Custom handler for font-weight because of "fontVariationSettings". -const fontWeightHandler: PropHandler = (name, value, context) => { - const parsedValue = parseResponsiveSystemValue(value, FontWeightMapping, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addStyleValue("fontVariationSettings", parsedValue); - - if (!GlobalValues.includes(parsedValue as string)) { - context.addStyleValue("fontWeight", "400"); - } - } -}; - -const gridColumnSpanHandler: PropHandler = (name, value, context) => { - const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addStyleValue("gridColumn", `span ${parsedValue} / span ${parsedValue}`); - } -}; - -const gridRowSpanHandler: PropHandler = (name, value, context) => { - const parsedValue = parseResponsiveValue(value, context.matchedBreakpoints); - - if (!isNil(parsedValue)) { - context.addStyleValue("gridRow", `span ${parsedValue} / span ${parsedValue}`); - } -}; - -function createAxisHandler(firstPropName: string, secondPropName: string, systemValues: Record): PropHandler { - const firstHandler = createHandler(systemValues); - const secondHandler = createHandler(systemValues); - - return (name, value, context) => { - firstHandler(firstPropName, value, context); - secondHandler(secondPropName, value, context); - }; -} - -const PropsHandlers: Record> = { - alignContent: createHandler(), - alignItems: createHandler(), - alignSelf: createHandler(), - aspectRatio: createHandler(), - backgroundColor: createHandler(BackgroundColorMapping), - backgroundColorActive: createPseudoHandler("o-ui-bg-active", "--o-ui-bg-active", BackgroundColorMapping), - backgroundColorFocus: createPseudoHandler("o-ui-bg-focus", "--o-ui-bg-focus", BackgroundColorMapping), - backgroundColorHover: createPseudoHandler("o-ui-bg-hover", "--o-ui-bg-hover", BackgroundColorMapping), - backgroundImage: createHandler(), - backgroundPosition: createHandler(), - backgroundRepeat: createHandler(), - backgroundSize: createHandler(), - border: createBorderHandler(BorderMapping), - borderBottom: createBorderHandler(BorderMapping), - borderBottomActive: createBorderPseudoHandler("o-ui-bb-active", "--o-ui-bb-active", BorderMapping), - borderBottomFocus: createBorderPseudoHandler("o-ui-bb-focus", "--o-ui-bb-focus", BorderMapping), - borderBottomHover: createBorderPseudoHandler("o-ui-bb-hover", "--o-ui-bb-hover", BorderMapping), - borderBottomLeftRadius: createHandler(BorderRadiusMapping), - borderBottomRightRadius: createHandler(BorderRadiusMapping), - borderActive: createBorderPseudoHandler("o-ui-b-active", "--o-ui-b-active", BorderMapping), - borderFocus: createBorderPseudoHandler("o-ui-b-focus", "--o-ui-b-focus", BorderMapping), - borderHover: createBorderPseudoHandler("o-ui-b-hover", "--o-ui-b-hover", BorderMapping), - borderLeft: createBorderHandler(BorderMapping), - borderLeftActive: createBorderPseudoHandler("o-ui-bl-active", "--o-ui-bl-active", BorderMapping), - borderLeftFocus: createBorderPseudoHandler("o-ui-bl-focus", "--o-ui-bl-focus", BorderMapping), - borderLeftHover: createBorderPseudoHandler("o-ui-bl-hover", "--o-ui-bl-hover", BorderMapping), - borderRadius: createHandler(BorderRadiusMapping), - borderRight: createBorderHandler(BorderMapping), - borderRightActive: createBorderPseudoHandler("o-ui-br-active", "--o-ui-br-active", BorderMapping), - borderRightFocus: createBorderPseudoHandler("o-ui-br-focus", "--o-ui-br-focus", BorderMapping), - borderRightHover: createBorderPseudoHandler("o-ui-br-hover", "--o-ui-br-hover", BorderMapping), - borderTop: createBorderHandler(BorderMapping), - borderTopActive: createBorderPseudoHandler("o-ui-bt-active", "--o-ui-bt-active", BorderMapping), - borderTopFocus: createBorderPseudoHandler("o-ui-bt-focus", "--o-ui-bt-focus", BorderMapping), - borderTopHover: createBorderPseudoHandler("o-ui-bt-hover", "--o-ui-bt-hover", BorderMapping), - borderTopLeftRadius: createHandler(BorderRadiusMapping), - borderTopRightRadius: createHandler(BorderRadiusMapping), - bottom: createHandler(), - boxShadow: createHandler(BoxShadowMapping), - boxShadowActive: createPseudoHandler("o-ui-bs-active", "--o-ui-bs-active", BoxShadowMapping), - boxShadowFocus: createPseudoHandler("o-ui-bs-focus", "--o-ui-bs-focus", BoxShadowMapping), - boxShadowHover: createPseudoHandler("o-ui-bs-hover", "--o-ui-bs-hover", BoxShadowMapping), - color: createHandler(TextColorMapping), - colorActive: createPseudoHandler("o-ui-c-active", "--o-ui-c-active", TextColorMapping), - colorFocus: createPseudoHandler("o-ui-c-focus", "--o-ui-c-focus", TextColorMapping), - colorHover: createPseudoHandler("o-ui-c-hover", "--o-ui-c-hover", TextColorMapping), - columnGap: createHandler(SpacingMapping), - content: createHandler(), - contentVisibility: createHandler(), - cursor: createHandler(), - cursorHover: createPseudoHandler("o-ui-cs-hover", "--o-ui-cs-hover"), - display: createHandler(), - fill: createHandler(IconColorMapping), - fillFocus: createPseudoHandler("o-ui-f-focus", "--o-ui-f-focus", IconColorMapping), - fillHover: createPseudoHandler("o-ui-f-hover", "--o-ui-f-hover", IconColorMapping), - filter: createHandler(), - flex: createHandler(), - flexBasis: createHandler(), - flexDirection: createHandler(), - flexFlow: createHandler(), - flexGrow: createHandler(), - flexShrink: createHandler(), - flexWrap: createHandler(), - fontSize: createHandler(FontSizeMapping), - fontStyle: createHandler(), - fontWeight: fontWeightHandler, - gap: createHandler(SpacingMapping), - grid: createHandler(), - gridArea: createHandler(), - gridAutoColumns: createHandler(SizingMapping), - gridAutoFlow: createHandler(), - gridAutoRows: createHandler(SizingMapping), - gridColumn: createHandler(), - gridColumnEnd: createHandler(), - gridColumnSpan: gridColumnSpanHandler, - gridColumnStart: createHandler(), - gridRow: createHandler(), - gridRowEnd: createHandler(), - gridRowSpan: gridRowSpanHandler, - gridRowStart: createHandler(), - gridTemplate: createHandler(), - gridTemplateAreas: createHandler(), - gridTemplateColumns: createHandler(SizingMapping), - gridTemplateRows: createHandler(SizingMapping), - height: createHandler(SizingMapping), - justifyContent: createHandler(), - justifyItems: createHandler(), - justifySelf: createHandler(), - left: createHandler(), - letterSpacing: createHandler(), - lineHeight: createHandler(LineHeightMapping), - margin: createHandler(SpacingMapping), - marginBottom: createHandler(SpacingMapping), - marginLeft: createHandler(SpacingMapping), - marginRight: createHandler(SpacingMapping), - marginTop: createHandler(SpacingMapping), - marginX: createAxisHandler("marginLeft", "marginRight", SpacingMapping), - marginY: createAxisHandler("marginBottom", "marginTop", SpacingMapping), - maxHeight: createHandler(SizingMapping), - maxWidth: createHandler(SizingMapping), - minHeight: createHandler(SizingMapping), - minWidth: createHandler(SizingMapping), - objectFit: createHandler(), - objectPosition: createHandler(), - opacity: createHandler(), - opacityActive: createPseudoHandler("o-ui-o-active", "--o-ui-o-active"), - opacityFocus: createPseudoHandler("o-ui-o-focus", "--o-ui-o-focus"), - opacityHover: createPseudoHandler("o-ui-o-hover", "--o-ui-o-hover"), - order: createHandler(), - outline: createHandler(), - outlineFocus: createPseudoHandler("o-ui-ol-focus", "--o-ui-ol-focus"), - overflow: createHandler(), - overflowX: createHandler(), - overflowY: createHandler(), - padding: createHandler(SpacingMapping), - paddingBottom: createHandler(SpacingMapping), - paddingLeft: createHandler(SpacingMapping), - paddingRight: createHandler(SpacingMapping), - paddingTop: createHandler(SpacingMapping), - paddingX: createAxisHandler("paddingLeft", "paddingRight", SpacingMapping), - paddingY: createAxisHandler("paddingBottom", "paddingTop", SpacingMapping), - pointerEvents: createHandler(), - position: createHandler(), - resize: createHandler(), - right: createHandler(), - rowGap: createHandler(SpacingMapping), - stroke: createHandler(IconColorMapping), - textAlign: createHandler(), - textDecoration: createHandler(), - textOverflow: createHandler(), - textTransform: createHandler(), - top: createHandler(), - transform: createHandler(), - transformOrigin: createHandler(), - transformStyle: createHandler(), - verticalAlign: createHandler(), - visibility: createHandler(), - whiteSpace: createHandler(), - width: createHandler(SizingMapping), - willChange: createHandler(), - wordBreak: createHandler(), - zIndex: createHandler() -}; - export function useStyledSystem>(props: TProps) { const { alignContent, diff --git a/packages/components/src/styling/src/theming/createThemeVars.ts b/packages/components/src/styling/src/theming/createThemeVars.ts deleted file mode 100644 index e44017bd0..000000000 --- a/packages/components/src/styling/src/theming/createThemeVars.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { ColorScheme } from "../useColorScheme"; -import { Entry, JsonObject, JsonValue } from "type-fest"; -import { isArray, isNil, isNumber, isString } from "../../../shared"; - -type VarsBucket = string[]; - -type StringArray = readonly string[]; - -type NumberArray = readonly number[]; - -type Array = StringArray | NumberArray; - -export function normalizeVariable(name: string | number, prefix?: string) { - return isNil(prefix) ? `--o-ui-${name}` : `--o-ui-${prefix}-${name}`; -} - -export function getThemeClassName(themeName: string) { - return `o-ui-${themeName}`; -} - -export function getColorSchemeClassName(themeName: string, colorScheme: ColorScheme) { - return `o-ui-${themeName}-${colorScheme}`; -} - -function augmentPrefix(current: string, newPart: string) { - return isNil(current) ? newPart : `${current}-${newPart}`; -} - -function interpolateValue(value: string) { - return value[0] === "$" ? `var(--o-ui-${value.substr(1)})` : value; -} - -function appendString(name: string, value: string, prefix: string, bucket: VarsBucket) { - bucket.push(`${normalizeVariable(`${name}`, prefix)}: ${interpolateValue(value.replace(/\s+/gm, " ").trim())};`); -} - -function appendNumber(name: string, value: number, prefix: string, bucket: VarsBucket) { - bucket.push(`${normalizeVariable(`${name}`, prefix)}: ${value};`); -} - -function appendStringArray(values: StringArray, prefix: string, bucket: VarsBucket) { - values.forEach((x, index) => { - appendString(`${index + 1}`, x, prefix, bucket); - }); -} - -function appendNumberArray(values: NumberArray, prefix: string, bucket: VarsBucket) { - values.forEach((x, index) => { - appendNumber(`${index + 1}`, x, prefix, bucket); - }); -} - -function appendArray(values: Array, prefix: string, bucket: VarsBucket) { - if (isString(values[0])) { - appendStringArray(values as StringArray, prefix, bucket); - } else { - appendNumberArray(values as NumberArray, prefix, bucket); - } -} - -function appendJsonValue(name: string, value: JsonValue, prefix: string, bucket: VarsBucket) { - if (isString(value)) { - appendString(name, value, prefix, bucket); - } else if (isNumber(value)) { - appendNumber(name, value, prefix, bucket); - } else if (isArray(value)) { - appendArray(value as Array, augmentPrefix(prefix, name), bucket); - } else { - appendJsonObject(value as JsonObject, prefix, bucket); - } -} - -function appendJsonObject(values: JsonObject, prefix: string, bucket: VarsBucket) { - Object.entries(values).forEach((x: Entry) => { - appendJsonValue(x[0], x[1], prefix, bucket); - }); -} - -export const SpacePrefix = "sp"; -export const SizingPrefix = "sz"; -export const FontSizePrefix = "fs"; -export const FontWeightPrefix = "fw"; -export const LineHeightPrefix = "lh"; -export const BorderRadiusPrefix = "br"; -export const BoxShadowPrefix = "bs"; -export const ColorPrefix = null; diff --git a/packages/components/src/styling/src/theming/index.ts b/packages/components/src/styling/src/theming/index.ts index 7b26185fa..d63fb5014 100644 --- a/packages/components/src/styling/src/theming/index.ts +++ b/packages/components/src/styling/src/theming/index.ts @@ -1,3 +1,2 @@ -export * from "./createThemeVars"; export * from "./ThemeProvider"; export * from "./useThemeComputedStyle"; From 64c3a4afa0a72e2b3c883e6ced3915d3866fbfb6 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Fri, 6 Oct 2023 09:20:58 -0400 Subject: [PATCH 02/27] fix token values --- .../ExperimentalMessage.tsx | 2 +- .../components/github-link/GithubLink.tsx | 2 +- .storybook/decorators/withCenteredCanvas.jsx | 2 +- docs/features/ResponsiveStyles.stories.mdx | 4 +- .../style-props/StyleProps.stories.mdx | 24 +- docs/features/tokens/ColorPaletteTable.jsx | 2 +- docs/features/tokens/TokenTable.jsx | 30 +- docs/getting-started/Installation.stories.mdx | 2 +- docs/materials/motion/MotionPreview.tsx | 2 +- .../docs/AccordionContext.sample.jsx | 2 +- .../tests/chromatic/Accordion.chroma.jsx | 6 +- .../alert/tests/chromatic/Alert.chroma.jsx | 6 +- .../tests/chromatic/Autocomplete.stories.tsx | 6 +- .../components/src/avatar/src/AvatarGroup.tsx | 2 +- .../avatar/tests/chromatic/Avatar.stories.tsx | 2 +- .../tests/chromatic/AvatarGroup.stories.tsx | 8 +- .../src/badge/docs/Badge.stories.mdx | 12 +- packages/components/src/badge/docs/Circle.jsx | 2 +- packages/components/src/badge/docs/Square.jsx | 2 +- .../tests/chromatic/BadgeCount.stories.tsx | 10 +- .../tests/chromatic/BadgeDot.stories.tsx | 4 +- .../tests/chromatic/BadgeIcon.stories.tsx | 4 +- .../src/badge/tests/chromatic/BadgeUtils.tsx | 4 +- .../components/src/box/docs/Usage.sample.jsx | 2 +- .../src/box/tests/chromatic/Box.stories.tsx | 2 +- .../src/button/docs/Button.stories.mdx | 2 +- .../components/src/button/src/ButtonGroup.tsx | 8 +- .../button/tests/chromatic/Button.chroma.jsx | 4 +- .../tests/chromatic/ButtonAsLink.chroma.jsx | 2 +- .../tests/chromatic/ButtonGroup.stories.tsx | 2 +- .../tests/chromatic/IconButton.chroma.jsx | 2 +- .../chromatic/IconButtonAsLink.chroma.jsx | 2 +- .../tests/chromatic/ToggleButton.chroma.jsx | 2 +- .../chromatic/ToggleIconButton.chroma.jsx | 2 +- .../chromatic/createIconButtonTestSuite.jsx | 2 +- .../components/src/card/docs/Card.stories.mdx | 6 +- .../src/card/tests/chromatic/Card.chroma.jsx | 2 +- .../card/tests/chromatic/createTestSuite.jsx | 22 +- .../src/checkbox/docs/CustomGroup.sample.jsx | 2 +- .../tests/chromatic/Checkbox.chroma.jsx | 2 +- .../tests/chromatic/CheckboxGroup.stories.tsx | 22 +- .../CheckboxGroupVertical.stories.tsx | 2 +- .../chromatic/createCheckboxTestSuite.jsx | 6 +- .../src/counter/docs/Counter.stories.mdx | 4 +- .../tests/chromatic/Counter.stories.tsx | 6 +- .../src/date-input/src/ButtonPresets.tsx | 2 +- .../chromatic/createDateInputTestSuite.jsx | 2 +- .../createDateRangeInputTestSuite.jsx | 2 +- .../dialog/tests/chromatic/Dialog.stories.tsx | 6 +- .../src/divider/docs/Divider.stories.mdx | 2 +- .../tests/chromatic/Divider.stories.tsx | 4 +- .../chromatic/DividerVertical.stories.tsx | 14 +- .../components/src/dot/docs/Dot.stories.mdx | 8 +- .../src/dot/tests/chromatic/Dot.stories.tsx | 24 +- .../src/dot/tests/jest/Dot.ssr.test.tsx | 2 +- .../src/dot/tests/jest/Dot.test.tsx | 6 +- .../src/field/docs/Field.stories.mdx | 2 +- .../field/tests/chromatic/Field.stories.tsx | 4 +- .../tests/chromatic/FieldMessage.stories.tsx | 2 +- .../tests/chromatic/GroupField.stories.tsx | 8 +- .../field/tests/chromatic/Label.stories.tsx | 2 +- .../components/src/form/docs/Form.stories.mdx | 2 +- .../form/tests/chromatic/Fieldset.stories.tsx | 2 +- .../src/form/tests/chromatic/Form.stories.tsx | 8 +- .../chromatic/FormFlexInline.stories.tsx | 2 +- .../src/html/docs/address.stories.mdx | 2 +- .../src/html/docs/anchor.stories.mdx | 2 +- .../src/html/docs/article.stories.mdx | 2 +- .../src/html/docs/aside.stories.mdx | 2 +- .../src/html/docs/button.stories.mdx | 2 +- .../components/src/html/docs/div.stories.mdx | 2 +- .../src/html/docs/footer.stories.mdx | 2 +- .../src/html/docs/header.stories.mdx | 2 +- .../components/src/html/docs/img.stories.mdx | 2 +- .../src/html/docs/input.stories.mdx | 2 +- .../components/src/html/docs/list.stories.mdx | 4 +- .../components/src/html/docs/main.stories.mdx | 2 +- .../components/src/html/docs/nav.stories.mdx | 2 +- .../src/html/docs/section.stories.mdx | 2 +- .../components/src/html/docs/span.stories.mdx | 2 +- .../src/html/docs/table.stories.mdx | 4 +- .../src/html/tests/chromatic/html.stories.tsx | 2 +- .../src/icons/docs/Icon.stories.mdx | 2 +- .../components/src/icons/src/IconList.tsx | 2 +- .../tests/chromatic/IconList.stories.tsx | 2 +- .../chromatic/IllustratedMessage.stories.tsx | 6 +- .../docs/Illustration.stories.mdx | 8 +- .../tests/chromatic/Illustration.stories.tsx | 20 +- .../src/image/docs/Image.stories.mdx | 4 +- .../image/tests/chromatic/Image.stories.tsx | 2 +- .../tests/chromatic/InputGroup.stories.tsx | 2 +- .../components/src/input/src/useGroupInput.ts | 8 +- .../src/layout/docs/Flex.stories.mdx | 142 +- .../src/layout/docs/Grid.stories.mdx | 146 +- packages/components/src/layout/src/Inline.tsx | 2 +- packages/components/src/layout/src/Stack.tsx | 2 +- .../layout/tests/chromatic/Flex.stories.tsx | 60 +- .../tests/chromatic/FlexColumn.stories.tsx | 128 +- .../tests/chromatic/FlexRow.stories.tsx | 134 +- .../layout/tests/chromatic/Grid.stories.tsx | 575 ++-- .../layout/tests/chromatic/Inline.stories.tsx | 100 +- .../layout/tests/chromatic/Stack.stories.tsx | 92 +- .../link/tests/chromatic/IconLink.chroma.jsx | 2 +- .../src/link/tests/chromatic/Link.chroma.jsx | 8 +- .../link/tests/chromatic/TextLink.chroma.jsx | 2 +- .../chromatic/createIconLinkTestSuite.jsx | 2 +- .../chromatic/createTextLinkTestSuite.jsx | 2 +- .../src/listbox/docs/Listbox.stories.mdx | 2 +- .../tests/chromatic/Listbox.stories.tsx | 12 +- .../tests/chromatic/Lozenge.stories.tsx | 2 +- .../src/menu/tests/chromatic/Menu.stories.tsx | 16 +- .../tests/chromatic/MenuTrigger.stories.tsx | 6 +- .../tests/chromatic/Message.stories.tsx | 4 +- .../src/modal/docs/Modal.stories.mdx | 2 +- .../modal/tests/chromatic/Modal.stories.tsx | 4 +- .../tests/chromatic/NumberInput.stories.tsx | 2 +- .../tests/chromatic/Overlay.stories.tsx | 8 +- .../tests/chromatic/Underlay.stories.tsx | 2 +- .../tests/chromatic/Popover.stories.tsx | 2 +- .../src/radio/docs/CustomGroup.sample.jsx | 2 +- .../radio/tests/chromatic/Radio.chroma.jsx | 2 +- .../tests/chromatic/RadioGroup.stories.tsx | 22 +- .../select/tests/chromatic/Select.chroma.jsx | 2 +- .../src/spinner/docs/Spinner.stories.mdx | 4 +- .../tests/chromatic/Spinner.stories.tsx | 6 +- .../src/styled-system/props-handler.ts | 101 +- .../src/styled-system/theme-vars-utils.ts | 9 +- .../src/styled-system/useStyledSystem.ts | 8 +- .../src/styling/src/theming/hopper-theme.css | 2 +- .../tests/chromatic/ThemeProvider.stories.tsx | 26 +- .../tests/chromatic/sharegate.stories.tsx | 16 +- .../chromatic/useStyledSystem.stories.tsx | 12 +- .../tests/jest/useStyledSystem.test.tsx | 890 ++--- .../tests/typescript/useStyledSystem.test.tsx | 2873 +++++++++-------- .../switch/tests/chromatic/Switch.chroma.jsx | 2 +- .../src/tabs/tests/chromatic/Tabs.stories.tsx | 4 +- .../tests/chromatic/TabsVertical.stories.tsx | 2 +- .../components/src/tag/docs/Tag.stories.mdx | 2 +- .../src/tag/tests/chromatic/Tag.chroma.jsx | 2 +- .../tag/tests/chromatic/TagList.stories.tsx | 14 +- .../tests/chromatic/createTagTestSuite.jsx | 16 +- .../tests/chromatic/TextArea.stories.tsx | 2 +- .../tests/chromatic/PasswordInput.stories.tsx | 2 +- .../tests/chromatic/SearchInput.stories.tsx | 2 +- .../tests/chromatic/TextInput.stories.tsx | 2 +- .../text-input/tests/jest/TextInput.test.tsx | 2 +- .../components/src/tile/docs/Tile.stories.mdx | 22 +- .../src/tile/tests/chromatic/Tile.chroma.jsx | 8 +- .../tests/chromatic/TileGroup.stories.tsx | 2 +- .../chromatic/createTileLinkTestSuite.jsx | 2 +- .../tests/chromatic/createTileTestSuite.jsx | 6 +- .../toolbar/docs/CustomComponent.sample.jsx | 2 +- .../components/src/toolbar/src/Toolbar.tsx | 2 +- .../tests/chromatic/Toolbar.stories.tsx | 14 +- .../chromatic/ToolbarVertical.stories.tsx | 10 +- .../src/tooltip/docs/Tooltip.stories.mdx | 2 +- .../tests/chromatic/Tooltip.stories.tsx | 4 +- .../tests/chromatic/Heading.stories.tsx | 2 +- .../tests/chromatic/Paragraph.stories.tsx | 2 +- .../tests/chromatic/Text.stories.tsx | 4 +- .../icon-gallery/details/PreviewSection.tsx | 2 +- .../icon-gallery/details/UsageSection.tsx | 2 +- packages/icons/docs/icons.stories.mdx | 2 +- 163 files changed, 3055 insertions(+), 2963 deletions(-) diff --git a/.storybook/components/experimental-message/ExperimentalMessage.tsx b/.storybook/components/experimental-message/ExperimentalMessage.tsx index 31a6c7b54..98b3fa00d 100644 --- a/.storybook/components/experimental-message/ExperimentalMessage.tsx +++ b/.storybook/components/experimental-message/ExperimentalMessage.tsx @@ -14,7 +14,7 @@ export function ExperimentalMessage({ noDoc, noTests, noVisualTesting, noFinalDe const hasDetails = [noDoc, noTests, noVisualTesting, noFinalDesign, noMobileSupport].some(validation => validation); return ( - + Experimental diff --git a/.storybook/components/github-link/GithubLink.tsx b/.storybook/components/github-link/GithubLink.tsx index c72f1e689..94e5be235 100644 --- a/.storybook/components/github-link/GithubLink.tsx +++ b/.storybook/components/github-link/GithubLink.tsx @@ -14,7 +14,7 @@ export function GithubLink({ path, logo = false, children, ...rest }: GithubLink if (logo) { return ( - Github + Github {children} ); diff --git a/.storybook/decorators/withCenteredCanvas.jsx b/.storybook/decorators/withCenteredCanvas.jsx index 66e2aec51..cf4466ae7 100644 --- a/.storybook/decorators/withCenteredCanvas.jsx +++ b/.storybook/decorators/withCenteredCanvas.jsx @@ -16,7 +16,7 @@ export function withCenteredCanvas(story, context) { top="0" left="0" right="0" - marginTop={10} + marginTop="3.5rem" alignItems="center" >
-
+
Lost in space.
@@ -26,7 +26,7 @@ By passing an object to any style props, you can specify which style will be app Not all breakpoints must be explicitly defined. In the following example, `base` and `lg` breakpoints are explicitly declared. When match, the `xl` breakpoint will implicitly take the value set by the `lg` breakpoint since it is wider than `lg`. Everything below `lg` inherits the `base` color. -
+
Lost in space.
diff --git a/docs/features/style-props/StyleProps.stories.mdx b/docs/features/style-props/StyleProps.stories.mdx index a32545e32..d48b7d908 100644 --- a/docs/features/style-props/StyleProps.stories.mdx +++ b/docs/features/style-props/StyleProps.stories.mdx @@ -25,7 +25,7 @@ To apply a style value, set a value to any [style property](#properties) of an O paddingTop={3} paddingBottom={3} marginBottom={3} - color="alias-static-white" + color="#FFFFFF" borderRadius={3} backgroundColor="alias-accent"> Lost in space. @@ -39,7 +39,7 @@ Props like `border` and `paddingX` are also provided to help you save keystrokes ```jsx
+ border="primary-border"> Lost in space.
``` @@ -53,7 +53,7 @@ Inspired by [Styled System](https://styled-system.com/), Orbiter's style props a To help achieve a consistent user interface, Orbiter style props are based on scales and values defined in a customizable [theme](?path=/docs/theming--page). -
+
Lost in space.
@@ -84,7 +84,7 @@ Since the following user action pseudo-classes are often used, some style props > Not all style props supports user action pseudo-classes. Find out which props support user action pseudo-classes in the [reference](#properties) section. -
+
Lost in space.
@@ -106,11 +106,11 @@ To facilitate layouts, Orbiter provides specialized components for [grid](https: When applicable, always prefer using a [``](?path=/docs/grid--areas) or [``](?path=/docs/flex--horizontal) component instead of a [`
`](?path=/docs/html-div--example) component. ```jsx - -
-
-
-
+ +
+
+
+
``` @@ -163,7 +163,7 @@ The following tables provide a list of all available style props by category. ### Space ```jsx -
+
Galaxy
``` @@ -191,7 +191,7 @@ The following tables provide a list of all available style props by category. ### Color ```jsx - + Galaxy ``` @@ -233,7 +233,7 @@ The following tables provide a list of all available style props by category. ### Layout ```jsx -
+
Galaxy
``` diff --git a/docs/features/tokens/ColorPaletteTable.jsx b/docs/features/tokens/ColorPaletteTable.jsx index 9adfa6141..cd44c84c2 100644 --- a/docs/features/tokens/ColorPaletteTable.jsx +++ b/docs/features/tokens/ColorPaletteTable.jsx @@ -16,7 +16,7 @@ function toRowValues({ value, variable, color }) { value, variable, color, -
+
]; } diff --git a/docs/features/tokens/TokenTable.jsx b/docs/features/tokens/TokenTable.jsx index a74cda48d..adde8bd65 100644 --- a/docs/features/tokens/TokenTable.jsx +++ b/docs/features/tokens/TokenTable.jsx @@ -52,38 +52,38 @@ export function TokenTable({ colors }) { } export function backgroundRenderer(token) { - return
; + return
; } export function borderRenderer(token) { - return
; + return
; } export function boxShadowRenderer(token) { - return
; + return
; } export function durationRenderer() { - return
; + return
; } export function easingRenderer() { - return
; + return
; } export function fontSizeRenderer(token) { - return
Ag
; + return
Ag
; } export function fontWeightRenderer(token) { - return Ag; + return Ag; } export function iconRenderer(token) { if (token === "alias-static-white") { - return
; + return
; } else { - return
; + return
; } } @@ -93,9 +93,9 @@ export function lineHeightRenderer(token) { export function radiiRenderer(token) { if (token === "circular") { - return
; + return
; } else { - return
; + return
; } } @@ -104,14 +104,14 @@ export function sizingRenderer() { } export function spacingRenderer(token) { - return
; + return
; } export function textRenderer(token) { - if (token === "alias-static-white") { - return
Moon
; + if (token === "#FFFFFF") { + return
Moon
; } else { - return
Moon
; + return
Moon
; } } diff --git a/docs/getting-started/Installation.stories.mdx b/docs/getting-started/Installation.stories.mdx index b9fdb2a4b..d9d95aa2b 100644 --- a/docs/getting-started/Installation.stories.mdx +++ b/docs/getting-started/Installation.stories.mdx @@ -85,7 +85,7 @@ import { Div, Text } from "@workleap/orbiter-ui"; export const App = () => (
- Hello World! + Hello World!
); ``` diff --git a/docs/materials/motion/MotionPreview.tsx b/docs/materials/motion/MotionPreview.tsx index 8b937a818..c1e4bdb54 100644 --- a/docs/materials/motion/MotionPreview.tsx +++ b/docs/materials/motion/MotionPreview.tsx @@ -28,7 +28,7 @@ export function MotionPreview() { return ( <> - + +