diff --git a/panda.config.ts b/panda.config.ts index 71de5aba..056b10d5 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -12,7 +12,15 @@ export default defineConfig({ // Useful for theme customization theme: { - extend: {}, + extend: { + keyframes: { + gradient: { + '0%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' }, + '50%': { backgroundPositionX: '50%', backgroundPositionY: '100%' }, + '100%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' }, + }, + }, + }, }, // The output directory for your css system diff --git a/public/assets/icons/left-arrow-icon.svg b/public/assets/icons/left-arrow-icon.svg new file mode 100644 index 00000000..2905bda0 --- /dev/null +++ b/public/assets/icons/left-arrow-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 460cf029..bf8fa2c4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from 'next'; +import { css } from '@/styled-system/css'; import { QueryProvider } from '../hooks/query'; @@ -13,8 +14,16 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( - {children} + +
{children}
+ ); } + +const containerCss = { + maxWidth: '475px', + margin: '0 auto', + minHeight: '100vh', +}; diff --git a/src/app/page.tsx b/src/app/page.tsx index a39489ff..a9fa23f8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,11 +1,5 @@ -import Header from '@/components/Header'; import { css } from '@styled-system/css'; export default function Home() { - return ( -
-
- Hello ๐Ÿผ! -
- ); + return
Hello ๐Ÿผ!
; } diff --git a/src/app/timer/TimerView.tsx b/src/app/timer/TimerView.tsx new file mode 100644 index 00000000..9d5488a3 --- /dev/null +++ b/src/app/timer/TimerView.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { css } from '@/styled-system/css'; +import { center } from '@/styled-system/patterns'; + +interface Props { + isActive: boolean; + time: [number, number]; + category: string; +} +export default function TimerView({ category, time, isActive }: Props) { + return ( +
+
+
{category}
+
+ {time[0]} + : + {time[1]} +
+
+
+ ); +} + +const innerCss = { + width: '312px', + height: '312px', + background: 'white', + boxShadow: '0px 10px 30px 5px rgba(18.51, 14.90, 195.38, 0.07)', + borderRadius: 9999, + flexDirection: 'column', +}; + +const categoryCss = { color: '#4E5968', fontSize: '18px', fontWeight: '600', lineHeight: '150%' }; + +const timerTextCss = { + fontSize: '70px', + fontWeight: '700', + animation: 'gradient 3s ease-in-out infinite', + backgroundSize: '150% 200%!', + '-webkit-background-clip': 'text!', + color: 'transparent', + background: 'linear-gradient(108deg, #FF8C8C -1.04%, #5D8AFF 101.48%)', +}; diff --git a/src/app/timer/layout.tsx b/src/app/timer/layout.tsx new file mode 100644 index 00000000..c69b896a --- /dev/null +++ b/src/app/timer/layout.tsx @@ -0,0 +1,21 @@ +import { type PropsWithChildren } from 'react'; +import Header from '@/components/Layout/Header'; +import { css } from '@/styled-system/css'; + +export default function Layout({ children }: PropsWithChildren) { + return ( +
+
+
{children}
+
+ ); +} + +const containerCss = css({ + background: 'linear-gradient(136deg, #FFF1F2 4.76%, #E9EFFF 89.58%)', + minHeight: '100vh', +}); + +const mainCss = css({ + padding: '24px 16px', +}); diff --git a/src/app/timer/page.tsx b/src/app/timer/page.tsx new file mode 100644 index 00000000..5d2bc498 --- /dev/null +++ b/src/app/timer/page.tsx @@ -0,0 +1,42 @@ +'use client'; +import TimerView from '@/app/timer/TimerView'; +import useStep from '@/app/timer/useStep'; +import { css } from '@styled-system/css'; + +const STEP_LABEL = { + ready: { + title: '์ค€๋น„ ๋˜์…จ๋‚˜์š”?', + desc: 'ํƒ€์ด๋จธ๋ฅผ ๋ˆŒ๋Ÿฌ์„œ 10๋ถ„์˜ ๋ฏธ์…˜์„ ์™„์„ฑํ•ด ์ฃผ์„ธ์š”!', + }, +} as const; + +export default function TimerPage() { + const { step } = useStep(); + + return ( +
+

{STEP_LABEL[step].title}

+

{STEP_LABEL[step].desc}

+ + +
+ ); +} + +const font24Css = { + fontSize: '24px', + fontFamily: 'Pretendard', + fontWeight: '700', + lineHeight: '150%', + wordWrap: 'break-word', +}; + +const font14Css = { + fontSize: '14px', + fontFamily: 'Pretendard', + fontWeight: '400', + lineHeight: '150%', +}; + +const titleCss = css(font24Css, { color: '#333D4B' }); +const descCss = css(font14Css, { color: '#6B7684', marginBottom: '84px' }); diff --git a/src/app/timer/useStep.ts b/src/app/timer/useStep.ts new file mode 100644 index 00000000..fa73394d --- /dev/null +++ b/src/app/timer/useStep.ts @@ -0,0 +1,12 @@ +import { useState } from 'react'; + +type StepType = 'ready'; + +function useStep() { + const [step, setStep] = useState('ready'); + + const onNextStep = () => {}; + return { step, onNextStep }; +} + +export default useStep; diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index 3c916528..00000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { css } from '@styled-system/css'; - -const Header = () => { - return ( -
-

Header

-
- ); -}; - -export default Header; diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx new file mode 100644 index 00000000..28dda3dd --- /dev/null +++ b/src/components/Layout/Header.tsx @@ -0,0 +1,32 @@ +import Image from 'next/image'; +import { flex } from '@/styled-system/patterns'; +import { css } from '@styled-system/css'; + +interface Props { + title?: string; +} + +function Header({ title }: Props) { + return ( +
+ +

{title}

+
+ ); +} + +const wrapperCss = flex({ + padding: '10px 16px', + gap: '6px', +}); + +const headingCss = css({ + color: '#6B7684', + fontSize: '16px', + fontFamily: 'Pretendard', + fontWeight: '600', +}); + +export default Header; diff --git a/src/styled-system/css/css.d.ts b/src/styled-system/css/css.d.ts index 5236f884..63723823 100644 --- a/src/styled-system/css/css.d.ts +++ b/src/styled-system/css/css.d.ts @@ -2,8 +2,8 @@ import type { SystemStyleObject } from '../types/index'; interface CssFunction { - (...styles: Array): string; - raw: (...styles: Array) => SystemStyleObject; + (...styles: Array): string + raw: (...styles: Array) => SystemStyleObject } -export declare const css: CssFunction; +export declare const css: CssFunction; \ No newline at end of file diff --git a/src/styled-system/css/cva.d.ts b/src/styled-system/css/cva.d.ts index 4688f71e..11900bfb 100644 --- a/src/styled-system/css/cva.d.ts +++ b/src/styled-system/css/cva.d.ts @@ -1,6 +1,6 @@ /* eslint-disable */ import type { RecipeCreatorFn } from '../types/recipe'; -export declare const cva: RecipeCreatorFn; +export declare const cva: RecipeCreatorFn -export type { RecipeVariantProps } from '../types/recipe'; +export type { RecipeVariantProps } from '../types/recipe'; \ No newline at end of file diff --git a/src/styled-system/css/cx.d.ts b/src/styled-system/css/cx.d.ts index 8a876a0e..892c90ca 100644 --- a/src/styled-system/css/cx.d.ts +++ b/src/styled-system/css/cx.d.ts @@ -1,5 +1,5 @@ /* eslint-disable */ -type Argument = string | boolean | null | undefined; +type Argument = string | boolean | null | undefined /** Conditionally join classNames into a single string */ -export declare function cx(...args: Argument[]): string; +export declare function cx(...args: Argument[]): string \ No newline at end of file diff --git a/src/styled-system/css/index.d.ts b/src/styled-system/css/index.d.ts index f59847b1..50a581d8 100644 --- a/src/styled-system/css/index.d.ts +++ b/src/styled-system/css/index.d.ts @@ -2,4 +2,4 @@ export * from './css'; export * from './cx'; export * from './cva'; -export * from './sva'; +export * from './sva'; \ No newline at end of file diff --git a/src/styled-system/css/sva.d.ts b/src/styled-system/css/sva.d.ts index 477033f0..f97c42a3 100644 --- a/src/styled-system/css/sva.d.ts +++ b/src/styled-system/css/sva.d.ts @@ -1,4 +1,4 @@ /* eslint-disable */ import type { SlotRecipeCreatorFn } from '../types/recipe'; -export declare const sva: SlotRecipeCreatorFn; +export declare const sva: SlotRecipeCreatorFn \ No newline at end of file diff --git a/src/styled-system/jsx/aspect-ratio.d.ts b/src/styled-system/jsx/aspect-ratio.d.ts index 8f1821e8..c057d1a5 100644 --- a/src/styled-system/jsx/aspect-ratio.d.ts +++ b/src/styled-system/jsx/aspect-ratio.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { AspectRatioProperties } from '../patterns/aspect-ratio'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface AspectRatioProps - extends AspectRatioProperties, - DistributiveOmit, keyof AspectRatioProperties | 'aspectRatio'> {} +export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit, keyof AspectRatioProperties | 'aspectRatio'> {} -export declare const AspectRatio: FunctionComponent; + +export declare const AspectRatio: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/bleed.d.ts b/src/styled-system/jsx/bleed.d.ts index 1f85a679..9eca5993 100644 --- a/src/styled-system/jsx/bleed.d.ts +++ b/src/styled-system/jsx/bleed.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { BleedProperties } from '../patterns/bleed'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface BleedProps extends BleedProperties, DistributiveOmit, keyof BleedProperties> {} +export interface BleedProps extends BleedProperties, DistributiveOmit, keyof BleedProperties > {} -export declare const Bleed: FunctionComponent; + +export declare const Bleed: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/box.d.ts b/src/styled-system/jsx/box.d.ts index e988bb1d..958962df 100644 --- a/src/styled-system/jsx/box.d.ts +++ b/src/styled-system/jsx/box.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { BoxProperties } from '../patterns/box'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface BoxProps extends BoxProperties, DistributiveOmit, keyof BoxProperties> {} +export interface BoxProps extends BoxProperties, DistributiveOmit, keyof BoxProperties > {} -export declare const Box: FunctionComponent; + +export declare const Box: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/center.d.ts b/src/styled-system/jsx/center.d.ts index b40dea8b..fd6d6152 100644 --- a/src/styled-system/jsx/center.d.ts +++ b/src/styled-system/jsx/center.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { CenterProperties } from '../patterns/center'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface CenterProps - extends CenterProperties, - DistributiveOmit, keyof CenterProperties> {} +export interface CenterProps extends CenterProperties, DistributiveOmit, keyof CenterProperties > {} -export declare const Center: FunctionComponent; + +export declare const Center: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/circle.d.ts b/src/styled-system/jsx/circle.d.ts index 26c4d3ba..3afa95f6 100644 --- a/src/styled-system/jsx/circle.d.ts +++ b/src/styled-system/jsx/circle.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { CircleProperties } from '../patterns/circle'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface CircleProps - extends CircleProperties, - DistributiveOmit, keyof CircleProperties> {} +export interface CircleProps extends CircleProperties, DistributiveOmit, keyof CircleProperties > {} -export declare const Circle: FunctionComponent; + +export declare const Circle: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/container.d.ts b/src/styled-system/jsx/container.d.ts index 8c9d8ecd..10b9df22 100644 --- a/src/styled-system/jsx/container.d.ts +++ b/src/styled-system/jsx/container.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { ContainerProperties } from '../patterns/container'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface ContainerProps - extends ContainerProperties, - DistributiveOmit, keyof ContainerProperties> {} +export interface ContainerProps extends ContainerProperties, DistributiveOmit, keyof ContainerProperties > {} -export declare const Container: FunctionComponent; + +export declare const Container: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/divider.d.ts b/src/styled-system/jsx/divider.d.ts index 5d2558a5..110d8c01 100644 --- a/src/styled-system/jsx/divider.d.ts +++ b/src/styled-system/jsx/divider.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { DividerProperties } from '../patterns/divider'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface DividerProps - extends DividerProperties, - DistributiveOmit, keyof DividerProperties> {} +export interface DividerProps extends DividerProperties, DistributiveOmit, keyof DividerProperties > {} -export declare const Divider: FunctionComponent; + +export declare const Divider: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/factory.d.ts b/src/styled-system/jsx/factory.d.ts index 301a69da..875a0fba 100644 --- a/src/styled-system/jsx/factory.d.ts +++ b/src/styled-system/jsx/factory.d.ts @@ -1,3 +1,3 @@ /* eslint-disable */ import type { Styled } from '../types/jsx'; -export declare const styled: Styled; +export declare const styled: Styled \ No newline at end of file diff --git a/src/styled-system/jsx/flex.d.ts b/src/styled-system/jsx/flex.d.ts index ca570418..8165d5a7 100644 --- a/src/styled-system/jsx/flex.d.ts +++ b/src/styled-system/jsx/flex.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { FlexProperties } from '../patterns/flex'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface FlexProps extends FlexProperties, DistributiveOmit, keyof FlexProperties> {} +export interface FlexProps extends FlexProperties, DistributiveOmit, keyof FlexProperties > {} -export declare const Flex: FunctionComponent; + +export declare const Flex: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/float.d.ts b/src/styled-system/jsx/float.d.ts index 698d2a80..217a44cd 100644 --- a/src/styled-system/jsx/float.d.ts +++ b/src/styled-system/jsx/float.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { FloatProperties } from '../patterns/float'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface FloatProps extends FloatProperties, DistributiveOmit, keyof FloatProperties> {} +export interface FloatProps extends FloatProperties, DistributiveOmit, keyof FloatProperties > {} -export declare const Float: FunctionComponent; + +export declare const Float: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/grid-item.d.ts b/src/styled-system/jsx/grid-item.d.ts index f32227cc..37130511 100644 --- a/src/styled-system/jsx/grid-item.d.ts +++ b/src/styled-system/jsx/grid-item.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { GridItemProperties } from '../patterns/grid-item'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface GridItemProps - extends GridItemProperties, - DistributiveOmit, keyof GridItemProperties> {} +export interface GridItemProps extends GridItemProperties, DistributiveOmit, keyof GridItemProperties > {} -export declare const GridItem: FunctionComponent; + +export declare const GridItem: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/grid.d.ts b/src/styled-system/jsx/grid.d.ts index f59c2a60..760569c4 100644 --- a/src/styled-system/jsx/grid.d.ts +++ b/src/styled-system/jsx/grid.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { GridProperties } from '../patterns/grid'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface GridProps extends GridProperties, DistributiveOmit, keyof GridProperties> {} +export interface GridProps extends GridProperties, DistributiveOmit, keyof GridProperties > {} -export declare const Grid: FunctionComponent; + +export declare const Grid: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/hstack.d.ts b/src/styled-system/jsx/hstack.d.ts index 21499025..9cd06b0e 100644 --- a/src/styled-system/jsx/hstack.d.ts +++ b/src/styled-system/jsx/hstack.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { HstackProperties } from '../patterns/hstack'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface HstackProps - extends HstackProperties, - DistributiveOmit, keyof HstackProperties> {} +export interface HstackProps extends HstackProperties, DistributiveOmit, keyof HstackProperties > {} -export declare const HStack: FunctionComponent; + +export declare const HStack: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/index.d.ts b/src/styled-system/jsx/index.d.ts index 1adb44d7..83ef6690 100644 --- a/src/styled-system/jsx/index.d.ts +++ b/src/styled-system/jsx/index.d.ts @@ -24,4 +24,4 @@ export * from './float'; export * from './bleed'; export * from './visually-hidden'; -export type { HTMLStyledProps, StyledComponent } from '../types/jsx'; +export type { HTMLStyledProps, StyledComponent } from '../types/jsx'; \ No newline at end of file diff --git a/src/styled-system/jsx/is-valid-prop.d.ts b/src/styled-system/jsx/is-valid-prop.d.ts index 32765657..0cb85293 100644 --- a/src/styled-system/jsx/is-valid-prop.d.ts +++ b/src/styled-system/jsx/is-valid-prop.d.ts @@ -1,7 +1,5 @@ /* eslint-disable */ declare const isCssProperty: (value: string) => boolean; -declare const splitCssProps: >( - props: TProps, -) => [Pick, Omit]; +declare const splitCssProps: >(props: TProps) => [Pick, Omit] -export { isCssProperty, splitCssProps }; +export { isCssProperty, splitCssProps }; \ No newline at end of file diff --git a/src/styled-system/jsx/link-box.d.ts b/src/styled-system/jsx/link-box.d.ts index 21d2614a..6f65d991 100644 --- a/src/styled-system/jsx/link-box.d.ts +++ b/src/styled-system/jsx/link-box.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { LinkBoxProperties } from '../patterns/link-box'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface LinkBoxProps - extends LinkBoxProperties, - DistributiveOmit, keyof LinkBoxProperties> {} +export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit, keyof LinkBoxProperties > {} -export declare const LinkBox: FunctionComponent; + +export declare const LinkBox: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/link-overlay.d.ts b/src/styled-system/jsx/link-overlay.d.ts index dffd5b6c..26a28303 100644 --- a/src/styled-system/jsx/link-overlay.d.ts +++ b/src/styled-system/jsx/link-overlay.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { LinkOverlayProperties } from '../patterns/link-overlay'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface LinkOverlayProps - extends LinkOverlayProperties, - DistributiveOmit, keyof LinkOverlayProperties> {} +export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit, keyof LinkOverlayProperties > {} -export declare const LinkOverlay: FunctionComponent; + +export declare const LinkOverlay: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/spacer.d.ts b/src/styled-system/jsx/spacer.d.ts index 15e30080..03fcbcec 100644 --- a/src/styled-system/jsx/spacer.d.ts +++ b/src/styled-system/jsx/spacer.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { SpacerProperties } from '../patterns/spacer'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface SpacerProps - extends SpacerProperties, - DistributiveOmit, keyof SpacerProperties> {} +export interface SpacerProps extends SpacerProperties, DistributiveOmit, keyof SpacerProperties > {} -export declare const Spacer: FunctionComponent; + +export declare const Spacer: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/square.d.ts b/src/styled-system/jsx/square.d.ts index dd60442c..ef3e1ce2 100644 --- a/src/styled-system/jsx/square.d.ts +++ b/src/styled-system/jsx/square.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { SquareProperties } from '../patterns/square'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface SquareProps - extends SquareProperties, - DistributiveOmit, keyof SquareProperties> {} +export interface SquareProps extends SquareProperties, DistributiveOmit, keyof SquareProperties > {} -export declare const Square: FunctionComponent; + +export declare const Square: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/stack.d.ts b/src/styled-system/jsx/stack.d.ts index 40aaa052..13ff1c2f 100644 --- a/src/styled-system/jsx/stack.d.ts +++ b/src/styled-system/jsx/stack.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { StackProperties } from '../patterns/stack'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface StackProps extends StackProperties, DistributiveOmit, keyof StackProperties> {} +export interface StackProps extends StackProperties, DistributiveOmit, keyof StackProperties > {} -export declare const Stack: FunctionComponent; + +export declare const Stack: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/visually-hidden.d.ts b/src/styled-system/jsx/visually-hidden.d.ts index cd90f36f..896eb1fd 100644 --- a/src/styled-system/jsx/visually-hidden.d.ts +++ b/src/styled-system/jsx/visually-hidden.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { VisuallyHiddenProperties } from '../patterns/visually-hidden'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface VisuallyHiddenProps - extends VisuallyHiddenProperties, - DistributiveOmit, keyof VisuallyHiddenProperties> {} +export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit, keyof VisuallyHiddenProperties > {} -export declare const VisuallyHidden: FunctionComponent; + +export declare const VisuallyHidden: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/vstack.d.ts b/src/styled-system/jsx/vstack.d.ts index 6779e991..2e43bfc4 100644 --- a/src/styled-system/jsx/vstack.d.ts +++ b/src/styled-system/jsx/vstack.d.ts @@ -1,11 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { VstackProperties } from '../patterns/vstack'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface VstackProps - extends VstackProperties, - DistributiveOmit, keyof VstackProperties> {} +export interface VstackProps extends VstackProperties, DistributiveOmit, keyof VstackProperties > {} -export declare const VStack: FunctionComponent; + +export declare const VStack: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/jsx/wrap.d.ts b/src/styled-system/jsx/wrap.d.ts index 887141d4..8aa64316 100644 --- a/src/styled-system/jsx/wrap.d.ts +++ b/src/styled-system/jsx/wrap.d.ts @@ -1,9 +1,10 @@ /* eslint-disable */ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent } from 'react' import type { WrapProperties } from '../patterns/wrap'; import type { HTMLStyledProps } from '../types/jsx'; import type { DistributiveOmit } from '../types/system-types'; -export interface WrapProps extends WrapProperties, DistributiveOmit, keyof WrapProperties> {} +export interface WrapProps extends WrapProperties, DistributiveOmit, keyof WrapProperties > {} -export declare const Wrap: FunctionComponent; + +export declare const Wrap: FunctionComponent \ No newline at end of file diff --git a/src/styled-system/patterns/aspect-ratio.d.ts b/src/styled-system/patterns/aspect-ratio.d.ts index 84da1688..cdb4d7a4 100644 --- a/src/styled-system/patterns/aspect-ratio.d.ts +++ b/src/styled-system/patterns/aspect-ratio.d.ts @@ -6,16 +6,16 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface AspectRatioProperties { - ratio?: ConditionalValue; + ratio?: ConditionalValue } -interface AspectRatioStyles - extends AspectRatioProperties, - DistributiveOmit {} + +interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit {} interface AspectRatioPatternFn { - (styles?: AspectRatioStyles): string; - raw: (styles?: AspectRatioStyles) => SystemStyleObject; + (styles?: AspectRatioStyles): string + raw: (styles?: AspectRatioStyles) => SystemStyleObject } + export declare const aspectRatio: AspectRatioPatternFn; diff --git a/src/styled-system/patterns/bleed.d.ts b/src/styled-system/patterns/bleed.d.ts index e7354503..01b4fa54 100644 --- a/src/styled-system/patterns/bleed.d.ts +++ b/src/styled-system/patterns/bleed.d.ts @@ -6,15 +6,17 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface BleedProperties { - inline?: PropertyValue<'marginInline'>; - block?: PropertyValue<'marginBlock'>; + inline?: PropertyValue<'marginInline'> + block?: PropertyValue<'marginBlock'> } -interface BleedStyles extends BleedProperties, DistributiveOmit {} + +interface BleedStyles extends BleedProperties, DistributiveOmit {} interface BleedPatternFn { - (styles?: BleedStyles): string; - raw: (styles?: BleedStyles) => SystemStyleObject; + (styles?: BleedStyles): string + raw: (styles?: BleedStyles) => SystemStyleObject } + export declare const bleed: BleedPatternFn; diff --git a/src/styled-system/patterns/box.d.ts b/src/styled-system/patterns/box.d.ts index cbcd841b..69a67a75 100644 --- a/src/styled-system/patterns/box.d.ts +++ b/src/styled-system/patterns/box.d.ts @@ -5,13 +5,17 @@ import type { PropertyValue } from '../types/prop-type'; import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; -export interface BoxProperties {} +export interface BoxProperties { + +} + -interface BoxStyles extends BoxProperties, DistributiveOmit {} +interface BoxStyles extends BoxProperties, DistributiveOmit {} interface BoxPatternFn { - (styles?: BoxStyles): string; - raw: (styles?: BoxStyles) => SystemStyleObject; + (styles?: BoxStyles): string + raw: (styles?: BoxStyles) => SystemStyleObject } + export declare const box: BoxPatternFn; diff --git a/src/styled-system/patterns/center.d.ts b/src/styled-system/patterns/center.d.ts index 08e2737e..d314248e 100644 --- a/src/styled-system/patterns/center.d.ts +++ b/src/styled-system/patterns/center.d.ts @@ -6,14 +6,16 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface CenterProperties { - inline?: ConditionalValue; + inline?: ConditionalValue } -interface CenterStyles extends CenterProperties, DistributiveOmit {} + +interface CenterStyles extends CenterProperties, DistributiveOmit {} interface CenterPatternFn { - (styles?: CenterStyles): string; - raw: (styles?: CenterStyles) => SystemStyleObject; + (styles?: CenterStyles): string + raw: (styles?: CenterStyles) => SystemStyleObject } + export declare const center: CenterPatternFn; diff --git a/src/styled-system/patterns/circle.d.ts b/src/styled-system/patterns/circle.d.ts index b6473275..45f47952 100644 --- a/src/styled-system/patterns/circle.d.ts +++ b/src/styled-system/patterns/circle.d.ts @@ -6,14 +6,16 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface CircleProperties { - size?: PropertyValue<'width'>; + size?: PropertyValue<'width'> } -interface CircleStyles extends CircleProperties, DistributiveOmit {} + +interface CircleStyles extends CircleProperties, DistributiveOmit {} interface CirclePatternFn { - (styles?: CircleStyles): string; - raw: (styles?: CircleStyles) => SystemStyleObject; + (styles?: CircleStyles): string + raw: (styles?: CircleStyles) => SystemStyleObject } + export declare const circle: CirclePatternFn; diff --git a/src/styled-system/patterns/container.d.ts b/src/styled-system/patterns/container.d.ts index 5d49bded..fb71efcc 100644 --- a/src/styled-system/patterns/container.d.ts +++ b/src/styled-system/patterns/container.d.ts @@ -5,13 +5,17 @@ import type { PropertyValue } from '../types/prop-type'; import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; -export interface ContainerProperties {} +export interface ContainerProperties { + +} + -interface ContainerStyles extends ContainerProperties, DistributiveOmit {} +interface ContainerStyles extends ContainerProperties, DistributiveOmit {} interface ContainerPatternFn { - (styles?: ContainerStyles): string; - raw: (styles?: ContainerStyles) => SystemStyleObject; + (styles?: ContainerStyles): string + raw: (styles?: ContainerStyles) => SystemStyleObject } + export declare const container: ContainerPatternFn; diff --git a/src/styled-system/patterns/divider.d.ts b/src/styled-system/patterns/divider.d.ts index 6245618d..17e45ec2 100644 --- a/src/styled-system/patterns/divider.d.ts +++ b/src/styled-system/patterns/divider.d.ts @@ -6,16 +6,18 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface DividerProperties { - orientation?: ConditionalValue<'horizontal' | 'vertical'>; - thickness?: ConditionalValue; - color?: ConditionalValue; + orientation?: ConditionalValue<"horizontal" | "vertical"> + thickness?: ConditionalValue + color?: ConditionalValue } -interface DividerStyles extends DividerProperties, DistributiveOmit {} + +interface DividerStyles extends DividerProperties, DistributiveOmit {} interface DividerPatternFn { - (styles?: DividerStyles): string; - raw: (styles?: DividerStyles) => SystemStyleObject; + (styles?: DividerStyles): string + raw: (styles?: DividerStyles) => SystemStyleObject } + export declare const divider: DividerPatternFn; diff --git a/src/styled-system/patterns/flex.d.ts b/src/styled-system/patterns/flex.d.ts index 2f29a9b0..026edc7b 100644 --- a/src/styled-system/patterns/flex.d.ts +++ b/src/styled-system/patterns/flex.d.ts @@ -6,20 +6,22 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface FlexProperties { - align?: PropertyValue<'alignItems'>; - justify?: PropertyValue<'justifyContent'>; - direction?: PropertyValue<'flexDirection'>; - wrap?: PropertyValue<'flexWrap'>; - basis?: PropertyValue<'flexBasis'>; - grow?: PropertyValue<'flexGrow'>; - shrink?: PropertyValue<'flexShrink'>; + align?: PropertyValue<'alignItems'> + justify?: PropertyValue<'justifyContent'> + direction?: PropertyValue<'flexDirection'> + wrap?: PropertyValue<'flexWrap'> + basis?: PropertyValue<'flexBasis'> + grow?: PropertyValue<'flexGrow'> + shrink?: PropertyValue<'flexShrink'> } -interface FlexStyles extends FlexProperties, DistributiveOmit {} + +interface FlexStyles extends FlexProperties, DistributiveOmit {} interface FlexPatternFn { - (styles?: FlexStyles): string; - raw: (styles?: FlexStyles) => SystemStyleObject; + (styles?: FlexStyles): string + raw: (styles?: FlexStyles) => SystemStyleObject } + export declare const flex: FlexPatternFn; diff --git a/src/styled-system/patterns/float.d.ts b/src/styled-system/patterns/float.d.ts index c425ac58..8b905e4f 100644 --- a/src/styled-system/patterns/float.d.ts +++ b/src/styled-system/patterns/float.d.ts @@ -6,27 +6,19 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface FloatProperties { - offsetX?: ConditionalValue; - offsetY?: ConditionalValue; - offset?: ConditionalValue; - placement?: ConditionalValue< - | 'bottom-end' - | 'bottom-start' - | 'top-end' - | 'top-start' - | 'bottom-center' - | 'top-center' - | 'middle-center' - | 'middle-end' - | 'middle-start' - >; + offsetX?: ConditionalValue + offsetY?: ConditionalValue + offset?: ConditionalValue + placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"> } -interface FloatStyles extends FloatProperties, DistributiveOmit {} + +interface FloatStyles extends FloatProperties, DistributiveOmit {} interface FloatPatternFn { - (styles?: FloatStyles): string; - raw: (styles?: FloatStyles) => SystemStyleObject; + (styles?: FloatStyles): string + raw: (styles?: FloatStyles) => SystemStyleObject } + export declare const float: FloatPatternFn; diff --git a/src/styled-system/patterns/grid-item.d.ts b/src/styled-system/patterns/grid-item.d.ts index 81bc1361..b9f1c7cb 100644 --- a/src/styled-system/patterns/grid-item.d.ts +++ b/src/styled-system/patterns/grid-item.d.ts @@ -6,19 +6,21 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface GridItemProperties { - colSpan?: ConditionalValue; - rowSpan?: ConditionalValue; - colStart?: ConditionalValue; - rowStart?: ConditionalValue; - colEnd?: ConditionalValue; - rowEnd?: ConditionalValue; + colSpan?: ConditionalValue + rowSpan?: ConditionalValue + colStart?: ConditionalValue + rowStart?: ConditionalValue + colEnd?: ConditionalValue + rowEnd?: ConditionalValue } -interface GridItemStyles extends GridItemProperties, DistributiveOmit {} + +interface GridItemStyles extends GridItemProperties, DistributiveOmit {} interface GridItemPatternFn { - (styles?: GridItemStyles): string; - raw: (styles?: GridItemStyles) => SystemStyleObject; + (styles?: GridItemStyles): string + raw: (styles?: GridItemStyles) => SystemStyleObject } + export declare const gridItem: GridItemPatternFn; diff --git a/src/styled-system/patterns/grid.d.ts b/src/styled-system/patterns/grid.d.ts index 2b346d88..4d8bdeda 100644 --- a/src/styled-system/patterns/grid.d.ts +++ b/src/styled-system/patterns/grid.d.ts @@ -6,18 +6,20 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface GridProperties { - gap?: PropertyValue<'gap'>; - columnGap?: PropertyValue<'gap'>; - rowGap?: PropertyValue<'gap'>; - columns?: ConditionalValue; - minChildWidth?: ConditionalValue; + gap?: PropertyValue<'gap'> + columnGap?: PropertyValue<'gap'> + rowGap?: PropertyValue<'gap'> + columns?: ConditionalValue + minChildWidth?: ConditionalValue } -interface GridStyles extends GridProperties, DistributiveOmit {} + +interface GridStyles extends GridProperties, DistributiveOmit {} interface GridPatternFn { - (styles?: GridStyles): string; - raw: (styles?: GridStyles) => SystemStyleObject; + (styles?: GridStyles): string + raw: (styles?: GridStyles) => SystemStyleObject } + export declare const grid: GridPatternFn; diff --git a/src/styled-system/patterns/hstack.d.ts b/src/styled-system/patterns/hstack.d.ts index f225fe2f..e70d844e 100644 --- a/src/styled-system/patterns/hstack.d.ts +++ b/src/styled-system/patterns/hstack.d.ts @@ -6,15 +6,17 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface HstackProperties { - justify?: PropertyValue<'justifyContent'>; - gap?: PropertyValue<'gap'>; + justify?: PropertyValue<'justifyContent'> + gap?: PropertyValue<'gap'> } -interface HstackStyles extends HstackProperties, DistributiveOmit {} + +interface HstackStyles extends HstackProperties, DistributiveOmit {} interface HstackPatternFn { - (styles?: HstackStyles): string; - raw: (styles?: HstackStyles) => SystemStyleObject; + (styles?: HstackStyles): string + raw: (styles?: HstackStyles) => SystemStyleObject } + export declare const hstack: HstackPatternFn; diff --git a/src/styled-system/patterns/index.d.ts b/src/styled-system/patterns/index.d.ts index ac70b82c..23a7ab02 100644 --- a/src/styled-system/patterns/index.d.ts +++ b/src/styled-system/patterns/index.d.ts @@ -18,4 +18,4 @@ export * from './container'; export * from './divider'; export * from './float'; export * from './bleed'; -export * from './visually-hidden'; +export * from './visually-hidden'; \ No newline at end of file diff --git a/src/styled-system/patterns/link-box.d.ts b/src/styled-system/patterns/link-box.d.ts index f5b3c629..443b70ab 100644 --- a/src/styled-system/patterns/link-box.d.ts +++ b/src/styled-system/patterns/link-box.d.ts @@ -5,13 +5,17 @@ import type { PropertyValue } from '../types/prop-type'; import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; -export interface LinkBoxProperties {} +export interface LinkBoxProperties { + +} + -interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit {} +interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit {} interface LinkBoxPatternFn { - (styles?: LinkBoxStyles): string; - raw: (styles?: LinkBoxStyles) => SystemStyleObject; + (styles?: LinkBoxStyles): string + raw: (styles?: LinkBoxStyles) => SystemStyleObject } + export declare const linkBox: LinkBoxPatternFn; diff --git a/src/styled-system/patterns/link-overlay.d.ts b/src/styled-system/patterns/link-overlay.d.ts index 459733d5..6696fa24 100644 --- a/src/styled-system/patterns/link-overlay.d.ts +++ b/src/styled-system/patterns/link-overlay.d.ts @@ -5,15 +5,17 @@ import type { PropertyValue } from '../types/prop-type'; import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; -export interface LinkOverlayProperties {} +export interface LinkOverlayProperties { + +} + -interface LinkOverlayStyles - extends LinkOverlayProperties, - DistributiveOmit {} +interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit {} interface LinkOverlayPatternFn { - (styles?: LinkOverlayStyles): string; - raw: (styles?: LinkOverlayStyles) => SystemStyleObject; + (styles?: LinkOverlayStyles): string + raw: (styles?: LinkOverlayStyles) => SystemStyleObject } + export declare const linkOverlay: LinkOverlayPatternFn; diff --git a/src/styled-system/patterns/spacer.d.ts b/src/styled-system/patterns/spacer.d.ts index b1adeff4..a5668da5 100644 --- a/src/styled-system/patterns/spacer.d.ts +++ b/src/styled-system/patterns/spacer.d.ts @@ -6,14 +6,16 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface SpacerProperties { - size?: ConditionalValue; + size?: ConditionalValue } -interface SpacerStyles extends SpacerProperties, DistributiveOmit {} + +interface SpacerStyles extends SpacerProperties, DistributiveOmit {} interface SpacerPatternFn { - (styles?: SpacerStyles): string; - raw: (styles?: SpacerStyles) => SystemStyleObject; + (styles?: SpacerStyles): string + raw: (styles?: SpacerStyles) => SystemStyleObject } + export declare const spacer: SpacerPatternFn; diff --git a/src/styled-system/patterns/square.d.ts b/src/styled-system/patterns/square.d.ts index 64f94d05..497db1f9 100644 --- a/src/styled-system/patterns/square.d.ts +++ b/src/styled-system/patterns/square.d.ts @@ -6,14 +6,16 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface SquareProperties { - size?: PropertyValue<'width'>; + size?: PropertyValue<'width'> } -interface SquareStyles extends SquareProperties, DistributiveOmit {} + +interface SquareStyles extends SquareProperties, DistributiveOmit {} interface SquarePatternFn { - (styles?: SquareStyles): string; - raw: (styles?: SquareStyles) => SystemStyleObject; + (styles?: SquareStyles): string + raw: (styles?: SquareStyles) => SystemStyleObject } + export declare const square: SquarePatternFn; diff --git a/src/styled-system/patterns/stack.d.ts b/src/styled-system/patterns/stack.d.ts index f4fd3d2b..4771724f 100644 --- a/src/styled-system/patterns/stack.d.ts +++ b/src/styled-system/patterns/stack.d.ts @@ -6,17 +6,19 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface StackProperties { - align?: PropertyValue<'alignItems'>; - justify?: PropertyValue<'justifyContent'>; - direction?: PropertyValue<'flexDirection'>; - gap?: PropertyValue<'gap'>; + align?: PropertyValue<'alignItems'> + justify?: PropertyValue<'justifyContent'> + direction?: PropertyValue<'flexDirection'> + gap?: PropertyValue<'gap'> } -interface StackStyles extends StackProperties, DistributiveOmit {} + +interface StackStyles extends StackProperties, DistributiveOmit {} interface StackPatternFn { - (styles?: StackStyles): string; - raw: (styles?: StackStyles) => SystemStyleObject; + (styles?: StackStyles): string + raw: (styles?: StackStyles) => SystemStyleObject } + export declare const stack: StackPatternFn; diff --git a/src/styled-system/patterns/visually-hidden.d.ts b/src/styled-system/patterns/visually-hidden.d.ts index b9de7fb9..337bc31f 100644 --- a/src/styled-system/patterns/visually-hidden.d.ts +++ b/src/styled-system/patterns/visually-hidden.d.ts @@ -5,15 +5,17 @@ import type { PropertyValue } from '../types/prop-type'; import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; -export interface VisuallyHiddenProperties {} +export interface VisuallyHiddenProperties { + +} + -interface VisuallyHiddenStyles - extends VisuallyHiddenProperties, - DistributiveOmit {} +interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit {} interface VisuallyHiddenPatternFn { - (styles?: VisuallyHiddenStyles): string; - raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject; + (styles?: VisuallyHiddenStyles): string + raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject } + export declare const visuallyHidden: VisuallyHiddenPatternFn; diff --git a/src/styled-system/patterns/vstack.d.ts b/src/styled-system/patterns/vstack.d.ts index 9f33f10d..92a9772a 100644 --- a/src/styled-system/patterns/vstack.d.ts +++ b/src/styled-system/patterns/vstack.d.ts @@ -6,15 +6,17 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface VstackProperties { - justify?: PropertyValue<'justifyContent'>; - gap?: PropertyValue<'gap'>; + justify?: PropertyValue<'justifyContent'> + gap?: PropertyValue<'gap'> } -interface VstackStyles extends VstackProperties, DistributiveOmit {} + +interface VstackStyles extends VstackProperties, DistributiveOmit {} interface VstackPatternFn { - (styles?: VstackStyles): string; - raw: (styles?: VstackStyles) => SystemStyleObject; + (styles?: VstackStyles): string + raw: (styles?: VstackStyles) => SystemStyleObject } + export declare const vstack: VstackPatternFn; diff --git a/src/styled-system/patterns/wrap.d.ts b/src/styled-system/patterns/wrap.d.ts index 93cecbdb..0e49971c 100644 --- a/src/styled-system/patterns/wrap.d.ts +++ b/src/styled-system/patterns/wrap.d.ts @@ -6,18 +6,20 @@ import type { DistributiveOmit } from '../types/system-types'; import type { Tokens } from '../tokens/index'; export interface WrapProperties { - gap?: PropertyValue<'gap'>; - rowGap?: PropertyValue<'gap'>; - columnGap?: PropertyValue<'gap'>; - align?: PropertyValue<'alignItems'>; - justify?: PropertyValue<'justifyContent'>; + gap?: PropertyValue<'gap'> + rowGap?: PropertyValue<'gap'> + columnGap?: PropertyValue<'gap'> + align?: PropertyValue<'alignItems'> + justify?: PropertyValue<'justifyContent'> } -interface WrapStyles extends WrapProperties, DistributiveOmit {} + +interface WrapStyles extends WrapProperties, DistributiveOmit {} interface WrapPatternFn { - (styles?: WrapStyles): string; - raw: (styles?: WrapStyles) => SystemStyleObject; + (styles?: WrapStyles): string + raw: (styles?: WrapStyles) => SystemStyleObject } + export declare const wrap: WrapPatternFn; diff --git a/src/styled-system/tokens/index.d.ts b/src/styled-system/tokens/index.d.ts index 975df286..c398f48f 100644 --- a/src/styled-system/tokens/index.d.ts +++ b/src/styled-system/tokens/index.d.ts @@ -2,8 +2,8 @@ import type { Token } from './tokens'; export declare const token: { - (path: Token, fallback?: string): string; - var: (path: Token, fallback?: string) => string; -}; + (path: Token, fallback?: string): string + var: (path: Token, fallback?: string) => string +} -export * from './tokens'; +export * from './tokens'; \ No newline at end of file diff --git a/src/styled-system/tokens/keyframes.css b/src/styled-system/tokens/keyframes.css index 554e3c17..12c573b6 100644 --- a/src/styled-system/tokens/keyframes.css +++ b/src/styled-system/tokens/keyframes.css @@ -25,4 +25,20 @@ animation-timing-function: cubic-bezier(0,0,0.2,1) } } + @keyframes gradient { + 0% { + transform: rotate(0deg); + background-position-x: 0%; + background-position-y: 0% + } + 50% { + background-position-x: 50%; + background-position-y: 100% + } + 100% { + transform: rotate(0deg); + background-position-x: 0%; + background-position-y: 0% + } + } } \ No newline at end of file diff --git a/src/styled-system/tokens/tokens.d.ts b/src/styled-system/tokens/tokens.d.ts index 202d17e9..227f6866 100644 --- a/src/styled-system/tokens/tokens.d.ts +++ b/src/styled-system/tokens/tokens.d.ts @@ -1,973 +1,60 @@ /* eslint-disable */ -export type Token = - | 'borders.none' - | 'easings.default' - | 'easings.linear' - | 'easings.in' - | 'easings.out' - | 'easings.in-out' - | 'durations.fastest' - | 'durations.faster' - | 'durations.fast' - | 'durations.normal' - | 'durations.slow' - | 'durations.slower' - | 'durations.slowest' - | 'radii.xs' - | 'radii.sm' - | 'radii.md' - | 'radii.lg' - | 'radii.xl' - | 'radii.2xl' - | 'radii.3xl' - | 'radii.full' - | 'fontWeights.thin' - | 'fontWeights.extralight' - | 'fontWeights.light' - | 'fontWeights.normal' - | 'fontWeights.medium' - | 'fontWeights.semibold' - | 'fontWeights.bold' - | 'fontWeights.extrabold' - | 'fontWeights.black' - | 'lineHeights.none' - | 'lineHeights.tight' - | 'lineHeights.snug' - | 'lineHeights.normal' - | 'lineHeights.relaxed' - | 'lineHeights.loose' - | 'fonts.sans' - | 'fonts.serif' - | 'fonts.mono' - | 'letterSpacings.tighter' - | 'letterSpacings.tight' - | 'letterSpacings.normal' - | 'letterSpacings.wide' - | 'letterSpacings.wider' - | 'letterSpacings.widest' - | 'fontSizes.2xs' - | 'fontSizes.xs' - | 'fontSizes.sm' - | 'fontSizes.md' - | 'fontSizes.lg' - | 'fontSizes.xl' - | 'fontSizes.2xl' - | 'fontSizes.3xl' - | 'fontSizes.4xl' - | 'fontSizes.5xl' - | 'fontSizes.6xl' - | 'fontSizes.7xl' - | 'fontSizes.8xl' - | 'fontSizes.9xl' - | 'shadows.xs' - | 'shadows.sm' - | 'shadows.md' - | 'shadows.lg' - | 'shadows.xl' - | 'shadows.2xl' - | 'shadows.inner' - | 'colors.current' - | 'colors.black' - | 'colors.white' - | 'colors.transparent' - | 'colors.rose.50' - | 'colors.rose.100' - | 'colors.rose.200' - | 'colors.rose.300' - | 'colors.rose.400' - | 'colors.rose.500' - | 'colors.rose.600' - | 'colors.rose.700' - | 'colors.rose.800' - | 'colors.rose.900' - | 'colors.rose.950' - | 'colors.pink.50' - | 'colors.pink.100' - | 'colors.pink.200' - | 'colors.pink.300' - | 'colors.pink.400' - | 'colors.pink.500' - | 'colors.pink.600' - | 'colors.pink.700' - | 'colors.pink.800' - | 'colors.pink.900' - | 'colors.pink.950' - | 'colors.fuchsia.50' - | 'colors.fuchsia.100' - | 'colors.fuchsia.200' - | 'colors.fuchsia.300' - | 'colors.fuchsia.400' - | 'colors.fuchsia.500' - | 'colors.fuchsia.600' - | 'colors.fuchsia.700' - | 'colors.fuchsia.800' - | 'colors.fuchsia.900' - | 'colors.fuchsia.950' - | 'colors.purple.50' - | 'colors.purple.100' - | 'colors.purple.200' - | 'colors.purple.300' - | 'colors.purple.400' - | 'colors.purple.500' - | 'colors.purple.600' - | 'colors.purple.700' - | 'colors.purple.800' - | 'colors.purple.900' - | 'colors.purple.950' - | 'colors.violet.50' - | 'colors.violet.100' - | 'colors.violet.200' - | 'colors.violet.300' - | 'colors.violet.400' - | 'colors.violet.500' - | 'colors.violet.600' - | 'colors.violet.700' - | 'colors.violet.800' - | 'colors.violet.900' - | 'colors.violet.950' - | 'colors.indigo.50' - | 'colors.indigo.100' - | 'colors.indigo.200' - | 'colors.indigo.300' - | 'colors.indigo.400' - | 'colors.indigo.500' - | 'colors.indigo.600' - | 'colors.indigo.700' - | 'colors.indigo.800' - | 'colors.indigo.900' - | 'colors.indigo.950' - | 'colors.blue.50' - | 'colors.blue.100' - | 'colors.blue.200' - | 'colors.blue.300' - | 'colors.blue.400' - | 'colors.blue.500' - | 'colors.blue.600' - | 'colors.blue.700' - | 'colors.blue.800' - | 'colors.blue.900' - | 'colors.blue.950' - | 'colors.sky.50' - | 'colors.sky.100' - | 'colors.sky.200' - | 'colors.sky.300' - | 'colors.sky.400' - | 'colors.sky.500' - | 'colors.sky.600' - | 'colors.sky.700' - | 'colors.sky.800' - | 'colors.sky.900' - | 'colors.sky.950' - | 'colors.cyan.50' - | 'colors.cyan.100' - | 'colors.cyan.200' - | 'colors.cyan.300' - | 'colors.cyan.400' - | 'colors.cyan.500' - | 'colors.cyan.600' - | 'colors.cyan.700' - | 'colors.cyan.800' - | 'colors.cyan.900' - | 'colors.cyan.950' - | 'colors.teal.50' - | 'colors.teal.100' - | 'colors.teal.200' - | 'colors.teal.300' - | 'colors.teal.400' - | 'colors.teal.500' - | 'colors.teal.600' - | 'colors.teal.700' - | 'colors.teal.800' - | 'colors.teal.900' - | 'colors.teal.950' - | 'colors.emerald.50' - | 'colors.emerald.100' - | 'colors.emerald.200' - | 'colors.emerald.300' - | 'colors.emerald.400' - | 'colors.emerald.500' - | 'colors.emerald.600' - | 'colors.emerald.700' - | 'colors.emerald.800' - | 'colors.emerald.900' - | 'colors.emerald.950' - | 'colors.green.50' - | 'colors.green.100' - | 'colors.green.200' - | 'colors.green.300' - | 'colors.green.400' - | 'colors.green.500' - | 'colors.green.600' - | 'colors.green.700' - | 'colors.green.800' - | 'colors.green.900' - | 'colors.green.950' - | 'colors.lime.50' - | 'colors.lime.100' - | 'colors.lime.200' - | 'colors.lime.300' - | 'colors.lime.400' - | 'colors.lime.500' - | 'colors.lime.600' - | 'colors.lime.700' - | 'colors.lime.800' - | 'colors.lime.900' - | 'colors.lime.950' - | 'colors.yellow.50' - | 'colors.yellow.100' - | 'colors.yellow.200' - | 'colors.yellow.300' - | 'colors.yellow.400' - | 'colors.yellow.500' - | 'colors.yellow.600' - | 'colors.yellow.700' - | 'colors.yellow.800' - | 'colors.yellow.900' - | 'colors.yellow.950' - | 'colors.amber.50' - | 'colors.amber.100' - | 'colors.amber.200' - | 'colors.amber.300' - | 'colors.amber.400' - | 'colors.amber.500' - | 'colors.amber.600' - | 'colors.amber.700' - | 'colors.amber.800' - | 'colors.amber.900' - | 'colors.amber.950' - | 'colors.orange.50' - | 'colors.orange.100' - | 'colors.orange.200' - | 'colors.orange.300' - | 'colors.orange.400' - | 'colors.orange.500' - | 'colors.orange.600' - | 'colors.orange.700' - | 'colors.orange.800' - | 'colors.orange.900' - | 'colors.orange.950' - | 'colors.red.50' - | 'colors.red.100' - | 'colors.red.200' - | 'colors.red.300' - | 'colors.red.400' - | 'colors.red.500' - | 'colors.red.600' - | 'colors.red.700' - | 'colors.red.800' - | 'colors.red.900' - | 'colors.red.950' - | 'colors.neutral.50' - | 'colors.neutral.100' - | 'colors.neutral.200' - | 'colors.neutral.300' - | 'colors.neutral.400' - | 'colors.neutral.500' - | 'colors.neutral.600' - | 'colors.neutral.700' - | 'colors.neutral.800' - | 'colors.neutral.900' - | 'colors.neutral.950' - | 'colors.stone.50' - | 'colors.stone.100' - | 'colors.stone.200' - | 'colors.stone.300' - | 'colors.stone.400' - | 'colors.stone.500' - | 'colors.stone.600' - | 'colors.stone.700' - | 'colors.stone.800' - | 'colors.stone.900' - | 'colors.stone.950' - | 'colors.zinc.50' - | 'colors.zinc.100' - | 'colors.zinc.200' - | 'colors.zinc.300' - | 'colors.zinc.400' - | 'colors.zinc.500' - | 'colors.zinc.600' - | 'colors.zinc.700' - | 'colors.zinc.800' - | 'colors.zinc.900' - | 'colors.zinc.950' - | 'colors.gray.50' - | 'colors.gray.100' - | 'colors.gray.200' - | 'colors.gray.300' - | 'colors.gray.400' - | 'colors.gray.500' - | 'colors.gray.600' - | 'colors.gray.700' - | 'colors.gray.800' - | 'colors.gray.900' - | 'colors.gray.950' - | 'colors.slate.50' - | 'colors.slate.100' - | 'colors.slate.200' - | 'colors.slate.300' - | 'colors.slate.400' - | 'colors.slate.500' - | 'colors.slate.600' - | 'colors.slate.700' - | 'colors.slate.800' - | 'colors.slate.900' - | 'colors.slate.950' - | 'blurs.sm' - | 'blurs.base' - | 'blurs.md' - | 'blurs.lg' - | 'blurs.xl' - | 'blurs.2xl' - | 'blurs.3xl' - | 'spacing.0' - | 'spacing.1' - | 'spacing.2' - | 'spacing.3' - | 'spacing.4' - | 'spacing.5' - | 'spacing.6' - | 'spacing.7' - | 'spacing.8' - | 'spacing.9' - | 'spacing.10' - | 'spacing.11' - | 'spacing.12' - | 'spacing.14' - | 'spacing.16' - | 'spacing.20' - | 'spacing.24' - | 'spacing.28' - | 'spacing.32' - | 'spacing.36' - | 'spacing.40' - | 'spacing.44' - | 'spacing.48' - | 'spacing.52' - | 'spacing.56' - | 'spacing.60' - | 'spacing.64' - | 'spacing.72' - | 'spacing.80' - | 'spacing.96' - | 'spacing.0.5' - | 'spacing.1.5' - | 'spacing.2.5' - | 'spacing.3.5' - | 'sizes.0' - | 'sizes.1' - | 'sizes.2' - | 'sizes.3' - | 'sizes.4' - | 'sizes.5' - | 'sizes.6' - | 'sizes.7' - | 'sizes.8' - | 'sizes.9' - | 'sizes.10' - | 'sizes.11' - | 'sizes.12' - | 'sizes.14' - | 'sizes.16' - | 'sizes.20' - | 'sizes.24' - | 'sizes.28' - | 'sizes.32' - | 'sizes.36' - | 'sizes.40' - | 'sizes.44' - | 'sizes.48' - | 'sizes.52' - | 'sizes.56' - | 'sizes.60' - | 'sizes.64' - | 'sizes.72' - | 'sizes.80' - | 'sizes.96' - | 'sizes.0.5' - | 'sizes.1.5' - | 'sizes.2.5' - | 'sizes.3.5' - | 'sizes.xs' - | 'sizes.sm' - | 'sizes.md' - | 'sizes.lg' - | 'sizes.xl' - | 'sizes.2xl' - | 'sizes.3xl' - | 'sizes.4xl' - | 'sizes.5xl' - | 'sizes.6xl' - | 'sizes.7xl' - | 'sizes.8xl' - | 'sizes.prose' - | 'sizes.full' - | 'sizes.min' - | 'sizes.max' - | 'sizes.fit' - | 'sizes.breakpoint-sm' - | 'sizes.breakpoint-md' - | 'sizes.breakpoint-lg' - | 'sizes.breakpoint-xl' - | 'sizes.breakpoint-2xl' - | 'animations.spin' - | 'animations.ping' - | 'animations.pulse' - | 'animations.bounce' - | 'breakpoints.sm' - | 'breakpoints.md' - | 'breakpoints.lg' - | 'breakpoints.xl' - | 'breakpoints.2xl' - | 'spacing.-1' - | 'spacing.-2' - | 'spacing.-3' - | 'spacing.-4' - | 'spacing.-5' - | 'spacing.-6' - | 'spacing.-7' - | 'spacing.-8' - | 'spacing.-9' - | 'spacing.-10' - | 'spacing.-11' - | 'spacing.-12' - | 'spacing.-14' - | 'spacing.-16' - | 'spacing.-20' - | 'spacing.-24' - | 'spacing.-28' - | 'spacing.-32' - | 'spacing.-36' - | 'spacing.-40' - | 'spacing.-44' - | 'spacing.-48' - | 'spacing.-52' - | 'spacing.-56' - | 'spacing.-60' - | 'spacing.-64' - | 'spacing.-72' - | 'spacing.-80' - | 'spacing.-96' - | 'spacing.-0.5' - | 'spacing.-1.5' - | 'spacing.-2.5' - | 'spacing.-3.5' - | 'colors.colorPalette' - | 'colors.colorPalette.50' - | 'colors.colorPalette.100' - | 'colors.colorPalette.200' - | 'colors.colorPalette.300' - | 'colors.colorPalette.400' - | 'colors.colorPalette.500' - | 'colors.colorPalette.600' - | 'colors.colorPalette.700' - | 'colors.colorPalette.800' - | 'colors.colorPalette.900' - | 'colors.colorPalette.950'; +export type Token = "borders.none" | "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "fonts.sans" | "fonts.serif" | "fonts.mono" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.rose.950" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.pink.950" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.950" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.purple.950" | "colors.violet.50" | "colors.violet.100" | "colors.violet.200" | "colors.violet.300" | "colors.violet.400" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.950" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.950" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.blue.950" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.sky.950" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.cyan.950" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.950" | "colors.emerald.50" | "colors.emerald.100" | "colors.emerald.200" | "colors.emerald.300" | "colors.emerald.400" | "colors.emerald.500" | "colors.emerald.600" | "colors.emerald.700" | "colors.emerald.800" | "colors.emerald.900" | "colors.emerald.950" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.green.950" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.950" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.950" | "colors.amber.50" | "colors.amber.100" | "colors.amber.200" | "colors.amber.300" | "colors.amber.400" | "colors.amber.500" | "colors.amber.600" | "colors.amber.700" | "colors.amber.800" | "colors.amber.900" | "colors.amber.950" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.orange.950" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.red.950" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "colors.stone.50" | "colors.stone.100" | "colors.stone.200" | "colors.stone.300" | "colors.stone.400" | "colors.stone.500" | "colors.stone.600" | "colors.stone.700" | "colors.stone.800" | "colors.stone.900" | "colors.stone.950" | "colors.zinc.50" | "colors.zinc.100" | "colors.zinc.200" | "colors.zinc.300" | "colors.zinc.400" | "colors.zinc.500" | "colors.zinc.600" | "colors.zinc.700" | "colors.zinc.800" | "colors.zinc.900" | "colors.zinc.950" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.gray.950" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.slate.950" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950" -export type ColorPalette = - | 'current' - | 'black' - | 'white' - | 'transparent' - | 'rose' - | 'pink' - | 'fuchsia' - | 'purple' - | 'violet' - | 'indigo' - | 'blue' - | 'sky' - | 'cyan' - | 'teal' - | 'emerald' - | 'green' - | 'lime' - | 'yellow' - | 'amber' - | 'orange' - | 'red' - | 'neutral' - | 'stone' - | 'zinc' - | 'gray' - | 'slate'; +export type ColorPalette = "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" -export type BorderToken = 'none'; +export type BorderToken = "none" -export type EasingToken = 'default' | 'linear' | 'in' | 'out' | 'in-out'; +export type EasingToken = "default" | "linear" | "in" | "out" | "in-out" -export type DurationToken = 'fastest' | 'faster' | 'fast' | 'normal' | 'slow' | 'slower' | 'slowest'; +export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" -export type RadiusToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'; +export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" -export type FontWeightToken = - | 'thin' - | 'extralight' - | 'light' - | 'normal' - | 'medium' - | 'semibold' - | 'bold' - | 'extrabold' - | 'black'; +export type FontWeightToken = "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black" -export type LineHeightToken = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose'; +export type LineHeightToken = "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" -export type FontToken = 'sans' | 'serif' | 'mono'; +export type FontToken = "sans" | "serif" | "mono" -export type LetterSpacingToken = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'; +export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" -export type FontSizeToken = - | '2xs' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | '2xl' - | '3xl' - | '4xl' - | '5xl' - | '6xl' - | '7xl' - | '8xl' - | '9xl'; +export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" -export type ShadowToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner'; +export type ShadowToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" -export type ColorToken = - | 'current' - | 'black' - | 'white' - | 'transparent' - | 'rose.50' - | 'rose.100' - | 'rose.200' - | 'rose.300' - | 'rose.400' - | 'rose.500' - | 'rose.600' - | 'rose.700' - | 'rose.800' - | 'rose.900' - | 'rose.950' - | 'pink.50' - | 'pink.100' - | 'pink.200' - | 'pink.300' - | 'pink.400' - | 'pink.500' - | 'pink.600' - | 'pink.700' - | 'pink.800' - | 'pink.900' - | 'pink.950' - | 'fuchsia.50' - | 'fuchsia.100' - | 'fuchsia.200' - | 'fuchsia.300' - | 'fuchsia.400' - | 'fuchsia.500' - | 'fuchsia.600' - | 'fuchsia.700' - | 'fuchsia.800' - | 'fuchsia.900' - | 'fuchsia.950' - | 'purple.50' - | 'purple.100' - | 'purple.200' - | 'purple.300' - | 'purple.400' - | 'purple.500' - | 'purple.600' - | 'purple.700' - | 'purple.800' - | 'purple.900' - | 'purple.950' - | 'violet.50' - | 'violet.100' - | 'violet.200' - | 'violet.300' - | 'violet.400' - | 'violet.500' - | 'violet.600' - | 'violet.700' - | 'violet.800' - | 'violet.900' - | 'violet.950' - | 'indigo.50' - | 'indigo.100' - | 'indigo.200' - | 'indigo.300' - | 'indigo.400' - | 'indigo.500' - | 'indigo.600' - | 'indigo.700' - | 'indigo.800' - | 'indigo.900' - | 'indigo.950' - | 'blue.50' - | 'blue.100' - | 'blue.200' - | 'blue.300' - | 'blue.400' - | 'blue.500' - | 'blue.600' - | 'blue.700' - | 'blue.800' - | 'blue.900' - | 'blue.950' - | 'sky.50' - | 'sky.100' - | 'sky.200' - | 'sky.300' - | 'sky.400' - | 'sky.500' - | 'sky.600' - | 'sky.700' - | 'sky.800' - | 'sky.900' - | 'sky.950' - | 'cyan.50' - | 'cyan.100' - | 'cyan.200' - | 'cyan.300' - | 'cyan.400' - | 'cyan.500' - | 'cyan.600' - | 'cyan.700' - | 'cyan.800' - | 'cyan.900' - | 'cyan.950' - | 'teal.50' - | 'teal.100' - | 'teal.200' - | 'teal.300' - | 'teal.400' - | 'teal.500' - | 'teal.600' - | 'teal.700' - | 'teal.800' - | 'teal.900' - | 'teal.950' - | 'emerald.50' - | 'emerald.100' - | 'emerald.200' - | 'emerald.300' - | 'emerald.400' - | 'emerald.500' - | 'emerald.600' - | 'emerald.700' - | 'emerald.800' - | 'emerald.900' - | 'emerald.950' - | 'green.50' - | 'green.100' - | 'green.200' - | 'green.300' - | 'green.400' - | 'green.500' - | 'green.600' - | 'green.700' - | 'green.800' - | 'green.900' - | 'green.950' - | 'lime.50' - | 'lime.100' - | 'lime.200' - | 'lime.300' - | 'lime.400' - | 'lime.500' - | 'lime.600' - | 'lime.700' - | 'lime.800' - | 'lime.900' - | 'lime.950' - | 'yellow.50' - | 'yellow.100' - | 'yellow.200' - | 'yellow.300' - | 'yellow.400' - | 'yellow.500' - | 'yellow.600' - | 'yellow.700' - | 'yellow.800' - | 'yellow.900' - | 'yellow.950' - | 'amber.50' - | 'amber.100' - | 'amber.200' - | 'amber.300' - | 'amber.400' - | 'amber.500' - | 'amber.600' - | 'amber.700' - | 'amber.800' - | 'amber.900' - | 'amber.950' - | 'orange.50' - | 'orange.100' - | 'orange.200' - | 'orange.300' - | 'orange.400' - | 'orange.500' - | 'orange.600' - | 'orange.700' - | 'orange.800' - | 'orange.900' - | 'orange.950' - | 'red.50' - | 'red.100' - | 'red.200' - | 'red.300' - | 'red.400' - | 'red.500' - | 'red.600' - | 'red.700' - | 'red.800' - | 'red.900' - | 'red.950' - | 'neutral.50' - | 'neutral.100' - | 'neutral.200' - | 'neutral.300' - | 'neutral.400' - | 'neutral.500' - | 'neutral.600' - | 'neutral.700' - | 'neutral.800' - | 'neutral.900' - | 'neutral.950' - | 'stone.50' - | 'stone.100' - | 'stone.200' - | 'stone.300' - | 'stone.400' - | 'stone.500' - | 'stone.600' - | 'stone.700' - | 'stone.800' - | 'stone.900' - | 'stone.950' - | 'zinc.50' - | 'zinc.100' - | 'zinc.200' - | 'zinc.300' - | 'zinc.400' - | 'zinc.500' - | 'zinc.600' - | 'zinc.700' - | 'zinc.800' - | 'zinc.900' - | 'zinc.950' - | 'gray.50' - | 'gray.100' - | 'gray.200' - | 'gray.300' - | 'gray.400' - | 'gray.500' - | 'gray.600' - | 'gray.700' - | 'gray.800' - | 'gray.900' - | 'gray.950' - | 'slate.50' - | 'slate.100' - | 'slate.200' - | 'slate.300' - | 'slate.400' - | 'slate.500' - | 'slate.600' - | 'slate.700' - | 'slate.800' - | 'slate.900' - | 'slate.950' - | 'colorPalette' - | 'colorPalette.50' - | 'colorPalette.100' - | 'colorPalette.200' - | 'colorPalette.300' - | 'colorPalette.400' - | 'colorPalette.500' - | 'colorPalette.600' - | 'colorPalette.700' - | 'colorPalette.800' - | 'colorPalette.900' - | 'colorPalette.950'; +export type ColorToken = "current" | "black" | "white" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" -export type BlurToken = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'; +export type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" -export type SpacingToken = - | '0' - | '1' - | '2' - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | '11' - | '12' - | '14' - | '16' - | '20' - | '24' - | '28' - | '32' - | '36' - | '40' - | '44' - | '48' - | '52' - | '56' - | '60' - | '64' - | '72' - | '80' - | '96' - | '0.5' - | '1.5' - | '2.5' - | '3.5' - | '-1' - | '-2' - | '-3' - | '-4' - | '-5' - | '-6' - | '-7' - | '-8' - | '-9' - | '-10' - | '-11' - | '-12' - | '-14' - | '-16' - | '-20' - | '-24' - | '-28' - | '-32' - | '-36' - | '-40' - | '-44' - | '-48' - | '-52' - | '-56' - | '-60' - | '-64' - | '-72' - | '-80' - | '-96' - | '-0.5' - | '-1.5' - | '-2.5' - | '-3.5'; +export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" -export type SizeToken = - | '0' - | '1' - | '2' - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | '11' - | '12' - | '14' - | '16' - | '20' - | '24' - | '28' - | '32' - | '36' - | '40' - | '44' - | '48' - | '52' - | '56' - | '60' - | '64' - | '72' - | '80' - | '96' - | '0.5' - | '1.5' - | '2.5' - | '3.5' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | '2xl' - | '3xl' - | '4xl' - | '5xl' - | '6xl' - | '7xl' - | '8xl' - | 'prose' - | 'full' - | 'min' - | 'max' - | 'fit' - | 'breakpoint-sm' - | 'breakpoint-md' - | 'breakpoint-lg' - | 'breakpoint-xl' - | 'breakpoint-2xl'; +export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl" -export type AnimationToken = 'spin' | 'ping' | 'pulse' | 'bounce'; +export type AnimationToken = "spin" | "ping" | "pulse" | "bounce" -export type BreakpointToken = 'sm' | 'md' | 'lg' | 'xl' | '2xl'; +export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl" -export type AnimationName = 'spin' | 'ping' | 'pulse' | 'bounce'; +export type AnimationName = "spin" | "ping" | "pulse" | "bounce" | "gradient" export type Tokens = { - borders: BorderToken; - easings: EasingToken; - durations: DurationToken; - radii: RadiusToken; - fontWeights: FontWeightToken; - lineHeights: LineHeightToken; - fonts: FontToken; - letterSpacings: LetterSpacingToken; - fontSizes: FontSizeToken; - shadows: ShadowToken; - colors: ColorToken; - blurs: BlurToken; - spacing: SpacingToken; - sizes: SizeToken; - animations: AnimationToken; - breakpoints: BreakpointToken; - animationName: AnimationName; -} & { [token: string]: never }; - -export type TokenCategory = - | 'zIndex' - | 'opacity' - | 'colors' - | 'fonts' - | 'fontSizes' - | 'fontWeights' - | 'lineHeights' - | 'letterSpacings' - | 'sizes' - | 'shadows' - | 'spacing' - | 'radii' - | 'borders' - | 'durations' - | 'easings' - | 'animations' - | 'blurs' - | 'gradients' - | 'breakpoints' - | 'assets'; + borders: BorderToken + easings: EasingToken + durations: DurationToken + radii: RadiusToken + fontWeights: FontWeightToken + lineHeights: LineHeightToken + fonts: FontToken + letterSpacings: LetterSpacingToken + fontSizes: FontSizeToken + shadows: ShadowToken + colors: ColorToken + blurs: BlurToken + spacing: SpacingToken + sizes: SizeToken + animations: AnimationToken + breakpoints: BreakpointToken + animationName: AnimationName +} & { [token: string]: never } + +export type TokenCategory = "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets" \ No newline at end of file diff --git a/src/styled-system/types/composition.d.ts b/src/styled-system/types/composition.d.ts index 676694b1..08b2ed97 100644 --- a/src/styled-system/types/composition.d.ts +++ b/src/styled-system/types/composition.d.ts @@ -1,13 +1,13 @@ /* eslint-disable */ -import type { CompositionStyleObject } from './system-types'; +import type { CompositionStyleObject } from './system-types'; interface Token { - value: T; - description?: string; + value: T + description?: string } interface Recursive { - [key: string]: Recursive | T; + [key: string]: Recursive | T } /* ----------------------------------------------------------------------------- @@ -42,11 +42,11 @@ type TextStyleProperty = | 'hyphenateCharacter' | 'textOrientation' | 'textOverflow' - | 'textRendering'; + | 'textRendering' -export type TextStyle = CompositionStyleObject; +export type TextStyle = CompositionStyleObject -export type TextStyles = Recursive>; +export type TextStyles = Recursive> /* ----------------------------------------------------------------------------- * Layer styles @@ -62,13 +62,13 @@ type Placement = | 'InlineStart' | 'InlineEnd' | 'BlockStart' - | 'BlockEnd'; + | 'BlockEnd' type Radius = | `Top${'Right' | 'Left'}` | `Bottom${'Right' | 'Left'}` | `Start${'Start' | 'End'}` - | `End${'Start' | 'End'}`; + | `End${'Start' | 'End'}` type LayerStyleProperty = | 'background' @@ -99,13 +99,13 @@ type LayerStyleProperty = | `border${Placement}Color` | `border${Placement}Style` | 'padding' - | `padding${Placement}`; + | `padding${Placement}` -export type LayerStyle = CompositionStyleObject; +export type LayerStyle = CompositionStyleObject -export type LayerStyles = Recursive>; +export type LayerStyles = Recursive> export interface CompositionStyles { - textStyles: TextStyles; - layerStyles: LayerStyles; + textStyles: TextStyles + layerStyles: LayerStyles } diff --git a/src/styled-system/types/conditions.d.ts b/src/styled-system/types/conditions.d.ts index 64b93ca3..eb1aa8cb 100644 --- a/src/styled-system/types/conditions.d.ts +++ b/src/styled-system/types/conditions.d.ts @@ -2,251 +2,251 @@ import type { AnySelector, Selectors } from './selectors'; export interface Conditions { - /** `&:is(:hover, [data-hover])` */ - _hover: string; - /** `&:is(:focus, [data-focus])` */ - _focus: string; - /** `&:focus-within` */ - _focusWithin: string; - /** `&:is(:focus-visible, [data-focus-visible])` */ - _focusVisible: string; - /** `&:is(:disabled, [disabled], [data-disabled])` */ - _disabled: string; - /** `&:is(:active, [data-active])` */ - _active: string; - /** `&:visited` */ - _visited: string; - /** `&:target` */ - _target: string; - /** `&:is(:read-only, [data-read-only])` */ - _readOnly: string; - /** `&:read-write` */ - _readWrite: string; - /** `&:is(:empty, [data-empty])` */ - _empty: string; - /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ - _checked: string; - /** `&:enabled` */ - _enabled: string; - /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ - _expanded: string; - /** `&[data-highlighted]` */ - _highlighted: string; - /** `&::before` */ - _before: string; - /** `&::after` */ - _after: string; - /** `&::first-letter` */ - _firstLetter: string; - /** `&::first-line` */ - _firstLine: string; - /** `&::marker` */ - _marker: string; - /** `&::selection` */ - _selection: string; - /** `&::file-selector-button` */ - _file: string; - /** `&::backdrop` */ - _backdrop: string; - /** `&:first-child` */ - _first: string; - /** `&:last-child` */ - _last: string; - /** `&:only-child` */ - _only: string; - /** `&:nth-child(even)` */ - _even: string; - /** `&:nth-child(odd)` */ - _odd: string; - /** `&:first-of-type` */ - _firstOfType: string; - /** `&:last-of-type` */ - _lastOfType: string; - /** `&:only-of-type` */ - _onlyOfType: string; - /** `.peer:is(:focus, [data-focus]) ~ &` */ - _peerFocus: string; - /** `.peer:is(:hover, [data-hover]) ~ &` */ - _peerHover: string; - /** `.peer:is(:active, [data-active]) ~ &` */ - _peerActive: string; - /** `.peer:focus-within ~ &` */ - _peerFocusWithin: string; - /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ - _peerFocusVisible: string; - /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ - _peerDisabled: string; - /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ - _peerChecked: string; - /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ - _peerInvalid: string; - /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ - _peerExpanded: string; - /** `.peer:placeholder-shown ~ &` */ - _peerPlaceholderShown: string; - /** `.group:is(:focus, [data-focus]) &` */ - _groupFocus: string; - /** `.group:is(:hover, [data-hover]) &` */ - _groupHover: string; - /** `.group:is(:active, [data-active]) &` */ - _groupActive: string; - /** `.group:focus-within &` */ - _groupFocusWithin: string; - /** `.group:is(:focus-visible, [data-focus-visible]) &` */ - _groupFocusVisible: string; - /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ - _groupDisabled: string; - /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ - _groupChecked: string; - /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ - _groupExpanded: string; - /** `.group:invalid &` */ - _groupInvalid: string; - /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")` */ - _indeterminate: string; - /** `&:is(:required, [data-required], [aria-required=true])` */ - _required: string; - /** `&:is(:valid, [data-valid])` */ - _valid: string; - /** `&:is(:invalid, [data-invalid])` */ - _invalid: string; - /** `&:autofill` */ - _autofill: string; - /** `&:in-range` */ - _inRange: string; - /** `&:out-of-range` */ - _outOfRange: string; - /** `&::placeholder` */ - _placeholder: string; - /** `&:placeholder-shown` */ - _placeholderShown: string; - /** `&:is([aria-pressed=true], [data-pressed])` */ - _pressed: string; - /** `&:is([aria-selected=true], [data-selected])` */ - _selected: string; - /** `&:default` */ - _default: string; - /** `&:optional` */ - _optional: string; - /** `&:is([open], [data-open], [data-state="open"])` */ - _open: string; - /** `&:is([closed], [data-closed], [data-state="closed"])` */ - _closed: string; - /** `&:fullscreen` */ - _fullscreen: string; - /** `&:is([data-loading], [aria-busy=true])` */ - _loading: string; - /** `&[aria-current=page]` */ - _currentPage: string; - /** `&[aria-current=step]` */ - _currentStep: string; - /** `@media (prefers-reduced-motion: reduce)` */ - _motionReduce: string; - /** `@media (prefers-reduced-motion: no-preference)` */ - _motionSafe: string; - /** `@media print` */ - _print: string; - /** `@media (orientation: landscape)` */ - _landscape: string; - /** `@media (orientation: portrait)` */ - _portrait: string; - /** ` &.dark, .dark &` */ - _dark: string; - /** ` &.light, .light &` */ - _light: string; - /** `@media (prefers-color-scheme: dark)` */ - _osDark: string; - /** `@media (prefers-color-scheme: light)` */ - _osLight: string; - /** `@media (forced-colors: active)` */ - _highContrast: string; - /** `@media (prefers-contrast: less)` */ - _lessContrast: string; - /** `@media (prefers-contrast: more)` */ - _moreContrast: string; - /** `[dir=ltr] &` */ - _ltr: string; - /** `[dir=rtl] &` */ - _rtl: string; - /** `&::-webkit-scrollbar` */ - _scrollbar: string; - /** `&::-webkit-scrollbar-thumb` */ - _scrollbarThumb: string; - /** `&::-webkit-scrollbar-track` */ - _scrollbarTrack: string; - /** `&[data-orientation=horizontal]` */ - _horizontal: string; - /** `&[data-orientation=vertical]` */ - _vertical: string; - /** `@media screen and (min-width: 40em)` */ - sm: string; - /** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */ - smOnly: string; - /** `@media screen and (max-width: 39.9975em)` */ - smDown: string; - /** `@media screen and (min-width: 48em)` */ - md: string; - /** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */ - mdOnly: string; - /** `@media screen and (max-width: 47.9975em)` */ - mdDown: string; - /** `@media screen and (min-width: 64em)` */ - lg: string; - /** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */ - lgOnly: string; - /** `@media screen and (max-width: 63.9975em)` */ - lgDown: string; - /** `@media screen and (min-width: 80em)` */ - xl: string; - /** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */ - xlOnly: string; - /** `@media screen and (max-width: 79.9975em)` */ - xlDown: string; - /** `@media screen and (min-width: 96em)` */ - '2xl': string; - /** `@media screen and (min-width: 96em)` */ - '2xlOnly': string; - /** `@media screen and (max-width: 95.9975em)` */ - '2xlDown': string; - /** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */ - smToMd: string; - /** `@media screen and (min-width: 40em) and (max-width: 63.9975em)` */ - smToLg: string; - /** `@media screen and (min-width: 40em) and (max-width: 79.9975em)` */ - smToXl: string; - /** `@media screen and (min-width: 40em) and (max-width: 95.9975em)` */ - smTo2xl: string; - /** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */ - mdToLg: string; - /** `@media screen and (min-width: 48em) and (max-width: 79.9975em)` */ - mdToXl: string; - /** `@media screen and (min-width: 48em) and (max-width: 95.9975em)` */ - mdTo2xl: string; - /** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */ - lgToXl: string; - /** `@media screen and (min-width: 64em) and (max-width: 95.9975em)` */ - lgTo2xl: string; - /** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */ - xlTo2xl: string; - /** The base (=no conditions) styles to apply */ - base: string; + /** `&:is(:hover, [data-hover])` */ + "_hover": string + /** `&:is(:focus, [data-focus])` */ + "_focus": string + /** `&:focus-within` */ + "_focusWithin": string + /** `&:is(:focus-visible, [data-focus-visible])` */ + "_focusVisible": string + /** `&:is(:disabled, [disabled], [data-disabled])` */ + "_disabled": string + /** `&:is(:active, [data-active])` */ + "_active": string + /** `&:visited` */ + "_visited": string + /** `&:target` */ + "_target": string + /** `&:is(:read-only, [data-read-only])` */ + "_readOnly": string + /** `&:read-write` */ + "_readWrite": string + /** `&:is(:empty, [data-empty])` */ + "_empty": string + /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ + "_checked": string + /** `&:enabled` */ + "_enabled": string + /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ + "_expanded": string + /** `&[data-highlighted]` */ + "_highlighted": string + /** `&::before` */ + "_before": string + /** `&::after` */ + "_after": string + /** `&::first-letter` */ + "_firstLetter": string + /** `&::first-line` */ + "_firstLine": string + /** `&::marker` */ + "_marker": string + /** `&::selection` */ + "_selection": string + /** `&::file-selector-button` */ + "_file": string + /** `&::backdrop` */ + "_backdrop": string + /** `&:first-child` */ + "_first": string + /** `&:last-child` */ + "_last": string + /** `&:only-child` */ + "_only": string + /** `&:nth-child(even)` */ + "_even": string + /** `&:nth-child(odd)` */ + "_odd": string + /** `&:first-of-type` */ + "_firstOfType": string + /** `&:last-of-type` */ + "_lastOfType": string + /** `&:only-of-type` */ + "_onlyOfType": string + /** `.peer:is(:focus, [data-focus]) ~ &` */ + "_peerFocus": string + /** `.peer:is(:hover, [data-hover]) ~ &` */ + "_peerHover": string + /** `.peer:is(:active, [data-active]) ~ &` */ + "_peerActive": string + /** `.peer:focus-within ~ &` */ + "_peerFocusWithin": string + /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ + "_peerFocusVisible": string + /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ + "_peerDisabled": string + /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ + "_peerChecked": string + /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ + "_peerInvalid": string + /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ + "_peerExpanded": string + /** `.peer:placeholder-shown ~ &` */ + "_peerPlaceholderShown": string + /** `.group:is(:focus, [data-focus]) &` */ + "_groupFocus": string + /** `.group:is(:hover, [data-hover]) &` */ + "_groupHover": string + /** `.group:is(:active, [data-active]) &` */ + "_groupActive": string + /** `.group:focus-within &` */ + "_groupFocusWithin": string + /** `.group:is(:focus-visible, [data-focus-visible]) &` */ + "_groupFocusVisible": string + /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ + "_groupDisabled": string + /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ + "_groupChecked": string + /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ + "_groupExpanded": string + /** `.group:invalid &` */ + "_groupInvalid": string + /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")` */ + "_indeterminate": string + /** `&:is(:required, [data-required], [aria-required=true])` */ + "_required": string + /** `&:is(:valid, [data-valid])` */ + "_valid": string + /** `&:is(:invalid, [data-invalid])` */ + "_invalid": string + /** `&:autofill` */ + "_autofill": string + /** `&:in-range` */ + "_inRange": string + /** `&:out-of-range` */ + "_outOfRange": string + /** `&::placeholder` */ + "_placeholder": string + /** `&:placeholder-shown` */ + "_placeholderShown": string + /** `&:is([aria-pressed=true], [data-pressed])` */ + "_pressed": string + /** `&:is([aria-selected=true], [data-selected])` */ + "_selected": string + /** `&:default` */ + "_default": string + /** `&:optional` */ + "_optional": string + /** `&:is([open], [data-open], [data-state="open"])` */ + "_open": string + /** `&:is([closed], [data-closed], [data-state="closed"])` */ + "_closed": string + /** `&:fullscreen` */ + "_fullscreen": string + /** `&:is([data-loading], [aria-busy=true])` */ + "_loading": string + /** `&[aria-current=page]` */ + "_currentPage": string + /** `&[aria-current=step]` */ + "_currentStep": string + /** `@media (prefers-reduced-motion: reduce)` */ + "_motionReduce": string + /** `@media (prefers-reduced-motion: no-preference)` */ + "_motionSafe": string + /** `@media print` */ + "_print": string + /** `@media (orientation: landscape)` */ + "_landscape": string + /** `@media (orientation: portrait)` */ + "_portrait": string + /** ` &.dark, .dark &` */ + "_dark": string + /** ` &.light, .light &` */ + "_light": string + /** `@media (prefers-color-scheme: dark)` */ + "_osDark": string + /** `@media (prefers-color-scheme: light)` */ + "_osLight": string + /** `@media (forced-colors: active)` */ + "_highContrast": string + /** `@media (prefers-contrast: less)` */ + "_lessContrast": string + /** `@media (prefers-contrast: more)` */ + "_moreContrast": string + /** `[dir=ltr] &` */ + "_ltr": string + /** `[dir=rtl] &` */ + "_rtl": string + /** `&::-webkit-scrollbar` */ + "_scrollbar": string + /** `&::-webkit-scrollbar-thumb` */ + "_scrollbarThumb": string + /** `&::-webkit-scrollbar-track` */ + "_scrollbarTrack": string + /** `&[data-orientation=horizontal]` */ + "_horizontal": string + /** `&[data-orientation=vertical]` */ + "_vertical": string + /** `@media screen and (min-width: 40em)` */ + "sm": string + /** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */ + "smOnly": string + /** `@media screen and (max-width: 39.9975em)` */ + "smDown": string + /** `@media screen and (min-width: 48em)` */ + "md": string + /** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */ + "mdOnly": string + /** `@media screen and (max-width: 47.9975em)` */ + "mdDown": string + /** `@media screen and (min-width: 64em)` */ + "lg": string + /** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */ + "lgOnly": string + /** `@media screen and (max-width: 63.9975em)` */ + "lgDown": string + /** `@media screen and (min-width: 80em)` */ + "xl": string + /** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */ + "xlOnly": string + /** `@media screen and (max-width: 79.9975em)` */ + "xlDown": string + /** `@media screen and (min-width: 96em)` */ + "2xl": string + /** `@media screen and (min-width: 96em)` */ + "2xlOnly": string + /** `@media screen and (max-width: 95.9975em)` */ + "2xlDown": string + /** `@media screen and (min-width: 40em) and (max-width: 47.9975em)` */ + "smToMd": string + /** `@media screen and (min-width: 40em) and (max-width: 63.9975em)` */ + "smToLg": string + /** `@media screen and (min-width: 40em) and (max-width: 79.9975em)` */ + "smToXl": string + /** `@media screen and (min-width: 40em) and (max-width: 95.9975em)` */ + "smTo2xl": string + /** `@media screen and (min-width: 48em) and (max-width: 63.9975em)` */ + "mdToLg": string + /** `@media screen and (min-width: 48em) and (max-width: 79.9975em)` */ + "mdToXl": string + /** `@media screen and (min-width: 48em) and (max-width: 95.9975em)` */ + "mdTo2xl": string + /** `@media screen and (min-width: 64em) and (max-width: 79.9975em)` */ + "lgToXl": string + /** `@media screen and (min-width: 64em) and (max-width: 95.9975em)` */ + "lgTo2xl": string + /** `@media screen and (min-width: 80em) and (max-width: 95.9975em)` */ + "xlTo2xl": string + /** The base (=no conditions) styles to apply */ + "base": string } -export type Condition = keyof Conditions; +export type Condition = keyof Conditions export type Conditional = | V | Array | { - [K in keyof Conditions]?: Conditional; - }; + [K in keyof Conditions]?: Conditional + } -export type ConditionalValue = Conditional; +export type ConditionalValue = Conditional export type Nested

= P & { - [K in Selectors]?: Nested

; + [K in Selectors]?: Nested

} & { - [K in AnySelector]?: Nested

; + [K in AnySelector]?: Nested

} & { - [K in keyof Conditions]?: Nested

; -}; + [K in keyof Conditions]?: Nested

+} diff --git a/src/styled-system/types/csstype.d.ts b/src/styled-system/types/csstype.d.ts index 55a6e489..11f95c0b 100644 --- a/src/styled-system/types/csstype.d.ts +++ b/src/styled-system/types/csstype.d.ts @@ -4,8 +4,8 @@ export {}; export type PropertyValue = TValue extends Array ? Array : TValue extends infer TUnpacked & {} - ? TUnpacked - : TValue; + ? TUnpacked + : TValue; export type Fallback = { [P in keyof T]: T[P] | NonNullable[] }; @@ -1915,7 +1915,7 @@ export interface StandardLonghandProperties || || || || stylistic( ) || historical-forms || styleset( # ) || character-variant( # ) || swash( ) || ornaments( ) || annotation( ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || || || || ordinal || slashed-zero || || || ruby ]` + * **Syntax**: `normal | none | [ || || || || stylistic( ) || historical-forms || styleset( # ) || character-variant( # ) || swash( ) || ornaments( ) || annotation( ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || || || || ordinal || slashed-zero || || || ruby ]` * * **Initial value**: `normal` * @@ -1983,7 +1983,7 @@ export interface StandardLonghandProperties || || || ]` + * **Syntax**: `normal | none | [ || || || ]` * * **Initial value**: `normal` * @@ -7162,7 +7162,7 @@ export interface VendorLonghandProperties || || || ]` + * **Syntax**: `normal | none | [ || || || ]` * * **Initial value**: `normal` */ @@ -7816,9 +7816,7 @@ export interface VendorShorthandProperties | undefined; } -export interface VendorProperties - extends VendorLonghandProperties, - VendorShorthandProperties {} +export interface VendorProperties extends VendorLonghandProperties, VendorShorthandProperties {} export interface ObsoleteProperties { /** @@ -8918,7 +8916,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "animation-delay"?: Property.AnimationDelay | undefined; /** * The **`animation-direction`** CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. * @@ -9021,7 +9019,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "animation-duration"?: Property.AnimationDuration | undefined; /** * The **`animation-fill-mode`** CSS property sets how a CSS animation applies styles to its target before and after its execution. * @@ -9051,7 +9049,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "background-position-x"?: Property.BackgroundPositionX | undefined; /** * The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`. * @@ -9296,7 +9294,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "background-position-y"?: Property.BackgroundPositionY | undefined; /** * The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all. * @@ -9310,7 +9308,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "background-size"?: Property.BackgroundSize | undefined; /** * **Syntax**: `clip | ellipsis | ` * * **Initial value**: `clip` */ - 'block-overflow'?: Property.BlockOverflow | undefined; + "block-overflow"?: Property.BlockOverflow | undefined; /** * The **`block-size`** CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `width` or the `height` property, depending on the value of `writing-mode`. * @@ -9345,7 +9343,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "block-size"?: Property.BlockSize | undefined; /** * The **`border-block-color`** CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9359,7 +9357,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-block-end-width"?: Property.BorderBlockEndWidth | undefined; /** * The **`border-block-start-color`** CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9415,7 +9413,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-block-start-width"?: Property.BorderBlockStartWidth | undefined; /** * The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9457,7 +9455,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-block-width"?: Property.BorderBlockWidth | undefined; /** * The **`border-bottom-color`** CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties `border-color` or `border-bottom`. * @@ -9485,7 +9483,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-bottom-left-radius"?: Property.BorderBottomLeftRadius | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -9515,7 +9513,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-bottom-right-radius"?: Property.BorderBottomRightRadius | undefined; /** * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`. * @@ -9529,7 +9527,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-bottom-width"?: Property.BorderBottomWidth | undefined; /** * The **`border-collapse`** CSS property sets whether cells inside a `` have shared or separate borders. * @@ -9557,7 +9555,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-end-end-radius"?: Property.BorderEndEndRadius | undefined; /** * The **`border-end-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode. * @@ -9585,7 +9583,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-end-start-radius"?: Property.BorderEndStartRadius | undefined; /** * The **`border-image-outset`** CSS property sets the distance by which an element's border image is set out from its border box. * @@ -9599,7 +9597,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-image-outset"?: Property.BorderImageOutset | undefined; /** * The **`border-image-repeat`** CSS property defines how the edge regions and middle region of a source image are adjusted to fit the dimensions of an element's border image. The middle region can be displayed by using the keyword "fill" in the border-image-slice property. * @@ -9613,7 +9611,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-image-width"?: Property.BorderImageWidth | undefined; /** * The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9669,7 +9667,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-inline-end-width"?: Property.BorderInlineEndWidth | undefined; /** * The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9729,7 +9727,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-inline-start-width"?: Property.BorderInlineStartWidth | undefined; /** * The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9772,7 +9770,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-inline-width"?: Property.BorderInlineWidth | undefined; /** * The **`border-left-color`** CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties `border-color` or `border-left`. * @@ -9800,7 +9798,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-left-width"?: Property.BorderLeftWidth | undefined; /** * The **`border-right-color`** CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties `border-color` or `border-right`. * @@ -9842,7 +9840,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-right-width"?: Property.BorderRightWidth | undefined; /** * The **`border-spacing`** CSS property sets the distance between the borders of adjacent cells in a `
`. This property applies only when `border-collapse` is `separate`. * @@ -9884,7 +9882,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-spacing"?: Property.BorderSpacing | undefined; /** * The **`border-start-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode. * @@ -9898,7 +9896,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-start-end-radius"?: Property.BorderStartEndRadius | undefined; /** * The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode. * @@ -9912,7 +9910,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-start-start-radius"?: Property.BorderStartStartRadius | undefined; /** * The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`. * @@ -9926,7 +9924,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-top-left-radius"?: Property.BorderTopLeftRadius | undefined; /** * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -9956,7 +9954,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-top-right-radius"?: Property.BorderTopRightRadius | undefined; /** * The **`border-top-style`** CSS property sets the line style of an element's top `border`. * @@ -9970,7 +9968,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-top-width"?: Property.BorderTopWidth | undefined; /** * The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements. * @@ -10012,7 +10010,7 @@ export interface StandardLonghandPropertiesHyphen` on the specified side. The values are relative to the `writing-mode` of the table. * @@ -10098,7 +10096,7 @@ export interface StandardLonghandPropertiesHyphen` or those with the `contenteditable` attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property. * @@ -10112,13 +10110,13 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "column-gap"?: Property.ColumnGap | undefined; /** * The **`column-rule-color`** CSS property sets the color of the line drawn between columns in a multi-column layout. * @@ -10249,7 +10247,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "column-rule-width"?: Property.ColumnRuleWidth | undefined; /** * The **`column-span`** CSS property makes it possible for an element to span across all columns when its value is set to `all`. * @@ -10294,7 +10292,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "column-width"?: Property.ColumnWidth | undefined; /** * The **`contain`** CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes. * @@ -10337,7 +10335,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-block-size"?: Property.ContainIntrinsicBlockSize | undefined; /** * The **`contain-intrinsic-length`** CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment. * @@ -10351,7 +10349,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-height"?: Property.ContainIntrinsicHeight | undefined; /** * The **`contain-intrinsic-inline-size`** CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment. * @@ -10365,7 +10363,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-inline-size"?: Property.ContainIntrinsicInlineSize | undefined; /** * The **`contain-intrinsic-width`** CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment. * @@ -10379,7 +10377,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-width"?: Property.ContainIntrinsicWidth | undefined; /** * The **container-name** CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query will apply styles to elements based on the size of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the `@container` at-rule instead of the nearest ancestor with containment. * @@ -10393,7 +10391,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "flex-basis"?: Property.FlexBasis | undefined; /** * The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). * @@ -10578,7 +10576,7 @@ export interface StandardLonghandPropertiesHyphen` * @@ -10722,7 +10720,7 @@ export interface StandardLonghandPropertiesHyphen` units, such as `em`, `ex`, and so forth. * @@ -10736,7 +10734,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "font-size"?: Property.FontSize | undefined; /** * The **`font-size-adjust`** CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters). * @@ -10750,7 +10748,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "font-smooth"?: Property.FontSmooth | undefined; /** * The **`font-stretch`** CSS property selects a normal, condensed, or expanded face from a font. * @@ -10778,7 +10776,7 @@ export interface StandardLonghandPropertiesHyphen || || || || stylistic( ) || historical-forms || styleset( # ) || character-variant( # ) || swash( ) || ornaments( ) || annotation( ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || || || || ordinal || slashed-zero || || || ruby ]` + * **Syntax**: `normal | none | [ || || || || stylistic( ) || historical-forms || styleset( # ) || character-variant( # ) || swash( ) || ornaments( ) || annotation( ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || || || || ordinal || slashed-zero || || || ruby ]` * * **Initial value**: `normal` * @@ -10820,7 +10818,7 @@ export interface StandardLonghandPropertiesHyphen || || || ]` + * **Syntax**: `normal | none | [ || || || ]` * * **Initial value**: `normal` * @@ -10889,7 +10887,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "grid-auto-columns"?: Property.GridAutoColumns | undefined; /** * The **`grid-auto-flow`** CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. * @@ -10988,7 +10986,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "grid-auto-rows"?: Property.GridAutoRows | undefined; /** * The **`grid-column-end`** CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. * @@ -11016,7 +11014,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "grid-template-columns"?: Property.GridTemplateColumns | undefined; /** * The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows. * @@ -11100,7 +11098,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "grid-template-rows"?: Property.GridTemplateRows | undefined; /** * The **`hanging-punctuation`** CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box. * @@ -11114,7 +11112,7 @@ export interface StandardLonghandPropertiesHyphen ] && snap?` * * **Initial value**: `1dppx` */ - 'image-resolution'?: Property.ImageResolution | undefined; + "image-resolution"?: Property.ImageResolution | undefined; /** * The `initial-letter` CSS property sets styling for dropped, raised, and sunken initial letters. * @@ -11218,7 +11216,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "inline-size"?: Property.InlineSize | undefined; /** * **Syntax**: `auto | none` * * **Initial value**: `auto` */ - 'input-security'?: Property.InputSecurity | undefined; + "input-security"?: Property.InputSecurity | undefined; /** * The **`inset-block-end`** CSS property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -11252,7 +11250,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "inset-block-end"?: Property.InsetBlockEnd | undefined; /** * The **`inset-block-start`** CSS property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -11266,7 +11264,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "inset-block-start"?: Property.InsetBlockStart | undefined; /** * The **`inset-inline-end`** CSS property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -11280,7 +11278,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "inset-inline-end"?: Property.InsetInlineEnd | undefined; /** * The **`inset-inline-start`** CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -11294,7 +11292,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "inset-inline-start"?: Property.InsetInlineStart | undefined; /** * The **`isolation`** CSS property determines whether an element must create a new stacking context. * @@ -11323,7 +11321,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "letter-spacing"?: Property.LetterSpacing | undefined; /** * The **`line-break`** CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols. * @@ -11408,7 +11406,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "line-height"?: Property.LineHeight | undefined; /** * The **`line-height-step`** CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit. * @@ -11436,7 +11434,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "line-height-step"?: Property.LineHeightStep | undefined; /** * The **`list-style-image`** CSS property sets an image to be used as the list item marker. * @@ -11450,7 +11448,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-block-end"?: Property.MarginBlockEnd | undefined; /** * The **`margin-block-start`** CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. * @@ -11506,7 +11504,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-block-start"?: Property.MarginBlockStart | undefined; /** * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer. * @@ -11520,7 +11518,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-bottom"?: Property.MarginBottom | undefined; /** * The **`margin-inline-end`** CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -11535,7 +11533,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-inline-end"?: Property.MarginInlineEnd | undefined; /** * The **`margin-inline-start`** CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -11550,7 +11548,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-inline-start"?: Property.MarginInlineStart | undefined; /** * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. * @@ -11564,7 +11562,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-left"?: Property.MarginLeft | undefined; /** * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. * @@ -11578,7 +11576,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-right"?: Property.MarginRight | undefined; /** * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. * @@ -11592,7 +11590,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "margin-top"?: Property.MarginTop | undefined; /** * The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container's edges. * @@ -11606,7 +11604,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "mask-border-outset"?: Property.MaskBorderOutset | undefined; /** * The **`mask-border-repeat`** CSS property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border. * @@ -11642,7 +11640,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "mask-border-width"?: Property.MaskBorderWidth | undefined; /** * The **`mask-clip`** CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area. * @@ -11699,7 +11697,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "mask-position"?: Property.MaskPosition | undefined; /** * The **`mask-repeat`** CSS property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all. * @@ -11787,7 +11785,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "mask-size"?: Property.MaskSize | undefined; /** * The **`mask-type`** CSS property sets whether an SVG `` element is used as a _luminance_ or an _alpha_ mask. It applies to the `` element itself. * @@ -11816,7 +11814,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "max-block-size"?: Property.MaxBlockSize | undefined; /** * The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. * @@ -11886,7 +11884,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "max-height"?: Property.MaxHeight | undefined; /** * The **`max-inline-size`** CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the `max-width` or the `max-height` property, depending on the value of `writing-mode`. * @@ -11901,13 +11899,13 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "max-inline-size"?: Property.MaxInlineSize | undefined; /** * **Syntax**: `none | ` * * **Initial value**: `none` */ - 'max-lines'?: Property.MaxLines | undefined; + "max-lines"?: Property.MaxLines | undefined; /** * The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. * @@ -11921,7 +11919,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "max-width"?: Property.MaxWidth | undefined; /** * The **`min-block-size`** CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `min-width` or the `min-height` property, depending on the value of `writing-mode`. * @@ -11935,7 +11933,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "min-block-size"?: Property.MinBlockSize | undefined; /** * The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. * @@ -11949,7 +11947,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "min-height"?: Property.MinHeight | undefined; /** * The **`min-inline-size`** CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the `min-width` or the `min-height` property, depending on the value of `writing-mode`. * @@ -11963,7 +11961,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "min-inline-size"?: Property.MinInlineSize | undefined; /** * The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. * @@ -11977,7 +11975,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "min-width"?: Property.MinWidth | undefined; /** * The **`mix-blend-mode`** CSS property sets how an element's content should blend with the content of the element's parent and the element's background. * @@ -11991,7 +11989,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "motion-distance"?: Property.OffsetDistance | undefined; /** * The **`offset-path`** CSS property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system. * @@ -12021,7 +12019,7 @@ export interface StandardLonghandPropertiesHyphen` or `
` cells, rows, and columns. * @@ -13270,7 +13268,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "text-decoration-thickness"?: Property.TextDecorationThickness | undefined; /** * The **`text-emphasis-color`** CSS property sets the color of emphasis marks. This value can also be set using the `text-emphasis` shorthand. * @@ -13416,7 +13414,7 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "text-indent"?: Property.TextIndent | undefined; /** * The **`text-justify`** CSS property sets what type of justification should be applied to text when `text-align``: justify;` is set on an element. * @@ -13474,7 +13472,7 @@ export interface StandardLonghandPropertiesHyphen