diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js index f64f4759..94ca0846 100644 --- a/apps/wow-docs/styled-system/tokens/index.js +++ b/apps/wow-docs/styled-system/tokens/index.js @@ -384,11 +384,11 @@ const tokens = { variable: "var(--colors-primary)", }, "colors.success": { - value: "#34A853", + value: "#2A8642", variable: "var(--colors-success)", }, "colors.error": { - value: "#EA4335", + value: "#BB362A", variable: "var(--colors-error)", }, "colors.backgroundNormal": { @@ -404,7 +404,7 @@ const tokens = { variable: "var(--colors-background-dimmer)", }, "colors.sub": { - value: "#8F8F8F", + value: "#6B6B6B", variable: "var(--colors-sub)", }, "colors.outline": { diff --git a/packages/theme/src/tokens/breakpoint.ts b/packages/theme/src/tokens/breakpoint.ts new file mode 100644 index 00000000..4d348061 --- /dev/null +++ b/packages/theme/src/tokens/breakpoint.ts @@ -0,0 +1,8 @@ +import { breakpoint } from "wowds-tokens"; + +export const breakpoints = { + xs: breakpoint.xs, + sm: breakpoint.sm, + md: breakpoint.md, + lg: breakpoint.lg, +}; diff --git a/packages/theme/src/tokens/index.ts b/packages/theme/src/tokens/index.ts index 6f4d9c8f..55ddf098 100644 --- a/packages/theme/src/tokens/index.ts +++ b/packages/theme/src/tokens/index.ts @@ -1,5 +1,7 @@ +export * from "./breakpoint.ts"; export * from "./color.ts"; export * from "./typography.ts"; + import { defineTokens } from "@pandacss/dev"; import { colors, gradients } from "./color.ts"; diff --git a/packages/wow-tokens/src/breakpoint.ts b/packages/wow-tokens/src/breakpoint.ts new file mode 100644 index 00000000..dcfc17e2 --- /dev/null +++ b/packages/wow-tokens/src/breakpoint.ts @@ -0,0 +1,4 @@ +export const xs = "360px"; +export const sm = "600px"; +export const md = "900px"; +export const lg = "1280px"; diff --git a/packages/wow-tokens/src/color.ts b/packages/wow-tokens/src/color.ts index 4bf97d44..dbe30d4e 100644 --- a/packages/wow-tokens/src/color.ts +++ b/packages/wow-tokens/src/color.ts @@ -90,14 +90,14 @@ export const blackOpacity80 = "rgba(0, 0, 0, 0.8)"; // 시맨틱 토큰 export const primary = blue500; -export const success = green500; -export const error = red500; +export const success = green600; +export const error = red600; export const backgroundNormal = white; export const backgroundAlternative = mono50; export const backgroundDimmer = blackOpacity80; -export const sub = mono600; +export const sub = mono700; export const outline = mono400; export const textBlack = black; export const textWhite = white; diff --git a/packages/wow-tokens/src/index.ts b/packages/wow-tokens/src/index.ts index 430ffe95..2b62e05a 100644 --- a/packages/wow-tokens/src/index.ts +++ b/packages/wow-tokens/src/index.ts @@ -1,3 +1,4 @@ +export * as breakpoint from "./breakpoint.ts"; export * as color from "./color.ts"; export * as radius from "./radius.ts"; export * as space from "./space.ts"; diff --git a/packages/wow-tokens/src/typography.ts b/packages/wow-tokens/src/typography.ts index 0ed14205..04a17c02 100644 --- a/packages/wow-tokens/src/typography.ts +++ b/packages/wow-tokens/src/typography.ts @@ -64,6 +64,7 @@ export const label2 = { fontSize: "0.875rem", lineHeight: "100%", fontWeight: 600, + letterSpacing: "-0.01rem", }; export const label3 = { diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index a025674e..5a269302 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -40,6 +40,11 @@ "require": "./dist/Switch.cjs", "import": "./dist/Switch.js" }, + "./TextField": { + "types": "./dist/components/TextField/index.d.ts", + "require": "./dist/TextField.cjs", + "import": "./dist/TextField.js" + }, "./Chip": { "types": "./dist/components/Chip/index.d.ts", "require": "./dist/Chip.cjs", diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts index 98f2c6b8..fb17f32f 100644 --- a/packages/wow-ui/panda.config.ts +++ b/packages/wow-ui/panda.config.ts @@ -1,5 +1,5 @@ import { defineConfig, defineGlobalStyles } from "@pandacss/dev"; -import { semanticTokens, textStyles, tokens } from "theme"; +import { semanticTokens, textStyles, tokens, breakpoints } from "theme"; import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils"; const globalCss = defineGlobalStyles({ @@ -32,5 +32,6 @@ export default defineConfig({ tokens, textStyles, semanticTokens, + breakpoints, }, }); diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 4db4d471..bac0b983 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -24,6 +24,7 @@ export default { Checkbox: "./src/components/Checkbox", Chip: "./src/components/Chip", Switch: "./src/components/Switch", + TextField: "./src/components/TextField", }, output: [ { diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx index bd9d4145..5a3747f3 100644 --- a/packages/wow-ui/src/components/Chip/index.tsx +++ b/packages/wow-ui/src/components/Chip/index.tsx @@ -74,6 +74,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef( isChecked: checkedProp = false, defaultChecked = false, disabled = false, + style, ...rest }: ChipProps, ref: any @@ -110,7 +111,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef( aria-label={`chip ${isChecked ? "activated" : "inactivated"}`} data-selected={isChecked} ref={ref} - style={rest.customStyle} + style={style} className={chip({ clickable: disabled ? false : clickable, disabled: disabled, diff --git a/packages/wow-ui/src/components/TextField/TextField.stories.tsx b/packages/wow-ui/src/components/TextField/TextField.stories.tsx new file mode 100644 index 00000000..0df9f750 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/TextField.stories.tsx @@ -0,0 +1,246 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; + +import TextField from "@/components/TextField"; + +const meta = { + title: "UI/TextField", + component: TextField, + tags: ["autodocs"], + parameters: { + componentSubtitle: "텍스트필드 컴포넌트", + a11y: { + config: { + rules: [{ id: "color-contrast", enabled: false }], + }, + }, + }, + argTypes: { + label: { + description: "텍스트필드의 라벨입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + type: { + name: "string", + required: true, + }, + }, + placeholder: { + description: "텍스트필드의 플레이스홀더 텍스트입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + defaultValue: { + description: "텍스트필드의 기본 값입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + value: { + description: "외부에서 제어할 활성 상태입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + maxLength: { + description: "텍스트필드의 최대 입력 길이입니다.", + table: { + type: { summary: "number" }, + defaultValue: { summary: null }, + }, + control: { + type: "number", + }, + }, + error: { + description: "텍스트필드의 오류 상태 여부입니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + success: { + description: "텍스트필드의 성공 상태 여부입니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + helperText: { + description: "텍스트필드 아래 추가적인 텍스트입니다.", + table: { + type: { summary: "ReactNode" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + onChange: { + description: "외부 활성 상태가 변경될 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "(value: string) => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onBlur: { + description: "텍스트필드가 포커스를 잃을 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onFocus: { + description: "텍스트필드가 포커스됐을 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + textareaProps: { + description: "텍스트필드에 전달할 추가 textarea 속성입니다.", + table: { + type: { summary: "TextareaHTMLAttributes" }, + defaultValue: { summary: null }, + control: { + type: "object", + }, + }, + }, + style: { + description: "텍스트필드의 커스텀 스타일 속성입니다.", + table: { + type: { summary: "CSSProperties" }, + defaultValue: { summary: null }, + control: { + type: "object", + }, + }, + }, + className: { + description: "텍스트필드에 전달하는 커스텀 클래스명입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + control: { + type: "text", + }, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + label: "Label", + }, +}; + +export const WithMaxLength: Story = { + args: { + label: "Label", + maxLength: 10, + }, +}; + +export const WithPlaceholder: Story = { + args: { + label: "Label", + placeholder: + "PlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholder", + }, +}; + +export const WithDefaultValue: Story = { + args: { + label: "Label", + defaultValue: "Text", + }, +}; + +export const WithHelperText: Story = { + args: { + label: "Label", + helperText: "*Caption", + }, +}; + +export const WithMaxLengthAndHelperText: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + }, +}; + +export const Success: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + success: true, + }, +}; + +export const Error: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + error: true, + }, +}; + +const ControlledTextField = () => { + const [value, setValue] = useState(""); + + const handleChange = (value: string) => { + setValue(value); + }; + + return ; +}; + +export const ControlledState: Story = { + render: () => , + args: { + label: "Label", + }, +}; diff --git a/packages/wow-ui/src/components/TextField/TextField.test.tsx b/packages/wow-ui/src/components/TextField/TextField.test.tsx new file mode 100644 index 00000000..abdc2035 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/TextField.test.tsx @@ -0,0 +1,157 @@ +import { fireEvent, render, waitFor } from "@testing-library/react"; +import { useState } from "react"; + +import TextField from "@/components/TextField"; + +describe("TextField component", () => { + it("should render label and placeholder", () => { + const { getByLabelText, getByPlaceholderText } = render( + + ); + const labelText = getByLabelText("Label"); + const placeholderText = getByPlaceholderText("Placeholder"); + + expect(labelText).toBeInTheDocument(); + expect(placeholderText).toBeInTheDocument(); + }); + + it("should render with default value", () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + expect(textField).toHaveValue("textField"); + }); + + it("should render helperText", () => { + const { getByText } = render( + + ); + const helperText = getByText("HelperText"); + + expect(helperText).toBeInTheDocument(); + }); + + it("should handle max length correctly", async () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label") as HTMLTextAreaElement; + + fireEvent.change(textField, { target: { value: "12345678910" } }); + + await waitFor(() => { + expect(textField.value).toHaveLength(5); + }); + }); + + it("should apply typing style while typing", async () => { + const { getByLabelText, getByText } = render(); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + fireEvent.change(textField, { target: { value: "12345" } }); + + await waitFor(() => { + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: primary"); + expect(textField).toHaveStyle("color: textBlack"); + }); + }); + + it("should apply typed style after typing", async () => { + const { getByLabelText, getByText } = render(); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + fireEvent.change(textField, { target: { value: "12345" } }); + fireEvent.blur(textField); + + await waitFor(() => { + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: sub"); + expect(textField).toHaveStyle("color: textBlack"); + }); + }); + + it("should apply success style if success is true", () => { + const { getByLabelText, getByText } = render( + + ); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: success"); + expect(textField).toHaveStyle("color: textBlack"); + }); + + it("should apply error style if error is true", () => { + const { getByLabelText, getByText } = render( + + ); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: error"); + expect(textField).toHaveStyle("color: textBlack"); + }); + + it("should display error message with proper aria-describedBy", () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + expect(textField).toHaveAttribute( + "aria-describedby", + expect.stringContaining("error-message") + ); + }); + + it("should fire onFocus event when focused", () => { + const handleFocus = jest.fn(); + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + fireEvent.focus(textField); + + expect(handleFocus).toHaveBeenCalledTimes(1); + }); + + it("should fire onBlur event when focus is lost", () => { + const handleBlur = jest.fn(); + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + fireEvent.click(textField); + fireEvent.blur(textField); + + expect(handleBlur).toHaveBeenCalledTimes(1); + }); +}); + +describe("external control and events", () => { + it("should fire external onChange event", () => { + const Component = () => { + const [value, setValue] = useState("initial value"); + const handleChange = (newValue: string) => setValue(newValue); + + return ; + }; + const { getByLabelText } = render(); + const textField = getByLabelText("Label"); + + expect(textField).toHaveValue("initial value"); + + fireEvent.change(textField, { target: { value: "updated value" } }); + + expect(textField).toHaveValue("updated value"); + }); +}); diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx new file mode 100644 index 00000000..b84d3da6 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -0,0 +1,339 @@ +"use client"; + +import { cva } from "@styled-system/css"; +import { Flex, styled } from "@styled-system/jsx"; +import type { + ChangeEvent, + CSSProperties, + FocusEvent, + ReactNode, + RefObject, + TextareaHTMLAttributes, +} from "react"; +import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react"; + +import { useTextareaAutosize } from "@/hooks/useTextareaAutosize"; + +type VariantType = "default" | "typing" | "typed" | "success" | "error"; + +/** + * @description 사용자가 텍스트를 입력할 수 있는 텍스트필드 컴포넌트입니다. + * + * @param {string} label 텍스트필드의 라벨. + * @param {string} [placeholder] 텍스트필드의 플레이스홀더 텍스트. + * @param {string} [defaultValue] 텍스트필드의 기본 값. + * @param {string} [value] 외부에서 제어할 활성 상태. + * @param {number} [maxLength] 텍스트필드의 최대 입력 길이. + * @param {boolean} [error] 텍스트필드의 오류 상태 여부. + * @param {boolean} [success] 텍스트필드의 성공 상태 여부. + * @param {ReactNode} [helperText] 텍스트필드 아래 추가적인 텍스트. + * @param {(value: string) => void} [onChange] 외부 활성 상태가 변경될 때 호출될 콜백 함수. + * @param {() => void} [onBlur] 텍스트필드가 포커스를 잃을 때 호출될 콜백 함수. + * @param {() => void} [onFocus] 텍스트필드가 포커스됐을 때 호출될 콜백 함수. + * @param {TextareaHTMLAttributes} [textareaProps] 텍스트필드에 전달할 추가 textarea 속성. + * @param {CSSProperties} [style] 텍스트필드의 커스텀 스타일 속성. + * @param {string} [className] 텍스트필드에 전달하는 커스텀 클래스명. + * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. + * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. + */ +export interface TextFieldProps { + label: string; + placeholder?: string; + defaultValue?: string; + value?: string; + maxLength?: number; + error?: boolean; + success?: boolean; + helperText?: ReactNode; + onChange?: (value: string) => void; + onBlur?: () => void; + onFocus?: () => void; + textareaProps?: TextareaHTMLAttributes; + style?: CSSProperties; + className?: string; +} + +const TextField = forwardRef( + ( + { + helperText, + label, + onBlur, + onChange, + onFocus, + placeholder = "", + defaultValue, + value: valueProp, + maxLength, + error = false, + success = false, + textareaProps, + ...rest + }, + ref + ) => { + const id = useId(); + const textareaId = textareaProps?.id || id; + const errorMessageId = `${textareaId}-error-message`; + const helperTextId = `${textareaId}-helper-text`; + const descriptionId = error ? `${errorMessageId}` : `${helperTextId}`; + + const textareaRef = useRef(null); + const textareaElementRef = ref || textareaRef; + + const [value, setValue] = useState(valueProp ?? defaultValue ?? ""); + const [variant, setVariant] = useState("default"); + + useLayoutEffect(() => { + if (success) { + setVariant("success"); + } else if (error) { + setVariant("error"); + } else if (defaultValue) { + setVariant("typed"); + } + }, [defaultValue, error, success]); + + useTextareaAutosize(textareaElementRef as RefObject); + + const handleChange = (e: ChangeEvent) => { + const textareaValue = e.target.value; + setVariant("typing"); + + if (maxLength && textareaValue.length > maxLength) { + setValue(textareaValue.slice(0, maxLength)); + } else { + setValue(textareaValue); + onChange?.(textareaValue); + } + }; + + const handleBlur = (e: FocusEvent) => { + const inputValue = e.target.value; + + if (variant !== "success" && variant !== "error") { + setVariant(inputValue ? "typed" : "default"); + } + onBlur?.(); + }; + + const handleFocus = () => { + if (variant !== "typing") { + setVariant("typing"); + } + onFocus?.(); + }; + + return ( + + + + {maxLength && ( + + )} + + + {helperText && {helperText}} + + ); + } +); + +TextField.displayName = "TextField"; +export default TextField; + +const Label = ({ + variant, + children, + textareaId, +}: { + variant: VariantType; + children: string; + textareaId: string; +}) => ( + + {children} + +); + +const TextLength = ({ + variant, + maxLength, + length, +}: { + variant: VariantType; + maxLength: number; + length: number; +}) => ( + + {length}/{maxLength} + +); + +const HelperText = ({ + variant, + children, +}: { + variant: VariantType; + children: ReactNode; +}) => ( + + {children} + +); + +const containerStyle = cva({ + base: { + lg: { + minWidth: "19.75rem", + maxWidth: "40.75rem", + }, + smDown: { + width: "100%", + }, + }, +}); + +const labelStyle = cva({ + base: { + textStyle: "label2", + }, + variants: { + type: { + default: { + color: "sub", + }, + focused: { + color: "textBlack", + }, + }, + }, +}); + +const textLengthStyle = cva({ + base: { + textStyle: "label3", + }, + variants: { + type: { + default: { + color: "sub", + }, + typing: { + color: "primary", + }, + typed: { + color: "sub", + }, + success: { + color: "success", + }, + error: { + color: "error", + }, + }, + }, +}); + +const textareaStyle = cva({ + base: { + borderRadius: "sm", + borderWidth: "button", + paddingX: "sm", + paddingY: "xs", + textStyle: "body1", + height: "2.625rem", + maxHeight: "7.5rem", + overflowY: "hidden", + resize: "none", + _placeholder: { + color: "outline", + }, + _focus: { + outline: "none", + }, + _scrollbar: { + width: "2px", + }, + _scrollbarThumb: { + width: "2px", + height: "65px", + borderRadius: "sm", + backgroundColor: "outline", + }, + _scrollbarTrack: { + marginTop: "2px", + marginBottom: "2px", + }, + }, + variants: { + type: { + default: { + borderColor: "outline", + color: "outline", + }, + typing: { + borderColor: "primary", + color: "textBlack", + }, + typed: { + borderColor: "sub", + color: "textBlack", + }, + success: { + borderColor: "success", + color: "textBlack", + }, + error: { + borderColor: "error", + color: "textBlack", + }, + }, + }, +}); + +const helperTextStyle = cva({ + base: { + textStyle: "body3", + }, + variants: { + type: { + default: { color: "sub" }, + typing: { color: "sub" }, + typed: { color: "sub" }, + success: { color: "success" }, + error: { color: "error" }, + }, + }, +}); diff --git a/packages/wow-ui/src/hooks/useTextareaAutosize.ts b/packages/wow-ui/src/hooks/useTextareaAutosize.ts new file mode 100644 index 00000000..5d472afd --- /dev/null +++ b/packages/wow-ui/src/hooks/useTextareaAutosize.ts @@ -0,0 +1,42 @@ +import { type RefObject, useEffect } from "react"; + +const TEXTAREA_LINE_HEIGHT = 2.625; +const MAX_TEXTAREA_HEIGHT = 120; + +export const useTextareaAutosize = (ref: RefObject) => { + useEffect(() => { + const textareaElement = ref.current; + if (!textareaElement) return; + + const placeholderLines = textareaElement.placeholder.split("\n").length; + const placeholderHeight = placeholderLines * TEXTAREA_LINE_HEIGHT; + + const setInitialHeight = () => { + textareaElement.style.height = `${placeholderHeight}rem`; + }; + + const handleResize = () => { + textareaElement.style.height = "auto"; + textareaElement.style.height = `${Math.max(placeholderHeight, textareaElement.scrollHeight)}px`; + }; + + const handleOverflow = () => { + textareaElement.style.overflowY = + textareaElement.scrollHeight > MAX_TEXTAREA_HEIGHT + ? "scroll" + : "hidden"; + }; + + setInitialHeight(); + handleResize(); + handleOverflow(); + + textareaElement.addEventListener("input", handleResize); + textareaElement.addEventListener("input", handleOverflow); + + return () => { + textareaElement.removeEventListener("input", handleResize); + textareaElement.removeEventListener("input", handleOverflow); + }; + }, [ref]); +}; diff --git a/packages/wow-ui/styled-system/css/conditions.js b/packages/wow-ui/styled-system/css/conditions.js index 33673f36..df6eed4e 100644 --- a/packages/wow-ui/styled-system/css/conditions.js +++ b/packages/wow-ui/styled-system/css/conditions.js @@ -1,7 +1,7 @@ import { withoutSpace } from "../helpers.js"; const conditionsStr = - "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"; + "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"; const conditions = new Set(conditionsStr.split(",")); export function isCondition(value) { diff --git a/packages/wow-ui/styled-system/css/css.js b/packages/wow-ui/styled-system/css/css.js index 1a2225fe..26dbe225 100644 --- a/packages/wow-ui/styled-system/css/css.js +++ b/packages/wow-ui/styled-system/css/css.js @@ -28,7 +28,7 @@ const context = { conditions: { shift: sortConditions, finalize: finalizeConditions, - breakpoints: { keys: ["base", "sm", "md", "lg", "xl", "2xl"] }, + breakpoints: { keys: ["base", "xs", "sm", "md", "lg"] }, }, utility: { transform: (prop, value) => { diff --git a/packages/wow-ui/styled-system/jsx/is-valid-prop.js b/packages/wow-ui/styled-system/jsx/is-valid-prop.js index 0cb2bac4..7ea7b401 100644 --- a/packages/wow-ui/styled-system/jsx/is-valid-prop.js +++ b/packages/wow-ui/styled-system/jsx/is-valid-prop.js @@ -2,7 +2,7 @@ import { splitProps } from "../helpers.js"; import { memo } from "../helpers.js"; // src/index.ts var userGeneratedStr = - "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"; + "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"; var userGenerated = userGeneratedStr.split(","); var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect"; diff --git a/packages/wow-ui/styled-system/tokens/index.js b/packages/wow-ui/styled-system/tokens/index.js index f64f4759..13fd81a0 100644 --- a/packages/wow-ui/styled-system/tokens/index.js +++ b/packages/wow-ui/styled-system/tokens/index.js @@ -339,56 +339,48 @@ const tokens = { value: "1.2px", variable: "var(--border-widths-arrow)", }, + "breakpoints.xs": { + value: "360px", + variable: "var(--breakpoints-xs)", + }, "breakpoints.sm": { - value: "640px", + value: "600px", variable: "var(--breakpoints-sm)", }, "breakpoints.md": { - value: "768px", + value: "900px", variable: "var(--breakpoints-md)", }, "breakpoints.lg": { - value: "1024px", - variable: "var(--breakpoints-lg)", - }, - "breakpoints.xl": { value: "1280px", - variable: "var(--breakpoints-xl)", + variable: "var(--breakpoints-lg)", }, - "breakpoints.2xl": { - value: "1536px", - variable: "var(--breakpoints-2xl)", + "sizes.breakpoint-xs": { + value: "360px", + variable: "var(--sizes-breakpoint-xs)", }, "sizes.breakpoint-sm": { - value: "640px", + value: "600px", variable: "var(--sizes-breakpoint-sm)", }, "sizes.breakpoint-md": { - value: "768px", + value: "900px", variable: "var(--sizes-breakpoint-md)", }, "sizes.breakpoint-lg": { - value: "1024px", - variable: "var(--sizes-breakpoint-lg)", - }, - "sizes.breakpoint-xl": { value: "1280px", - variable: "var(--sizes-breakpoint-xl)", - }, - "sizes.breakpoint-2xl": { - value: "1536px", - variable: "var(--sizes-breakpoint-2xl)", + variable: "var(--sizes-breakpoint-lg)", }, "colors.primary": { value: "#368FF7", variable: "var(--colors-primary)", }, "colors.success": { - value: "#34A853", + value: "#2A8642", variable: "var(--colors-success)", }, "colors.error": { - value: "#EA4335", + value: "#BB362A", variable: "var(--colors-error)", }, "colors.backgroundNormal": { @@ -404,7 +396,7 @@ const tokens = { variable: "var(--colors-background-dimmer)", }, "colors.sub": { - value: "#8F8F8F", + value: "#6B6B6B", variable: "var(--colors-sub)", }, "colors.outline": { diff --git a/packages/wow-ui/styled-system/tokens/tokens.d.ts b/packages/wow-ui/styled-system/tokens/tokens.d.ts index 0b1546dc..73c94022 100644 --- a/packages/wow-ui/styled-system/tokens/tokens.d.ts +++ b/packages/wow-ui/styled-system/tokens/tokens.d.ts @@ -85,16 +85,14 @@ export type Token = | "radii.full" | "borderWidths.button" | "borderWidths.arrow" + | "breakpoints.xs" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" - | "breakpoints.xl" - | "breakpoints.2xl" + | "sizes.breakpoint-xs" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" - | "sizes.breakpoint-xl" - | "sizes.breakpoint-2xl" | "colors.primary" | "colors.success" | "colors.error" @@ -304,14 +302,13 @@ export type RadiusToken = "sm" | "md" | "full"; export type BorderWidthToken = "button" | "arrow"; -export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"; +export type BreakpointToken = "xs" | "sm" | "md" | "lg"; export type SizeToken = + | "breakpoint-xs" | "breakpoint-sm" | "breakpoint-md" - | "breakpoint-lg" - | "breakpoint-xl" - | "breakpoint-2xl"; + | "breakpoint-lg"; export type Tokens = { colors: ColorToken; diff --git a/packages/wow-ui/styled-system/types/conditions.d.ts b/packages/wow-ui/styled-system/types/conditions.d.ts index b2e811bb..c31b9f52 100644 --- a/packages/wow-ui/styled-system/types/conditions.d.ts +++ b/packages/wow-ui/styled-system/types/conditions.d.ts @@ -180,56 +180,42 @@ export interface Conditions { _vertical: string; /** `@starting-style` */ _starting: string; - /** `@media screen and (min-width: 40rem)` */ + /** `@media screen and (min-width: 22.5rem)` */ + xs: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */ + xsOnly: string; + /** `@media screen and (max-width: 22.4975rem)` */ + xsDown: string; + /** `@media screen and (min-width: 37.5rem)` */ sm: string; - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */ smOnly: string; - /** `@media screen and (max-width: 39.9975rem)` */ + /** `@media screen and (max-width: 37.4975rem)` */ smDown: string; - /** `@media screen and (min-width: 48rem)` */ + /** `@media screen and (min-width: 56.25rem)` */ md: string; - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */ mdOnly: string; - /** `@media screen and (max-width: 47.9975rem)` */ + /** `@media screen and (max-width: 56.2475rem)` */ mdDown: string; - /** `@media screen and (min-width: 64rem)` */ + /** `@media screen and (min-width: 80rem)` */ lg: string; - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - lgOnly: string; - /** `@media screen and (max-width: 63.9975rem)` */ - lgDown: string; /** `@media screen and (min-width: 80rem)` */ - xl: string; - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - xlOnly: string; + lgOnly: string; /** `@media screen and (max-width: 79.9975rem)` */ - xlDown: string; - /** `@media screen and (min-width: 96rem)` */ - "2xl": string; - /** `@media screen and (min-width: 96rem)` */ - "2xlOnly": string; - /** `@media screen and (max-width: 95.9975rem)` */ - "2xlDown": string; - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + lgDown: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */ + xsToSm: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 56.2475rem)` */ + xsToMd: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 79.9975rem)` */ + xsToLg: string; + /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */ smToMd: string; - /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ + /** `@media screen and (min-width: 37.5rem) and (max-width: 79.9975rem)` */ smToLg: string; - /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ - smToXl: string; - /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ - smTo2xl: string; - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */ mdToLg: string; - /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ - mdToXl: string; - /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ - mdTo2xl: string; - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - lgToXl: string; - /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ - lgTo2xl: string; - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - xlTo2xl: string; /** `@container (min-width: 20rem)` */ "@/xs": string; /** `@container (min-width: 24rem)` */