From b293d5ffdb2bf9ab0e08f78c813858f5da868fe9 Mon Sep 17 00:00:00 2001 From: Eugene Kim <67894159+eugene028@users.noreply.github.com> Date: Tue, 28 May 2024 23:19:44 +0900 Subject: [PATCH] =?UTF-8?q?[Feature]=20Radius,=20Stroke,=20Spacing=20Token?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20theme=20=ED=8C=A8=ED=82=A4?= =?UTF-8?q?=EC=A7=80=20=EB=93=B1=EB=A1=9D=20(#23)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: radius, space, stroke 토큰 작성 * feat: index.ts에서 export 시켜주기 * chore: git prune 실행 * feat: token에 radii 추가 * feat: pandaconfig.ts theme 등록 * feat: Stroke borderWidths 토큰 등록 * feat: stroke토큰 borderWidths config에 등록 * feat: 컴포넌트 variables 변수명 변경 * feat: panda theme 새로운 토큰값으로 변경 * chore:gitignore추가 --- .eslintcache | 1 + .gitignore | 4 +- apps/wow-docs/styled-system/tokens/index.js | 104 + .../wow-docs/styled-system/tokens/tokens.d.ts | 53 + .../styled-system/types/prop-type.d.ts | 126 +- .../styled-system/types/style-props.d.ts | 3884 +++++++++++------ packages/theme/src/color.ts | 9 +- packages/theme/src/index.ts | 14 + packages/theme/src/radius.ts | 10 + packages/theme/src/space.ts | 25 + packages/theme/src/stroke.ts | 11 + packages/wow-tokens/src/index.ts | 3 + packages/wow-tokens/src/radius.ts | 3 + packages/wow-tokens/src/space.ts | 6 + packages/wow-tokens/src/stroke.ts | 2 + 15 files changed, 3002 insertions(+), 1253 deletions(-) create mode 100644 .eslintcache create mode 100644 packages/theme/src/radius.ts create mode 100644 packages/theme/src/space.ts create mode 100644 packages/theme/src/stroke.ts create mode 100644 packages/wow-tokens/src/radius.ts create mode 100644 packages/wow-tokens/src/space.ts create mode 100644 packages/wow-tokens/src/stroke.ts diff --git a/.eslintcache b/.eslintcache new file mode 100644 index 00000000..adc3e82c --- /dev/null +++ b/.eslintcache @@ -0,0 +1 @@ +[{"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts":"1","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/radius.ts":"2","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/space.ts":"3","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/stroke.ts":"4","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/index.ts":"5","/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx":"6","/Users/eugene/github/wow-design-system/packages/theme/src/color.ts":"7","/Users/eugene/github/wow-design-system/packages/theme/src/index.ts":"8","/Users/eugene/github/wow-design-system/packages/theme/src/space.ts":"9","/Users/eugene/github/wow-design-system/packages/theme/src/stroke.ts":"10"},{"size":265,"mtime":1716905895550,"results":"11","hashOfConfig":"12"},{"size":138,"mtime":1716308900598,"results":"13","hashOfConfig":"12"},{"size":329,"mtime":1716309048289,"results":"14","hashOfConfig":"12"},{"size":127,"mtime":1716441452591,"results":"15","hashOfConfig":"12"},{"size":199,"mtime":1716309348694,"results":"16","hashOfConfig":"12"},{"size":438,"mtime":1716445270763,"results":"17","hashOfConfig":"12"},{"size":4454,"mtime":1716439721653,"results":"18","hashOfConfig":"12"},{"size":376,"mtime":1716444728791,"results":"19","hashOfConfig":"12"},{"size":395,"mtime":1716905910282,"results":"20","hashOfConfig":"12"},{"size":357,"mtime":1716444790902,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","suppressedMessages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"8oyd96",{"filePath":"25","messages":"26","suppressedMessages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","suppressedMessages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","suppressedMessages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","suppressedMessages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","suppressedMessages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","suppressedMessages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","suppressedMessages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","suppressedMessages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","suppressedMessages":"51","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/radius.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/space.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/stroke.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx",["52"],[],"/Users/eugene/github/wow-design-system/packages/theme/src/color.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/space.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/stroke.ts",[],[],{"ruleId":"53","severity":1,"message":"54","line":1,"column":21,"nodeType":"55","endLine":1,"endColumn":45},"import/no-unresolved","Unable to resolve path to module '@styled-system/css/css'.","Literal"] \ No newline at end of file diff --git a/.gitignore b/.gitignore index bc08bd16..1cb2cc20 100644 --- a/.gitignore +++ b/.gitignore @@ -39,4 +39,6 @@ yarn-error.log* ## Panda styled-system-studio -*storybook.log \ No newline at end of file +*storybook.log + +.eslintcache \ No newline at end of file diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js index a8b0cd77..7c3a1b19 100644 --- a/apps/wow-docs/styled-system/tokens/index.js +++ b/apps/wow-docs/styled-system/tokens/index.js @@ -239,6 +239,74 @@ const tokens = { value: "linear-gradient(to right, #FDE6B2, #FDDD99)", variable: "var(--gradients-yellow-gradient-light)", }, + "spacing.spacing.4": { + value: "0.25rem", + variable: "var(--spacing-spacing-4)", + }, + "spacing.spacing.8": { + value: "0.5rem", + variable: "var(--spacing-spacing-8)", + }, + "spacing.spacing.12": { + value: "0.75rem", + variable: "var(--spacing-spacing-12)", + }, + "spacing.spacing.16": { + value: "1rem", + variable: "var(--spacing-spacing-16)", + }, + "spacing.spacing.20": { + value: "1.25rem", + variable: "var(--spacing-spacing-20)", + }, + "spacing.spacing.24": { + value: "1.5rem", + variable: "var(--spacing-spacing-24)", + }, + "spacing.spacing.32": { + value: "2rem", + variable: "var(--spacing-spacing-32)", + }, + "spacing.spacing.36": { + value: "2.25rem", + variable: "var(--spacing-spacing-36)", + }, + "spacing.spacing.40": { + value: "2.5rem", + variable: "var(--spacing-spacing-40)", + }, + "radii.radius.4": { + value: "0.25rem", + variable: "var(--radii-radius-4)", + }, + "radii.radius.8": { + value: "0.5rem", + variable: "var(--radii-radius-8)", + }, + "radii.radius.12": { + value: "0.75rem", + variable: "var(--radii-radius-12)", + }, + "radii.radius.full": { + value: "2.5rem", + variable: "var(--radii-radius-full)", + }, + "borderWidths.stroke8": { + value: "0.8px", + variable: "var(--border-widths-stroke8)", + }, + "borderWidths.stroke10": { + value: "1px", + variable: "var(--border-widths-stroke10)", + }, + "borderWidths.stroke12": { + value: "1.2px", + variable: "var(--border-widths-stroke12)", + }, + "borderWidths.stroke20": { + value: "2px", + variable: "var(--border-widths-stroke20)", + }, "breakpoints.sm": { value: "640px", variable: "var(--breakpoints-sm)", @@ -371,6 +439,42 @@ const tokens = { value: "#000000", variable: "var(--colors-github)", }, + "spacing.spacing.-4": { + value: "calc(var(--spacing-spacing-4) * -1)", + variable: "var(--spacing-spacing-4)", + }, + "spacing.spacing.-8": { + value: "calc(var(--spacing-spacing-8) * -1)", + variable: "var(--spacing-spacing-8)", + }, + "spacing.spacing.-12": { + value: "calc(var(--spacing-spacing-12) * -1)", + variable: "var(--spacing-spacing-12)", + }, + "spacing.spacing.-16": { + value: "calc(var(--spacing-spacing-16) * -1)", + variable: "var(--spacing-spacing-16)", + }, + "spacing.spacing.-20": { + value: "calc(var(--spacing-spacing-20) * -1)", + variable: "var(--spacing-spacing-20)", + }, + "spacing.spacing.-24": { + value: "calc(var(--spacing-spacing-24) * -1)", + variable: "var(--spacing-spacing-24)", + }, + "spacing.spacing.-32": { + value: "calc(var(--spacing-spacing-32) * -1)", + variable: "var(--spacing-spacing-32)", + }, + "spacing.spacing.-36": { + value: "calc(var(--spacing-spacing-36) * -1)", + variable: "var(--spacing-spacing-36)", + }, + "spacing.spacing.-40": { + value: "calc(var(--spacing-spacing-40) * -1)", + variable: "var(--spacing-spacing-40)", + }, "colors.colorPalette.50": { value: "var(--colors-color-palette-50)", variable: "var(--colors-color-palette-50)", diff --git a/apps/wow-docs/styled-system/tokens/tokens.d.ts b/apps/wow-docs/styled-system/tokens/tokens.d.ts index 492bb760..f9aaa9c8 100644 --- a/apps/wow-docs/styled-system/tokens/tokens.d.ts +++ b/apps/wow-docs/styled-system/tokens/tokens.d.ts @@ -60,6 +60,23 @@ export type Token = | "gradients.greenGradientLight" | "gradients.yellowGradientDark" | "gradients.yellowGradientLight" + | "spacing.spacing.4" + | "spacing.spacing.8" + | "spacing.spacing.12" + | "spacing.spacing.16" + | "spacing.spacing.20" + | "spacing.spacing.24" + | "spacing.spacing.32" + | "spacing.spacing.36" + | "spacing.spacing.40" + | "radii.radius.4" + | "radii.radius.8" + | "radii.radius.12" + | "radii.radius.full" + | "borderWidths.stroke8" + | "borderWidths.stroke10" + | "borderWidths.stroke12" + | "borderWidths.stroke20" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" @@ -93,6 +110,15 @@ export type Token = | "colors.blueShadow" | "colors.discord" | "colors.github" + | "spacing.spacing.-4" + | "spacing.spacing.-8" + | "spacing.spacing.-12" + | "spacing.spacing.-16" + | "spacing.spacing.-20" + | "spacing.spacing.-24" + | "spacing.spacing.-32" + | "spacing.spacing.-36" + | "spacing.spacing.-40" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.150" @@ -238,6 +264,30 @@ export type GradientToken = | "yellowGradientDark" | "yellowGradientLight"; +export type SpacingToken = + | "spacing.4" + | "spacing.8" + | "spacing.12" + | "spacing.16" + | "spacing.20" + | "spacing.24" + | "spacing.32" + | "spacing.36" + | "spacing.40" + | "-spacing.4" + | "-spacing.8" + | "-spacing.12" + | "-spacing.16" + | "-spacing.20" + | "-spacing.24" + | "-spacing.32" + | "-spacing.36" + | "-spacing.40"; + +export type RadiusToken = "radius.4" | "radius.8" | "radius.12" | "radius.full"; + +export type BorderWidthToken = "stroke8" | "stroke10" | "stroke12" | "stroke20"; + export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"; export type SizeToken = @@ -250,6 +300,9 @@ export type SizeToken = export type Tokens = { colors: ColorToken; gradients: GradientToken; + spacing: SpacingToken; + radii: RadiusToken; + borderWidths: BorderWidthToken; breakpoints: BreakpointToken; sizes: SizeToken; } & { [token: string]: never }; diff --git a/apps/wow-docs/styled-system/types/prop-type.d.ts b/apps/wow-docs/styled-system/types/prop-type.d.ts index e15efdbc..2b1623df 100644 --- a/apps/wow-docs/styled-system/types/prop-type.d.ts +++ b/apps/wow-docs/styled-system/types/prop-type.d.ts @@ -4,11 +4,22 @@ import type { CssProperties } from "./system-types"; import type { Tokens } from "../tokens/index"; export interface UtilityValues { - inset: "auto"; + top: Tokens["spacing"]; + left: Tokens["spacing"]; + insetInline: Tokens["spacing"]; + insetBlock: Tokens["spacing"]; + inset: "auto" | Tokens["spacing"]; + insetBlockEnd: Tokens["spacing"]; + insetBlockStart: Tokens["spacing"]; + insetInlineEnd: Tokens["spacing"]; + insetInlineStart: Tokens["spacing"]; + right: Tokens["spacing"]; + bottom: Tokens["spacing"]; float: "start" | "end" | CssProperties["float"]; hideFrom: Tokens["breakpoints"]; hideBelow: Tokens["breakpoints"]; flexBasis: + | Tokens["spacing"] | "1/2" | "1/3" | "2/3" @@ -93,20 +104,41 @@ export interface UtilityValues { | "full"; gridAutoColumns: "min" | "max" | "fr"; gridAutoRows: "min" | "max" | "fr"; - marginLeft: "auto"; - marginRight: "auto"; - marginTop: "auto"; - marginBottom: "auto"; - margin: "auto"; - marginBlock: "auto"; - marginBlockEnd: "auto"; - marginBlockStart: "auto"; - marginInline: "auto"; - marginInlineEnd: "auto"; - marginInlineStart: "auto"; - spaceX: "auto" | CssProperties["marginInlineStart"]; - spaceY: "auto" | CssProperties["marginBlockStart"]; + gap: Tokens["spacing"]; + gridGap: Tokens["spacing"]; + gridRowGap: Tokens["spacing"]; + gridColumnGap: Tokens["spacing"]; + rowGap: Tokens["spacing"]; + columnGap: Tokens["spacing"]; + padding: Tokens["spacing"]; + paddingLeft: Tokens["spacing"]; + paddingRight: Tokens["spacing"]; + paddingTop: Tokens["spacing"]; + paddingBottom: Tokens["spacing"]; + paddingBlock: Tokens["spacing"]; + paddingBlockEnd: Tokens["spacing"]; + paddingBlockStart: Tokens["spacing"]; + paddingInline: Tokens["spacing"]; + paddingInlineEnd: Tokens["spacing"]; + paddingInlineStart: Tokens["spacing"]; + marginLeft: "auto" | Tokens["spacing"]; + marginRight: "auto" | Tokens["spacing"]; + marginTop: "auto" | Tokens["spacing"]; + marginBottom: "auto" | Tokens["spacing"]; + margin: "auto" | Tokens["spacing"]; + marginBlock: "auto" | Tokens["spacing"]; + marginBlockEnd: "auto" | Tokens["spacing"]; + marginBlockStart: "auto" | Tokens["spacing"]; + marginInline: "auto" | Tokens["spacing"]; + marginInlineEnd: "auto" | Tokens["spacing"]; + marginInlineStart: "auto" | Tokens["spacing"]; + spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"]; + spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"]; + outlineWidth: Tokens["borderWidths"]; outlineColor: Tokens["colors"]; + outlineOffset: Tokens["spacing"]; + divideX: Tokens["borderWidths"]; + divideY: Tokens["borderWidths"]; divideColor: Tokens["colors"]; divideStyle: CssProperties["borderStyle"]; width: @@ -425,6 +457,7 @@ export interface UtilityValues { fontSmoothing: "antialiased" | "subpixel-antialiased"; textDecorationColor: Tokens["colors"]; textEmphasisColor: Tokens["colors"]; + textIndent: Tokens["spacing"]; textShadowColor: Tokens["colors"]; textWrap: "wrap" | "balance" | "nowrap"; truncate: boolean; @@ -453,18 +486,36 @@ export interface UtilityValues { gradientFrom: Tokens["colors"]; gradientTo: Tokens["colors"]; gradientVia: Tokens["colors"]; - borderTopRadius: CssProperties["borderRadius"]; - borderRightRadius: CssProperties["borderRadius"]; - borderBottomRadius: CssProperties["borderRadius"]; - borderLeftRadius: CssProperties["borderRadius"]; - borderStartRadius: CssProperties["borderRadius"]; - borderEndRadius: CssProperties["borderRadius"]; + borderRadius: Tokens["radii"]; + borderTopLeftRadius: Tokens["radii"]; + borderTopRightRadius: Tokens["radii"]; + borderBottomRightRadius: Tokens["radii"]; + borderBottomLeftRadius: Tokens["radii"]; + borderTopRadius: Tokens["radii"] | CssProperties["borderRadius"]; + borderRightRadius: Tokens["radii"] | CssProperties["borderRadius"]; + borderBottomRadius: Tokens["radii"] | CssProperties["borderRadius"]; + borderLeftRadius: Tokens["radii"] | CssProperties["borderRadius"]; + borderStartStartRadius: Tokens["radii"]; + borderStartEndRadius: Tokens["radii"]; + borderStartRadius: Tokens["radii"] | CssProperties["borderRadius"]; + borderEndStartRadius: Tokens["radii"]; + borderEndEndRadius: Tokens["radii"]; + borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"]; + borderWidth: Tokens["borderWidths"]; + borderTopWidth: Tokens["borderWidths"]; + borderLeftWidth: Tokens["borderWidths"]; + borderRightWidth: Tokens["borderWidths"]; + borderBottomWidth: Tokens["borderWidths"]; borderColor: Tokens["colors"]; + borderInlineWidth: Tokens["borderWidths"]; borderInlineColor: Tokens["colors"]; + borderBlockWidth: Tokens["borderWidths"]; borderBlockColor: Tokens["colors"]; borderLeftColor: Tokens["colors"]; + borderInlineStartWidth: Tokens["borderWidths"]; borderInlineStartColor: Tokens["colors"]; borderRightColor: Tokens["colors"]; + borderInlineEndWidth: Tokens["borderWidths"]; borderInlineEndColor: Tokens["colors"]; borderTopColor: Tokens["colors"]; borderBottomColor: Tokens["colors"]; @@ -473,7 +524,9 @@ export interface UtilityValues { boxShadowColor: Tokens["colors"]; filter: "auto"; backdropFilter: "auto"; - borderSpacing: "auto"; + borderSpacing: Tokens["spacing"] | "auto"; + borderSpacingX: Tokens["spacing"]; + borderSpacingY: Tokens["spacing"]; transition: | "all" | "common" @@ -490,6 +543,7 @@ export interface UtilityValues { scale: "auto" | CssProperties["scale"]; translate: "auto" | "auto-3d" | CssProperties["translate"]; translateX: + | Tokens["spacing"] | "1/2" | "1/3" | "2/3" @@ -505,6 +559,7 @@ export interface UtilityValues { | "-3/4" | "-full"; translateY: + | Tokens["spacing"] | "1/2" | "1/3" | "2/3" @@ -520,6 +575,7 @@ export interface UtilityValues { | "-3/4" | "-full"; translateZ: + | Tokens["spacing"] | "1/2" | "1/3" | "2/3" @@ -537,10 +593,38 @@ export interface UtilityValues { accentColor: Tokens["colors"]; caretColor: Tokens["colors"]; scrollbar: "visible" | "hidden"; + scrollMargin: Tokens["spacing"]; + scrollMarginLeft: Tokens["spacing"]; + scrollMarginRight: Tokens["spacing"]; + scrollMarginTop: Tokens["spacing"]; + scrollMarginBottom: Tokens["spacing"]; + scrollMarginBlock: Tokens["spacing"]; + scrollMarginBlockEnd: Tokens["spacing"]; + scrollMarginBlockStart: Tokens["spacing"]; + scrollMarginInline: Tokens["spacing"]; + scrollMarginInlineEnd: Tokens["spacing"]; + scrollMarginInlineStart: Tokens["spacing"]; + scrollPadding: Tokens["spacing"]; + scrollPaddingBlock: Tokens["spacing"]; + scrollPaddingBlockStart: Tokens["spacing"]; + scrollPaddingBlockEnd: Tokens["spacing"]; + scrollPaddingInline: Tokens["spacing"]; + scrollPaddingInlineEnd: Tokens["spacing"]; + scrollPaddingInlineStart: Tokens["spacing"]; + scrollPaddingLeft: Tokens["spacing"]; + scrollPaddingRight: Tokens["spacing"]; + scrollPaddingTop: Tokens["spacing"]; + scrollPaddingBottom: Tokens["spacing"]; scrollSnapType: "none" | "x" | "y" | "both"; scrollSnapStrictness: "mandatory" | "proximity"; + scrollSnapMargin: Tokens["spacing"]; + scrollSnapMarginTop: Tokens["spacing"]; + scrollSnapMarginBottom: Tokens["spacing"]; + scrollSnapMarginLeft: Tokens["spacing"]; + scrollSnapMarginRight: Tokens["spacing"]; fill: Tokens["colors"]; stroke: Tokens["colors"]; + strokeWidth: Tokens["borderWidths"]; srOnly: boolean; debug: boolean; containerName: CssProperties["containerName"]; diff --git a/apps/wow-docs/styled-system/types/style-props.d.ts b/apps/wow-docs/styled-system/types/style-props.d.ts index e725dec4..23127b61 100644 --- a/apps/wow-docs/styled-system/types/style-props.d.ts +++ b/apps/wow-docs/styled-system/types/style-props.d.ts @@ -1,232 +1,286 @@ /* eslint-disable */ -import type { ConditionalValue } from './conditions'; -import type { OnlyKnown, UtilityValues, WithEscapeHatch } from './prop-type'; -import type { CssProperties } from './system-types'; -import type { Token } from '../tokens/index'; +import type { ConditionalValue } from "./conditions"; +import type { OnlyKnown, UtilityValues, WithEscapeHatch } from "./prop-type"; +import type { CssProperties } from "./system-types"; +import type { Token } from "../tokens/index"; -type AnyString = (string & {}) -type CssVars = `var(--${string})` -type CssVarValue = ConditionalValue +type AnyString = string & {}; +type CssVars = `var(--${string})`; +type CssVarValue = ConditionalValue; -type CssVarName = | AnyString -type CssVarKeys = `--${CssVarName}` +type CssVarName = AnyString; +type CssVarKeys = `--${CssVarName}`; export type CssVarProperties = { - [key in CssVarKeys]?: CssVarValue -} + [key in CssVarKeys]?: CssVarValue; +}; export interface SystemProperties { - /** + /** * The **`appearance`** CSS property is used to control native appearance of UI controls, that are based on operating system's theme. * * **Syntax**: `none | button | button-bevel | caret | checkbox | default-button | inner-spin-button | listbox | listitem | media-controls-background | media-controls-fullscreen-background | media-current-time-display | media-enter-fullscreen-button | media-exit-fullscreen-button | media-fullscreen-button | media-mute-button | media-overlay-play-button | media-play-button | media-seek-back-button | media-seek-forward-button | media-slider | media-sliderthumb | media-time-remaining-display | media-toggle-closed-captions-button | media-volume-slider | media-volume-slider-container | media-volume-sliderthumb | menulist | menulist-button | menulist-text | menulist-textfield | meter | progress-bar | progress-bar-value | push-button | radio | searchfield | searchfield-cancel-button | searchfield-decoration | searchfield-results-button | searchfield-results-decoration | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | square-button | textarea | textfield | -apple-pay-button` * * **Initial value**: `none` (but this value is overridden in the user agent CSS) */ -WebkitAppearance?: ConditionalValue - /** + WebkitAppearance?: ConditionalValue< + CssProperties["WebkitAppearance"] | AnyString + >; + /** * The **`-webkit-border-before`** CSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet. * * **Syntax**: `<'border-width'> || <'border-style'> || ` */ -WebkitBorderBefore?: ConditionalValue - /** + WebkitBorderBefore?: ConditionalValue< + CssProperties["WebkitBorderBefore"] | AnyString + >; + /** * **Syntax**: `` * * **Initial value**: `currentcolor` */ -WebkitBorderBeforeColor?: ConditionalValue - /** + WebkitBorderBeforeColor?: ConditionalValue< + CssProperties["WebkitBorderBeforeColor"] | AnyString + >; + /** * **Syntax**: `<'border-style'>` * * **Initial value**: `none` */ -WebkitBorderBeforeStyle?: ConditionalValue - /** + WebkitBorderBeforeStyle?: ConditionalValue< + CssProperties["WebkitBorderBeforeStyle"] | AnyString + >; + /** * **Syntax**: `<'border-width'>` * * **Initial value**: `medium` */ -WebkitBorderBeforeWidth?: ConditionalValue - /** + WebkitBorderBeforeWidth?: ConditionalValue< + CssProperties["WebkitBorderBeforeWidth"] | AnyString + >; + /** * The **`-webkit-box-reflect`** CSS property lets you reflect the content of an element in one specific direction. * * **Syntax**: `[ above | below | right | left ]? ? ?` * * **Initial value**: `none` */ -WebkitBoxReflect?: ConditionalValue - /** + WebkitBoxReflect?: ConditionalValue< + CssProperties["WebkitBoxReflect"] | AnyString + >; + /** * The **`-webkit-line-clamp`** CSS property allows limiting of the contents of a block to the specified number of lines. * * **Syntax**: `none | ` * * **Initial value**: `none` */ -WebkitLineClamp?: ConditionalValue - /** + WebkitLineClamp?: ConditionalValue< + CssProperties["WebkitLineClamp"] | AnyString + >; + /** * The **`mask`** CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points. * * **Syntax**: `[ || [ / ]? || || [ | border | padding | content | text ] || [ | border | padding | content ] ]#` */ -WebkitMask?: ConditionalValue - /** + WebkitMask?: ConditionalValue; + /** * If a `mask-image` is specified, `-webkit-mask-attachment` determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block. * * **Syntax**: `#` * * **Initial value**: `scroll` */ -WebkitMaskAttachment?: ConditionalValue - /** + WebkitMaskAttachment?: ConditionalValue< + CssProperties["WebkitMaskAttachment"] | AnyString + >; + /** * 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. * * **Syntax**: `[ | border | padding | content | text ]#` * * **Initial value**: `border` */ -WebkitMaskClip?: ConditionalValue - /** + WebkitMaskClip?: ConditionalValue< + CssProperties["WebkitMaskClip"] | AnyString + >; + /** * The **`-webkit-mask-composite`** property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the `-webkit-mask-image` property. * * **Syntax**: `#` * * **Initial value**: `source-over` */ -WebkitMaskComposite?: ConditionalValue - /** + WebkitMaskComposite?: ConditionalValue< + CssProperties["WebkitMaskComposite"] | AnyString + >; + /** * The **`mask-image`** CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the `mask-mode` property. * * **Syntax**: `#` * * **Initial value**: `none` */ -WebkitMaskImage?: ConditionalValue - /** + WebkitMaskImage?: ConditionalValue< + CssProperties["WebkitMaskImage"] | AnyString + >; + /** * The **`mask-origin`** CSS property sets the origin of a mask. * * **Syntax**: `[ | border | padding | content ]#` * * **Initial value**: `padding` */ -WebkitMaskOrigin?: ConditionalValue - /** + WebkitMaskOrigin?: ConditionalValue< + CssProperties["WebkitMaskOrigin"] | AnyString + >; + /** * The **`mask-position`** CSS property sets the initial position, relative to the mask position layer set by `mask-origin`, for each defined mask image. * * **Syntax**: `#` * * **Initial value**: `0% 0%` */ -WebkitMaskPosition?: ConditionalValue - /** + WebkitMaskPosition?: ConditionalValue< + CssProperties["WebkitMaskPosition"] | AnyString + >; + /** * The `-webkit-mask-position-x` CSS property sets the initial horizontal position of a mask image. * * **Syntax**: `[ | left | center | right ]#` * * **Initial value**: `0%` */ -WebkitMaskPositionX?: ConditionalValue - /** + WebkitMaskPositionX?: ConditionalValue< + CssProperties["WebkitMaskPositionX"] | AnyString + >; + /** * The `-webkit-mask-position-y` CSS property sets the initial vertical position of a mask image. * * **Syntax**: `[ | top | center | bottom ]#` * * **Initial value**: `0%` */ -WebkitMaskPositionY?: ConditionalValue - /** + WebkitMaskPositionY?: ConditionalValue< + CssProperties["WebkitMaskPositionY"] | AnyString + >; + /** * 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. * * **Syntax**: `#` * * **Initial value**: `repeat` */ -WebkitMaskRepeat?: ConditionalValue - /** + WebkitMaskRepeat?: ConditionalValue< + CssProperties["WebkitMaskRepeat"] | AnyString + >; + /** * The `-webkit-mask-repeat-x` property specifies whether and how a mask image is repeated (tiled) horizontally. * * **Syntax**: `repeat | no-repeat | space | round` * * **Initial value**: `repeat` */ -WebkitMaskRepeatX?: ConditionalValue - /** + WebkitMaskRepeatX?: ConditionalValue< + CssProperties["WebkitMaskRepeatX"] | AnyString + >; + /** * The `-webkit-mask-repeat-y` property sets whether and how a mask image is repeated (tiled) vertically. * * **Syntax**: `repeat | no-repeat | space | round` * * **Initial value**: `repeat` */ -WebkitMaskRepeatY?: ConditionalValue - /** + WebkitMaskRepeatY?: ConditionalValue< + CssProperties["WebkitMaskRepeatY"] | AnyString + >; + /** * The **`mask-size`** CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. * * **Syntax**: `#` * * **Initial value**: `auto auto` */ -WebkitMaskSize?: ConditionalValue - /** + WebkitMaskSize?: ConditionalValue< + CssProperties["WebkitMaskSize"] | AnyString + >; + /** * The `-webkit-overflow-scrolling` CSS property controls whether or not touch devices use momentum-based scrolling for a given element. * * **Syntax**: `auto | touch` * * **Initial value**: `auto` */ -WebkitOverflowScrolling?: ConditionalValue - /** + WebkitOverflowScrolling?: ConditionalValue< + CssProperties["WebkitOverflowScrolling"] | AnyString + >; + /** * **`-webkit-tap-highlight-color`** is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on. * * **Syntax**: `` * * **Initial value**: `black` */ -WebkitTapHighlightColor?: ConditionalValue - /** + WebkitTapHighlightColor?: ConditionalValue< + CssProperties["WebkitTapHighlightColor"] | AnyString + >; + /** * The **`-webkit-text-fill-color`** CSS property specifies the fill color of characters of text. If this property is not set, the value of the `color` property is used. * * **Syntax**: `` * * **Initial value**: `currentcolor` */ -WebkitTextFillColor?: ConditionalValue - /** + WebkitTextFillColor?: ConditionalValue< + CssProperties["WebkitTextFillColor"] | AnyString + >; + /** * The **`-webkit-text-stroke`** CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties `-webkit-text-stroke-width` and `-webkit-text-stroke-color`. * * **Syntax**: ` || ` */ -WebkitTextStroke?: ConditionalValue - /** + WebkitTextStroke?: ConditionalValue< + CssProperties["WebkitTextStroke"] | AnyString + >; + /** * The **`-webkit-text-stroke-color`** CSS property specifies the stroke color of characters of text. If this property is not set, the value of the `color` property is used. * * **Syntax**: `` * * **Initial value**: `currentcolor` */ -WebkitTextStrokeColor?: ConditionalValue - /** + WebkitTextStrokeColor?: ConditionalValue< + CssProperties["WebkitTextStrokeColor"] | AnyString + >; + /** * The **`-webkit-text-stroke-width`** CSS property specifies the width of the stroke for text. * * **Syntax**: `` * * **Initial value**: `0` */ -WebkitTextStrokeWidth?: ConditionalValue - /** + WebkitTextStrokeWidth?: ConditionalValue< + CssProperties["WebkitTextStrokeWidth"] | AnyString + >; + /** * The `-webkit-touch-callout` CSS property controls the display of the default callout shown when you touch and hold a touch target. * * **Syntax**: `default | none` * * **Initial value**: `default` */ -WebkitTouchCallout?: ConditionalValue - /** + WebkitTouchCallout?: ConditionalValue< + CssProperties["WebkitTouchCallout"] | AnyString + >; + /** * **Syntax**: `read-only | read-write | read-write-plaintext-only` * * **Initial value**: `read-only` */ -WebkitUserModify?: ConditionalValue - /** + WebkitUserModify?: ConditionalValue< + CssProperties["WebkitUserModify"] | AnyString + >; + /** * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. * * **Syntax**: `auto | ` @@ -239,8 +293,13 @@ WebkitUserModify?: ConditionalValue - /** + accentColor?: ConditionalValue< + | UtilityValues["accentColor"] + | CssVars + | CssProperties["accentColor"] + | AnyString + >; + /** * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. * * **Syntax**: `normal | | | ? ` @@ -254,8 +313,10 @@ accentColor?: ConditionalValue - /** + alignContent?: ConditionalValue< + CssVars | CssProperties["alignContent"] | AnyString + >; + /** * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. * * **Syntax**: `normal | stretch | | [ ? ]` @@ -269,8 +330,10 @@ alignContent?: ConditionalValue - /** + alignItems?: ConditionalValue< + CssVars | CssProperties["alignItems"] | AnyString + >; + /** * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. * * **Syntax**: `auto | normal | stretch | | ? ` @@ -284,8 +347,10 @@ alignItems?: ConditionalValue * * @see https://developer.mozilla.org/docs/Web/CSS/align-self */ -alignSelf?: ConditionalValue - /** + alignSelf?: ConditionalValue< + CssVars | CssProperties["alignSelf"] | AnyString + >; + /** * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis. * * **Syntax**: `[ normal | | | ? ]#` @@ -298,8 +363,8 @@ alignSelf?: ConditionalValue * * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks */ -alignTracks?: ConditionalValue - /** + alignTracks?: ConditionalValue; + /** * The **`all`** shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin. * * **Syntax**: `initial | inherit | unset | revert | revert-layer` @@ -312,8 +377,8 @@ alignTracks?: ConditionalValue * * @see https://developer.mozilla.org/docs/Web/CSS/all */ -all?: ConditionalValue - /** + all?: ConditionalValue; + /** * The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`. * * **Syntax**: `#` @@ -325,8 +390,8 @@ all?: ConditionalValue * * @see https://developer.mozilla.org/docs/Web/CSS/animation */ -animation?: ConditionalValue - /** + animation?: ConditionalValue; + /** * The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. * * **Syntax**: `#` @@ -339,8 +404,10 @@ animation?: ConditionalValue * * @see https://developer.mozilla.org/docs/Web/CSS/animation-composition */ -animationComposition?: ConditionalValue - /** + animationComposition?: ConditionalValue< + CssVars | CssProperties["animationComposition"] | AnyString + >; + /** * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. * * **Syntax**: `