From 9670ea10ec68d6ae8bf0388fdea97e2f422aa63c Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Wed, 22 May 2024 01:35:00 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20radius,=20space,=20stroke=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/radius.ts | 1 + packages/wow-tokens/src/radius.ts | 4 ++++ packages/wow-tokens/src/space.ts | 10 ++++++++++ packages/wow-tokens/src/stroke.ts | 4 ++++ 4 files changed, 19 insertions(+) create mode 100644 packages/theme/src/radius.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/packages/theme/src/radius.ts b/packages/theme/src/radius.ts new file mode 100644 index 00000000..e58d779e --- /dev/null +++ b/packages/theme/src/radius.ts @@ -0,0 +1 @@ +import { defineSemanticTokens, defineTokens } from "@pandacss/dev"; diff --git a/packages/wow-tokens/src/radius.ts b/packages/wow-tokens/src/radius.ts new file mode 100644 index 00000000..bea57a99 --- /dev/null +++ b/packages/wow-tokens/src/radius.ts @@ -0,0 +1,4 @@ +export const radius4 = "0.25rem"; +export const radius8 = "0.5rem"; +export const radius12 = "0.75rem"; +export const radiusFull = "2.5rem"; diff --git a/packages/wow-tokens/src/space.ts b/packages/wow-tokens/src/space.ts new file mode 100644 index 00000000..a41e196c --- /dev/null +++ b/packages/wow-tokens/src/space.ts @@ -0,0 +1,10 @@ +export const space4 = "0.25rem"; +export const space8 = "0.5rem"; +export const space12 = "0.75rem"; +export const space16 = "1rem"; +export const space20 = "1.25rem"; +export const space24 = "1.5rem"; +export const space28 = "1.75rem"; +export const space32 = "2rem"; +export const space36 = "2.25rem"; +export const space40 = "2.5rem"; diff --git a/packages/wow-tokens/src/stroke.ts b/packages/wow-tokens/src/stroke.ts new file mode 100644 index 00000000..e1f9cf82 --- /dev/null +++ b/packages/wow-tokens/src/stroke.ts @@ -0,0 +1,4 @@ +export const stroke8 = "8px"; +export const stroke10 = "1px"; +export const stroke12 = "1.2px"; +export const stroke20 = "2px"; From 7d919c55464678952ef666fb10a87aed702a8b8c Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Wed, 22 May 2024 01:36:00 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20index.ts=EC=97=90=EC=84=9C=20expo?= =?UTF-8?q?rt=20=EC=8B=9C=EC=BC=9C=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 1 + packages/wow-tokens/src/index.ts | 3 +++ 2 files changed, 4 insertions(+) create mode 100644 .eslintcache diff --git a/.eslintcache b/.eslintcache new file mode 100644 index 00000000..a3034370 --- /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"},{"size":68,"mtime":1716307042353,"results":"5","hashOfConfig":"6"},{"size":138,"mtime":1716308900598,"results":"7","hashOfConfig":"6"},{"size":329,"mtime":1716309048289,"results":"8","hashOfConfig":"6"},{"size":125,"mtime":1716309097764,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","suppressedMessages":"12","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"8oyd96",{"filePath":"13","messages":"14","suppressedMessages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","suppressedMessages":"18","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","suppressedMessages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts",["22","23"],[],"/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",[],[],{"ruleId":"24","severity":1,"message":"25","line":1,"column":10,"nodeType":"26","messageId":"27","endLine":1,"endColumn":30},{"ruleId":"24","severity":1,"message":"28","line":1,"column":32,"nodeType":"26","messageId":"27","endLine":1,"endColumn":44},"no-unused-vars","'defineSemanticTokens' is defined but never used.","Identifier","unusedVar","'defineTokens' is defined but never used."] \ No newline at end of file diff --git a/packages/wow-tokens/src/index.ts b/packages/wow-tokens/src/index.ts index ee272f9e..430ffe95 100644 --- a/packages/wow-tokens/src/index.ts +++ b/packages/wow-tokens/src/index.ts @@ -1,2 +1,5 @@ export * as color from "./color.ts"; +export * as radius from "./radius.ts"; +export * as space from "./space.ts"; +export * as stroke from "./stroke.ts"; export * as typography from "./typography.ts"; From ef859d325a8948fa28b02cd43b97ab657f4042c1 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Wed, 22 May 2024 01:36:38 +0900 Subject: [PATCH 03/10] =?UTF-8?q?chore:=20git=20prune=20=EC=8B=A4=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintcache b/.eslintcache index a3034370..46ead4b2 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +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"},{"size":68,"mtime":1716307042353,"results":"5","hashOfConfig":"6"},{"size":138,"mtime":1716308900598,"results":"7","hashOfConfig":"6"},{"size":329,"mtime":1716309048289,"results":"8","hashOfConfig":"6"},{"size":125,"mtime":1716309097764,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","suppressedMessages":"12","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"8oyd96",{"filePath":"13","messages":"14","suppressedMessages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","suppressedMessages":"18","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","suppressedMessages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts",["22","23"],[],"/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",[],[],{"ruleId":"24","severity":1,"message":"25","line":1,"column":10,"nodeType":"26","messageId":"27","endLine":1,"endColumn":30},{"ruleId":"24","severity":1,"message":"28","line":1,"column":32,"nodeType":"26","messageId":"27","endLine":1,"endColumn":44},"no-unused-vars","'defineSemanticTokens' is defined but never used.","Identifier","unusedVar","'defineTokens' is defined but never used."] \ No newline at end of file +[{"/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"},{"size":68,"mtime":1716307042353,"results":"6","hashOfConfig":"7"},{"size":138,"mtime":1716308900598,"results":"8","hashOfConfig":"7"},{"size":329,"mtime":1716309048289,"results":"9","hashOfConfig":"7"},{"size":125,"mtime":1716309097764,"results":"10","hashOfConfig":"7"},{"size":199,"mtime":1716309348694,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","suppressedMessages":"14","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"8oyd96",{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts",["27","28"],[],"/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",[],[],{"ruleId":"29","severity":1,"message":"30","line":1,"column":10,"nodeType":"31","messageId":"32","endLine":1,"endColumn":30},{"ruleId":"29","severity":1,"message":"33","line":1,"column":32,"nodeType":"31","messageId":"32","endLine":1,"endColumn":44},"no-unused-vars","'defineSemanticTokens' is defined but never used.","Identifier","unusedVar","'defineTokens' is defined but never used."] \ No newline at end of file From 0cac35a9c8f68cf6ff3444ab8b7538c1c7b6e20f Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Wed, 22 May 2024 01:47:28 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20token=EC=97=90=20radii=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/radius.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/theme/src/radius.ts b/packages/theme/src/radius.ts index e58d779e..dcc2fdce 100644 --- a/packages/theme/src/radius.ts +++ b/packages/theme/src/radius.ts @@ -1 +1,15 @@ -import { defineSemanticTokens, defineTokens } from "@pandacss/dev"; +import { defineTokens } from "@pandacss/dev"; +import { radius as wowRadius } from "wowds-tokens"; + +const radii = defineTokens.radii({ + borderRadius: { + 4: { value: wowRadius.radius4 }, + 8: { value: wowRadius.radius8 }, + 12: { value: wowRadius.radius12 }, + full: { value: wowRadius.radiusFull }, + }, +}); + +export const tokens = defineTokens({ + radii, +}); From 952b1f70d59de42e1e3b93bec254e08d1a1b74d5 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Thu, 23 May 2024 14:20:29 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20pandaconfig.ts=20theme=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- apps/wow-docs/app/page.tsx | 1 + 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 | 113 +- .../styled-system/types/style-props.d.ts | 3828 +++++++++++------ packages/theme/src/color.ts | 9 +- packages/theme/src/index.ts | 14 + packages/theme/src/radius.ts | 8 +- packages/theme/src/space.ts | 36 + packages/theme/src/stroke.ts | 19 + packages/wow-tokens/src/stroke.ts | 2 +- 12 files changed, 2929 insertions(+), 1260 deletions(-) create mode 100644 packages/theme/src/space.ts create mode 100644 packages/theme/src/stroke.ts diff --git a/.eslintcache b/.eslintcache index 46ead4b2..31eb8edc 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +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"},{"size":68,"mtime":1716307042353,"results":"6","hashOfConfig":"7"},{"size":138,"mtime":1716308900598,"results":"8","hashOfConfig":"7"},{"size":329,"mtime":1716309048289,"results":"9","hashOfConfig":"7"},{"size":125,"mtime":1716309097764,"results":"10","hashOfConfig":"7"},{"size":199,"mtime":1716309348694,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","suppressedMessages":"14","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"8oyd96",{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts",["27","28"],[],"/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",[],[],{"ruleId":"29","severity":1,"message":"30","line":1,"column":10,"nodeType":"31","messageId":"32","endLine":1,"endColumn":30},{"ruleId":"29","severity":1,"message":"33","line":1,"column":32,"nodeType":"31","messageId":"32","endLine":1,"endColumn":44},"no-unused-vars","'defineSemanticTokens' is defined but never used.","Identifier","unusedVar","'defineTokens' is defined but never used."] \ No newline at end of file +[{"/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"},{"size":368,"mtime":1716310032309,"results":"6","hashOfConfig":"7"},{"size":138,"mtime":1716308900598,"results":"8","hashOfConfig":"7"},{"size":329,"mtime":1716309048289,"results":"9","hashOfConfig":"7"},{"size":125,"mtime":1716309097764,"results":"10","hashOfConfig":"7"},{"size":199,"mtime":1716309348694,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","suppressedMessages":"14","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"8oyd96",{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","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",[],[]] \ No newline at end of file diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx index c8dfb06c..a23bd545 100644 --- a/apps/wow-docs/app/page.tsx +++ b/apps/wow-docs/app/page.tsx @@ -1,5 +1,6 @@ import { css } from "@styled-system/css/css"; import { UpArrow } from "wowds-icons"; +import { space } from "wowds-tokens"; import Button from "wowds-ui/Button"; const Home = () => { diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js index a8b0cd77..026bf869 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)", + }, + "stroke.stroke.8": { + value: "0.8px", + variable: "var(--stroke-stroke-8)", + }, + "stroke.stroke.10": { + value: "1px", + variable: "var(--stroke-stroke-10)", + }, + "stroke.stroke.12": { + value: "1.2px", + variable: "var(--stroke-stroke-12)", + }, + "stroke.stroke.20": { + value: "2px", + variable: "var(--stroke-stroke-20)", + }, "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..688f89aa 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" + | "stroke.stroke.8" + | "stroke.stroke.10" + | "stroke.stroke.12" + | "stroke.stroke.20" | "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 StrokeToken = "stroke.8" | "stroke.10" | "stroke.12" | "stroke.20"; + 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; + stroke: StrokeToken; 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..aeacc2ae 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,38 @@ 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"]; outlineColor: Tokens["colors"]; + outlineOffset: Tokens["spacing"]; divideColor: Tokens["colors"]; divideStyle: CssProperties["borderStyle"]; width: @@ -425,6 +454,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,12 +483,21 @@ 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"]; borderColor: Tokens["colors"]; borderInlineColor: Tokens["colors"]; borderBlockColor: Tokens["colors"]; @@ -473,7 +512,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 +531,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 +547,7 @@ export interface UtilityValues { | "-3/4" | "-full"; translateY: + | Tokens["spacing"] | "1/2" | "1/3" | "2/3" @@ -520,6 +563,7 @@ export interface UtilityValues { | "-3/4" | "-full"; translateZ: + | Tokens["spacing"] | "1/2" | "1/3" | "2/3" @@ -537,8 +581,35 @@ 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"]; srOnly: boolean; 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..34581e5a 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**: `