diff --git a/docs/app/docs/design/foundation/design-token/[id]/page.tsx b/docs/app/docs/design/foundation/design-token/[id]/page.tsx index 1b0e0f653..5b8c3450c 100644 --- a/docs/app/docs/design/foundation/design-token/[id]/page.tsx +++ b/docs/app/docs/design/foundation/design-token/[id]/page.tsx @@ -1,12 +1,8 @@ -import { getRootage } from "@/components/get-rootage"; +import { getRootage, stringifyValueLit } from "@/components/rootage"; import { TokenLink } from "@/components/token-link"; import { TypeIndicator } from "@/components/type-indicator"; import { IconArrowRightLine } from "@daangn/react-monochrome-icon"; -import { - resolveReferences, - resolveToken, - stringifyValueExpression, -} from "@seed-design/rootage-core"; +import { resolveReferences, resolveToken } from "@seed-design/rootage-core"; import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page"; import type { Metadata } from "next"; import Link from "next/link"; @@ -51,7 +47,7 @@ export default async function Page({ ))}
-
{stringifyValueExpression(value)}
+
{stringifyValueLit(value)}

References

diff --git a/docs/components/component-spec-block.tsx b/docs/components/component-spec-block.tsx index c3f37ff03..e794e5bad 100644 --- a/docs/components/component-spec-block.tsx +++ b/docs/components/component-spec-block.tsx @@ -1,16 +1,7 @@ import { Fragment } from "react"; import { ComponentVariantTable } from "./component-variant-table"; -import { getRootage } from "./get-rootage"; - -function stringifyVariantKey(key: Record) { - const entries = Object.entries(key); - - if (entries.length === 0) { - return "base"; - } - - return entries.map(([key, value]) => `${key}=${value}`).join(", "); -} +import { getRootage } from "./rootage"; +import { stringifyVariants } from "./rootage"; interface ComponentSpecTableProps { id: string; @@ -24,12 +15,12 @@ export async function ComponentSpecBlock(props: ComponentSpecTableProps) { return
Component spec {props.id} not found
; } - return componentSpec.data.map((variant) => { - const variantKey = stringifyVariantKey(variant.key); + return componentSpec.body.map((variantDecl) => { + const variantKey = stringifyVariants(variantDecl.variants); return (

{variantKey}

- + ); }); diff --git a/docs/components/component-variant-table.tsx b/docs/components/component-variant-table.tsx index eb919bc0c..5d2cd4a2d 100644 --- a/docs/components/component-variant-table.tsx +++ b/docs/components/component-variant-table.tsx @@ -1,19 +1,13 @@ "use client"; -import { - ComponentSpecExpression, - resolveToken, - RootageCtx, - stringifyTokenExpression, - stringifyValueExpression, - ValueExpression, -} from "@seed-design/rootage-core"; +import { AST, resolveToken, RootageCtx } from "@seed-design/rootage-core"; import { useMemo, useState } from "react"; import { TokenCell } from "./token-cell"; +import { stringifyStates, stringifyTokenLit, stringifyValueLit } from "./rootage"; interface ComponentVariantTableProps { rootage: RootageCtx; - variant: ComponentSpecExpression[number]; + variant: AST.VariantDeclaration; } interface TableItem { @@ -22,7 +16,7 @@ interface TableItem { slotKey: string; propertyKey: string; values: string[]; - resolvedValue: ValueExpression; + resolvedValue: AST.ValueLit; } export function ComponentVariantTable(props: ComponentVariantTableProps) { @@ -34,28 +28,24 @@ export function ComponentVariantTable(props: ComponentVariantTableProps) { const { rootage, variant } = props; const tableItems: TableItem[] = useMemo( () => - variant.state.flatMap((state) => { - const stateKey = state.key.join(", "); - return state.slot.flatMap((slot) => { - const slotKey = slot.key; - return slot.property.map((property) => { - const propertyKey = property.key; + variant.body.flatMap((stateDecl) => { + const stateKey = stringifyStates(stateDecl.states); + return stateDecl.body.flatMap((slotDecl) => { + const slotKey = slotDecl.slot; + return slotDecl.body.map((propertyDecl) => { + const propertyKey = propertyDecl.property; - if (property.value.type === "token") { - const { path, value } = resolveToken( - rootage, - stringifyTokenExpression(property.value), - { - global: "default", - color: "theme-light", - }, - ); + if (propertyDecl.value.kind === "TokenLit") { + const { path, value } = resolveToken(rootage, stringifyTokenLit(propertyDecl.value), { + global: "default", + color: "theme-light", + }); return { id: `${stateKey}/${slotKey}/${propertyKey}`, stateKey, slotKey, propertyKey, - values: [...path, stringifyValueExpression(value)], + values: [...path, stringifyValueLit(value)], resolvedValue: value, }; } @@ -65,8 +55,8 @@ export function ComponentVariantTable(props: ComponentVariantTableProps) { stateKey, slotKey, propertyKey, - values: [stringifyValueExpression(property.value)], - resolvedValue: property.value, + values: [stringifyValueLit(propertyDecl.value)], + resolvedValue: propertyDecl.value, }; }); }); diff --git a/docs/components/get-rootage.tsx b/docs/components/get-rootage.tsx deleted file mode 100644 index 6f8f3e3b4..000000000 --- a/docs/components/get-rootage.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Model, parse, buildContext } from "@seed-design/rootage-core"; - -export const getRootage = async () => { - const index: { resources: { path: string }[] } = await import("@/public/rootage/index.json").then( - (module) => { - return module.default; - }, - ); - const models: Model[] = await Promise.all( - index.resources.map((resource) => import(`@/public/rootage${resource.path}`)), - ); - return buildContext(parse(models)); -}; diff --git a/docs/components/rootage.ts b/docs/components/rootage.ts new file mode 100644 index 000000000..23a5a0667 --- /dev/null +++ b/docs/components/rootage.ts @@ -0,0 +1,40 @@ +import { AST, buildContext, css, Document, parse } from "@seed-design/rootage-core"; + +export function stringifyVariants(variants: AST.VariantExpression[]) { + if (variants.length === 0) { + return "base"; + } + + return variants.map(({ name, value }) => `${name}=${value}`).join(", "); +} + +export function stringifyStates(states: AST.StateExpression[]) { + return states.map(({ value }) => value).join(", "); +} + +export function stringifyTokenLit(token: AST.TokenLit): Document.TokenRef { + return `$${[...token.group, token.key].join(".")}`; +} + +export function stringifyValueLit(lit: AST.ValueLit): string { + switch (lit.kind) { + case "DimensionLit": + return lit.unit === "rem" + ? `${css.stringifyValueLit(lit)} (${lit.value}rem)` + : css.stringifyValueLit(lit); + default: + return css.stringifyValueLit(lit); + } +} + +export const getRootage = async () => { + const index: { resources: { path: string }[] } = await import("@/public/rootage/index.json").then( + (module) => { + return module.default; + }, + ); + const models: Document.Model[] = await Promise.all( + index.resources.map((resource) => import(`@/public/rootage${resource.path}`)), + ); + return buildContext(parse(models)); +}; diff --git a/docs/components/token-cell.tsx b/docs/components/token-cell.tsx index bb4285e0c..90df4fb8d 100644 --- a/docs/components/token-cell.tsx +++ b/docs/components/token-cell.tsx @@ -1,5 +1,5 @@ import IconArrowDownLine from "@daangn/react-monochrome-icon/IconArrowDownLine"; -import type { ValueExpression } from "@seed-design/rootage-core"; +import type { AST } from "@seed-design/rootage-core"; import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { Fragment } from "react"; import { TokenLink } from "./token-link"; @@ -8,7 +8,7 @@ import { TypeIndicator } from "./type-indicator"; export interface TokenCellProps { isExpanded: boolean; values: string[]; - resolvedValue: ValueExpression; + resolvedValue: AST.ValueLit; } export function TokenCell(props: TokenCellProps) { diff --git a/docs/components/token-mapping-table.tsx b/docs/components/token-mapping-table.tsx index bffad0873..70081964a 100644 --- a/docs/components/token-mapping-table.tsx +++ b/docs/components/token-mapping-table.tsx @@ -1,16 +1,11 @@ -import { - resolveToken, - stringifyValueExpression, - type TokenRef, - type ValueExpression, -} from "@seed-design/rootage-core"; -import { getRootage } from "@/components/get-rootage"; +import { resolveToken, type AST, type Document } from "@seed-design/rootage-core"; +import { getRootage, stringifyValueLit } from "@/components/rootage"; import { ExpandableTokenCell } from "@/components/expandable-token-cell"; import { Fragment } from "react"; interface TokenMapping { previousTokenId: string; - newTokenIds: TokenRef[]; + newTokenIds: Document.TokenRef[]; note?: string; } @@ -23,7 +18,7 @@ export interface TokenMappingItem { newTokens: { id: TokenMapping["newTokenIds"][number]; values: string[]; - resolvedValue: ValueExpression; + resolvedValue: AST.ValueLit; }[]; note?: TokenMapping["note"]; } @@ -41,7 +36,7 @@ export async function TokenMappingTable({ mappings }: TokenMappingTableProps) { return { id: newId, - values: [...path, stringifyValueExpression(value)], + values: [...path, stringifyValueLit(value)], resolvedValue: value, }; }), diff --git a/docs/components/token-reference.tsx b/docs/components/token-reference.tsx index 9ec136466..f1d0197ff 100644 --- a/docs/components/token-reference.tsx +++ b/docs/components/token-reference.tsx @@ -1,5 +1,6 @@ -import { resolveToken, stringifyValueExpression } from "@seed-design/rootage-core"; -import { getRootage } from "./get-rootage"; +import { resolveToken } from "@seed-design/rootage-core"; +import { getRootage } from "./rootage"; +import { stringifyValueLit } from "./rootage"; import { TokenTable, TokenTableItem } from "./token-table"; interface TokenReferenceProps { @@ -19,7 +20,7 @@ export async function TokenReference(props: TokenReferenceProps) { }); return { id: tokenId, - values: [...path.slice(1), stringifyValueExpression(value)], + values: [...path.slice(1), stringifyValueLit(value)], resolvedValue: value, }; }); diff --git a/docs/components/token-table.tsx b/docs/components/token-table.tsx index 2f4814186..92075a61e 100644 --- a/docs/components/token-table.tsx +++ b/docs/components/token-table.tsx @@ -1,6 +1,6 @@ "use client"; -import { ValueExpression } from "@seed-design/rootage-core"; +import { AST } from "@seed-design/rootage-core"; import { useState } from "react"; import { TokenCell } from "./token-cell"; import { TokenLink } from "./token-link"; @@ -8,7 +8,7 @@ import { TokenLink } from "./token-link"; export interface TokenTableItem { id: string; values: string[]; - resolvedValue: ValueExpression; + resolvedValue: AST.ValueLit; } export interface TokenTableProps { diff --git a/docs/components/type-indicator.tsx b/docs/components/type-indicator.tsx index eddf8092e..bea61e46f 100644 --- a/docs/components/type-indicator.tsx +++ b/docs/components/type-indicator.tsx @@ -1,4 +1,4 @@ -import { ValueExpression } from "@seed-design/rootage-core"; +import { AST } from "@seed-design/rootage-core"; import { HourglassIcon, LayersIcon, @@ -8,14 +8,14 @@ import { SplineIcon, } from "lucide-react"; -export function TypeIndicator(props: { value: ValueExpression }) { +export function TypeIndicator(props: { value: AST.ValueLit }) { const { value } = props; - if (value.type === "color") { + if (value.kind === "ColorHexLit") { return
; } - if (value.type === "dimension") { + if (value.kind === "DimensionLit") { return (
@@ -23,7 +23,7 @@ export function TypeIndicator(props: { value: ValueExpression }) { ); } - if (value.type === "duration") { + if (value.kind === "DurationLit") { return (
@@ -31,7 +31,7 @@ export function TypeIndicator(props: { value: ValueExpression }) { ); } - if (value.type === "number") { + if (value.kind === "NumberLit") { return (
@@ -39,7 +39,7 @@ export function TypeIndicator(props: { value: ValueExpression }) { ); } - if (value.type === "shadow") { + if (value.kind === "ShadowLit") { return (
@@ -47,7 +47,7 @@ export function TypeIndicator(props: { value: ValueExpression }) { ); } - if (value.type === "cubicBezier") { + if (value.kind === "CubicBezierLit") { return (
@@ -55,7 +55,7 @@ export function TypeIndicator(props: { value: ValueExpression }) { ); } - if (value.type === "gradient") { + if (value.kind === "GradientLit") { return (
diff --git a/docs/components/typography-mapping-table.tsx b/docs/components/typography-mapping-table.tsx index 0af564980..ca6547408 100644 --- a/docs/components/typography-mapping-table.tsx +++ b/docs/components/typography-mapping-table.tsx @@ -1,10 +1,9 @@ -import { type ComponentSpecData } from "@seed-design/rootage-core"; -import { getRootage } from "@/components/get-rootage"; +import { getRootage } from "@/components/rootage"; import { Fragment } from "react"; interface TypographyMapping { previousTokenId: string; - newTextStyleIds: (keyof ComponentSpecData)[]; + newTextStyleIds: string[]; note?: string; } @@ -22,8 +21,8 @@ export async function TypographyMappingTable({ mappings }: TypographyMappingTabl const tableItems: TypographyMapping[] = mappings.map((item) => ({ previousTokenId: item.previousTokenId, newTextStyleIds: item.newTextStyleIds.map((id) => { - const typography = rootage.componentSpecEntities.typography.data.find( - ({ key }) => "textStyle" in key && key.textStyle === id, + const typography = rootage.componentSpecEntities.typography.body.find( + ({ body }) => "textStyle" in body && body.textStyle === id, ); if (!typography) { diff --git a/docs/package.json b/docs/package.json index c115be819..6ca39248b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -14,7 +14,7 @@ "generate:all": "yarn generate:registry && yarn generate:example && yarn generate:rootage", "generate:registry": "vite-node scripts/generate-registry.ts", "generate:example": "vite-node scripts/generate-example.ts", - "generate:rootage": "rootage json public/rootage/", + "generate:rootage": "rootage json-legacy public/rootage/ && rootage json public/rootage-next", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, diff --git a/docs/public/rootage-next/collections.json b/docs/public/rootage-next/collections.json new file mode 100644 index 000000000..21032f798 --- /dev/null +++ b/docs/public/rootage-next/collections.json @@ -0,0 +1,22 @@ +{ + "kind": "TokenCollections", + "metadata": { + "id": "collections", + "name": "collections" + }, + "data": [ + { + "name": "global", + "modes": [ + "default" + ] + }, + { + "name": "color", + "modes": [ + "theme-light", + "theme-dark" + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/color.json b/docs/public/rootage-next/color.json new file mode 100644 index 000000000..87a82ae91 --- /dev/null +++ b/docs/public/rootage-next/color.json @@ -0,0 +1,1872 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "color", + "name": "Color" + }, + "data": { + "collection": "color", + "tokens": { + "$color.palette.blue-100": { + "values": { + "theme-light": { + "type": "color", + "value": "#eff6ff" + }, + "theme-dark": { + "type": "color", + "value": "#202742" + } + } + }, + "$color.palette.blue-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#e2edfc" + }, + "theme-dark": { + "type": "color", + "value": "#1e3352" + } + } + }, + "$color.palette.blue-300": { + "values": { + "theme-light": { + "type": "color", + "value": "#cbdffa" + }, + "theme-dark": { + "type": "color", + "value": "#1a4275" + } + } + }, + "$color.palette.blue-400": { + "values": { + "theme-light": { + "type": "color", + "value": "#aacefd" + }, + "theme-dark": { + "type": "color", + "value": "#0f559e" + } + } + }, + "$color.palette.blue-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#85b8fd" + }, + "theme-dark": { + "type": "color", + "value": "#1964d8" + } + } + }, + "$color.palette.blue-600": { + "values": { + "theme-light": { + "type": "color", + "value": "#5e98fe" + }, + "theme-dark": { + "type": "color", + "value": "#1e82eb" + } + } + }, + "$color.palette.blue-700": { + "values": { + "theme-light": { + "type": "color", + "value": "#217cf9" + }, + "theme-dark": { + "type": "color", + "value": "#41a2f9" + } + } + }, + "$color.palette.blue-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#135fcd" + }, + "theme-dark": { + "type": "color", + "value": "#83bcf9" + } + } + }, + "$color.palette.blue-900": { + "values": { + "theme-light": { + "type": "color", + "value": "#0b4596" + }, + "theme-dark": { + "type": "color", + "value": "#b9d7fb" + } + } + }, + "$color.palette.blue-1000": { + "values": { + "theme-light": { + "type": "color", + "value": "#032451" + }, + "theme-dark": { + "type": "color", + "value": "#e5f0fe" + } + } + }, + "$color.palette.carrot-100": { + "values": { + "theme-light": { + "type": "color", + "value": "#fff2ec" + }, + "theme-dark": { + "type": "color", + "value": "#31241f" + } + } + }, + "$color.palette.carrot-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#ffe8db" + }, + "theme-dark": { + "type": "color", + "value": "#4b291c" + } + } + }, + "$color.palette.carrot-300": { + "values": { + "theme-light": { + "type": "color", + "value": "#ffd5c0" + }, + "theme-dark": { + "type": "color", + "value": "#6b311c" + } + } + }, + "$color.palette.carrot-400": { + "values": { + "theme-light": { + "type": "color", + "value": "#ffb999" + }, + "theme-dark": { + "type": "color", + "value": "#923600" + } + } + }, + "$color.palette.carrot-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#ff9364" + }, + "theme-dark": { + "type": "color", + "value": "#bd4201" + } + } + }, + "$color.palette.carrot-600": { + "values": { + "theme-light": { + "type": "color", + "value": "#ff6600" + }, + "theme-dark": { + "type": "color", + "value": "#e65200" + } + } + }, + "$color.palette.carrot-700": { + "values": { + "theme-light": { + "type": "color", + "value": "#e84500" + }, + "theme-dark": { + "type": "color", + "value": "#ff6600" + } + } + }, + "$color.palette.carrot-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#b93901" + }, + "theme-dark": { + "type": "color", + "value": "#ff9e65" + } + } + }, + "$color.palette.carrot-900": { + "values": { + "theme-light": { + "type": "color", + "value": "#862b00" + }, + "theme-dark": { + "type": "color", + "value": "#eecebc" + } + } + }, + "$color.palette.carrot-1000": { + "values": { + "theme-light": { + "type": "color", + "value": "#471601" + }, + "theme-dark": { + "type": "color", + "value": "#f4eeea" + } + } + }, + "$color.palette.gray-00": { + "values": { + "theme-light": { + "type": "color", + "value": "#ffffff" + }, + "theme-dark": { + "type": "color", + "value": "#121212" + } + } + }, + "$color.palette.gray-100": { + "values": { + "theme-light": { + "type": "color", + "value": "#f7f8f9" + }, + "theme-dark": { + "type": "color", + "value": "#1a1c20" + } + } + }, + "$color.palette.gray-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#f3f4f5" + }, + "theme-dark": { + "type": "color", + "value": "#25272c" + } + } + }, + "$color.palette.gray-300": { + "values": { + "theme-light": { + "type": "color", + "value": "#eeeff1" + }, + "theme-dark": { + "type": "color", + "value": "#2c2e34" + } + } + }, + "$color.palette.gray-400": { + "values": { + "theme-light": { + "type": "color", + "value": "#dcdee3" + }, + "theme-dark": { + "type": "color", + "value": "#3e4145" + } + } + }, + "$color.palette.gray-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#d1d3d8" + }, + "theme-dark": { + "type": "color", + "value": "#5b606a" + } + } + }, + "$color.palette.gray-600": { + "values": { + "theme-light": { + "type": "color", + "value": "#b0b3ba" + }, + "theme-dark": { + "type": "color", + "value": "#868b94" + } + } + }, + "$color.palette.gray-700": { + "values": { + "theme-light": { + "type": "color", + "value": "#868b94" + }, + "theme-dark": { + "type": "color", + "value": "#b0b3ba" + } + } + }, + "$color.palette.gray-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#555d6d" + }, + "theme-dark": { + "type": "color", + "value": "#dcdee3" + } + } + }, + "$color.palette.gray-900": { + "values": { + "theme-light": { + "type": "color", + "value": "#2a3038" + }, + "theme-dark": { + "type": "color", + "value": "#e9eaec" + } + } + }, + "$color.palette.gray-1000": { + "values": { + "theme-light": { + "type": "color", + "value": "#1a1c20" + }, + "theme-dark": { + "type": "color", + "value": "#f3f4f5" + } + } + }, + "$color.palette.green-100": { + "values": { + "theme-light": { + "type": "color", + "value": "#edfaf6" + }, + "theme-dark": { + "type": "color", + "value": "#202926" + } + } + }, + "$color.palette.green-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#d9f6e9" + }, + "theme-dark": { + "type": "color", + "value": "#20362e" + } + } + }, + "$color.palette.green-300": { + "values": { + "theme-light": { + "type": "color", + "value": "#b9e9d2" + }, + "theme-dark": { + "type": "color", + "value": "#20493b" + } + } + }, + "$color.palette.green-400": { + "values": { + "theme-light": { + "type": "color", + "value": "#7ddcb3" + }, + "theme-dark": { + "type": "color", + "value": "#19604c" + } + } + }, + "$color.palette.green-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#42c593" + }, + "theme-dark": { + "type": "color", + "value": "#117956" + } + } + }, + "$color.palette.green-600": { + "values": { + "theme-light": { + "type": "color", + "value": "#10ab7d" + }, + "theme-dark": { + "type": "color", + "value": "#1b946d" + } + } + }, + "$color.palette.green-700": { + "values": { + "theme-light": { + "type": "color", + "value": "#079171" + }, + "theme-dark": { + "type": "color", + "value": "#22b27f" + } + } + }, + "$color.palette.green-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#00745f" + }, + "theme-dark": { + "type": "color", + "value": "#35ce9a" + } + } + }, + "$color.palette.green-900": { + "values": { + "theme-light": { + "type": "color", + "value": "#075445" + }, + "theme-dark": { + "type": "color", + "value": "#93e5c0" + } + } + }, + "$color.palette.green-1000": { + "values": { + "theme-light": { + "type": "color", + "value": "#0a2b24" + }, + "theme-dark": { + "type": "color", + "value": "#d4f6ef" + } + } + }, + "$color.palette.purple-100": { + "values": { + "theme-light": { + "type": "color", + "value": "#f5f3fe" + }, + "theme-dark": { + "type": "color", + "value": "#28213b" + } + } + }, + "$color.palette.purple-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#efeafe" + }, + "theme-dark": { + "type": "color", + "value": "#3b2873" + } + } + }, + "$color.palette.purple-300": { + "values": { + "theme-light": { + "type": "color", + "value": "#e1d8ff" + }, + "theme-dark": { + "type": "color", + "value": "#443081" + } + } + }, + "$color.palette.purple-400": { + "values": { + "theme-light": { + "type": "color", + "value": "#d0c0ff" + }, + "theme-dark": { + "type": "color", + "value": "#5a3bb1" + } + } + }, + "$color.palette.purple-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#b8a1ff" + }, + "theme-dark": { + "type": "color", + "value": "#764fd9" + } + } + }, + "$color.palette.purple-600": { + "values": { + "theme-light": { + "type": "color", + "value": "#9f84fb" + }, + "theme-dark": { + "type": "color", + "value": "#8e6bee" + } + } + }, + "$color.palette.purple-700": { + "values": { + "theme-light": { + "type": "color", + "value": "#8969ea" + }, + "theme-dark": { + "type": "color", + "value": "#a78df0" + } + } + }, + "$color.palette.purple-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#6d50cb" + }, + "theme-dark": { + "type": "color", + "value": "#beadf2" + } + } + }, + "$color.palette.purple-900": { + "values": { + "theme-light": { + "type": "color", + "value": "#50379b" + }, + "theme-dark": { + "type": "color", + "value": "#d9cefa" + } + } + }, + "$color.palette.purple-1000": { + "values": { + "theme-light": { + "type": "color", + "value": "#29175d" + }, + "theme-dark": { + "type": "color", + "value": "#f0edfc" + } + } + }, + "$color.palette.red-100": { + "values": { + "theme-light": { + "type": "color", + "value": "#fdf0f0" + }, + "theme-dark": { + "type": "color", + "value": "#322323" + } + } + }, + "$color.palette.red-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#fde7e7" + }, + "theme-dark": { + "type": "color", + "value": "#4f2624" + } + } + }, + "$color.palette.red-300": { + "values": { + "theme-light": { + "type": "color", + "value": "#fed4d2" + }, + "theme-dark": { + "type": "color", + "value": "#742826" + } + } + }, + "$color.palette.red-400": { + "values": { + "theme-light": { + "type": "color", + "value": "#feb7b3" + }, + "theme-dark": { + "type": "color", + "value": "#a12621" + } + } + }, + "$color.palette.red-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#fe928d" + }, + "theme-dark": { + "type": "color", + "value": "#ca2319" + } + } + }, + "$color.palette.red-600": { + "values": { + "theme-light": { + "type": "color", + "value": "#fc6a66" + }, + "theme-dark": { + "type": "color", + "value": "#f73526" + } + } + }, + "$color.palette.red-700": { + "values": { + "theme-light": { + "type": "color", + "value": "#fa342c" + }, + "theme-dark": { + "type": "color", + "value": "#ff6e60" + } + } + }, + "$color.palette.red-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#ca1d13" + }, + "theme-dark": { + "type": "color", + "value": "#ffa299" + } + } + }, + "$color.palette.red-900": { + "values": { + "theme-light": { + "type": "color", + "value": "#921708" + }, + "theme-dark": { + "type": "color", + "value": "#f8c5c3" + } + } + }, + "$color.palette.red-1000": { + "values": { + "theme-light": { + "type": "color", + "value": "#4a1209" + }, + "theme-dark": { + "type": "color", + "value": "#fdf2f2" + } + } + }, + "$color.palette.static-black": { + "values": { + "theme-light": { + "type": "color", + "value": "#000000" + }, + "theme-dark": { + "type": "color", + "value": "#000000" + } + } + }, + "$color.palette.static-white": { + "values": { + "theme-light": { + "type": "color", + "value": "#ffffff" + }, + "theme-dark": { + "type": "color", + "value": "#ffffff" + } + } + }, + "$color.palette.static-black-alpha-50": { + "values": { + "theme-light": { + "type": "color", + "value": "#0000000d" + }, + "theme-dark": { + "type": "color", + "value": "#0000000d" + } + } + }, + "$color.palette.static-black-alpha-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#00000033" + }, + "theme-dark": { + "type": "color", + "value": "#00000033" + } + } + }, + "$color.palette.static-black-alpha-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#00000080" + }, + "theme-dark": { + "type": "color", + "value": "#00000080" + } + } + }, + "$color.palette.static-white-alpha-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#ffffff33" + }, + "theme-dark": { + "type": "color", + "value": "#ffffff33" + } + } + }, + "$color.palette.static-white-alpha-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#ffffffcc" + }, + "theme-dark": { + "type": "color", + "value": "#ffffffcc" + } + } + }, + "$color.palette.yellow-100": { + "values": { + "theme-light": { + "type": "color", + "value": "#fff7de" + }, + "theme-dark": { + "type": "color", + "value": "#302819" + } + } + }, + "$color.palette.yellow-200": { + "values": { + "theme-light": { + "type": "color", + "value": "#fdefb9" + }, + "theme-dark": { + "type": "color", + "value": "#413218" + } + } + }, + "$color.palette.yellow-300": { + "values": { + "theme-light": { + "type": "color", + "value": "#fbdc65" + }, + "theme-dark": { + "type": "color", + "value": "#543e15" + } + } + }, + "$color.palette.yellow-400": { + "values": { + "theme-light": { + "type": "color", + "value": "#e9c647" + }, + "theme-dark": { + "type": "color", + "value": "#714e15" + } + } + }, + "$color.palette.yellow-500": { + "values": { + "theme-light": { + "type": "color", + "value": "#d4ab28" + }, + "theme-dark": { + "type": "color", + "value": "#91601b" + } + } + }, + "$color.palette.yellow-600": { + "values": { + "theme-light": { + "type": "color", + "value": "#c49725" + }, + "theme-dark": { + "type": "color", + "value": "#b6720d" + } + } + }, + "$color.palette.yellow-700": { + "values": { + "theme-light": { + "type": "color", + "value": "#9b7821" + }, + "theme-dark": { + "type": "color", + "value": "#ca901c" + } + } + }, + "$color.palette.yellow-800": { + "values": { + "theme-light": { + "type": "color", + "value": "#755b22" + }, + "theme-dark": { + "type": "color", + "value": "#dab156" + } + } + }, + "$color.palette.yellow-900": { + "values": { + "theme-light": { + "type": "color", + "value": "#4f3e1f" + }, + "theme-dark": { + "type": "color", + "value": "#e5d49b" + } + } + }, + "$color.palette.yellow-1000": { + "values": { + "theme-light": { + "type": "color", + "value": "#2c2512" + }, + "theme-dark": { + "type": "color", + "value": "#f7f0cd" + } + } + }, + "$color.fg.neutral": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-1000" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-1000" + } + } + }, + "$color.fg.critical": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.red-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.red-700" + } + } + }, + "$color.fg.positive": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.green-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.green-700" + } + } + }, + "$color.fg.informative": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.blue-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.blue-700" + } + } + }, + "$color.fg.placeholder": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-600" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-600" + } + } + }, + "$color.fg.disabled": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-500" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-500" + } + } + }, + "$color.fg.brand": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.carrot-600" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.carrot-700" + } + } + }, + "$color.fg.magic": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.purple-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.purple-700" + } + } + }, + "$color.fg.brand-contrast": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.carrot-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.carrot-900" + } + } + }, + "$color.fg.critical-contrast": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.red-900" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.red-900" + } + } + }, + "$color.fg.informative-contrast": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.blue-900" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.blue-900" + } + } + }, + "$color.fg.magic-contrast": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.purple-900" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.purple-900" + } + } + }, + "$color.fg.neutral-muted": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-800" + } + } + }, + "$color.fg.neutral-subtle": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-700" + } + } + }, + "$color.fg.neutral-inverted": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-00" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-100" + } + } + }, + "$color.fg.positive-contrast": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.green-900" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.green-900" + } + } + }, + "$color.fg.warning-contrast": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.yellow-900" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.yellow-900" + } + } + }, + "$color.bg.overlay": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.static-black-alpha-500" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.static-black-alpha-500" + } + } + }, + "$color.bg.disabled": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-200" + } + } + }, + "$color.bg.brand-weak": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.carrot-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.carrot-200" + } + } + }, + "$color.bg.brand-solid": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.carrot-600" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.carrot-700" + } + } + }, + "$color.bg.brand-solid-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.carrot-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.carrot-800" + } + } + }, + "$color.bg.brand-weak-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.carrot-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.carrot-300" + } + } + }, + "$color.bg.critical-weak": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.red-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.red-100" + } + } + }, + "$color.bg.critical-solid": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.red-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.red-600" + } + } + }, + "$color.bg.critical-solid-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.red-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.red-700" + } + } + }, + "$color.bg.critical-weak-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.red-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.red-200" + } + } + }, + "$color.bg.informative-weak": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.blue-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.blue-100" + } + } + }, + "$color.bg.informative-solid": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.blue-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.blue-600" + } + } + }, + "$color.bg.informative-solid-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.blue-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.blue-700" + } + } + }, + "$color.bg.informative-weak-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.blue-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.blue-200" + } + } + }, + "$color.bg.layer-default": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-00" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-00" + } + } + }, + "$color.bg.layer-fill": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-100" + } + } + }, + "$color.bg.layer-basement": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-100" + } + } + }, + "$color.bg.layer-floating": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-00" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-100" + } + } + }, + "$color.bg.layer-default-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-200" + } + } + }, + "$color.bg.layer-floating-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-300" + } + } + }, + "$color.bg.magic-solid": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.purple-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.purple-600" + } + } + }, + "$color.bg.magic-weak": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.purple-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.purple-100" + } + } + }, + "$color.bg.magic-solid-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.purple-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.purple-700" + } + } + }, + "$color.bg.magic-weak-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.purple-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.purple-200" + } + } + }, + "$color.bg.neutral-weak": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-300" + } + } + }, + "$color.bg.neutral-inverted": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-900" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-1000" + } + } + }, + "$color.bg.neutral-solid": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-1000" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-300" + } + } + }, + "$color.bg.neutral-inverted-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-800" + } + } + }, + "$color.bg.neutral-solid-muted": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-400" + } + } + }, + "$color.bg.neutral-solid-muted-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-900" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-500" + } + } + }, + "$color.bg.neutral-weak-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-300" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-400" + } + } + }, + "$color.bg.overlay-muted": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.static-black-alpha-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.static-black-alpha-200" + } + } + }, + "$color.bg.positive-weak": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.green-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.green-100" + } + } + }, + "$color.bg.positive-solid": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.green-700" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.green-500" + } + } + }, + "$color.bg.positive-solid-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.green-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.green-500" + } + } + }, + "$color.bg.positive-weak-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.green-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.green-200" + } + } + }, + "$color.bg.warning-solid": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.yellow-300" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.yellow-600" + } + } + }, + "$color.bg.warning-weak": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.yellow-100" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.yellow-100" + } + } + }, + "$color.bg.warning-weak-pressed": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.yellow-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.yellow-200" + } + } + }, + "$color.stroke.neutral": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-300" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-300" + } + } + }, + "$color.stroke.brand": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.carrot-300" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.carrot-300" + } + } + }, + "$color.stroke.field": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-400" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-400" + } + } + }, + "$color.stroke.control": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-400" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-400" + } + } + }, + "$color.stroke.critical": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.red-300" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.red-300" + } + } + }, + "$color.stroke.positive": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.green-300" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.green-300" + } + } + }, + "$color.stroke.informative": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.blue-300" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.blue-300" + } + } + }, + "$color.stroke.field-focused": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-800" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-800" + } + } + }, + "$color.stroke.neutral-muted": { + "values": { + "theme-light": { + "type": "color", + "value": "$color.palette.gray-200" + }, + "theme-dark": { + "type": "color", + "value": "$color.palette.gray-200" + } + } + }, + "$color.manner-temp.l1.text": { + "values": { + "theme-light": { + "type": "color", + "value": "#62666a" + }, + "theme-dark": { + "type": "color", + "value": "#b1b5b9" + } + } + }, + "$color.manner-temp.l2.text": { + "values": { + "theme-light": { + "type": "color", + "value": "#2592f7" + }, + "theme-dark": { + "type": "color", + "value": "#7cbaf4" + } + } + }, + "$color.manner-temp.l3.text": { + "values": { + "theme-light": { + "type": "color", + "value": "#0099c8" + }, + "theme-dark": { + "type": "color", + "value": "#47c3eb" + } + } + }, + "$color.manner-temp.l4.text": { + "values": { + "theme-light": { + "type": "color", + "value": "#03a07e" + }, + "theme-dark": { + "type": "color", + "value": "#33cc94" + } + } + }, + "$color.manner-temp.l5.text": { + "values": { + "theme-light": { + "type": "color", + "value": "#d28500" + }, + "theme-dark": { + "type": "color", + "value": "#ffa100" + } + } + }, + "$color.manner-temp.l6.text": { + "values": { + "theme-light": { + "type": "color", + "value": "#f06000" + }, + "theme-dark": { + "type": "color", + "value": "#ff9147" + } + } + }, + "$color.manner-temp.l1.bg": { + "values": { + "theme-light": { + "type": "color", + "value": "#eff0f1" + }, + "theme-dark": { + "type": "color", + "value": "#222226" + } + } + }, + "$color.manner-temp.l2.bg": { + "values": { + "theme-light": { + "type": "color", + "value": "#e7f2fc" + }, + "theme-dark": { + "type": "color", + "value": "#16212b" + } + } + }, + "$color.manner-temp.l3.bg": { + "values": { + "theme-light": { + "type": "color", + "value": "#e3f6fc" + }, + "theme-dark": { + "type": "color", + "value": "#12262c" + } + } + }, + "$color.manner-temp.l4.bg": { + "values": { + "theme-light": { + "type": "color", + "value": "#ebf9f4" + }, + "theme-dark": { + "type": "color", + "value": "#162822" + } + } + }, + "$color.manner-temp.l5.bg": { + "values": { + "theme-light": { + "type": "color", + "value": "#fff5e5" + }, + "theme-dark": { + "type": "color", + "value": "#2e2312" + } + } + }, + "$color.manner-temp.l6.bg": { + "values": { + "theme-light": { + "type": "color", + "value": "#fff0e5" + }, + "theme-dark": { + "type": "color", + "value": "#2e1d12" + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/action-button.json b/docs/public/rootage-next/components/action-button.json new file mode 100644 index 000000000..7f9be341e --- /dev/null +++ b/docs/public/rootage-next/components/action-button.json @@ -0,0 +1,1269 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "action-button", + "name": "Action Button" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "colorDuration": { + "type": "color", + "value": "$duration.s4" + }, + "colorTimingFunction": { + "type": "color", + "value": "$timing-function.easing" + } + }, + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "variant": "brand solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.static-white-alpha-200" + }, + "rangeColor": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.static-white-alpha-200" + }, + "rangeColor": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted-pressed" + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.gray-500" + }, + "rangeColor": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "variant": "critical solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.static-white-alpha-200" + }, + "rangeColor": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-solid-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-solid-pressed" + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.gray-500" + }, + "rangeColor": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + } + } + } + } + ] + }, + { + "variants": { + "variant": "brand outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.carrot-200" + }, + "rangeColor": { + "type": "color", + "value": "$color.bg.brand-solid" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + } + } + } + } + ] + }, + { + "variants": { + "size": "xsmall" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s8" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "xsmall", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s1_5" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "xsmall", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s8" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s1_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s1_5" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s9" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s2" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "small", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "small", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s9" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s10" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s2" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "medium", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s10" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s2_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 18, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s13" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s3" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 18, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "large", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "prefixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 22, + "unit": "px" + } + } + }, + "suffixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 22, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s6" + } + } + } + } + ] + }, + { + "variants": { + "size": "large", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s13" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 22, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/action-chip.json b/docs/public/rootage-next/components/action-chip.json new file mode 100644 index 000000000..c0df9ea85 --- /dev/null +++ b/docs/public/rootage-next/components/action-chip.json @@ -0,0 +1,325 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "action-chip", + "name": "Action Chip" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral-subtle" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s8" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s1_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "count": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s9" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "count": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "small", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s3" + } + } + } + } + ] + }, + { + "variants": { + "size": "small", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s8" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s9" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/action-sheet-close-button.json b/docs/public/rootage-next/components/action-sheet-close-button.json new file mode 100644 index 000000000..386cae8b3 --- /dev/null +++ b/docs/public/rootage-next/components/action-sheet-close-button.json @@ -0,0 +1,73 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "action-sheet-close-button", + "name": "Action Sheet Close Button" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 50, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + }, + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating-pressed" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/action-sheet-item.json b/docs/public/rootage-next/components/action-sheet-item.json new file mode 100644 index 000000000..9c1624f51 --- /dev/null +++ b/docs/public/rootage-next/components/action-sheet-item.json @@ -0,0 +1,109 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "action-sheet-item", + "name": "Action Sheet Item" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 50, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating-pressed" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "tone": "critical" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.critical" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/action-sheet.json b/docs/public/rootage-next/components/action-sheet.json new file mode 100644 index 000000000..0f52c6ff8 --- /dev/null +++ b/docs/public/rootage-next/components/action-sheet.json @@ -0,0 +1,144 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "action-sheet", + "name": "Action Sheet" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "backdrop": { + "color": { + "type": "color", + "value": "$color.bg.overlay" + }, + "enterDuration": { + "type": "color", + "value": "$duration.s2" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter" + }, + "enterOpacity": { + "type": "number", + "value": 0 + }, + "exitDuration": { + "type": "color", + "value": "$duration.s2" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + }, + "exitOpacity": { + "type": "number", + "value": 0 + } + }, + "content": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating" + }, + "cornerTopRadius": { + "type": "color", + "value": "$radius.s5" + }, + "enterDuration": { + "type": "color", + "value": "$duration.s6" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter-expressive" + }, + "exitDuration": { + "type": "color", + "value": "$duration.s4" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + } + }, + "header": { + "paddingX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + } + }, + "title": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + }, + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + } + }, + "description": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + }, + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + } + }, + "divider": { + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + }, + "marginX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/avatar-stack.json b/docs/public/rootage-next/components/avatar-stack.json new file mode 100644 index 000000000..9000add12 --- /dev/null +++ b/docs/public/rootage-next/components/avatar-stack.json @@ -0,0 +1,191 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "avatar-stack", + "name": "Avatar Stack" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "item": { + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "strokeColor": { + "type": "color", + "value": "$color.bg.layer-default" + } + } + } + } + ] + }, + { + "variants": { + "size": "20" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "dimension", + "value": { + "value": -5, + "unit": "px" + } + } + }, + "item": { + "strokeWidth": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "24" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "dimension", + "value": { + "value": -6, + "unit": "px" + } + } + }, + "item": { + "strokeWidth": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "36" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "dimension", + "value": { + "value": -8, + "unit": "px" + } + } + }, + "item": { + "strokeWidth": { + "type": "dimension", + "value": { + "value": 3, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "48" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "dimension", + "value": { + "value": -10, + "unit": "px" + } + } + }, + "item": { + "strokeWidth": { + "type": "dimension", + "value": { + "value": 4, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "64" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "dimension", + "value": { + "value": -10, + "unit": "px" + } + } + }, + "item": { + "strokeWidth": { + "type": "dimension", + "value": { + "value": 4, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/avatar.json b/docs/public/rootage-next/components/avatar.json new file mode 100644 index 000000000..e950cf2de --- /dev/null +++ b/docs/public/rootage-next/components/avatar.json @@ -0,0 +1,261 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "avatar", + "name": "Avatar" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "badge": { + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "color": { + "type": "color", + "value": "$color.bg.layer-default" + } + } + } + } + ] + }, + { + "variants": { + "size": "20" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "dimension", + "value": { + "value": 20, + "unit": "px" + } + } + }, + "badge": { + "size": { + "type": "dimension", + "value": { + "value": 10, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "24" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + } + }, + "badge": { + "size": { + "type": "dimension", + "value": { + "value": 12, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "36" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "dimension", + "value": { + "value": 36, + "unit": "px" + } + } + }, + "badge": { + "size": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "48" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "dimension", + "value": { + "value": 48, + "unit": "px" + } + } + }, + "badge": { + "size": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "64" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "dimension", + "value": { + "value": 64, + "unit": "px" + } + } + }, + "badge": { + "size": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "80" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "dimension", + "value": { + "value": 80, + "unit": "px" + } + } + }, + "badge": { + "size": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "96" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "dimension", + "value": { + "value": 96, + "unit": "px" + } + } + }, + "badge": { + "size": { + "type": "dimension", + "value": { + "value": 32, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/badge.json b/docs/public/rootage-next/components/badge.json new file mode 100644 index 000000000..86fdd2cc0 --- /dev/null +++ b/docs/public/rootage-next/components/badge.json @@ -0,0 +1,621 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "badge", + "name": "Badge" + }, + "data": [ + { + "variants": { + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s6" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s1" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s5" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s1_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s0_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s1" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s1" + } + } + } + } + ] + }, + { + "variants": { + "shape": "pill" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "borderRadius": { + "type": "color", + "value": "$radius.full" + } + } + } + } + ] + }, + { + "variants": { + "shape": "rectangle", + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "borderRadius": { + "type": "color", + "value": "$radius.s1_5" + } + } + } + } + ] + }, + { + "variants": { + "shape": "rectangle", + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "borderRadius": { + "type": "color", + "value": "$radius.s1" + } + } + } + } + ] + }, + { + "variants": { + "variant": "weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + } + ] + }, + { + "variants": { + "variant": "solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "variant": "outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + } + }, + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral", + "variant": "weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral", + "variant": "solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral", + "variant": "outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "tone": "brand", + "variant": "weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.brand-contrast" + } + } + } + } + ] + }, + { + "variants": { + "tone": "brand", + "variant": "solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + } + ] + }, + { + "variants": { + "tone": "brand", + "variant": "outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.brand" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + } + } + } + ] + }, + { + "variants": { + "tone": "informative", + "variant": "weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.informative-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + } + } + } + ] + }, + { + "variants": { + "tone": "informative", + "variant": "solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.informative-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + } + ] + }, + { + "variants": { + "tone": "informative", + "variant": "outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.informative" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.informative" + } + } + } + } + ] + }, + { + "variants": { + "tone": "positive", + "variant": "weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.positive-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.positive-contrast" + } + } + } + } + ] + }, + { + "variants": { + "tone": "positive", + "variant": "solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.positive-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + } + ] + }, + { + "variants": { + "tone": "positive", + "variant": "outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.positive" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.positive" + } + } + } + } + ] + }, + { + "variants": { + "tone": "critical", + "variant": "weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + } + } + } + ] + }, + { + "variants": { + "tone": "critical", + "variant": "solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + } + ] + }, + { + "variants": { + "tone": "critical", + "variant": "outline" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.critical" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.critical" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/bottom-sheet.json b/docs/public/rootage-next/components/bottom-sheet.json new file mode 100644 index 000000000..99132a2db --- /dev/null +++ b/docs/public/rootage-next/components/bottom-sheet.json @@ -0,0 +1,196 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "bottom-sheet", + "name": "Bottom Sheet" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "backdrop": { + "color": { + "type": "color", + "value": "$color.bg.overlay" + }, + "enterDuration": { + "type": "color", + "value": "$duration.s2" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter" + }, + "enterOpacity": { + "type": "number", + "value": 0 + }, + "exitDuration": { + "type": "color", + "value": "$duration.s2" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + }, + "exitOpacity": { + "type": "number", + "value": 0 + } + }, + "content": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "cornerTopRadius": { + "type": "color", + "value": "$radius.s6" + }, + "enterDuration": { + "type": "color", + "value": "$duration.s6" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter-expressive" + }, + "exitDuration": { + "type": "color", + "value": "$duration.s4" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + } + }, + "header": { + "gap": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + }, + "paddingTop": { + "type": "color", + "value": "$dimension.s6" + }, + "paddingBottom": { + "type": "color", + "value": "$dimension.s4" + } + }, + "body": { + "paddingX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + } + }, + "footer": { + "paddingX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + }, + "paddingTop": { + "type": "color", + "value": "$dimension.s3" + }, + "paddingBottom": { + "type": "color", + "value": "$dimension.s4" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s8" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s8" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s6" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "closeButton": { + "color": { + "type": "color", + "value": "$color.palette.gray-300" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "targetSize": { + "type": "dimension", + "value": { + "value": 44, + "unit": "px" + } + }, + "size": { + "type": "dimension", + "value": { + "value": 28, + "unit": "px" + } + }, + "fromTop": { + "type": "color", + "value": "$dimension.s5" + }, + "fromRight": { + "type": "color", + "value": "$dimension.s5" + } + }, + "closeIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/callout.json b/docs/public/rootage-next/components/callout.json new file mode 100644 index 000000000..31a3d5301 --- /dev/null +++ b/docs/public/rootage-next/components/callout.json @@ -0,0 +1,431 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "callout", + "name": "Callout" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "padding": { + "type": "color", + "value": "$dimension.s3_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s3" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s2_5" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 50, + "unit": "px" + } + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "title": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "description": { + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "dismissButton": { + "size": { + "type": "color", + "value": "$dimension.s10" + } + }, + "dismissIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "actionableIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "tone": "informative" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.informative-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.informative-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "tone": "warning" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.warning-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.warning-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "tone": "critical" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "tone": "magic" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.magic-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.magic-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.magic-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.magic-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.magic-contrast" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.magic-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.magic-contrast" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.magic-weak-pressed" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/checkbox.json b/docs/public/rootage-next/components/checkbox.json new file mode 100644 index 000000000..79818c459 --- /dev/null +++ b/docs/public/rootage-next/components/checkbox.json @@ -0,0 +1,477 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "checkbox", + "name": "Checkbox" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "root": { + "gap": { + "type": "color", + "value": "$dimension.s2" + } + } + } + } + ] + }, + { + "variants": { + "weight": "default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "weight": "stronger" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "variant": "square" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "control": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.control" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + } + } + } + }, + { + "states": [ + "enabled", + "selected" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "pressed", + "selected" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "disabledSelected" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "variant": "ghost" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "icon": { + "color": { + "type": "color", + "value": "$color.fg.placeholder" + } + } + } + }, + { + "states": [ + "enabled", + "selected" + ], + "slots": { + "icon": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "pressed", + "selected" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.bg.brand-weak-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "disabled", + "selected" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s8" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "control": { + "size": { + "type": "color", + "value": "$dimension.s5" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s1" + } + } + } + } + ] + }, + { + "variants": { + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s9" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "control": { + "size": { + "type": "color", + "value": "$dimension.s6" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s1" + } + } + } + } + ] + }, + { + "variants": { + "variant": "square", + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 12, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "variant": "square", + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "variant": "ghost", + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "variant": "ghost", + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 18, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/chip-tab.json b/docs/public/rootage-next/components/chip-tab.json new file mode 100644 index 000000000..76d3961f1 --- /dev/null +++ b/docs/public/rootage-next/components/chip-tab.json @@ -0,0 +1,270 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "chip-tab", + "name": "Chip Tab" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 36, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + }, + { + "states": [ + "enabled", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + } + } + }, + { + "states": [ + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "selected", + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "variant": "brand solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + }, + { + "states": [ + "enabled", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + }, + { + "states": [ + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "selected", + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/chip-tablist.json b/docs/public/rootage-next/components/chip-tablist.json new file mode 100644 index 000000000..175eff892 --- /dev/null +++ b/docs/public/rootage-next/components/chip-tablist.json @@ -0,0 +1,73 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "chip-tablist", + "name": "Chip Tablist" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "triggerList": { + "gap": { + "type": "dimension", + "value": { + "value": 0, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "variant": "brand solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "triggerList": { + "gap": { + "type": "dimension", + "value": { + "value": 8, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/control-chip.json b/docs/public/rootage-next/components/control-chip.json new file mode 100644 index 000000000..ff2aa614c --- /dev/null +++ b/docs/public/rootage-next/components/control-chip.json @@ -0,0 +1,397 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "control-chip", + "name": "Control Chip" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral-subtle" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "selected" + ], + "slots": { + "root": { + "strokeWidth": { + "type": "number", + "value": 0 + }, + "color": { + "type": "color", + "value": "$color.bg.neutral-solid-muted" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.palette.static-white-alpha-800" + } + } + } + }, + { + "states": [ + "selected", + " pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-solid-muted-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s8" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s1_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "count": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s9" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "count": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "small", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s3" + } + } + } + } + ] + }, + { + "variants": { + "size": "small", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s8" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium", + "layout": "with text" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium", + "layout": "icon only" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minWidth": { + "type": "color", + "value": "$dimension.s9" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/dialog.json b/docs/public/rootage-next/components/dialog.json new file mode 100644 index 000000000..855541c84 --- /dev/null +++ b/docs/public/rootage-next/components/dialog.json @@ -0,0 +1,160 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "dialog", + "name": "Dialog" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "backdrop": { + "color": { + "type": "color", + "value": "$color.bg.overlay" + }, + "enterDuration": { + "type": "color", + "value": "$duration.s2" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter" + }, + "enterOpacity": { + "type": "number", + "value": 0 + }, + "exitDuration": { + "type": "color", + "value": "$duration.s2" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + }, + "exitOpacity": { + "type": "number", + "value": 0 + } + }, + "content": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s5" + }, + "marginX": { + "type": "color", + "value": "$dimension.s8" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s5" + }, + "maxWidth": { + "type": "dimension", + "value": { + "value": 272, + "unit": "px" + } + }, + "enterDuration": { + "type": "color", + "value": "$duration.s4" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter-expressive" + }, + "enterOpacity": { + "type": "number", + "value": 0 + }, + "enterScale": { + "type": "number", + "value": 1.3 + }, + "exitDuration": { + "type": "color", + "value": "$duration.s2" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + }, + "exitOpacity": { + "type": "number", + "value": 0 + } + }, + "header": { + "gap": { + "type": "color", + "value": "$dimension.s1_5" + } + }, + "footer": { + "paddingTop": { + "type": "color", + "value": "$dimension.s4" + }, + "gap": { + "type": "color", + "value": "$dimension.s2" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s7" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s7" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/extended-action-sheet-close-button.json b/docs/public/rootage-next/components/extended-action-sheet-close-button.json new file mode 100644 index 000000000..3b35602cc --- /dev/null +++ b/docs/public/rootage-next/components/extended-action-sheet-close-button.json @@ -0,0 +1,81 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "extended-action-sheet-close-button", + "name": "Extended Action Sheet Close Button" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 52, + "unit": "px" + } + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s3" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s3" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/extended-action-sheet-item.json b/docs/public/rootage-next/components/extended-action-sheet-item.json new file mode 100644 index 000000000..93deccff0 --- /dev/null +++ b/docs/public/rootage-next/components/extended-action-sheet-item.json @@ -0,0 +1,134 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "extended-action-sheet-item", + "name": "Extended Action Sheet Item" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 52, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "prefixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 22, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "tone": "critical" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.critical" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.critical" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/extended-action-sheet.json b/docs/public/rootage-next/components/extended-action-sheet.json new file mode 100644 index 000000000..d2e03f4fe --- /dev/null +++ b/docs/public/rootage-next/components/extended-action-sheet.json @@ -0,0 +1,144 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "extended-action-sheet", + "name": "Extended Action Sheet" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "backdrop": { + "color": { + "type": "color", + "value": "$color.bg.overlay" + }, + "enterDuration": { + "type": "color", + "value": "$duration.s2" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter" + }, + "enterOpacity": { + "type": "number", + "value": 0 + }, + "exitDuration": { + "type": "color", + "value": "$duration.s2" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + }, + "exitOpacity": { + "type": "number", + "value": 0 + } + }, + "content": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating" + }, + "paddingX": { + "type": "color", + "value": "$dimension.spacing-x.global-gutter" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s4" + }, + "cornerTopRadius": { + "type": "color", + "value": "$radius.s5" + }, + "enterDuration": { + "type": "color", + "value": "$duration.s6" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter-expressive" + }, + "exitDuration": { + "type": "color", + "value": "$duration.s4" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + } + }, + "header": { + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingBottom": { + "type": "color", + "value": "$dimension.s4" + } + }, + "title": { + "fontSize": { + "type": "color", + "value": "$font-size.s6" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + }, + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "list": { + "gap": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "group": { + "cornerRadius": { + "type": "color", + "value": "$radius.s4" + } + }, + "divider": { + "strokeBottomWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + } + }, + "footer": { + "paddingTop": { + "type": "color", + "value": "$dimension.s2_5" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/extended-fab.json b/docs/public/rootage-next/components/extended-fab.json new file mode 100644 index 000000000..e8fa58eb9 --- /dev/null +++ b/docs/public/rootage-next/components/extended-fab.json @@ -0,0 +1,257 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "extended-fab", + "name": "Extended Fab" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "shadow": { + "type": "shadow", + "value": [ + { + "offsetX": { + "value": 0, + "unit": "px" + }, + "offsetY": { + "value": 2, + "unit": "px" + }, + "blur": { + "value": 6, + "unit": "px" + }, + "spread": { + "value": 0, + "unit": "px" + }, + "color": "#00000026" + } + ] + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral-inverted" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-inverted-pressed" + } + } + } + } + ] + }, + { + "variants": { + "variant": "layer floating" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating-pressed" + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "dimension", + "value": { + "value": 40, + "unit": "px" + } + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "prefixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "dimension", + "value": { + "value": 48, + "unit": "px" + } + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3" + } + }, + "prefixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/fab.json b/docs/public/rootage-next/components/fab.json new file mode 100644 index 000000000..27a8244a2 --- /dev/null +++ b/docs/public/rootage-next/components/fab.json @@ -0,0 +1,88 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "fab", + "name": "Fab" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "size": { + "type": "dimension", + "value": { + "value": 44, + "unit": "px" + } + }, + "shadow": { + "type": "shadow", + "value": [ + { + "offsetX": { + "value": 0, + "unit": "px" + }, + "offsetY": { + "value": 2, + "unit": "px" + }, + "blur": { + "value": 6, + "unit": "px" + }, + "spread": { + "value": 0, + "unit": "px" + }, + "color": "#00000026" + } + ] + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "size": { + "type": "dimension", + "value": { + "value": 22, + "unit": "px" + } + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-floating-pressed" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/help-bubble.json b/docs/public/rootage-next/components/help-bubble.json new file mode 100644 index 000000000..912f5fa6d --- /dev/null +++ b/docs/public/rootage-next/components/help-bubble.json @@ -0,0 +1,117 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "help-bubble", + "name": "Help Bubble" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-solid" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s3" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3" + } + }, + "arrow": { + "color": { + "type": "color", + "value": "$color.bg.neutral-solid" + }, + "size": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "closeButton": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + }, + "fromRight": { + "type": "dimension", + "value": { + "value": 4, + "unit": "px" + } + }, + "fromTop": { + "type": "dimension", + "value": { + "value": 4, + "unit": "px" + } + }, + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + }, + "targetSize": { + "type": "dimension", + "value": { + "value": 32, + "unit": "px" + } + } + }, + "backdrop": { + "color": { + "type": "color", + "value": "$color.bg.overlay" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/identity-placeholder.json b/docs/public/rootage-next/components/identity-placeholder.json new file mode 100644 index 000000000..49d5f54b5 --- /dev/null +++ b/docs/public/rootage-next/components/identity-placeholder.json @@ -0,0 +1,33 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "identity-placeholder", + "name": "Identity Placeholder" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.palette.gray-400" + } + }, + "image": { + "color": { + "type": "color", + "value": "#f7f8fa" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/inline-banner.json b/docs/public/rootage-next/components/inline-banner.json new file mode 100644 index 000000000..7395d8e4b --- /dev/null +++ b/docs/public/rootage-next/components/inline-banner.json @@ -0,0 +1,494 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "inline-banner", + "name": "Inline Banner" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "gap": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + } + }, + "content": { + "gap": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "minHeight": { + "type": "color", + "value": "$dimension.s10" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s4" + }, + "marginY": { + "type": "dimension", + "value": { + "value": 1.5, + "unit": "px" + } + } + }, + "title": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "description": { + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + }, + "linkLabel": { + "height": { + "type": "color", + "value": "$dimension.s10" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + }, + "dismissButton": { + "size": { + "type": "color", + "value": "$dimension.s10" + } + }, + "dismissIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "actionableIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "variant": "positive weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.positive-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.positive-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.positive-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.positive-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.positive-contrast" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.positive-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.positive-contrast" + } + } + } + } + ] + }, + { + "variants": { + "variant": "informative weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.informative-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.informative-contrast" + } + } + } + } + ] + }, + { + "variants": { + "variant": "warning weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.warning-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.warning-contrast" + } + } + } + } + ] + }, + { + "variants": { + "variant": "warning solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.warning-solid" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "dismissIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "variant": "critical weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-weak" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.fg.critical-contrast" + } + } + } + } + ] + }, + { + "variants": { + "variant": "critical solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.critical-solid" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "linkLabel": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "actionableIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/manner-temp-badge.json b/docs/public/rootage-next/components/manner-temp-badge.json new file mode 100644 index 000000000..9f54ca14f --- /dev/null +++ b/docs/public/rootage-next/components/manner-temp-badge.json @@ -0,0 +1,212 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "manner-temp-badge", + "name": "Manner Temp Badge" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "dimension", + "value": { + "value": 20, + "unit": "px" + } + }, + "paddingY": { + "type": "color", + "value": "$dimension.s0_5" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s1_5" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s1" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s1" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "level": "l1" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.manner-temp.l1.bg" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.manner-temp.l1.text" + } + } + } + } + ] + }, + { + "variants": { + "level": "l2" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.manner-temp.l2.bg" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.manner-temp.l2.text" + } + } + } + } + ] + }, + { + "variants": { + "level": "l3" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.manner-temp.l3.bg" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.manner-temp.l3.text" + } + } + } + } + ] + }, + { + "variants": { + "level": "l4" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.manner-temp.l4.bg" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.manner-temp.l4.text" + } + } + } + } + ] + }, + { + "variants": { + "level": "l5" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.manner-temp.l5.bg" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.manner-temp.l5.text" + } + } + } + } + ] + }, + { + "variants": { + "level": "l6" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.manner-temp.l6.bg" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.manner-temp.l6.text" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/progress-circle.json b/docs/public/rootage-next/components/progress-circle.json new file mode 100644 index 000000000..88d574d63 --- /dev/null +++ b/docs/public/rootage-next/components/progress-circle.json @@ -0,0 +1,230 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "progress-circle", + "name": "Progress Circle" + }, + "data": [ + { + "variants": { + "size": "40" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "color", + "value": "$dimension.s10" + }, + "thickness": { + "type": "dimension", + "value": { + "value": 5, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "24" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "color", + "value": "$dimension.s6" + }, + "thickness": { + "type": "dimension", + "value": { + "value": 3, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "indeterminate": "false" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "range": { + "lengthDuration": { + "type": "duration", + "value": { + "value": 300, + "unit": "ms" + } + }, + "lengthTimingFunction": { + "type": "cubicBezier", + "value": [ + 0, + 0, + 0.15, + 1 + ] + } + } + } + } + ] + }, + { + "variants": { + "indeterminate": "true" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "range": { + "lengthDuration": { + "type": "duration", + "value": { + "value": 1.2, + "unit": "s" + } + }, + "rotateDuration": { + "type": "duration", + "value": { + "value": 1.2, + "unit": "s" + } + }, + "headTimingFunction": { + "type": "cubicBezier", + "value": [ + 0.35, + 0, + 0.65, + 1 + ] + }, + "tailTimingFunction": { + "type": "cubicBezier", + "value": [ + 0.35, + 0, + 0.65, + 0.6 + ] + }, + "rotateTimingFunction": { + "type": "cubicBezier", + "value": [ + 0.35, + 0.25, + 0.65, + 0.75 + ] + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "track": { + "color": { + "type": "color", + "value": "$color.palette.gray-200" + } + }, + "range": { + "color": { + "type": "color", + "value": "$color.palette.gray-500" + } + } + } + } + ] + }, + { + "variants": { + "tone": "brand" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "track": { + "color": { + "type": "color", + "value": "$color.palette.carrot-200" + } + }, + "range": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + } + } + } + } + ] + }, + { + "variants": { + "tone": "static white" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "track": { + "color": { + "type": "color", + "value": "$color.palette.static-white-alpha-200" + } + }, + "range": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/radio.json b/docs/public/rootage-next/components/radio.json new file mode 100644 index 000000000..f0e32e126 --- /dev/null +++ b/docs/public/rootage-next/components/radio.json @@ -0,0 +1,215 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "radio", + "name": "Radio" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.control" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "icon": { + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + } + } + }, + { + "states": [ + "enabled", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "enabled", + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 0, + "unit": "px" + } + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "enabled", + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.palette.gray-300" + } + } + } + }, + { + "states": [ + "disabled", + "selected" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.palette.gray-300" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.gray-300" + } + } + } + } + ] + }, + { + "variants": { + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "color", + "value": "$dimension.s6" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s2_5" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "icon": { + "size": { + "type": "color", + "value": "$dimension.s3" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "size": { + "type": "color", + "value": "$dimension.s5" + } + }, + "icon": { + "size": { + "type": "color", + "value": "$dimension.s2" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "icon": { + "size": { + "type": "color", + "value": "$dimension.s2_5" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/reaction-button.json b/docs/public/rootage-next/components/reaction-button.json new file mode 100644 index 000000000..e639abb35 --- /dev/null +++ b/docs/public/rootage-next/components/reaction-button.json @@ -0,0 +1,384 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "reaction-button", + "name": "Reaction Button" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + }, + "colorDuration": { + "type": "color", + "value": "$duration.s4" + }, + "colorTimingFunction": { + "type": "color", + "value": "$timing-function.easing" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.gray-500" + }, + "rangeColor": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.brand" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.carrot-200" + }, + "rangeColor": { + "type": "color", + "value": "$color.fg.brand" + } + } + } + }, + { + "states": [ + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 0, + "unit": "px" + } + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "count": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "selected", + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "xsmall" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s8" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s1_5" + } + }, + "prefixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 18, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + } + }, + "count": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s9" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + } + }, + "prefixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 18, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + } + }, + "count": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/segment.json b/docs/public/rootage-next/components/segment.json new file mode 100644 index 000000000..f68777d14 --- /dev/null +++ b/docs/public/rootage-next/components/segment.json @@ -0,0 +1,158 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "segment", + "name": "Segment" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "height": { + "type": "color", + "value": "$dimension.s8" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "minWidth": { + "type": "dimension", + "value": { + "value": 86, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + }, + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + } + } + } + }, + { + "states": [ + "enabled", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "enabled", + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "shadow": { + "type": "shadow", + "value": [ + { + "offsetX": { + "value": 0, + "unit": "px" + }, + "offsetY": { + "value": 1, + "unit": "px" + }, + "blur": { + "value": 6, + "unit": "px" + }, + "spread": { + "value": 0, + "unit": "px" + }, + "color": "#0000000d" + } + ] + }, + "transformDuration": { + "type": "color", + "value": "$duration.s4" + }, + "transformTimingFunction": { + "type": "color", + "value": "$timing-function.easing" + } + }, + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + }, + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "enabled", + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/segmented-control.json b/docs/public/rootage-next/components/segmented-control.json new file mode 100644 index 000000000..79739bae1 --- /dev/null +++ b/docs/public/rootage-next/components/segmented-control.json @@ -0,0 +1,35 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "segmented-control", + "name": "Segmented Control" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "padding": { + "type": "color", + "value": "$dimension.s1" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/select-box.json b/docs/public/rootage-next/components/select-box.json new file mode 100644 index 000000000..eb45bd735 --- /dev/null +++ b/docs/public/rootage-next/components/select-box.json @@ -0,0 +1,261 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "select-box", + "name": "Select Box" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s5" + }, + "gap": { + "type": "color", + "value": "$dimension.s2_5" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s3" + } + }, + "content": { + "gap": { + "type": "color", + "value": "$dimension.s0_5" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "checkboxControl": { + "size": { + "type": "color", + "value": "$dimension.s6" + }, + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.control" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s1" + } + }, + "checkboxIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "radioControl": { + "size": { + "type": "color", + "value": "$dimension.s6" + }, + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.control" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "radioIcon": { + "size": { + "type": "color", + "value": "$dimension.s2_5" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + } + } + }, + { + "states": [ + "enabled", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + }, + "checkboxControl": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + }, + "radioControl": { + "color": { + "type": "color", + "value": "$color.bg.layer-default-pressed" + } + } + } + }, + { + "states": [ + "enabled", + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.control" + } + }, + "checkboxControl": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + }, + "strokeWidth": { + "type": "number", + "value": 0 + } + }, + "checkboxIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "radioControl": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + }, + "strokeWidth": { + "type": "number", + "value": 0 + } + }, + "radioIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "enabled", + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + }, + "checkboxControl": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + }, + "radioControl": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/skeleton.json b/docs/public/rootage-next/components/skeleton.json new file mode 100644 index 000000000..5a405e278 --- /dev/null +++ b/docs/public/rootage-next/components/skeleton.json @@ -0,0 +1,133 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "skeleton", + "name": "Skeleton" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.palette.gray-200" + } + }, + "shimmer": { + "duration": { + "type": "duration", + "value": { + "value": 1.5, + "unit": "s" + } + }, + "timingFunction": { + "type": "color", + "value": "$timing-function.easing" + }, + "color": { + "type": "color", + "value": "$gradient.shimmer" + } + } + } + } + ] + }, + { + "variants": { + "radius": "0" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "dimension", + "value": { + "value": 0, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "radius": "8" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "dimension", + "value": { + "value": 8, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "radius": "16" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "radius": "full" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/snackbar.json b/docs/public/rootage-next/components/snackbar.json new file mode 100644 index 000000000..994f037be --- /dev/null +++ b/docs/public/rootage-next/components/snackbar.json @@ -0,0 +1,194 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "snackbar", + "name": "Snackbar" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "region": { + "paddingX": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + }, + "offsetDuration": { + "type": "color", + "value": "$duration.s4" + }, + "offsetTimingFunction": { + "type": "color", + "value": "$timing-function.easing" + } + }, + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-solid" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s2" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 44, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s2" + }, + "enterOpacity": { + "type": "number", + "value": 0 + }, + "enterDuration": { + "type": "color", + "value": "$duration.s4" + }, + "enterTimingFunction": { + "type": "color", + "value": "$timing-function.enter" + }, + "exitOpacity": { + "type": "number", + "value": 0 + }, + "exitDuration": { + "type": "color", + "value": "$duration.s4" + }, + "exitTimingFunction": { + "type": "color", + "value": "$timing-function.exit" + } + }, + "message": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "prefixIcon": { + "size": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + } + }, + "actionButton": { + "targetPaddingX": { + "type": "color", + "value": "$dimension.s2" + }, + "targetMinHeight": { + "type": "dimension", + "value": { + "value": 44, + "unit": "px" + } + }, + "color": { + "type": "color", + "value": "$color.fg.brand" + }, + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "variant": "default" + }, + "definitions": [] + }, + { + "variants": { + "variant": "positive" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.positive" + } + } + } + } + ] + }, + { + "variants": { + "variant": "critical" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.critical" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/switch.json b/docs/public/rootage-next/components/switch.json new file mode 100644 index 000000000..4726d736c --- /dev/null +++ b/docs/public/rootage-next/components/switch.json @@ -0,0 +1,267 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "switch", + "name": "Switch" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.palette.gray-600" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + }, + "thumb": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + } + } + } + }, + { + "states": [ + "enabled", + "selected" + ], + "slots": { + "control": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "opacity": { + "type": "number", + "value": 0.38 + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "height": { + "type": "dimension", + "value": { + "value": 32, + "unit": "px" + } + } + }, + "control": { + "height": { + "type": "dimension", + "value": { + "value": 32, + "unit": "px" + } + }, + "width": { + "type": "dimension", + "value": { + "value": 52, + "unit": "px" + } + }, + "paddingX": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + }, + "paddingY": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + }, + "thumb": { + "height": { + "type": "dimension", + "value": { + "value": 28, + "unit": "px" + } + }, + "width": { + "type": "dimension", + "value": { + "value": 28, + "unit": "px" + } + }, + "shadow": { + "type": "shadow", + "value": [ + { + "offsetX": { + "value": 0, + "unit": "px" + }, + "offsetY": { + "value": 3, + "unit": "px" + }, + "blur": { + "value": 8, + "unit": "px" + }, + "spread": { + "value": 0, + "unit": "px" + }, + "color": "#00000026" + }, + { + "offsetX": { + "value": 0, + "unit": "px" + }, + "offsetY": { + "value": 1, + "unit": "px" + }, + "blur": { + "value": 3, + "unit": "px" + }, + "spread": { + "value": 0, + "unit": "px" + }, + "color": "#0000000f" + } + ] + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "height": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + }, + "gap": { + "type": "color", + "value": "$dimension.s2" + } + }, + "control": { + "height": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + }, + "width": { + "type": "dimension", + "value": { + "value": 26, + "unit": "px" + } + }, + "paddingX": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + }, + "paddingY": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + }, + "thumb": { + "height": { + "type": "dimension", + "value": { + "value": 12, + "unit": "px" + } + }, + "width": { + "type": "dimension", + "value": { + "value": 12, + "unit": "px" + } + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/tab.json b/docs/public/rootage-next/components/tab.json new file mode 100644 index 000000000..56f1bad72 --- /dev/null +++ b/docs/public/rootage-next/components/tab.json @@ -0,0 +1,153 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "tab", + "name": "Tab" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral-subtle" + } + }, + "notification": { + "size": { + "type": "color", + "value": "$dimension.s1" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + }, + "marginLeft": { + "type": "color", + "value": "$dimension.s0_5" + } + } + } + }, + { + "states": [ + "selected" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "dimension", + "value": { + "value": 44, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.s2_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "dimension", + "value": { + "value": 40, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.s2_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/tablist.json b/docs/public/rootage-next/components/tablist.json new file mode 100644 index 000000000..7b020b311 --- /dev/null +++ b/docs/public/rootage-next/components/tablist.json @@ -0,0 +1,140 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "tablist", + "name": "Tablist" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeBottomWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral" + } + }, + "indicator": { + "height": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + }, + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "layout": "hug" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "color", + "value": "$dimension.s4" + } + } + } + } + ] + }, + { + "variants": { + "layout": "fill" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingX": { + "type": "dimension", + "value": { + "value": 0, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "height": { + "type": "dimension", + "value": { + "value": 40, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "height": { + "type": "dimension", + "value": { + "value": 44, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/text-button.json b/docs/public/rootage-next/components/text-button.json new file mode 100644 index 000000000..c97fe8743 --- /dev/null +++ b/docs/public/rootage-next/components/text-button.json @@ -0,0 +1,277 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "text-button", + "name": "Text Button" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "paddingY": { + "type": "color", + "value": "$dimension.s0_5" + } + }, + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "prefixIcon": { + "marginXEnd": { + "type": "color", + "value": "$dimension.s1" + } + }, + "suffixIcon": { + "marginXStart": { + "type": "color", + "value": "$dimension.s0_5" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.palette.gray-200" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "tone": "brand" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.fg.brand" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "tone": "neutral subtle" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.fg.neutral-subtle" + } + } + } + } + ] + }, + { + "variants": { + "tone": "critical" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.fg.critical" + } + } + } + } + ] + }, + { + "variants": { + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "color", + "value": "$radius.s1_5" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s6" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "color", + "value": "$radius.s1_5" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "cornerRadius": { + "type": "color", + "value": "$radius.s1" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/text-field.json b/docs/public/rootage-next/components/text-field.json new file mode 100644 index 000000000..1260c7bd6 --- /dev/null +++ b/docs/public/rootage-next/components/text-field.json @@ -0,0 +1,771 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "text-field", + "name": "Text Field" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "indicator": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "field": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.field" + } + }, + "value": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "placeholder": { + "color": { + "type": "color", + "value": "$color.fg.placeholder" + } + }, + "prefixText": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixText": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "description": { + "color": { + "type": "color", + "value": "$color.fg.neutral-subtle" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "errorMessage": { + "color": { + "type": "color", + "value": "$color.fg.critical" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "characterCount": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + }, + "maxCharacterCount": { + "color": { + "type": "color", + "value": "$color.fg.neutral-subtle" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + }, + { + "states": [ + "focused" + ], + "slots": { + "field": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.field-focused" + } + } + } + }, + { + "states": [ + "invalid" + ], + "slots": { + "field": { + "color": { + "type": "color", + "value": "$color.bg.critical-weak" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.critical" + } + } + } + }, + { + "states": [ + "invalid", + "focused" + ], + "slots": { + "field": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + }, + "strokeColor": { + "type": "color", + "value": "$color.stroke.field" + } + } + } + }, + { + "states": [ + "readonly" + ], + "slots": { + "field": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "field": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "value": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "placeholder": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixText": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixText": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + } + ] + }, + { + "variants": { + "size": "xlarge" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "header": { + "paddingBottom": { + "type": "color", + "value": "$dimension.s3" + }, + "gap": { + "type": "color", + "value": "$dimension.s1_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "indicator": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "field": { + "minHeight": { + "type": "dimension", + "value": { + "value": 56, + "unit": "px" + } + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s2_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3" + } + }, + "value": { + "fontSize": { + "type": "color", + "value": "$font-size.s6" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + } + }, + "prefixText": { + "fontSize": { + "type": "color", + "value": "$font-size.s6" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s5" + } + }, + "suffixText": { + "fontSize": { + "type": "color", + "value": "$font-size.s6" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s5" + } + }, + "footer": { + "gap": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingTop": { + "type": "color", + "value": "$dimension.s2" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 20, + "unit": "px" + } + } + }, + "description": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "errorMessage": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "errorIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + }, + "marginRight": { + "type": "color", + "value": "$dimension.s1" + } + }, + "characterCount": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + }, + "maxCharacterCount": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + } + } + } + ] + }, + { + "variants": { + "size": "large" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "header": { + "paddingBottom": { + "type": "color", + "value": "$dimension.s3" + }, + "gap": { + "type": "color", + "value": "$dimension.s1_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "indicator": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "field": { + "minHeight": { + "type": "dimension", + "value": { + "value": 52, + "unit": "px" + } + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s2_5" + }, + "gap": { + "type": "color", + "value": "$dimension.s2" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s3" + } + }, + "value": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "prefixText": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s5" + } + }, + "suffixText": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s5" + } + }, + "footer": { + "gap": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingTop": { + "type": "color", + "value": "$dimension.s2" + }, + "minHeight": { + "type": "dimension", + "value": { + "value": 20, + "unit": "px" + } + } + }, + "description": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "errorMessage": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "errorIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + }, + "marginRight": { + "type": "color", + "value": "$dimension.s1" + } + }, + "characterCount": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + }, + "maxCharacterCount": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + } + } + } + ] + }, + { + "variants": { + "size": "medium" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "header": { + "paddingBottom": { + "type": "color", + "value": "$dimension.s3" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "indicator": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "field": { + "minHeight": { + "type": "dimension", + "value": { + "value": 40, + "unit": "px" + } + }, + "cornerRadius": { + "type": "color", + "value": "$radius.s2" + }, + "gap": { + "type": "color", + "value": "$dimension.s1_5" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2_5" + } + }, + "value": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "prefixText": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "suffixText": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s4" + } + }, + "footer": { + "gap": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingTop": { + "type": "color", + "value": "$dimension.s2" + }, + "minHeight": { + "type": "color", + "value": "$dimension.s4" + } + }, + "description": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + }, + "errorMessage": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + }, + "errorIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + }, + "marginRight": { + "type": "color", + "value": "$dimension.s1" + } + }, + "characterCount": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + }, + "maxCharacterCount": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/toggle-button.json b/docs/public/rootage-next/components/toggle-button.json new file mode 100644 index 000000000..837b92f32 --- /dev/null +++ b/docs/public/rootage-next/components/toggle-button.json @@ -0,0 +1,525 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "toggle-button", + "name": "Toggle Button" + }, + "data": [ + { + "variants": {}, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "colorDuration": { + "type": "color", + "value": "$duration.s4" + }, + "colorTimingFunction": { + "type": "color", + "value": "$timing-function.easing" + } + }, + "label": { + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "variant": "brand solid" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.static-white-alpha-200" + }, + "rangeColor": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + } + } + }, + { + "states": [ + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.gray-500" + }, + "rangeColor": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.brand-solid-pressed" + } + } + } + }, + { + "states": [ + "selected", + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "variant": "neutral weak" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.gray-500" + }, + "rangeColor": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "selected" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "progressCircle": { + "trackColor": { + "type": "color", + "value": "$color.palette.gray-500" + }, + "rangeColor": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + }, + { + "states": [ + "selected", + "pressed" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "disabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.disabled" + } + }, + "label": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "prefixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + }, + "suffixIcon": { + "color": { + "type": "color", + "value": "$color.fg.disabled" + } + } + } + }, + { + "states": [ + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + }, + { + "states": [ + "selected", + "loading" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.neutral-weak-pressed" + } + } + } + } + ] + }, + { + "variants": { + "size": "xsmall" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s8" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s3_5" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s1_5" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "size": "small" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "color", + "value": "$dimension.s9" + }, + "cornerRadius": { + "type": "color", + "value": "$radius.full" + }, + "gap": { + "type": "color", + "value": "$dimension.s1" + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + }, + "paddingY": { + "type": "color", + "value": "$dimension.s2" + } + }, + "prefixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "suffixIcon": { + "size": { + "type": "color", + "value": "$dimension.s3_5" + } + }, + "label": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + } + }, + "progressCircle": { + "size": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + }, + "thickness": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/top-navigation.json b/docs/public/rootage-next/components/top-navigation.json new file mode 100644 index 000000000..de9713dab --- /dev/null +++ b/docs/public/rootage-next/components/top-navigation.json @@ -0,0 +1,206 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "top-navigation", + "name": "Top Navigation" + }, + "data": [ + { + "variants": { + "theme": "cupertino" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "dimension", + "value": { + "value": 44, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + } + }, + "title": { + "fontSize": { + "type": "color", + "value": "$font-size.s6-static" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + }, + "targetSize": { + "type": "dimension", + "value": { + "value": 40, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "theme": "android" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "minHeight": { + "type": "dimension", + "value": { + "value": 56, + "unit": "px" + } + }, + "paddingX": { + "type": "color", + "value": "$dimension.s4" + } + }, + "title": { + "fontSize": { + "type": "color", + "value": "$font-size.s6-static" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "icon": { + "size": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + }, + "targetSize": { + "type": "dimension", + "value": { + "value": 40, + "unit": "px" + } + } + } + } + } + ] + }, + { + "variants": { + "tone": "layer" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "$color.bg.layer-default" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.fg.neutral" + } + } + } + } + ] + }, + { + "variants": { + "tone": "transparent" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "color": { + "type": "color", + "value": "#00000000" + } + }, + "title": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, + "icon": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + } + } + } + ] + }, + { + "variants": { + "divider": "true" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "strokeColor": { + "type": "color", + "value": "$color.stroke.neutral-muted" + }, + "strokeWidth": { + "type": "dimension", + "value": { + "value": 1, + "unit": "px" + } + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/components/typography.json b/docs/public/rootage-next/components/typography.json new file mode 100644 index 000000000..54e3e3f8f --- /dev/null +++ b/docs/public/rootage-next/components/typography.json @@ -0,0 +1,653 @@ +{ + "kind": "ComponentSpec", + "metadata": { + "id": "typography", + "name": "Typography" + }, + "data": [ + { + "variants": { + "textStyle": "label-small-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s1" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s1" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-small-strong" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s1" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s1" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-small-stronger" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s1" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s1" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-medium-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-medium-strong" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-medium-stronger" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s2" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s2" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-large-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-large-strong" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "label-large-stronger" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s3" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s3" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-small-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-small-reading-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-small-strong" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-small-stronger" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s4" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s4" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-medium-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-medium-reading-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-medium-strong" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.medium" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "body-medium-stronger" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "title-small-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s5" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s5" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "title-medium-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s6" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s6" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "title-large-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s7" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s7" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "heading-small-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s8" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s8" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "heading-medium-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s9" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s9" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "textStyle": "heading-large-default" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "root": { + "fontSize": { + "type": "color", + "value": "$font-size.s10" + }, + "lineHeight": { + "type": "color", + "value": "$line-height.s10" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/dimension.json b/docs/public/rootage-next/dimension.json new file mode 100644 index 000000000..7e20544dc --- /dev/null +++ b/docs/public/rootage-next/dimension.json @@ -0,0 +1,248 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "dimension", + "name": "Dimension" + }, + "data": { + "collection": "global", + "tokens": { + "$dimension.s0_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + }, + "$dimension.s1": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 4, + "unit": "px" + } + } + } + }, + "$dimension.s1_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 6, + "unit": "px" + } + } + } + }, + "$dimension.s2": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 8, + "unit": "px" + } + } + } + }, + "$dimension.s2_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 10, + "unit": "px" + } + } + } + }, + "$dimension.s3": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 12, + "unit": "px" + } + } + } + }, + "$dimension.s3_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + } + } + }, + "$dimension.s4": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + } + } + }, + "$dimension.s4_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 18, + "unit": "px" + } + } + } + }, + "$dimension.s5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 20, + "unit": "px" + } + } + } + }, + "$dimension.s6": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + } + } + }, + "$dimension.s7": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 28, + "unit": "px" + } + } + } + }, + "$dimension.s8": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 32, + "unit": "px" + } + } + } + }, + "$dimension.s9": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 36, + "unit": "px" + } + } + } + }, + "$dimension.s10": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 40, + "unit": "px" + } + } + } + }, + "$dimension.s12": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 48, + "unit": "px" + } + } + } + }, + "$dimension.s13": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 52, + "unit": "px" + } + } + } + }, + "$dimension.s14": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 56, + "unit": "px" + } + } + } + }, + "$dimension.s16": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 64, + "unit": "px" + } + } + } + }, + "$dimension.spacing-x.between-chips": { + "values": { + "default": { + "type": "dimension", + "value": "$dimension.s2" + } + }, + "description": "Chip 사이의 수평 간격에 사용합니다." + }, + "$dimension.spacing-x.global-gutter": { + "values": { + "default": { + "type": "dimension", + "value": "$dimension.s4" + } + }, + "description": "화면 전체에 적용되는 기본 수평 padding 값입니다." + }, + "$dimension.spacing-y.component-default": { + "values": { + "default": { + "type": "dimension", + "value": "$dimension.s3" + } + }, + "description": "컴포넌트 간 수직 간격 토큰이 정의되지 않은 컴포넌트 사이의 수직 간격에 사용합니다." + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/duration.json b/docs/public/rootage-next/duration.json new file mode 100644 index 000000000..b208bc7c1 --- /dev/null +++ b/docs/public/rootage-next/duration.json @@ -0,0 +1,78 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "duration", + "name": "Duration" + }, + "data": { + "collection": "global", + "tokens": { + "$duration.s1": { + "values": { + "default": { + "type": "duration", + "value": { + "value": 50, + "unit": "ms" + } + } + } + }, + "$duration.s2": { + "values": { + "default": { + "type": "duration", + "value": { + "value": 100, + "unit": "ms" + } + } + } + }, + "$duration.s3": { + "values": { + "default": { + "type": "duration", + "value": { + "value": 150, + "unit": "ms" + } + } + } + }, + "$duration.s4": { + "values": { + "default": { + "type": "duration", + "value": { + "value": 200, + "unit": "ms" + } + } + } + }, + "$duration.s5": { + "values": { + "default": { + "type": "duration", + "value": { + "value": 250, + "unit": "ms" + } + } + } + }, + "$duration.s6": { + "values": { + "default": { + "type": "duration", + "value": { + "value": 300, + "unit": "ms" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/font-size.json b/docs/public/rootage-next/font-size.json new file mode 100644 index 000000000..125bd49f0 --- /dev/null +++ b/docs/public/rootage-next/font-size.json @@ -0,0 +1,133 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "font-size", + "name": "Font Size" + }, + "data": { + "collection": "global", + "tokens": { + "$font-size.s1": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 0.6875, + "unit": "rem" + } + } + } + }, + "$font-size.s2": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 0.75, + "unit": "rem" + } + } + } + }, + "$font-size.s3": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 0.8125, + "unit": "rem" + } + } + } + }, + "$font-size.s4": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 0.875, + "unit": "rem" + } + } + } + }, + "$font-size.s5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1, + "unit": "rem" + } + } + } + }, + "$font-size.s6": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.125, + "unit": "rem" + } + } + } + }, + "$font-size.s7": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.25, + "unit": "rem" + } + } + } + }, + "$font-size.s8": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.375, + "unit": "rem" + } + } + } + }, + "$font-size.s9": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.5, + "unit": "rem" + } + } + } + }, + "$font-size.s10": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.625, + "unit": "rem" + } + } + } + }, + "$font-size.s6-static": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 18, + "unit": "px" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/font-weight.json b/docs/public/rootage-next/font-weight.json new file mode 100644 index 000000000..da41b6261 --- /dev/null +++ b/docs/public/rootage-next/font-weight.json @@ -0,0 +1,36 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "font-weight", + "name": "Font Weight" + }, + "data": { + "collection": "global", + "tokens": { + "$font-weight.regular": { + "values": { + "default": { + "type": "number", + "value": 400 + } + } + }, + "$font-weight.medium": { + "values": { + "default": { + "type": "number", + "value": 500 + } + } + }, + "$font-weight.bold": { + "values": { + "default": { + "type": "number", + "value": 700 + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/gradient.json b/docs/public/rootage-next/gradient.json new file mode 100644 index 000000000..5082de025 --- /dev/null +++ b/docs/public/rootage-next/gradient.json @@ -0,0 +1,59 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "gradient", + "name": "Gradient" + }, + "data": { + "collection": "color", + "tokens": { + "$gradient.shimmer": { + "values": { + "theme-light": { + "type": "gradient", + "value": [ + { + "color": "#ffffff00", + "position": 0 + }, + { + "color": "#ffffff66", + "position": 0.46 + }, + { + "color": "#ffffff66", + "position": 0.54 + }, + { + "color": "#ffffff00", + "position": 1 + } + ] + }, + "theme-dark": { + "type": "gradient", + "value": [ + { + "color": "#ffffff00", + "position": 0 + }, + { + "color": "#ffffff1a", + "position": 0.46 + }, + { + "color": "#ffffff1a", + "position": 0.54 + }, + { + "color": "#ffffff00", + "position": 1 + } + ] + } + }, + "description": "Shimmer effect, used for loading states" + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/line-height.json b/docs/public/rootage-next/line-height.json new file mode 100644 index 000000000..d19e92893 --- /dev/null +++ b/docs/public/rootage-next/line-height.json @@ -0,0 +1,122 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "line-height", + "name": "Line Height" + }, + "data": { + "collection": "global", + "tokens": { + "$line-height.s1": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 0.9375, + "unit": "rem" + } + } + } + }, + "$line-height.s2": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1, + "unit": "rem" + } + } + } + }, + "$line-height.s3": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.125, + "unit": "rem" + } + } + } + }, + "$line-height.s4": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.1875, + "unit": "rem" + } + } + } + }, + "$line-height.s5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.375, + "unit": "rem" + } + } + } + }, + "$line-height.s6": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.5, + "unit": "rem" + } + } + } + }, + "$line-height.s7": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.6875, + "unit": "rem" + } + } + } + }, + "$line-height.s8": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 1.875, + "unit": "rem" + } + } + } + }, + "$line-height.s9": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 2, + "unit": "rem" + } + } + } + }, + "$line-height.s10": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 2.1875, + "unit": "rem" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/parsed.json b/docs/public/rootage-next/parsed.json new file mode 100644 index 000000000..cb01a7da5 --- /dev/null +++ b/docs/public/rootage-next/parsed.json @@ -0,0 +1,31792 @@ +{ + "kind": "RootageAST", + "componentSpecs": [ + { + "kind": "ComponentSpecDeclaration", + "id": "action-button", + "name": "Action Button", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "colorDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "colorTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "easing" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "brand solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-200" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-200" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "critical solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-200" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-solid-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-solid-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "brand outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-200" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "xsmall" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "xsmall" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "xsmall" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 18, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s13" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 18, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 22, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 22, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s13" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 22, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "action-chip", + "name": "Action Chip", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-subtle" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "action-sheet-close-button", + "name": "Action Sheet Close Button", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 50, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating-pressed" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "action-sheet-item", + "name": "Action Sheet Item", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 50, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "critical" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "action-sheet", + "name": "Action Sheet", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "backdrop", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "overlay" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "enterOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "exitOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "content", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerTopRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter-expressive" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "header", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "divider", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "marginX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "avatar-stack", + "name": "Avatar Stack", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "item", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "20" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "gap", + "value": { + "kind": "DimensionLit", + "value": -5, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "item", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "24" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "gap", + "value": { + "kind": "DimensionLit", + "value": -6, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "item", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "36" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "gap", + "value": { + "kind": "DimensionLit", + "value": -8, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "item", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 3, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "48" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "gap", + "value": { + "kind": "DimensionLit", + "value": -10, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "item", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 4, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "64" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "gap", + "value": { + "kind": "DimensionLit", + "value": -10, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "item", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 4, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "avatar", + "name": "Avatar", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "20" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 20, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 10, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "24" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 12, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "36" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 36, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "48" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 48, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "64" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 64, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "80" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 80, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "96" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 96, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "badge", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 32, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "badge", + "name": "Badge", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s0_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s1" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "shape", + "value": "pill" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "borderRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "shape", + "value": "rectangle" + }, + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "borderRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1_5" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "shape", + "value": "rectangle" + }, + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "borderRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "brand" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "brand" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "brand" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "informative" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "informative" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "informative" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "informative" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "positive" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "positive-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "positive" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "positive-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "positive" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "positive" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "critical" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "critical" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "critical" + }, + { + "kind": "VariantExpression", + "name": "variant", + "value": "outline" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "critical" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "bottom-sheet", + "name": "Bottom Sheet", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "backdrop", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "overlay" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "enterOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "exitOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "content", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerTopRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter-expressive" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "header", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingBottom", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "body", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "footer", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingBottom", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "closeButton", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "targetSize", + "value": { + "kind": "DimensionLit", + "value": 44, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 28, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fromTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fromRight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "closeIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "callout", + "name": "Callout", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "padding", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 50, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissButton", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "informative" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "warning" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "warning-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "warning-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "critical" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "magic" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "magic-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic-contrast" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "magic-weak-pressed" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "checkbox", + "name": "Checkbox", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "weight", + "value": "default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "weight", + "value": "stronger" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "square" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "control" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabledSelected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "ghost" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "placeholder" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "square" + }, + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 12, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "square" + }, + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "ghost" + }, + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "ghost" + }, + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 18, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "chip-tab", + "name": "Chip Tab", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 36, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "brand solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "chip-tablist", + "name": "Chip Tablist", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "triggerList", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "gap", + "value": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "brand solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "triggerList", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "gap", + "value": { + "kind": "DimensionLit", + "value": 8, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "control-chip", + "name": "Control Chip", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-subtle" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "NumberPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid-muted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-800" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": " pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid-muted-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "with text" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + }, + { + "kind": "VariantExpression", + "name": "layout", + "value": "icon only" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "dialog", + "name": "Dialog", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "backdrop", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "overlay" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "enterOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "exitOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "content", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "marginX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "maxWidth", + "value": { + "kind": "DimensionLit", + "value": 272, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter-expressive" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "enterOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "enterScale", + "value": { + "kind": "NumberLit", + "value": 1.3 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "exitOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "header", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "footer", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s7" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s7" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "extended-action-sheet-close-button", + "name": "Extended Action Sheet Close Button", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 52, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "extended-action-sheet-item", + "name": "Extended Action Sheet Item", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 52, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 22, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "critical" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "extended-action-sheet", + "name": "Extended Action Sheet", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "backdrop", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "overlay" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "enterOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "exitOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "content", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerTopRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter-expressive" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "header", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingBottom", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "list", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "group", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "divider", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeBottomWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "footer", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "extended-fab", + "name": "Extended Fab", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ShadowPropertyDeclaration", + "property": "shadow", + "value": { + "kind": "ShadowLit", + "layers": [ + { + "kind": "ShadowLayerLit", + "color": { + "kind": "ColorHexLit", + "value": "#00000026" + }, + "offsetX": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + }, + "offsetY": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + }, + "blur": { + "kind": "DimensionLit", + "value": 6, + "unit": "px" + }, + "spread": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "layer floating" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 40, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 48, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "fab", + "name": "Fab", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 44, + "unit": "px" + } + }, + { + "kind": "ShadowPropertyDeclaration", + "property": "shadow", + "value": { + "kind": "ShadowLit", + "layers": [ + { + "kind": "ShadowLayerLit", + "color": { + "kind": "ColorHexLit", + "value": "#00000026" + }, + "offsetX": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + }, + "offsetY": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + }, + "blur": { + "kind": "DimensionLit", + "value": 6, + "unit": "px" + }, + "spread": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 22, + "unit": "px" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating-pressed" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "help-bubble", + "name": "Help Bubble", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "arrow", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "closeButton", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "fromRight", + "value": { + "kind": "DimensionLit", + "value": 4, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "fromTop", + "value": { + "kind": "DimensionLit", + "value": 4, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "targetSize", + "value": { + "kind": "DimensionLit", + "value": 32, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "backdrop", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "overlay" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "identity-placeholder", + "name": "Identity Placeholder", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "image", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "ColorHexLit", + "value": "#f7f8fa" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "inline-banner", + "name": "Inline Banner", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "content", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "marginY", + "value": { + "kind": "DimensionLit", + "value": 1.5, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "height", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissButton", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "positive weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "positive-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "informative weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "warning weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "warning-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "warning solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "warning-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "dismissIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "critical weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "critical solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "linkLabel", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionableIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "manner-temp-badge", + "name": "Manner Temp Badge", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 20, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s0_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "level", + "value": "l1" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l1" + ], + "key": "bg" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l1" + ], + "key": "text" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "level", + "value": "l2" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l2" + ], + "key": "bg" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l2" + ], + "key": "text" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "level", + "value": "l3" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l3" + ], + "key": "bg" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l3" + ], + "key": "text" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "level", + "value": "l4" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l4" + ], + "key": "bg" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l4" + ], + "key": "text" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "level", + "value": "l5" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l5" + ], + "key": "bg" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l5" + ], + "key": "text" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "level", + "value": "l6" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l6" + ], + "key": "bg" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l6" + ], + "key": "text" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "progress-circle", + "name": "Progress Circle", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "40" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 5, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "24" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 3, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "indeterminate", + "value": "false" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "range", + "body": [ + { + "kind": "DurationPropertyDeclaration", + "property": "lengthDuration", + "value": { + "kind": "DurationLit", + "value": 300, + "unit": "ms" + } + }, + { + "kind": "CubicBezierPropertyDeclaration", + "property": "lengthTimingFunction", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0, + 0, + 0.15, + 1 + ] + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "indeterminate", + "value": "true" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "range", + "body": [ + { + "kind": "DurationPropertyDeclaration", + "property": "lengthDuration", + "value": { + "kind": "DurationLit", + "value": 1.2, + "unit": "s" + } + }, + { + "kind": "DurationPropertyDeclaration", + "property": "rotateDuration", + "value": { + "kind": "DurationLit", + "value": 1.2, + "unit": "s" + } + }, + { + "kind": "CubicBezierPropertyDeclaration", + "property": "headTimingFunction", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0.35, + 0, + 0.65, + 1 + ] + } + }, + { + "kind": "CubicBezierPropertyDeclaration", + "property": "tailTimingFunction", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0.35, + 0, + 0.65, + 0.6 + ] + } + }, + { + "kind": "CubicBezierPropertyDeclaration", + "property": "rotateTimingFunction", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0.35, + 0.25, + 0.65, + 0.75 + ] + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "track", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "range", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "brand" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "track", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-200" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "range", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "static white" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "track", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-200" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "range", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "radio", + "name": "Radio", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "control" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "reaction-button", + "name": "Reaction Button", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "colorDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "colorTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "easing" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "brand" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-200" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "xsmall" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 18, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 18, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "count", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "segment", + "name": "Segment", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "height", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minWidth", + "value": { + "kind": "DimensionLit", + "value": 86, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ShadowPropertyDeclaration", + "property": "shadow", + "value": { + "kind": "ShadowLit", + "layers": [ + { + "kind": "ShadowLayerLit", + "color": { + "kind": "ColorHexLit", + "value": "#0000000d" + }, + "offsetX": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + }, + "offsetY": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + }, + "blur": { + "kind": "DimensionLit", + "value": 6, + "unit": "px" + }, + "spread": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "transformDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "transformTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "easing" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "segmented-control", + "name": "Segmented Control", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "padding", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "select-box", + "name": "Select Box", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "content", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s0_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "checkboxControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "control" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "checkboxIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "radioControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "control" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "radioIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "checkboxControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "radioControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "control" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "checkboxControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "NumberLit", + "value": 0 + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "checkboxIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "radioControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "NumberLit", + "value": 0 + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "radioIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "checkboxControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "radioControl", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "skeleton", + "name": "Skeleton", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "shimmer", + "body": [ + { + "kind": "DurationPropertyDeclaration", + "property": "duration", + "value": { + "kind": "DurationLit", + "value": 1.5, + "unit": "s" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "timingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "easing" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "gradient" + ], + "key": "shimmer" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "radius", + "value": "0" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "radius", + "value": "8" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "DimensionLit", + "value": 8, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "radius", + "value": "16" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "radius", + "value": "full" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "snackbar", + "name": "Snackbar", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "region", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "offsetDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "offsetTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "easing" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 44, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "enterOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "enterTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter" + } + }, + { + "kind": "NumberPropertyDeclaration", + "property": "exitOpacity", + "value": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "exitTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "message", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "actionButton", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "targetPaddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "targetMinHeight", + "value": { + "kind": "DimensionLit", + "value": 44, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "default" + } + ], + "body": [] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "positive" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "critical" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "switch", + "name": "Switch", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-600" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "thumb", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + }, + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "NumberPropertyDeclaration", + "property": "opacity", + "value": { + "kind": "NumberLit", + "value": 0.38 + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 32, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 32, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "width", + "value": { + "kind": "DimensionLit", + "value": 52, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "thumb", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 28, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "width", + "value": { + "kind": "DimensionLit", + "value": 28, + "unit": "px" + } + }, + { + "kind": "ShadowPropertyDeclaration", + "property": "shadow", + "value": { + "kind": "ShadowLit", + "layers": [ + { + "kind": "ShadowLayerLit", + "color": { + "kind": "ColorHexLit", + "value": "#00000026" + }, + "offsetX": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + }, + "offsetY": { + "kind": "DimensionLit", + "value": 3, + "unit": "px" + }, + "blur": { + "kind": "DimensionLit", + "value": 8, + "unit": "px" + }, + "spread": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + }, + { + "kind": "ShadowLayerLit", + "color": { + "kind": "ColorHexLit", + "value": "#0000000f" + }, + "offsetX": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + }, + "offsetY": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + }, + "blur": { + "kind": "DimensionLit", + "value": 3, + "unit": "px" + }, + "spread": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "control", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "width", + "value": { + "kind": "DimensionLit", + "value": 26, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "thumb", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 12, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "width", + "value": { + "kind": "DimensionLit", + "value": 12, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "tab", + "name": "Tab", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-subtle" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "notification", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "marginLeft", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s0_5" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 44, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 40, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "tablist", + "name": "Tablist", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeBottomWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "indicator", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "layout", + "value": "hug" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "layout", + "value": "fill" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "DimensionLit", + "value": 0, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 40, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "height", + "value": { + "kind": "DimensionLit", + "value": 44, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "text-button", + "name": "Text Button", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s0_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "marginXEnd", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "marginXStart", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s0_5" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "brand" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "neutral subtle" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-subtle" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "critical" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "text-field", + "name": "Text Field", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "indicator", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "field" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "value", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "placeholder", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "placeholder" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-subtle" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "errorMessage", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "characterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "maxCharacterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-subtle" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "focused" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "field-focused" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "invalid" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-weak" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "critical" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "invalid" + }, + { + "kind": "StateExpression", + "value": "focused" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "field" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "readonly" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "value", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "placeholder", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "xlarge" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "header", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingBottom", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "indicator", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 56, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "value", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "footer", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 20, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "errorMessage", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "errorIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "marginRight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "characterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "maxCharacterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "large" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "header", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingBottom", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "indicator", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 52, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "value", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "footer", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 20, + "unit": "px" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "errorMessage", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "errorIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "marginRight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "characterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "maxCharacterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "medium" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "header", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "paddingBottom", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "indicator", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "field", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 40, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "value", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixText", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "footer", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingTop", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "description", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "errorMessage", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "errorIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "marginRight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "characterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "maxCharacterCount", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "toggle-button", + "name": "Toggle Button", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "colorDuration", + "value": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "colorTimingFunction", + "value": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "easing" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "brand solid" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-200" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "variant", + "value": "neutral weak" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "trackColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "rangeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "pressed" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "disabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + }, + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "selected" + }, + { + "kind": "StateExpression", + "value": "loading" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "xsmall" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "size", + "value": "small" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "cornerRadius", + "value": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "gap", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingY", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "prefixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "suffixIcon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "size", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "label", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "progressCircle", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "thickness", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "top-navigation", + "name": "Top Navigation", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "theme", + "value": "cupertino" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 44, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6-static" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "targetSize", + "value": { + "kind": "DimensionLit", + "value": 40, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "theme", + "value": "android" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "minHeight", + "value": { + "kind": "DimensionLit", + "value": 56, + "unit": "px" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "paddingX", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6-static" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "DimensionPropertyDeclaration", + "property": "size", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "targetSize", + "value": { + "kind": "DimensionLit", + "value": 40, + "unit": "px" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "layer" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "tone", + "value": "transparent" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "ColorHexLit", + "value": "#00000000" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "icon", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "divider", + "value": "true" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "strokeColor", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral-muted" + } + }, + { + "kind": "DimensionPropertyDeclaration", + "property": "strokeWidth", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "px" + } + } + ] + } + ] + } + ] + } + ] + }, + { + "kind": "ComponentSpecDeclaration", + "id": "typography", + "name": "Typography", + "body": [ + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-small-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-small-strong" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-small-stronger" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s1" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-medium-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-medium-strong" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-medium-stronger" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-large-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-large-strong" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "label-large-stronger" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-small-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-small-reading-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-small-strong" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-small-stronger" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-medium-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-medium-reading-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-medium-strong" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "body-medium-stronger" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "title-small-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "title-medium-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "title-large-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s7" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s7" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "heading-small-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s8" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "heading-medium-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s9" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "textStyle", + "value": "heading-large-default" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "root", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s10" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "lineHeight", + "value": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s10" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + } + ] + } + ], + "tokens": [ + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-100" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#eff6ff" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#202742" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#e2edfc" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#1e3352" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-300" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#cbdffa" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#1a4275" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-400" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#aacefd" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#0f559e" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#85b8fd" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#1964d8" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-600" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#5e98fe" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#1e82eb" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-700" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#217cf9" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#41a2f9" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#135fcd" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#83bcf9" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-900" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#0b4596" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#b9d7fb" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-1000" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#032451" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#e5f0fe" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-100" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fff2ec" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#31241f" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ffe8db" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#4b291c" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-300" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ffd5c0" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#6b311c" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-400" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ffb999" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#923600" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ff9364" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#bd4201" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-600" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ff6600" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#e65200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-700" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#e84500" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ff6600" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#b93901" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ff9e65" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-900" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#862b00" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#eecebc" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-1000" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#471601" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#f4eeea" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-00" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ffffff" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#121212" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#f7f8f9" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#1a1c20" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#f3f4f5" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#25272c" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#eeeff1" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#2c2e34" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#dcdee3" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#3e4145" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#d1d3d8" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#5b606a" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-600" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#b0b3ba" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#868b94" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-700" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#868b94" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#b0b3ba" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#555d6d" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#dcdee3" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-900" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#2a3038" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#e9eaec" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-1000" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#1a1c20" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#f3f4f5" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-100" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#edfaf6" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#202926" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#d9f6e9" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#20362e" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-300" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#b9e9d2" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#20493b" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-400" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#7ddcb3" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#19604c" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#42c593" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#117956" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-600" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#10ab7d" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#1b946d" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-700" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#079171" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#22b27f" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#00745f" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#35ce9a" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-900" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#075445" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#93e5c0" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-1000" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#0a2b24" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#d4f6ef" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-100" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#f5f3fe" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#28213b" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#efeafe" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#3b2873" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-300" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#e1d8ff" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#443081" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-400" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#d0c0ff" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#5a3bb1" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#b8a1ff" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#764fd9" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-600" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#9f84fb" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#8e6bee" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-700" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#8969ea" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#a78df0" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#6d50cb" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#beadf2" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-900" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#50379b" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#d9cefa" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-1000" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#29175d" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#f0edfc" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-100" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fdf0f0" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#322323" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fde7e7" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#4f2624" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-300" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fed4d2" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#742826" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-400" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#feb7b3" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#a12621" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fe928d" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ca2319" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-600" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fc6a66" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#f73526" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-700" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fa342c" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ff6e60" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ca1d13" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ffa299" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-900" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#921708" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#f8c5c3" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-1000" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#4a1209" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#fdf2f2" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#000000" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#000000" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ffffff" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ffffff" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black-alpha-50" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#0000000d" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#0000000d" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black-alpha-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#00000033" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#00000033" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black-alpha-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#00000080" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#00000080" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ffffff33" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ffffff33" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white-alpha-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ffffffcc" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ffffffcc" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-100" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fff7de" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#302819" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-200" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fdefb9" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#413218" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-300" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fbdc65" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#543e15" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-400" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#e9c647" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#714e15" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-500" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#d4ab28" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#91601b" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-600" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#c49725" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#b6720d" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-700" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#9b7821" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ca901c" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-800" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#755b22" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#dab156" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-900" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#4f3e1f" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#e5d49b" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-1000" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#2c2512" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#f7f0cd" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-1000" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-1000" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "placeholder" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-600" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-600" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "disabled" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-600" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "brand-contrast" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-900" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "critical-contrast" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-900" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-900" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "informative-contrast" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-900" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-900" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "magic-contrast" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-900" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-900" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-subtle" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-inverted" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-00" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "positive-contrast" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-900" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-900" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "warning-contrast" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-900" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-900" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "overlay" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black-alpha-500" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black-alpha-500" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "disabled" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-weak" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-600" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-solid-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-800" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "brand-weak-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-weak" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-solid" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-600" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-solid-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "critical-weak-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-weak" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-solid" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-600" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-solid-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "informative-weak-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-00" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-00" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-fill" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-basement" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-00" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-default-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "layer-floating-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "magic-solid" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-600" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "magic-weak" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "magic-solid-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-700" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "magic-weak-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "purple-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-900" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-1000" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-1000" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-inverted-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid-muted" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-solid-muted-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-900" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-500" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "neutral-weak-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "overlay-muted" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black-alpha-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-black-alpha-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "positive-weak" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "positive-solid" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-700" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-500" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "positive-solid-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-500" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "positive-weak-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "warning-solid" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-300" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-600" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "warning-weak" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-100" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "bg" + ], + "key": "warning-weak-pressed" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "yellow-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "brand" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-300" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "carrot-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "field" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "control" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-400" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "critical" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-300" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "red-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "positive" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-300" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "green-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "informative" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-300" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "blue-300" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "field-focused" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-800" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "stroke" + ], + "key": "neutral-muted" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "gray-200" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l1" + ], + "key": "text" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#62666a" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#b1b5b9" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l2" + ], + "key": "text" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#2592f7" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#7cbaf4" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l3" + ], + "key": "text" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#0099c8" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#47c3eb" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l4" + ], + "key": "text" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#03a07e" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#33cc94" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l5" + ], + "key": "text" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#d28500" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ffa100" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l6" + ], + "key": "text" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#f06000" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#ff9147" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l1" + ], + "key": "bg" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#eff0f1" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#222226" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l2" + ], + "key": "bg" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#e7f2fc" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#16212b" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l3" + ], + "key": "bg" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#e3f6fc" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#12262c" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l4" + ], + "key": "bg" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#ebf9f4" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#162822" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l5" + ], + "key": "bg" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fff5e5" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#2e2312" + } + } + ] + }, + { + "kind": "ColorTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "color", + "manner-temp", + "l6" + ], + "key": "bg" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "ColorHexLit", + "value": "#fff0e5" + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "ColorHexLit", + "value": "#2e1d12" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s0_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 4, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s1_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 6, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 8, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 10, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 12, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 18, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 20, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s6" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s7" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 28, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s8" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 32, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s9" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 36, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s10" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 40, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s12" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 48, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s13" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 52, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s14" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 56, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s16" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 64, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "between-chips" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s2" + } + } + ], + "description": "Chip 사이의 수평 간격에 사용합니다." + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-x" + ], + "key": "global-gutter" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s4" + } + } + ], + "description": "화면 전체에 적용되는 기본 수평 padding 값입니다." + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "dimension", + "spacing-y" + ], + "key": "component-default" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "TokenLit", + "group": [ + "dimension" + ], + "key": "s3" + } + } + ], + "description": "컴포넌트 간 수직 간격 토큰이 정의되지 않은 컴포넌트 사이의 수직 간격에 사용합니다." + }, + { + "kind": "DurationTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s1" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DurationLit", + "value": 50, + "unit": "ms" + } + } + ] + }, + { + "kind": "DurationTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s2" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DurationLit", + "value": 100, + "unit": "ms" + } + } + ] + }, + { + "kind": "DurationTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s3" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DurationLit", + "value": 150, + "unit": "ms" + } + } + ] + }, + { + "kind": "DurationTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s4" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DurationLit", + "value": 200, + "unit": "ms" + } + } + ] + }, + { + "kind": "DurationTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DurationLit", + "value": 250, + "unit": "ms" + } + } + ] + }, + { + "kind": "DurationTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "duration" + ], + "key": "s6" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DurationLit", + "value": 300, + "unit": "ms" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s1" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 0.6875, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 0.75, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s3" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 0.8125, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s4" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 0.875, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.125, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s7" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.25, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s8" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.375, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s9" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.5, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s10" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.625, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6-static" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 18, + "unit": "px" + } + } + ] + }, + { + "kind": "NumberTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "NumberLit", + "value": 400 + } + } + ] + }, + { + "kind": "NumberTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "medium" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "NumberLit", + "value": 500 + } + } + ] + }, + { + "kind": "NumberTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "NumberLit", + "value": 700 + } + } + ] + }, + { + "kind": "GradientTokenDeclaration", + "collection": "color", + "token": { + "kind": "TokenLit", + "group": [ + "gradient" + ], + "key": "shimmer" + }, + "values": [ + { + "mode": "theme-light", + "value": { + "kind": "GradientLit", + "stops": [ + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff00" + }, + "position": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff66" + }, + "position": { + "kind": "NumberLit", + "value": 0.46 + } + }, + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff66" + }, + "position": { + "kind": "NumberLit", + "value": 0.54 + } + }, + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff00" + }, + "position": { + "kind": "NumberLit", + "value": 1 + } + } + ] + } + }, + { + "mode": "theme-dark", + "value": { + "kind": "GradientLit", + "stops": [ + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff00" + }, + "position": { + "kind": "NumberLit", + "value": 0 + } + }, + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff1a" + }, + "position": { + "kind": "NumberLit", + "value": 0.46 + } + }, + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff1a" + }, + "position": { + "kind": "NumberLit", + "value": 0.54 + } + }, + { + "kind": "GradientStopLit", + "color": { + "kind": "ColorHexLit", + "value": "#ffffff00" + }, + "position": { + "kind": "NumberLit", + "value": 1 + } + } + ] + } + } + ], + "description": "Shimmer effect, used for loading states" + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s1" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 0.9375, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s2" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s3" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.125, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s4" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.1875, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.375, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s6" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.5, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s7" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.6875, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s8" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 1.875, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s9" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "line-height" + ], + "key": "s10" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 2.1875, + "unit": "rem" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s0_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 2, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 4, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s1_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 6, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 8, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s2_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 10, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s3" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 12, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s3_5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 14, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s4" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s5" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 20, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "s6" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 24, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "radius" + ], + "key": "full" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 9999, + "unit": "px" + } + } + ] + }, + { + "kind": "CubicBezierTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "linear" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0, + 0, + 1, + 1 + ] + } + } + ] + }, + { + "kind": "CubicBezierTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "easing" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0.35, + 0, + 0.35, + 1 + ] + } + } + ] + }, + { + "kind": "CubicBezierTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0, + 0, + 0.15, + 1 + ] + } + } + ] + }, + { + "kind": "CubicBezierTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0.35, + 0, + 1, + 1 + ] + } + } + ] + }, + { + "kind": "CubicBezierTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "enter-expressive" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0.03, + 0.4, + 0.1, + 1 + ] + } + } + ] + }, + { + "kind": "CubicBezierTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "timing-function" + ], + "key": "exit-expressive" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "CubicBezierLit", + "value": [ + 0.35, + 0, + 0.95, + 0.55 + ] + } + } + ] + } + ], + "tokenCollections": [ + { + "kind": "TokenCollectionDeclaration", + "name": "global", + "modes": [ + "default" + ] + }, + { + "kind": "TokenCollectionDeclaration", + "name": "color", + "modes": [ + "theme-light", + "theme-dark" + ] + } + ] +} \ No newline at end of file diff --git a/docs/public/rootage-next/radius.json b/docs/public/rootage-next/radius.json new file mode 100644 index 000000000..813a2e022 --- /dev/null +++ b/docs/public/rootage-next/radius.json @@ -0,0 +1,133 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "radius", + "name": "Radius" + }, + "data": { + "collection": "global", + "tokens": { + "$radius.s0_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 2, + "unit": "px" + } + } + } + }, + "$radius.s1": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 4, + "unit": "px" + } + } + } + }, + "$radius.s1_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 6, + "unit": "px" + } + } + } + }, + "$radius.s2": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 8, + "unit": "px" + } + } + } + }, + "$radius.s2_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 10, + "unit": "px" + } + } + } + }, + "$radius.s3": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 12, + "unit": "px" + } + } + } + }, + "$radius.s3_5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 14, + "unit": "px" + } + } + } + }, + "$radius.s4": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + } + } + }, + "$radius.s5": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 20, + "unit": "px" + } + } + } + }, + "$radius.s6": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 24, + "unit": "px" + } + } + } + }, + "$radius.full": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 9999, + "unit": "px" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage-next/timing-function.json b/docs/public/rootage-next/timing-function.json new file mode 100644 index 000000000..17ca72bf5 --- /dev/null +++ b/docs/public/rootage-next/timing-function.json @@ -0,0 +1,90 @@ +{ + "kind": "Tokens", + "metadata": { + "id": "timing-function", + "name": "Timing Function" + }, + "data": { + "collection": "global", + "tokens": { + "$timing-function.linear": { + "values": { + "default": { + "type": "cubicBezier", + "value": [ + 0, + 0, + 1, + 1 + ] + } + } + }, + "$timing-function.easing": { + "values": { + "default": { + "type": "cubicBezier", + "value": [ + 0.35, + 0, + 0.35, + 1 + ] + } + } + }, + "$timing-function.enter": { + "values": { + "default": { + "type": "cubicBezier", + "value": [ + 0, + 0, + 0.15, + 1 + ] + } + } + }, + "$timing-function.exit": { + "values": { + "default": { + "type": "cubicBezier", + "value": [ + 0.35, + 0, + 1, + 1 + ] + } + } + }, + "$timing-function.enter-expressive": { + "values": { + "default": { + "type": "cubicBezier", + "value": [ + 0.03, + 0.4, + 0.1, + 1 + ] + } + } + }, + "$timing-function.exit-expressive": { + "values": { + "default": { + "type": "cubicBezier", + "value": [ + 0.35, + 0, + 0.95, + 0.55 + ] + } + } + } + } + } +} \ No newline at end of file diff --git a/docs/public/rootage/dimension.json b/docs/public/rootage/dimension.json index c8b330d2e..325d8152a 100644 --- a/docs/public/rootage/dimension.json +++ b/docs/public/rootage/dimension.json @@ -1,8 +1,8 @@ { "kind": "Tokens", "metadata": { - "id": "unit", - "name": "Unit" + "id": "dimension", + "name": "Dimension" }, "data": { "collection": "global", diff --git a/packages/rootage/dimension.yaml b/packages/rootage/dimension.yaml index 22574715e..805b887fa 100644 --- a/packages/rootage/dimension.yaml +++ b/packages/rootage/dimension.yaml @@ -1,7 +1,7 @@ kind: Tokens metadata: - id: unit - name: Unit + id: dimension + name: Dimension data: collection: global tokens: diff --git a/packages/stylesheet/token.css b/packages/stylesheet/token.css index 8ccc9498b..f61ebe22f 100644 --- a/packages/stylesheet/token.css +++ b/packages/stylesheet/token.css @@ -10,7 +10,7 @@ color-scheme: dark; } -:root[data-seed] { + :root[data-seed] { --seed-v3-dimension-s0_5: 2px; --seed-v3-dimension-s1: 4px; --seed-v3-dimension-s1_5: 6px; diff --git a/tools/rootage/cli/src/index.ts b/tools/rootage/cli/src/index.ts index 98a536973..e06859ad4 100644 --- a/tools/rootage/cli/src/index.ts +++ b/tools/rootage/cli/src/index.ts @@ -2,18 +2,15 @@ import { buildContext, - getComponentSpecDts, - getComponentSpecIndexDts, - getComponentSpecIndexMjs, - getComponentSpecMjs, - getJsonSchema, - getTokenCss, - getTokenDts, - getTokenMjs, + css, + jsonschema, parse, + transform, + typescript, validate, - type Model, + type ShorthandDocument, } from "@seed-design/rootage-core"; +import { parse as parseLegacy } from "@seed-design/rootage-core/legacy"; import fs from "fs-extra"; import path from "node:path"; import YAML from "yaml"; @@ -49,9 +46,10 @@ async function prepare() { const fileContents = await Promise.all(filePaths.map((name) => fs.readFile(name, "utf-8"))); - const models = fileContents.map((content) => YAML.parse(content) as Model); - - const ast = parse(models); + const models = fileContents.map((content) => YAML.parse(content) as ShorthandDocument.Model); + const transformedModels = transform(models); + const ast = parse(transformedModels); + const astLegacy = parseLegacy(models); const ctx = buildContext(ast); const validationResult = validate(ctx); @@ -63,17 +61,19 @@ async function prepare() { return { ast, + astLegacy, ctx, filePaths, models, + transformedModels, }; } async function writeTokenTs() { const { ast } = await prepare(); - const mjsResults = getTokenMjs(ast); - const dtsResults = getTokenDts(ast); + const mjsResults = typescript.getTokenMjs(ast); + const dtsResults = typescript.getTokenDts(ast); for (const result of mjsResults) { const writePath = path.join(process.cwd(), dir, result.path); @@ -99,7 +99,7 @@ async function writeComponentSpec() { const { ast } = await prepare(); for (const spec of ast.componentSpecs) { - const mjsCode = getComponentSpecMjs(ast, spec.id); + const mjsCode = typescript.getComponentSpecMjs(ast, spec.id); const mjsWritePath = path.join(process.cwd(), dir, `${spec.id}.mjs`); console.log("Writing", spec.name, "to", mjsWritePath); @@ -109,7 +109,7 @@ async function writeComponentSpec() { } fs.writeFileSync(mjsWritePath, mjsCode); - const dtsCode = getComponentSpecDts(ast, spec.id); + const dtsCode = typescript.getComponentSpecDts(ast, spec.id); const dtsWritePath = path.join(process.cwd(), dir, `${spec.id}.d.ts`); console.log("Writing", spec.name, "to", dtsWritePath); @@ -117,14 +117,14 @@ async function writeComponentSpec() { fs.writeFileSync(dtsWritePath, dtsCode); } - const mjsIndexCode = getComponentSpecIndexMjs(ast); + const mjsIndexCode = typescript.getComponentSpecIndexMjs(ast); const mjsIndexWritePath = path.join(process.cwd(), dir, "index.mjs"); console.log("Writing index to", mjsIndexWritePath); fs.writeFileSync(mjsIndexWritePath, mjsIndexCode); - const dtsIndexCode = getComponentSpecIndexDts(ast); + const dtsIndexCode = typescript.getComponentSpecIndexDts(ast); const dtsIndexWritePath = path.join(process.cwd(), dir, "index.d.ts"); console.log("Writing index to", dtsIndexWritePath); @@ -135,7 +135,7 @@ async function writeComponentSpec() { async function writeTokenCss() { const { ast } = await prepare(); - const code = getTokenCss(ast, { + const code = css.getTokenCss(ast, { banner: `:root[data-seed] { color-scheme: light dark; } @@ -174,7 +174,7 @@ async function writeTokenCss() { async function writeJsonSchema() { const { ast } = await prepare(); - const jsonSchema = getJsonSchema(ast); + const jsonSchema = jsonschema.getJsonSchema(ast); const writePath = path.join(artifactsDir, "components", "schema.json"); console.log("Writing schema to", writePath); @@ -183,8 +183,8 @@ async function writeJsonSchema() { } async function writeJson() { - const { ast, models, filePaths } = await prepare(); - const entries = filePaths.map((file, index) => ({ file, content: models[index] })); + const { ast, transformedModels, filePaths } = await prepare(); + const entries = filePaths.map((file, index) => ({ file, content: transformedModels[index] })); for (const { file, content } of entries) { const code = JSON.stringify(content, null, 2); @@ -213,6 +213,37 @@ async function writeJson() { fs.writeFileSync(writePath, code); } +async function writeJsonLegacy() { + const { astLegacy, models, filePaths } = await prepare(); + const entries = filePaths.map((file, index) => ({ file, content: models[index] })); + + for (const { file, content } of entries) { + const code = JSON.stringify(content, null, 2); + const relativePath = path.relative(artifactsDir, file); + const withoutExt = relativePath.replace(path.extname(relativePath), ""); + const writePath = path.join(process.cwd(), dir, `${withoutExt}.json`); + + console.log("Writing", withoutExt, "to", writePath); + + if (!fs.existsSync(path.dirname(writePath))) { + fs.mkdirpSync(path.dirname(writePath)); + } + + fs.writeFileSync(writePath, code); + } + + const code = JSON.stringify(astLegacy, null, 2); + const writePath = path.join(process.cwd(), dir, "parsed.json"); + + console.log("Writing parsed.json to", writePath); + + if (!fs.existsSync(path.dirname(writePath))) { + fs.mkdirpSync(path.dirname(writePath)); + } + + fs.writeFileSync(writePath, code); +} + if (command === "token-ts") { console.log("Start"); writeTokenTs().then(() => { @@ -252,3 +283,11 @@ if (command === "json") { process.exit(0); }); } + +if (command === "json-legacy") { + console.log("Start"); + writeJsonLegacy().then(() => { + console.log("Done"); + process.exit(0); + }); +} diff --git a/tools/rootage/core/package.json b/tools/rootage/core/package.json index ef8d609b5..8fe764255 100644 --- a/tools/rootage/core/package.json +++ b/tools/rootage/core/package.json @@ -13,6 +13,11 @@ "types": "./lib/index.d.ts", "require": "./lib/index.js", "import": "./lib/index.mjs" + }, + "./legacy": { + "types": "./lib/legacy/index.d.ts", + "require": "./lib/legacy/index.js", + "import": "./lib/legacy/index.mjs" } }, "main": "./lib/index.js", diff --git a/tools/rootage/core/src/index.ts b/tools/rootage/core/src/index.ts index 29158ac1a..012288a39 100644 --- a/tools/rootage/core/src/index.ts +++ b/tools/rootage/core/src/index.ts @@ -1,12 +1 @@ -export * from "./component-spec"; -export * from "./context"; -export * from "./languages/css"; -export * from "./languages/jsonschema"; -export * from "./languages/typescript"; -export * from "./parse"; -export * from "./resolver"; -export * from "./token"; -export * from "./token-collection"; -export * from "./types"; -export * from "./validate"; -export * from "./value"; +export * from "./stable"; diff --git a/tools/rootage/core/src/component-spec.test.ts b/tools/rootage/core/src/legacy/component-spec.test.ts similarity index 100% rename from tools/rootage/core/src/component-spec.test.ts rename to tools/rootage/core/src/legacy/component-spec.test.ts diff --git a/tools/rootage/core/src/component-spec.ts b/tools/rootage/core/src/legacy/component-spec.ts similarity index 100% rename from tools/rootage/core/src/component-spec.ts rename to tools/rootage/core/src/legacy/component-spec.ts diff --git a/tools/rootage/core/src/context.ts b/tools/rootage/core/src/legacy/context.ts similarity index 100% rename from tools/rootage/core/src/context.ts rename to tools/rootage/core/src/legacy/context.ts diff --git a/tools/rootage/core/src/legacy/index.ts b/tools/rootage/core/src/legacy/index.ts new file mode 100644 index 000000000..29158ac1a --- /dev/null +++ b/tools/rootage/core/src/legacy/index.ts @@ -0,0 +1,12 @@ +export * from "./component-spec"; +export * from "./context"; +export * from "./languages/css"; +export * from "./languages/jsonschema"; +export * from "./languages/typescript"; +export * from "./parse"; +export * from "./resolver"; +export * from "./token"; +export * from "./token-collection"; +export * from "./types"; +export * from "./validate"; +export * from "./value"; diff --git a/tools/rootage/core/src/languages/css.test.ts b/tools/rootage/core/src/legacy/languages/css.test.ts similarity index 100% rename from tools/rootage/core/src/languages/css.test.ts rename to tools/rootage/core/src/legacy/languages/css.test.ts diff --git a/tools/rootage/core/src/languages/css.ts b/tools/rootage/core/src/legacy/languages/css.ts similarity index 100% rename from tools/rootage/core/src/languages/css.ts rename to tools/rootage/core/src/legacy/languages/css.ts diff --git a/tools/rootage/core/src/languages/jsonschema.test.ts b/tools/rootage/core/src/legacy/languages/jsonschema.test.ts similarity index 100% rename from tools/rootage/core/src/languages/jsonschema.test.ts rename to tools/rootage/core/src/legacy/languages/jsonschema.test.ts diff --git a/tools/rootage/core/src/languages/jsonschema.ts b/tools/rootage/core/src/legacy/languages/jsonschema.ts similarity index 100% rename from tools/rootage/core/src/languages/jsonschema.ts rename to tools/rootage/core/src/legacy/languages/jsonschema.ts diff --git a/tools/rootage/core/src/languages/typescript.test.ts b/tools/rootage/core/src/legacy/languages/typescript.test.ts similarity index 100% rename from tools/rootage/core/src/languages/typescript.test.ts rename to tools/rootage/core/src/legacy/languages/typescript.test.ts diff --git a/tools/rootage/core/src/languages/typescript.ts b/tools/rootage/core/src/legacy/languages/typescript.ts similarity index 100% rename from tools/rootage/core/src/languages/typescript.ts rename to tools/rootage/core/src/legacy/languages/typescript.ts diff --git a/tools/rootage/core/src/parse.ts b/tools/rootage/core/src/legacy/parse.ts similarity index 100% rename from tools/rootage/core/src/parse.ts rename to tools/rootage/core/src/legacy/parse.ts diff --git a/tools/rootage/core/src/resolver.test.ts b/tools/rootage/core/src/legacy/resolver.test.ts similarity index 100% rename from tools/rootage/core/src/resolver.test.ts rename to tools/rootage/core/src/legacy/resolver.test.ts diff --git a/tools/rootage/core/src/resolver.ts b/tools/rootage/core/src/legacy/resolver.ts similarity index 100% rename from tools/rootage/core/src/resolver.ts rename to tools/rootage/core/src/legacy/resolver.ts diff --git a/tools/rootage/core/src/token-collection.ts b/tools/rootage/core/src/legacy/token-collection.ts similarity index 100% rename from tools/rootage/core/src/token-collection.ts rename to tools/rootage/core/src/legacy/token-collection.ts diff --git a/tools/rootage/core/src/token.test.ts b/tools/rootage/core/src/legacy/token.test.ts similarity index 100% rename from tools/rootage/core/src/token.test.ts rename to tools/rootage/core/src/legacy/token.test.ts diff --git a/tools/rootage/core/src/token.ts b/tools/rootage/core/src/legacy/token.ts similarity index 100% rename from tools/rootage/core/src/token.ts rename to tools/rootage/core/src/legacy/token.ts diff --git a/tools/rootage/core/src/types.ts b/tools/rootage/core/src/legacy/types.ts similarity index 100% rename from tools/rootage/core/src/types.ts rename to tools/rootage/core/src/legacy/types.ts diff --git a/tools/rootage/core/src/validate.test.ts b/tools/rootage/core/src/legacy/validate.test.ts similarity index 100% rename from tools/rootage/core/src/validate.test.ts rename to tools/rootage/core/src/legacy/validate.test.ts diff --git a/tools/rootage/core/src/validate.ts b/tools/rootage/core/src/legacy/validate.ts similarity index 100% rename from tools/rootage/core/src/validate.ts rename to tools/rootage/core/src/legacy/validate.ts diff --git a/tools/rootage/core/src/value.test.ts b/tools/rootage/core/src/legacy/value.test.ts similarity index 100% rename from tools/rootage/core/src/value.test.ts rename to tools/rootage/core/src/legacy/value.test.ts diff --git a/tools/rootage/core/src/value.ts b/tools/rootage/core/src/legacy/value.ts similarity index 100% rename from tools/rootage/core/src/value.ts rename to tools/rootage/core/src/legacy/value.ts diff --git a/tools/rootage/core/src/stable/analyzer/context.ts b/tools/rootage/core/src/stable/analyzer/context.ts new file mode 100644 index 000000000..ea086f894 --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/context.ts @@ -0,0 +1,107 @@ +import type { DependencyGraph, ReferenceGraph, RootageCtx } from "./types"; +import type { TokenRef } from "../parser/document"; +import type { ComponentSpecDeclaration, RootageAST, TokenDeclaration } from "../parser/ast"; +import { + stringifyStateExpression, + stringifyTokenLit, + stringifyVariantExpression, +} from "./stringify"; + +function buildDependencyGraph(tokenDecls: TokenDeclaration[]): DependencyGraph { + const graph: DependencyGraph = {}; + + for (const tokenDecl of tokenDecls) { + const { token } = tokenDecl; + const name = stringifyTokenLit(token); + const dependencies: { [mode: string]: TokenRef } = {}; + + for (const { mode, value } of tokenDecl.values) { + if (value.kind === "TokenLit") { + const ref = stringifyTokenLit(value); + dependencies[mode] = ref; + } + } + + graph[name] = { name, collection: tokenDecl.collection, dependencies }; + } + + return graph; +} + +function buildReferenceGraph( + tokenDecls: TokenDeclaration[], + componentSpecs: ComponentSpecDeclaration[], +): ReferenceGraph { + const graph: ReferenceGraph = {}; + + // Initialize reference graph + for (const tokenDecl of tokenDecls) { + const { token } = tokenDecl; + const name = stringifyTokenLit(token); + const references: { [collection: string]: TokenRef[] } = {}; + + for (const { mode } of tokenDecl.values) { + references[mode] = []; + } + + graph[name] = { name, collection: tokenDecl.collection, references }; + } + + // Add token references + for (const tokenDecl of tokenDecls) { + const { token } = tokenDecl; + const name = stringifyTokenLit(token); + + for (const { mode, value } of tokenDecl.values) { + if (value.kind === "TokenLit") { + const ref = stringifyTokenLit(value); + graph[ref]?.references[mode]?.push(name); + } + } + } + + // Add component spec references + for (const componentSpec of componentSpecs) { + const { id, body } = componentSpec; + + for (const { variants: variantKey, body: state } of body) { + for (const { states: stateKey, body: slot } of state) { + for (const { slot: slotKey, body: property } of slot) { + for (const { property: propertyKey, value } of property) { + if (value.kind === "TokenLit") { + const tokenName = stringifyTokenLit(value); + const componentRef = `${id}/${stringifyVariantExpression(variantKey)}/${stringifyStateExpression(stateKey)}/${slotKey}/${propertyKey}`; + for (const mode in graph[tokenName]?.references) { + graph[tokenName]?.references[mode]?.push(componentRef); + } + } + } + } + } + } + } + + return graph; +} + +export function buildContext(ast: RootageAST): RootageCtx { + const tokenIds = ast.tokens.map((x) => stringifyTokenLit(x.token)); + const tokenEntities = Object.fromEntries(ast.tokens.map((x) => [stringifyTokenLit(x.token), x])); + const tokenCollectionIds = ast.tokenCollections.map((x) => x.name); + const tokenCollectionEntities = Object.fromEntries(ast.tokenCollections.map((x) => [x.name, x])); + const componentSpecIds = ast.componentSpecs.map((x) => x.id); + const componentSpecEntities = Object.fromEntries(ast.componentSpecs.map((x) => [x.id, x])); + const dependencyGraph = buildDependencyGraph(ast.tokens); + const referenceGraph = buildReferenceGraph(ast.tokens, ast.componentSpecs); + + return { + tokenIds, + tokenEntities, + tokenCollectionIds, + tokenCollectionEntities, + componentSpecIds, + componentSpecEntities, + dependencyGraph, + referenceGraph, + }; +} diff --git a/tools/rootage/core/src/stable/analyzer/index.ts b/tools/rootage/core/src/stable/analyzer/index.ts new file mode 100644 index 000000000..02f9bcc64 --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/index.ts @@ -0,0 +1,4 @@ +export { buildContext } from "./context"; +export { resolveReferences, resolveToken } from "./resolver"; +export { validate } from "./validate"; +export type * from "./types"; diff --git a/tools/rootage/core/src/stable/analyzer/resolver.test.ts b/tools/rootage/core/src/stable/analyzer/resolver.test.ts new file mode 100644 index 000000000..96eb24962 --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/resolver.test.ts @@ -0,0 +1,275 @@ +import { describe, expect, it } from "vitest"; +import { buildContext } from "./context"; +import { parse } from "../parser/parse"; +import { resolveReferences, resolveToken } from "./resolver"; +import type { ResolvedTokenResult } from "./types"; +import type { Model, TokensModel } from "../transformer/shorthand-document"; +import { transform } from "../transformer/transform"; + +const buildRootage = (models: Model[]) => { + const parsed = parse(transform(models)); + return buildContext(parsed); +}; + +describe("resolveToken", () => { + it("should resolve value as is", () => { + const input: TokensModel = { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "global", + tokens: { + "$size-1": { + values: { + default: "4px", + }, + }, + "$duration-1": { + values: { + default: "50ms", + }, + }, + }, + }, + }; + + const parsed = buildRootage([input]); + const result1 = resolveToken(parsed, "$size-1", { global: "default" }); + const result2 = resolveToken(parsed, "$duration-1", { global: "default" }); + + expect(result1).toEqual({ + path: ["$size-1"], + value: { kind: "DimensionLit", value: 4, unit: "px" }, + } satisfies ResolvedTokenResult); + expect(result2).toEqual({ + path: ["$duration-1"], + value: { kind: "DurationLit", value: 50, unit: "ms" }, + }); + }); + + it("should resolve to referenced token type for token ref", () => { + const input: TokensModel = { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }; + + const parsed = buildRootage([input]); + const resultLight = resolveToken(parsed, "$color.bg.layer-1", { color: "light" }); + const resultDark = resolveToken(parsed, "$color.bg.layer-1", { color: "dark" }); + + expect(resultLight).toEqual({ + path: ["$color.bg.layer-1", "$color.palette.gray-00"], + value: { kind: "ColorHexLit", value: "#ffffff" }, + } satisfies ResolvedTokenResult); + expect(resultDark).toEqual({ + path: ["$color.bg.layer-1", "$color.palette.gray-00"], + value: { kind: "ColorHexLit", value: "#000000" }, + } satisfies ResolvedTokenResult); + }); + + it("should track multiple reference", () => { + const input: TokensModel = { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + "$color.bg.layer-default": { + values: { + light: "$color.bg.layer-1", + dark: "$color.bg.layer-1", + }, + }, + }, + }, + }; + + const parsed = buildRootage([input]); + const resultLight = resolveToken(parsed, "$color.bg.layer-default", { color: "light" }); + const resultDark = resolveToken(parsed, "$color.bg.layer-default", { color: "dark" }); + + expect(resultLight).toEqual({ + path: ["$color.bg.layer-default", "$color.bg.layer-1", "$color.palette.gray-00"], + value: { kind: "ColorHexLit", value: "#ffffff" }, + } satisfies ResolvedTokenResult); + expect(resultDark).toEqual({ + path: ["$color.bg.layer-default", "$color.bg.layer-1", "$color.palette.gray-00"], + value: { kind: "ColorHexLit", value: "#000000" }, + } satisfies ResolvedTokenResult); + }); +}); + +describe("resolveReferences", () => { + it("should resolve references", () => { + const input: TokensModel[] = [ + { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }, + ]; + + const parsed = buildRootage(input); + const result = resolveReferences(parsed, "$color.palette.gray-00", { color: "light" }); + + expect(result).toEqual(["$color.bg.layer-1"]); + }); + + it("should resolve multiple references", () => { + const input: TokensModel[] = [ + { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + "$color.bg.layer-default": { + values: { + light: "$color.bg.layer-1", + dark: "$color.bg.layer-1", + }, + }, + }, + }, + }, + ]; + + const parsed = buildRootage(input); + const result = resolveReferences(parsed, "$color.palette.gray-00", { color: "light" }); + + expect(result).toEqual(["$color.bg.layer-1", "$color.bg.layer-default"]); + }); + + it("should resolve component spec references", () => { + const input: Model[] = [ + { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-default": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }, + { + kind: "ComponentSpec", + metadata: { + name: "Test", + id: "testid", + }, + data: { + base: { + enabled: { + root: { + color: "$color.bg.layer-default", + }, + }, + }, + "tone=layer": { + enabled: { + root: { + color: "$color.bg.layer-default", + }, + }, + }, + }, + }, + ]; + + const parsed = buildRootage(input); + const result = resolveReferences(parsed, "$color.palette.gray-00", { color: "light" }); + + expect(result).toEqual([ + "$color.bg.layer-default", + "testid/base/enabled/root/color", + "testid/tone=layer/enabled/root/color", + ]); + }); +}); diff --git a/tools/rootage/core/src/stable/analyzer/resolver.ts b/tools/rootage/core/src/stable/analyzer/resolver.ts new file mode 100644 index 000000000..854e2a402 --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/resolver.ts @@ -0,0 +1,80 @@ +import type { ComponentSpecRef, ResolvedTokenResult, RootageCtx } from "./types"; +import type { TokenRef } from "../parser/document"; + +export function resolveToken( + rootage: RootageCtx, + tokenId: TokenRef, + modes: Record, +): ResolvedTokenResult { + const { dependencyGraph } = rootage; + + function rec(name: TokenRef): TokenRef[] { + const node = dependencyGraph[name]; + + if (!node) { + throw new Error(`Token not found: ${name}`); + } + + const mode = modes[node.collection]; + + if (!mode) { + throw new Error(`${node.collection} does not exist in modes`); + } + + const nextNode = node.dependencies[mode]; + + if (nextNode) { + return [node.name, ...rec(nextNode)]; + } + + return [node.name]; + } + + const path = rec(tokenId); + const last = path.at(-1)!; + const resolvedToken = rootage.tokenEntities[last]; + + if (!resolvedToken) { + throw new Error(`Token not found: ${last}`); + } + + const value = resolvedToken.values.find((v) => v.mode === modes[resolvedToken.collection])?.value; + + if (!value) { + throw new Error( + `Value not found for ${resolvedToken.collection}=${modes[resolvedToken.collection]} in ${JSON.stringify(resolvedToken.values, null, 2)}`, + ); + } + + if (value.kind === "TokenLit") { + throw new Error(`Unexpected resolved token type: ${value}`); + } + + return { path, value }; +} + +export function resolveReferences( + rootage: RootageCtx, + tokenId: TokenRef, + modes: Record, +): (TokenRef | ComponentSpecRef)[] { + const { referenceGraph } = rootage; + + function rec(name: TokenRef): (TokenRef | ComponentSpecRef)[] { + const node = referenceGraph[name]; + + if (!node) { + return []; + } + + const mode = modes[node.collection]; + + if (!mode) { + throw new Error(`${node.collection} does not exist in modes`); + } + + return node.references[mode]!.flatMap((ref) => [ref, ...rec(ref as TokenRef)]); + } + + return rec(tokenId); +} diff --git a/tools/rootage/core/src/stable/analyzer/stringify.ts b/tools/rootage/core/src/stable/analyzer/stringify.ts new file mode 100644 index 000000000..113bbdf5f --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/stringify.ts @@ -0,0 +1,18 @@ +import type { TokenRef } from "../parser/document"; +import type { StateExpression, TokenLit, VariantExpression } from "../parser/ast"; + +export function stringifyTokenLit(token: TokenLit): TokenRef { + return `$${[...token.group, token.key].join(".")}`; +} + +export function stringifyVariantExpression(variants: VariantExpression[]): string { + if (variants.length === 0) { + return "base"; + } + + return variants.map(({ name, value }) => `${name}=${value}`).join(","); +} + +export function stringifyStateExpression(states: StateExpression[]): string { + return states.map((s) => s.value).join(","); +} diff --git a/tools/rootage/core/src/stable/analyzer/types.ts b/tools/rootage/core/src/stable/analyzer/types.ts new file mode 100644 index 000000000..4aba6008a --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/types.ts @@ -0,0 +1,45 @@ +import type * as AST from "../parser/ast"; +import type { TokenRef } from "../parser/document"; + +// resolver +export interface ResolvedTokenResult { + path: TokenRef[]; + value: AST.ValueLit; +} + +// ctx +export interface DependencyNode { + name: TokenRef; + collection: string; + dependencies: { + [mode: string]: TokenRef | undefined; + }; +} + +export interface DependencyGraph { + [tokenRef: TokenRef]: DependencyNode; +} + +export type ComponentSpecRef = string; // {ComponentSpecId}.{VariantExpression}.{State}.{Slot}.{Property} +export interface ReferenceNode { + name: TokenRef; + collection: string; + references: { + [collection: string]: (TokenRef | ComponentSpecRef)[]; + }; +} + +export interface ReferenceGraph { + [tokenRef: TokenRef]: ReferenceNode; +} + +export interface RootageCtx { + tokenIds: TokenRef[]; + tokenEntities: Record; + tokenCollectionIds: string[]; + tokenCollectionEntities: Record; + componentSpecIds: string[]; + componentSpecEntities: Record; + dependencyGraph: DependencyGraph; + referenceGraph: ReferenceGraph; +} diff --git a/tools/rootage/core/src/stable/analyzer/validate.test.ts b/tools/rootage/core/src/stable/analyzer/validate.test.ts new file mode 100644 index 000000000..53fd8d0cc --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/validate.test.ts @@ -0,0 +1,224 @@ +import { describe, expect, it } from "vitest"; +import { parse } from "../parser/parse"; +import type { Model } from "../parser/document"; +import { buildContext } from "./context"; +import { validate } from "./validate"; + +const buildRootage = (models: Model[]) => { + const parsed = parse(models); + return buildContext(parsed); +}; + +describe("validateModels", () => { + it("should return true for valid models", () => { + const models: Model[] = [ + { + kind: "TokenCollections", + metadata: { + id: "1", + name: "collection", + }, + data: [ + { + name: "color", + modes: ["light", "dark"], + }, + ], + }, + { + kind: "Tokens", + metadata: { + id: "2", + name: "tokens", + }, + data: { + collection: "color", + tokens: { + "$color.bg.layer-1": { + values: { + light: { type: "color", value: "#ffffff" }, + dark: { type: "color", value: "#000000" }, + }, + }, + }, + }, + }, + { + kind: "ComponentSpec", + metadata: { + id: "3", + name: "component", + }, + data: [ + { + variants: {}, + definitions: [ + { + states: ["default"], + slots: { + default: { + color: { type: "color", value: "$color.bg.layer-1" }, + }, + }, + }, + ], + }, + ], + }, + ]; + + const result = validate(buildRootage(models)); + + expect(result.valid).toEqual(true); + }); + + it("should return false if token collection is not defined", () => { + const models: Model[] = [ + { + kind: "Tokens", + metadata: { + id: "2", + name: "tokens", + }, + data: { + collection: "color", + tokens: { + "$color.bg.layer-1": { + values: { + light: { type: "color", value: "#ffffff" }, + dark: { type: "color", value: "#000000" }, + }, + }, + }, + }, + }, + ]; + + const result = validate(buildRootage(models)); + + expect(result.valid).toEqual(false); + }); + + it("should return false if mode is not defined in token collection", () => { + const models: Model[] = [ + { + kind: "TokenCollections", + metadata: { + id: "1", + name: "collection", + }, + data: [ + { + name: "color", + modes: ["light"], + }, + ], + }, + { + kind: "Tokens", + metadata: { + id: "2", + name: "tokens", + }, + data: { + collection: "color", + tokens: { + "$color.bg.layer-1": { + values: { + light: { type: "color", value: "#ffffff" }, + dark: { type: "color", value: "#000000" }, + }, + }, + }, + }, + }, + ]; + + const result = validate(buildRootage(models)); + + expect(result.valid).toEqual(false); + }); + + it("should return false if referenced token is not defined - Tokens", () => { + const models: Model[] = [ + { + kind: "TokenCollections", + metadata: { + id: "1", + name: "collection", + }, + data: [ + { + name: "color", + modes: ["light"], + }, + ], + }, + { + kind: "Tokens", + metadata: { + id: "2", + name: "tokens", + }, + data: { + collection: "color", + tokens: { + "$color.bg.layer-1": { + values: { + light: { type: "color", value: "$color.bg.layer-2" }, + }, + }, + }, + }, + }, + ]; + + const result = validate(buildRootage(models)); + + expect(result.valid).toEqual(false); + }); + + it("should return false if referenced token is not defined - ComponentSpec", () => { + const models: Model[] = [ + { + kind: "TokenCollections", + metadata: { + id: "1", + name: "collection", + }, + data: [ + { + name: "color", + modes: ["light"], + }, + ], + }, + { + kind: "ComponentSpec", + metadata: { + id: "3", + name: "component", + }, + data: [ + { + variants: {}, + definitions: [ + { + states: ["default"], + slots: { + default: { + color: { type: "color", value: "$color.bg.layer-1" }, + }, + }, + }, + ], + }, + ], + }, + ]; + + const result = validate(buildRootage(models)); + + expect(result.valid).toEqual(false); + }); +}); diff --git a/tools/rootage/core/src/stable/analyzer/validate.ts b/tools/rootage/core/src/stable/analyzer/validate.ts new file mode 100644 index 000000000..16de519e7 --- /dev/null +++ b/tools/rootage/core/src/stable/analyzer/validate.ts @@ -0,0 +1,90 @@ +import { stringifyTokenLit } from "./stringify"; +import type { RootageCtx } from "./types"; + +interface ValidationResult { + valid: boolean; + message: string; +} + +// TODO: detect cycle in dependency graph +export function validate(ctx: RootageCtx): ValidationResult { + const { + componentSpecIds, + componentSpecEntities, + tokenIds, + tokenEntities, + tokenCollectionIds, + tokenCollectionEntities, + } = ctx; + const componentSpecs = componentSpecIds.map((id) => componentSpecEntities[id]!); + const tokens = tokenIds.map((id) => tokenEntities[id]!); + const tokenCollections = tokenCollectionIds.map((id) => tokenCollectionEntities[id]!); + + // validate collection names + const collectionNames = tokenCollections.map((collection) => collection.name); + const collectionNameSet = new Set(collectionNames); + + for (const tokenBinding of tokens) { + if (!collectionNameSet.has(tokenBinding.collection)) { + return { + valid: false, + message: `Token collection "${tokenBinding.collection}" is not defined but used in "${stringifyTokenLit(tokenBinding.token)}"`, + }; + } + } + + // validate collection modes + for (const tokenBinding of tokens) { + const collection = tokenCollections.find( + (collection) => collection.name === tokenBinding.collection, + )!; + for (const { mode } of tokenBinding.values) { + if (!collection.modes.includes(mode)) { + return { + valid: false, + message: `Mode "${mode}" is not defined in token collection "${tokenBinding.collection}" but used in "${stringifyTokenLit(tokenBinding.token)}"`, + }; + } + } + } + + // validate token references + const tokenNames = tokens.map((binding) => stringifyTokenLit(binding.token)); + const tokenNameSet = new Set(tokenNames); + + for (const tokenBinding of tokens) { + for (const { value } of tokenBinding.values) { + if (value.kind === "TokenLit") { + const tokenName = stringifyTokenLit(value); + if (!tokenNameSet.has(tokenName)) { + return { + valid: false, + message: `Token "${tokenName}" is not defined but used in "${stringifyTokenLit(tokenBinding.token)}"`, + }; + } + } + } + } + + for (const componentSpec of componentSpecs) { + for (const variant of componentSpec.body) { + for (const state of variant.body) { + for (const slot of state.body) { + for (const property of slot.body) { + if (property.value.kind === "TokenLit") { + const tokenName = stringifyTokenLit(property.value); + if (!tokenNameSet.has(tokenName)) { + return { + valid: false, + message: `Token "${tokenName}" is not defined but used in component spec "${componentSpec.name}"`, + }; + } + } + } + } + } + } + } + + return { valid: true, message: "" }; +} diff --git a/tools/rootage/core/src/stable/index.ts b/tools/rootage/core/src/stable/index.ts new file mode 100644 index 000000000..a8d5a0a21 --- /dev/null +++ b/tools/rootage/core/src/stable/index.ts @@ -0,0 +1,4 @@ +export * from "./analyzer"; +export * from "./languages"; +export * from "./parser"; +export * from "./transformer"; diff --git a/tools/rootage/core/src/stable/languages/css.test.ts b/tools/rootage/core/src/stable/languages/css.test.ts new file mode 100644 index 000000000..f47893fef --- /dev/null +++ b/tools/rootage/core/src/stable/languages/css.test.ts @@ -0,0 +1,133 @@ +import { expect, test } from "vitest"; +import * as factory from "../parser/factory"; +import { parse } from "../parser/parse"; +import type * as Shorthand from "../transformer/shorthand-document"; +import { getTokenCss, stringifyTokenReference, stringifyValueLit } from "./css"; +import { transform } from "../transformer/transform"; + +test("stringifyTokenReference should stringify token expression", () => { + const token = factory.createTokenLit(["color", "bg"], "layer-1"); + + const result = stringifyTokenReference(token); + + expect(result).toEqual("var(--seed-v3-color-bg-layer-1)"); +}); + +test("stringifyValueExpression should stringify shadow expression", () => { + const shadow = factory.createShadowLit([ + factory.createShadowLayerLit( + factory.createColorHexLit("#000000"), + factory.createDimensionLit(2, "px"), + factory.createDimensionLit(3, "px"), + factory.createDimensionLit(4, "px"), + factory.createDimensionLit(0, "px"), + ), + ]); + + const result = stringifyValueLit(shadow); + + expect(result).toEqual("2px 3px 4px 0px #000000"); +}); + +test("stringifyValueExpression should stringify gradient expression", () => { + const gradient = factory.createGradientLit([ + factory.createGradientStopLit(factory.createColorHexLit("#000000"), factory.createNumberLit(0)), + factory.createGradientStopLit(factory.createColorHexLit("#ffffff"), factory.createNumberLit(1)), + ]); + + const result = stringifyValueLit(gradient); + + expect(result).toEqual("#000000 0%, #ffffff 100%"); +}); + +test("getTokenCss should generate css code", () => { + const models: Shorthand.Model[] = [ + { + kind: "TokenCollections", + metadata: { + id: "1", + name: "collection", + }, + data: [ + { + name: "color", + modes: ["light", "dark"], + }, + { + name: "global", + modes: ["default"], + }, + ], + }, + { + kind: "Tokens", + metadata: { + id: "2", + name: "color", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }, + { + kind: "Tokens", + metadata: { + id: "3", + name: "unit", + }, + data: { + collection: "global", + tokens: { + "$dimension.s1": { + values: { + default: "4px", + }, + }, + }, + }, + }, + ]; + + const result = getTokenCss(parse(transform(models)), { + banner: "", + selectors: { + global: { + default: ":root", + }, + color: { + light: `:root[data-theme="light"]`, + dark: `:root[data-theme="dark"]`, + }, + }, + }); + + expect(result).toMatchInlineSnapshot(` + ":root[data-theme=\\"light\\"] { + --seed-v3-color-palette-gray-00: #ffffff; + --seed-v3-color-bg-layer-1: var(--seed-v3-color-palette-gray-00); + } + + :root[data-theme=\\"dark\\"] { + --seed-v3-color-palette-gray-00: #000000; + --seed-v3-color-bg-layer-1: var(--seed-v3-color-palette-gray-00); + } + + :root { + --seed-v3-dimension-s1: 4px; + }" + `); +}); diff --git a/tools/rootage/core/src/stable/languages/css.ts b/tools/rootage/core/src/stable/languages/css.ts new file mode 100644 index 000000000..47f18a4cc --- /dev/null +++ b/tools/rootage/core/src/stable/languages/css.ts @@ -0,0 +1,118 @@ +import type { + CubicBezierLit, + GradientLit, + RootageAST, + ShadowLit, + TokenLit, + ValueLit, +} from "../parser/ast"; + +const PREFIX = "seed-v3"; + +function stringifyCubicBezierLit(expr: CubicBezierLit): string { + return `cubic-bezier(${expr.value.join(", ")})`; +} + +function stringifyShadowLit(expr: ShadowLit): string { + return expr.layers + .map((item) => { + return `${item.offsetX.value}${item.offsetX.unit} ${item.offsetY.value}${item.offsetY.unit} ${item.blur.value}${item.blur.unit} ${item.spread.value}${item.spread.unit} ${item.color.value}`; + }) + .join(", "); +} + +function stringifyGradientLit(expr: GradientLit): string { + return expr.stops.map((item) => `${item.color.value} ${item.position.value * 100}%`).join(", "); +} + +export function stringifyValueLit(expr: ValueLit): string { + if (expr.kind === "ColorHexLit") { + return expr.value; + } + + if (expr.kind === "DimensionLit") { + return `${expr.value}${expr.unit}`; + } + + if (expr.kind === "NumberLit") { + return expr.value.toString(); + } + + if (expr.kind === "DurationLit") { + return `${expr.value}${expr.unit}`; + } + + if (expr.kind === "CubicBezierLit") { + return stringifyCubicBezierLit(expr); + } + + if (expr.kind === "ShadowLit") { + return stringifyShadowLit(expr); + } + + if (expr.kind === "GradientLit") { + return stringifyGradientLit(expr); + } + + throw new Error("Invalid value expression"); +} + +export function stringifyTokenName(token: TokenLit) { + if (token.group.length === 0) { + return `--${PREFIX}-${token.key.toString().replaceAll(".", "\\.")}`; + } + + return `--${PREFIX}-${token.group.join("-")}-${token.key.toString().replaceAll(".", "\\.")}`; +} + +export function stringifyTokenReference(token: TokenLit) { + return `var(${stringifyTokenName(token)})`; +} + +export function stringifyCssValue(value: ValueLit | TokenLit): string { + return value.kind === "TokenLit" ? stringifyTokenReference(value) : stringifyValueLit(value); +} + +export function getTokenCss( + ast: RootageAST, + options: { + banner: string; + selectors: { + [collection: string]: { + [mode: string]: string; + }; + }; + }, +) { + const { tokens, tokenCollections } = ast; + + const rules = tokenCollections + .flatMap((collection) => { + const inCollection = tokens.filter((token) => token.collection === collection.name); + return collection.modes + .map((mode) => { + const decls = inCollection + .map( + (binding) => + `${stringifyTokenName(binding.token)}: ${stringifyCssValue(binding.values.find((v) => v.mode === mode)!.value)};`, + ) + .join("\n "); + + const selector = options.selectors[collection.name]?.[mode]; + + if (!selector) { + throw new Error( + `Selector for collection ${collection.name} and mode ${mode} is not defined`, + ); + } + + return `${selector} { + ${decls} +}`; + }) + .join("\n\n"); + }) + .join("\n\n"); + + return `${options.banner}${rules}`; +} diff --git a/tools/rootage/core/src/stable/languages/index.ts b/tools/rootage/core/src/stable/languages/index.ts new file mode 100644 index 000000000..9fe861304 --- /dev/null +++ b/tools/rootage/core/src/stable/languages/index.ts @@ -0,0 +1,3 @@ +export * as css from "./css"; +export * as jsonschema from "./jsonschema"; +export * as typescript from "./typescript"; diff --git a/tools/rootage/core/src/stable/languages/jsonschema.test.ts b/tools/rootage/core/src/stable/languages/jsonschema.test.ts new file mode 100644 index 000000000..2b11f5f5a --- /dev/null +++ b/tools/rootage/core/src/stable/languages/jsonschema.test.ts @@ -0,0 +1,312 @@ +import { expect, test } from "vitest"; +import { parse } from "../parser/parse"; +import { getJsonSchema } from "./jsonschema"; +import type { TokensModel } from "../transformer/shorthand-document"; +import { transform } from "../transformer/transform"; + +test("getJsonSchema should generate jsonschema for component spec", () => { + const models: TokensModel[] = [ + { + kind: "Tokens", + metadata: { + id: "2", + name: "color", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.palette.gray-100": { + values: { + light: "#f8f9fa", + dark: "#212529", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }, + { + kind: "Tokens", + metadata: { + id: "3", + name: "unit", + }, + data: { + collection: "global", + tokens: { + "$dimension.s1_5": { + values: { + default: "6px", + }, + }, + }, + }, + }, + ]; + + const result = getJsonSchema(parse(transform(models))); + + expect(result).toMatchInlineSnapshot(` + "{ + \\"$schema\\": \\"http://json-schema.org/draft-07/schema#\\", + \\"title\\": \\"ComponentSpecModel\\", + \\"type\\": \\"object\\", + \\"properties\\": { + \\"kind\\": { + \\"type\\": \\"string\\", + \\"const\\": \\"ComponentSpec\\" + }, + \\"metadata\\": { + \\"type\\": \\"object\\", + \\"properties\\": { + \\"id\\": { + \\"type\\": \\"string\\" + }, + \\"name\\": { + \\"type\\": \\"string\\" + } + }, + \\"required\\": [\\"id\\", \\"name\\"], + \\"additionalProperties\\": false + }, + \\"data\\": { + \\"type\\": \\"object\\", + \\"properties\\": { + \\"base\\": { + \\"$ref\\": \\"#/definitions/variant\\" + } + }, + \\"patternProperties\\": { + \\"^.*=.*$\\": { + \\"$ref\\": \\"#/definitions/variant\\" + } + }, + \\"additionalProperties\\": false + } + }, + \\"required\\": [\\"kind\\", \\"metadata\\", \\"data\\"], + \\"additionalProperties\\": false, + \\"definitions\\": { + \\"variant\\": { + \\"type\\": \\"object\\", + \\"additionalProperties\\": { + \\"$ref\\": \\"#/definitions/state\\" + } + }, + \\"state\\": { + \\"type\\": \\"object\\", + \\"additionalProperties\\": { + \\"$ref\\": \\"#/definitions/slot\\" + } + }, + \\"slot\\": { + \\"type\\": \\"object\\", + \\"additionalProperties\\": { + \\"$ref\\": \\"#/definitions/righthandValue\\" + } + }, + \\"righthandValue\\": { + \\"anyOf\\": [ + { + \\"$ref\\": \\"#/definitions/colorShorthand\\" + }, + { + \\"$ref\\": \\"#/definitions/dimensionShorthand\\" + }, + { + \\"$ref\\": \\"#/definitions/durationShorthand\\" + }, + { + \\"$ref\\": \\"#/definitions/numberShorthand\\" + }, + { + \\"$ref\\": \\"#/definitions/cubicBezier\\" + }, + { + \\"$ref\\": \\"#/definitions/shadow\\" + }, + { + \\"$ref\\": \\"#/definitions/gradient\\" + }, + { + \\"$ref\\": \\"#/definitions/tokenRef\\" + } + ] + }, + \\"colorShorthand\\": { + \\"type\\": \\"string\\", + \\"pattern\\": \\"^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$\\" + }, + \\"dimensionShorthand\\": { + \\"type\\": \\"string\\", + \\"pattern\\": \\"^-?\\\\\\\\d+(\\\\\\\\.\\\\\\\\d+)?(px|rem)$\\" + }, + \\"durationShorthand\\": { + \\"type\\": \\"string\\", + \\"pattern\\": \\"^\\\\\\\\d+(\\\\\\\\.\\\\\\\\d+)?(s|ms)$\\" + }, + \\"numberShorthand\\": { + \\"type\\": \\"number\\" + }, + \\"cubicBezier\\": { + \\"type\\": \\"object\\", + \\"properties\\": { + \\"type\\": { + \\"type\\": \\"string\\", + \\"const\\": \\"cubicBezier\\" + }, + \\"value\\": { + \\"type\\": \\"array\\", + \\"items\\": { + \\"type\\": \\"number\\" + }, + \\"minItems\\": 4, + \\"maxItems\\": 4 + } + }, + \\"required\\": [\\"type\\", \\"value\\"], + \\"additionalProperties\\": false + }, + \\"shadow\\": { + \\"type\\": \\"object\\", + \\"properties\\": { + \\"type\\": { + \\"type\\": \\"string\\", + \\"const\\": \\"shadow\\" + }, + \\"value\\": { + \\"type\\": \\"array\\", + \\"items\\": { + \\"type\\": \\"object\\", + \\"properties\\": { + \\"color\\": { + \\"$ref\\": \\"#/definitions/colorShorthand\\" + }, + \\"offsetX\\": { + \\"$ref\\": \\"#/definitions/dimensionShorthand\\" + }, + \\"offsetY\\": { + \\"$ref\\": \\"#/definitions/dimensionShorthand\\" + }, + \\"blur\\": { + \\"$ref\\": \\"#/definitions/dimensionShorthand\\" + }, + \\"spread\\": { + \\"$ref\\": \\"#/definitions/dimensionShorthand\\" + } + }, + \\"required\\": [\\"color\\", \\"offsetX\\", \\"offsetY\\", \\"blur\\", \\"spread\\"], + \\"additionalProperties\\": false + } + } + }, + \\"required\\": [\\"type\\", \\"value\\"], + \\"additionalProperties\\": false + }, + \\"gradient\\": { + \\"type\\": \\"object\\", + \\"properties\\": { + \\"type\\": { + \\"type\\": \\"string\\", + \\"const\\": \\"gradient\\" + }, + \\"value\\": { + \\"type\\": \\"array\\", + \\"items\\": { + \\"type\\": \\"object\\", + \\"properties\\": { + \\"color\\": { + \\"$ref\\": \\"#/definitions/colorShorthand\\" + }, + \\"position\\": { + \\"type\\": \\"number\\" + } + }, + \\"required\\": [\\"color\\", \\"position\\"], + \\"additionalProperties\\": false + } + } + }, + \\"required\\": [\\"type\\", \\"value\\"], + \\"additionalProperties\\": false + }, + \\"tokenRef\\": { + \\"type\\": \\"string\\", + \\"anyOf\\": [ + { \\"const\\": \\"$color.palette.gray-00\\", \\"title\\": \\"$color.palette.gray-00\\", \\"description\\": \\"light: #ffffff\\\\ndark: #000000\\", \\"markdownDescription\\": \\"- light: \`#ffffff\`\\\\n\\\\n- dark: \`#000000\`\\" }, + { \\"const\\": \\"$color.palette.gray-100\\", \\"title\\": \\"$color.palette.gray-100\\", \\"description\\": \\"light: #f8f9fa\\\\ndark: #212529\\", \\"markdownDescription\\": \\"- light: \`#f8f9fa\`\\\\n\\\\n- dark: \`#212529\`\\" }, + { \\"const\\": \\"$color.bg.layer-1\\", \\"title\\": \\"$color.bg.layer-1\\", \\"description\\": \\"light: $color.palette.gray-00\\\\ndark: $color.palette.gray-00\\", \\"markdownDescription\\": \\"- light: \`$color.palette.gray-00\`\\\\n\\\\n- dark: \`$color.palette.gray-00\`\\" }, + { \\"const\\": \\"$dimension.s1_5\\", \\"title\\": \\"$dimension.s1_5\\", \\"description\\": \\"default: 6px\\", \\"markdownDescription\\": \\"- default: \`6px\`\\" } + ] + } + } + }" + `); +}); + +test("getJsonSchema should generate valid json", () => { + const models: TokensModel[] = [ + { + kind: "Tokens", + metadata: { + id: "2", + name: "color", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.palette.gray-100": { + values: { + light: "#f8f9fa", + dark: "#212529", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }, + { + kind: "Tokens", + metadata: { + id: "3", + name: "unit", + }, + data: { + collection: "global", + tokens: { + "$dimension.s1_5": { + values: { + default: "6px", + }, + }, + }, + }, + }, + ]; + + const result = getJsonSchema(parse(transform(models))); + + expect(() => JSON.parse(result)).not.toThrow(); +}); diff --git a/tools/rootage/core/src/stable/languages/jsonschema.ts b/tools/rootage/core/src/stable/languages/jsonschema.ts new file mode 100644 index 000000000..3067ddae6 --- /dev/null +++ b/tools/rootage/core/src/stable/languages/jsonschema.ts @@ -0,0 +1,258 @@ +import dedent from "dedent"; +import type { RootageAST, TokenLit } from "../parser/ast"; + +function stringifyTokenExpression(token: TokenLit): string { + return `$${token.group.join(".")}.${token.key}`; +} + +export function getJsonSchema(ast: RootageAST): string { + const { tokens } = ast; + + const tokenAnnotations = tokens.map(({ token, values }) => { + const title = stringifyTokenExpression(token); + + const readableValues = values.map(({ mode, value }) => { + const readableValue = (() => { + switch (value.kind) { + case "TokenLit": + return stringifyTokenExpression(value); + case "ColorHexLit": + return value.value; + case "GradientLit": + return value.stops + .map(({ position, color }) => `${Math.round(position.value * 100)}%: ${color.value}`) + .join(", "); + case "NumberLit": + return `${value.value}`; + case "DimensionLit": + return `${value.value}${value.unit}`; + case "DurationLit": + return `${value.value}${value.unit}`; + case "CubicBezierLit": + return value.value.join(", "); + case "ShadowLit": + return value.layers + .map( + ({ offsetX, offsetY, blur, spread, color }) => + `${offsetX.value}${offsetX.unit} ${offsetY.value}${offsetY.unit} ${blur.value}${blur.unit} ${spread.value}${spread.unit} ${color}`, + ) + .join(" / "); + default: + return `${value}`; + } + })(); + + return { mode, value: readableValue }; + }); + + return { + title, + description: readableValues.map(({ mode, value }) => `${mode}: ${value}`).join("\\n"), + markdownDescription: readableValues + .map(({ mode, value }) => `- ${mode}: \`${value}\``) + .join("\\n\\n"), + }; + }); + + return dedent.withOptions({ escapeSpecialCharacters: false })`{ + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "ComponentSpecModel", + "type": "object", + "properties": { + "kind": { + "type": "string", + "const": "ComponentSpec" + }, + "metadata": { + "type": "object", + "properties": { + "id": { + "type": "string" + }, + "name": { + "type": "string" + } + }, + "required": ["id", "name"], + "additionalProperties": false + }, + "data": { + "type": "object", + "properties": { + "base": { + "$ref": "#/definitions/variant" + } + }, + "patternProperties": { + "^.*=.*$": { + "$ref": "#/definitions/variant" + } + }, + "additionalProperties": false + } + }, + "required": ["kind", "metadata", "data"], + "additionalProperties": false, + "definitions": { + "variant": { + "type": "object", + "additionalProperties": { + "$ref": "#/definitions/state" + } + }, + "state": { + "type": "object", + "additionalProperties": { + "$ref": "#/definitions/slot" + } + }, + "slot": { + "type": "object", + "additionalProperties": { + "$ref": "#/definitions/righthandValue" + } + }, + "righthandValue": { + "anyOf": [ + { + "$ref": "#/definitions/colorShorthand" + }, + { + "$ref": "#/definitions/dimensionShorthand" + }, + { + "$ref": "#/definitions/durationShorthand" + }, + { + "$ref": "#/definitions/numberShorthand" + }, + { + "$ref": "#/definitions/cubicBezier" + }, + { + "$ref": "#/definitions/shadow" + }, + { + "$ref": "#/definitions/gradient" + }, + { + "$ref": "#/definitions/tokenRef" + } + ] + }, + "colorShorthand": { + "type": "string", + "pattern": "^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$" + }, + "dimensionShorthand": { + "type": "string", + "pattern": "^-?\\d+(\\.\\d+)?(px|rem)$" + }, + "durationShorthand": { + "type": "string", + "pattern": "^\\d+(\\.\\d+)?(s|ms)$" + }, + "numberShorthand": { + "type": "number" + }, + "cubicBezier": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "cubicBezier" + }, + "value": { + "type": "array", + "items": { + "type": "number" + }, + "minItems": 4, + "maxItems": 4 + } + }, + "required": ["type", "value"], + "additionalProperties": false + }, + "shadow": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "shadow" + }, + "value": { + "type": "array", + "items": { + "type": "object", + "properties": { + "color": { + "$ref": "#/definitions/colorShorthand" + }, + "offsetX": { + "$ref": "#/definitions/dimensionShorthand" + }, + "offsetY": { + "$ref": "#/definitions/dimensionShorthand" + }, + "blur": { + "$ref": "#/definitions/dimensionShorthand" + }, + "spread": { + "$ref": "#/definitions/dimensionShorthand" + } + }, + "required": ["color", "offsetX", "offsetY", "blur", "spread"], + "additionalProperties": false + } + } + }, + "required": ["type", "value"], + "additionalProperties": false + }, + "gradient": { + "type": "object", + "properties": { + "type": { + "type": "string", + "const": "gradient" + }, + "value": { + "type": "array", + "items": { + "type": "object", + "properties": { + "color": { + "$ref": "#/definitions/colorShorthand" + }, + "position": { + "type": "number" + } + }, + "required": ["color", "position"], + "additionalProperties": false + } + } + }, + "required": ["type", "value"], + "additionalProperties": false + }, + "tokenRef": { + "type": "string", + "anyOf": [ + ${tokenAnnotations + .map( + (annotations) => + `{ ${[ + `"const": "${annotations.title}"`, + ...Object.keys(annotations).map( + (key) => `"${key}": "${annotations[key as keyof typeof annotations]}"`, + ), + ].join(", ")} }`, + ) + .join(",\n ")} + ] + } + } + }`; +} diff --git a/tools/rootage/core/src/stable/languages/typescript.test.ts b/tools/rootage/core/src/stable/languages/typescript.test.ts new file mode 100644 index 000000000..e1849e441 --- /dev/null +++ b/tools/rootage/core/src/stable/languages/typescript.test.ts @@ -0,0 +1,343 @@ +import { describe, expect, it, test } from "vitest"; +import YAML from "yaml"; +import { parse } from "../parser/parse"; +import type * as Shorthand from "../transformer/shorthand-document"; +import { getComponentSpecDts, getComponentSpecMjs, getTokenDts, getTokenMjs } from "./typescript"; +import { transform } from "../transformer/transform"; + +describe("getTokenMjs", () => { + it("should generate esm definitions", () => { + const models: Shorthand.Model[] = [ + { + kind: "Tokens", + metadata: { + id: "2", + name: "color", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.palette.gray-100": { + values: { + light: "#f8f9fa", + dark: "#212529", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }, + { + kind: "Tokens", + metadata: { + id: "3", + name: "dimension", + }, + data: { + collection: "global", + tokens: { + "$dimension.s1_5": { + values: { + default: "6px", + }, + }, + }, + }, + }, + ]; + + const result = getTokenMjs(parse(transform(models))); + + expect(result).toMatchInlineSnapshot(` + [ + { + "code": "export * as palette from \\"./palette.mjs\\"; + export * as bg from \\"./bg.mjs\\";", + "path": "color/index.mjs", + }, + { + "code": "export const gray00 = \\"var(--seed-v3-color-palette-gray-00)\\"; + export const gray100 = \\"var(--seed-v3-color-palette-gray-100)\\";", + "path": "color/palette.mjs", + }, + { + "code": "export const layer1 = \\"var(--seed-v3-color-bg-layer-1)\\";", + "path": "color/bg.mjs", + }, + { + "code": "export const s1_5 = \\"var(--seed-v3-dimension-s1_5)\\";", + "path": "dimension.mjs", + }, + ] + `); + }); + + it("should generate esm definitions with nesting", () => { + const models: Shorthand.Model[] = [ + { + kind: "Tokens", + metadata: { + id: "1", + name: "dimension", + }, + data: { + collection: "global", + tokens: { + "$dimension.s1_5": { + values: { + default: "6px", + }, + }, + "$dimension.spacing-x.default": { + values: { + default: "$dimension.s1_5", + }, + }, + "$dimension.spacing-x.test.value": { + values: { + default: "$dimension.s1_5", + }, + }, + }, + }, + }, + ]; + + const result = getTokenMjs(parse(transform(models))); + + expect(result).toMatchInlineSnapshot(` + [ + { + "code": "export const s1_5 = \\"var(--seed-v3-dimension-s1_5)\\"; + + export * as spacingX from \\"./spacing-x/index.mjs\\";", + "path": "dimension/index.mjs", + }, + { + "code": "export const default = \\"var(--seed-v3-dimension-spacing-x-default)\\"; + + export * as test from \\"./test.mjs\\";", + "path": "dimension/spacing-x/index.mjs", + }, + { + "code": "export const value = \\"var(--seed-v3-dimension-spacing-x-test-value)\\";", + "path": "dimension/spacing-x/test.mjs", + }, + ] + `); + }); +}); + +describe("getTokenDts", () => { + it("should generate typescript definitions", () => { + const models: Shorthand.Model[] = [ + { + kind: "Tokens", + metadata: { + id: "2", + name: "color", + }, + data: { + collection: "color", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.palette.gray-100": { + values: { + light: "#f8f9fa", + dark: "#212529", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }, + { + kind: "Tokens", + metadata: { + id: "3", + name: "dimension", + }, + data: { + collection: "global", + tokens: { + "$dimension.s1_5": { + values: { + default: "6px", + }, + }, + }, + }, + }, + ]; + + const result = getTokenDts(parse(transform(models))); + + expect(result).toMatchInlineSnapshot(` + [ + { + "code": "export * as palette from \\"./palette\\"; + export * as bg from \\"./bg\\";", + "path": "color/index.d.ts", + }, + { + "code": "export declare const gray00 = \\"var(--seed-v3-color-palette-gray-00)\\"; + export declare const gray100 = \\"var(--seed-v3-color-palette-gray-100)\\";", + "path": "color/palette.d.ts", + }, + { + "code": "export declare const layer1 = \\"var(--seed-v3-color-bg-layer-1)\\";", + "path": "color/bg.d.ts", + }, + { + "code": "export declare const s1_5 = \\"var(--seed-v3-dimension-s1_5)\\";", + "path": "dimension.d.ts", + }, + ] + `); + }); + + it("should generate typescript definitions with nesting", () => { + const models: Shorthand.Model[] = [ + { + kind: "Tokens", + metadata: { + id: "1", + name: "dimension", + }, + data: { + collection: "global", + tokens: { + "$dimension.s1_5": { + values: { + default: "6px", + }, + }, + "$dimension.spacing-x.default": { + values: { + default: "$dimension.s1_5", + }, + }, + }, + }, + }, + ]; + + const result = getTokenDts(parse(transform(models))); + + expect(result).toMatchInlineSnapshot(` + [ + { + "code": "export declare const s1_5 = \\"var(--seed-v3-dimension-s1_5)\\"; + + export * as spacingX from \\"./spacing-x\\";", + "path": "dimension/index.d.ts", + }, + { + "code": "export declare const default = \\"var(--seed-v3-dimension-spacing-x-default)\\";", + "path": "dimension/spacing-x.d.ts", + }, + ] + `); + }); +}); + +test("getComponentSpecMjs should generate esm definitions", () => { + const yaml = ` +kind: ComponentSpec +metadata: + id: test + name: test +data: + base: + enabled: + root: + color: "#ffffff" + variant=primary: + enabled: + root: + color: "#000000" +`; + const models = [YAML.parse(yaml)]; + + const result = getComponentSpecMjs(parse(transform(models)), "test"); + + expect(result).toMatchInlineSnapshot(` + "export const vars = { + \\"base\\": { + \\"enabled\\": { + \\"root\\": { + \\"color\\": \\"#ffffff\\" + } + } + }, + \\"variantPrimary\\": { + \\"enabled\\": { + \\"root\\": { + \\"color\\": \\"#000000\\" + } + } + } + }" + `); +}); + +test("getComponentSpecDts should generate typescript definitions", () => { + const yaml = ` +kind: ComponentSpec +metadata: + id: test + name: test +data: + base: + enabled: + root: + color: "#ffffff" + variant=primary: + enabled: + root: + color: "#000000" +`; + const models = [YAML.parse(yaml)]; + + const result = getComponentSpecDts(parse(transform(models)), "test"); + + expect(result).toMatchInlineSnapshot(` + "export declare const vars: { + \\"base\\": { + \\"enabled\\": { + \\"root\\": { + \\"color\\": \\"#ffffff\\" + } + } + }, + \\"variantPrimary\\": { + \\"enabled\\": { + \\"root\\": { + \\"color\\": \\"#000000\\" + } + } + } + }" + `); +}); diff --git a/tools/rootage/core/src/stable/languages/typescript.ts b/tools/rootage/core/src/stable/languages/typescript.ts new file mode 100644 index 000000000..8dd5ed7bc --- /dev/null +++ b/tools/rootage/core/src/stable/languages/typescript.ts @@ -0,0 +1,188 @@ +import { camelCase } from "change-case"; +import type { RootageAST, StateExpression, TokenLit, VariantExpression } from "../parser/ast"; +import { stringifyCssValue, stringifyTokenReference } from "./css"; + +/** + * camelCase but preserve underscore between numbers. + * temporary workaround to avoid x1_5 -> x15 + * @example "color-1_5" -> "color1_5" + */ +function camelCasePreserveUnderscoreBetweenNumbers(input: string) { + return camelCase(input, { + mergeAmbiguousCharacters: false, + }) + .replaceAll(/(\D)_(\d)/g, "$1$2") + .replaceAll(/(\d)_(\D)/g, "$1$2"); +} + +function stringifyVariantKey(variants: VariantExpression[]): string { + const asKebab = variants.map(({ name, value }) => `${name}-${value}`).join("-"); + + if (asKebab === "") { + return "base"; + } + + return camelCase(asKebab, { mergeAmbiguousCharacters: true }); +} + +function stringifyStateKey(state: StateExpression[]): string { + return camelCase(state.map((s) => s.value).join("-")); +} + +function getComponentSpec(ast: RootageAST, componentId: string) { + const body = ast.componentSpecs.find((spec) => spec.id === componentId)?.body; + if (!body) { + throw new Error(`Component spec not found: ${componentId}`); + } + + const result: Record>>> = {}; + + for (const variantDecl of body) { + const variantKey = stringifyVariantKey(variantDecl.variants); + const variant: Record>> = {}; + + for (const stateDecl of variantDecl.body) { + const stateKey = stringifyStateKey(stateDecl.states); + const slot: Record> = {}; + + for (const slotDecl of stateDecl.body) { + const slotKey = slotDecl.slot; + const property: Record = {}; + + for (const propertyDecl of slotDecl.body) { + const propertyKey = propertyDecl.property; + const expr = propertyDecl.value; + + property[propertyKey] = stringifyCssValue(expr); + } + + slot[slotKey] = property; + } + + variant[stateKey] = slot; + } + + result[variantKey] = variant; + } + + return result; +} + +export function getComponentSpecMjs(ast: RootageAST, componentId: string) { + const result = getComponentSpec(ast, componentId); + return `export const vars = ${JSON.stringify(result, null, 2)}`; +} + +export function getComponentSpecDts(ast: RootageAST, componentId: string) { + const result = getComponentSpec(ast, componentId); + return `export declare const vars: ${JSON.stringify(result, null, 2)}`; +} + +export function getComponentSpecIndexMjs(ast: RootageAST) { + const result = ast.componentSpecs.map((spec) => { + return `export { vars as ${camelCase(spec.id, { mergeAmbiguousCharacters: true })} } from "./${spec.id}.mjs";`; + }); + + return result.join("\n"); +} + +export function getComponentSpecIndexDts(ast: RootageAST) { + const result = ast.componentSpecs.map((spec) => { + return `export { vars as ${camelCase(spec.id, { mergeAmbiguousCharacters: true })} } from "./${spec.id}";`; + }); + + return result.join("\n"); +} + +interface TokenDefinition { + key: string; + value: string; +} + +interface TokenGroup { + dir: string; + code: TokenDefinition[]; +} + +function getTokenGroups(ast: RootageAST): TokenGroup[] { + const { tokens } = ast; + const tokenExpressions = tokens.map((decl) => decl.token); + + const groups: Record = {}; + + for (const expression of tokenExpressions) { + for (let i = 0; i < expression.group.length; i++) { + const group = expression.group.slice(0, i + 1).join("/"); + if (!groups[group]) { + groups[group] = []; + } + } + } + + for (const expression of tokenExpressions) { + const group = expression.group.join("/"); + groups[group]!.push(expression); + } + + return Object.entries(groups).map(([group, expressions]) => { + const definitions = expressions.map((expression) => { + const key = camelCasePreserveUnderscoreBetweenNumbers(expression.key); + const value = stringifyTokenReference(expression); + return { key, value }; + }); + + return { + dir: group, + code: definitions, + }; + }); +} + +function generateTokenCode( + groups: TokenGroup[], + isDeclaration: boolean, +): { path: string; code: string }[] { + return groups.map(({ dir, code }) => { + const definitions = code + .map(({ key, value }) => { + const exportKeyword = isDeclaration ? "export declare const" : "export const"; + return `${exportKeyword} ${key} = "${value}";`; + }) + .join("\n"); + + const reExports = groups + .filter( + (g) => g.dir.startsWith(`${dir}/`) && g.dir.split("/").length === dir.split("/").length + 1, + ) + .map((g) => { + const isTargetNested = groups.some((x) => x.dir.startsWith(`${g.dir}/`)); + const name = g.dir.replace(`${dir}/`, ""); + const relativePath = isTargetNested ? `${name}/index` : name; + return `export * as ${camelCase(name)} from "./${isDeclaration ? name : `${relativePath}.mjs`}";`; + }) + .join("\n"); + + const path = isDeclaration + ? reExports + ? `${dir}/index.d.ts` + : `${dir}.d.ts` + : reExports + ? `${dir}/index.mjs` + : `${dir}.mjs`; + + return { + path, + code: [definitions, reExports].filter(Boolean).join("\n\n"), + }; + }); +} + +export function getTokenMjs(ast: RootageAST): { path: string; code: string }[] { + const groups = getTokenGroups(ast); + return generateTokenCode(groups, false); +} + +export function getTokenDts(ast: RootageAST): { path: string; code: string }[] { + const groups = getTokenGroups(ast); + return generateTokenCode(groups, true); +} diff --git a/tools/rootage/core/src/stable/parser/ast.ts b/tools/rootage/core/src/stable/parser/ast.ts new file mode 100644 index 000000000..b0650afd1 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/ast.ts @@ -0,0 +1,252 @@ +export interface ColorHexLit { + kind: "ColorHexLit"; + value: `#${string}`; +} + +export interface DimensionLit { + kind: "DimensionLit"; + value: number; + unit: "px" | "rem"; +} + +export interface DurationLit { + kind: "DurationLit"; + value: number; + unit: "ms" | "s"; +} + +export interface NumberLit { + kind: "NumberLit"; + value: number; +} + +export interface CubicBezierLit { + kind: "CubicBezierLit"; + value: readonly [number, number, number, number]; +} + +export interface ShadowLayerLit { + kind: "ShadowLayerLit"; + color: ColorHexLit; + offsetX: DimensionLit; + offsetY: DimensionLit; + blur: DimensionLit; + spread: DimensionLit; +} + +export interface ShadowLit { + kind: "ShadowLit"; + layers: ShadowLayerLit[]; +} + +export interface GradientStopLit { + kind: "GradientStopLit"; + color: ColorHexLit; + position: NumberLit; +} + +export interface GradientLit { + kind: "GradientLit"; + stops: GradientStopLit[]; +} + +export interface TokenLit { + kind: "TokenLit"; + group: string[]; + key: string; +} + +export type ValueLit = + | ColorHexLit + | DimensionLit + | DurationLit + | NumberLit + | CubicBezierLit + | ShadowLit + | GradientLit; + +export interface ColorPropertyDeclaration { + kind: "ColorPropertyDeclaration"; + property: string; + value: ColorHexLit | TokenLit; +} + +export interface DimensionPropertyDeclaration { + kind: "DimensionPropertyDeclaration"; + property: string; + value: DimensionLit | TokenLit; +} + +export interface NumberPropertyDeclaration { + kind: "NumberPropertyDeclaration"; + property: string; + value: NumberLit | TokenLit; +} + +export interface DurationPropertyDeclaration { + kind: "DurationPropertyDeclaration"; + property: string; + value: DurationLit | TokenLit; +} + +export interface CubicBezierPropertyDeclaration { + kind: "CubicBezierPropertyDeclaration"; + property: string; + value: CubicBezierLit | TokenLit; +} + +export interface ShadowPropertyDeclaration { + kind: "ShadowPropertyDeclaration"; + property: string; + value: ShadowLit | TokenLit; +} + +export interface GradientPropertyDeclaration { + kind: "GradientPropertyDeclaration"; + property: string; + value: GradientLit | TokenLit; +} + +export type PropertyDeclaration = + | ColorPropertyDeclaration + | DimensionPropertyDeclaration + | NumberPropertyDeclaration + | DurationPropertyDeclaration + | CubicBezierPropertyDeclaration + | ShadowPropertyDeclaration + | GradientPropertyDeclaration; + +export interface SlotDeclaration { + kind: "SlotDeclaration"; + slot: string; + body: PropertyDeclaration[]; +} + +export interface StateExpression { + kind: "StateExpression"; + value: string; +} + +export interface StateDeclaration { + kind: "StateDeclaration"; + states: StateExpression[]; + body: SlotDeclaration[]; +} + +export interface VariantExpression { + kind: "VariantExpression"; + name: string; + value: string; +} + +export interface VariantDeclaration { + kind: "VariantDeclaration"; + variants: VariantExpression[]; + body: StateDeclaration[]; +} + +export interface ComponentSpecDeclaration { + kind: "ComponentSpecDeclaration"; + id: string; + name: string; + body: VariantDeclaration[]; +} + +export interface ColorTokenDeclaration { + kind: "ColorTokenDeclaration"; + collection: string; + token: TokenLit; + values: Array<{ + mode: string; + value: ColorHexLit | TokenLit; + }>; + description?: string; +} + +export interface DimensionTokenDeclaration { + kind: "DimensionTokenDeclaration"; + collection: string; + token: TokenLit; + values: Array<{ + mode: string; + value: DimensionLit | TokenLit; + }>; + description?: string; +} + +export interface NumberTokenDeclaration { + kind: "NumberTokenDeclaration"; + collection: string; + token: TokenLit; + values: Array<{ + mode: string; + value: NumberLit | TokenLit; + }>; + description?: string; +} + +export interface DurationTokenDeclaration { + kind: "DurationTokenDeclaration"; + collection: string; + token: TokenLit; + values: Array<{ + mode: string; + value: DurationLit | TokenLit; + }>; + description?: string; +} + +export interface CubicBezierTokenDeclaration { + kind: "CubicBezierTokenDeclaration"; + collection: string; + token: TokenLit; + values: Array<{ + mode: string; + value: CubicBezierLit | TokenLit; + }>; + description?: string; +} + +export interface ShadowTokenDeclaration { + kind: "ShadowTokenDeclaration"; + collection: string; + token: TokenLit; + values: Array<{ + mode: string; + value: ShadowLit | TokenLit; + }>; + description?: string; +} + +export interface GradientTokenDeclaration { + kind: "GradientTokenDeclaration"; + collection: string; + token: TokenLit; + values: Array<{ + mode: string; + value: GradientLit | TokenLit; + }>; + description?: string; +} + +export type TokenDeclaration = + | ColorTokenDeclaration + | DimensionTokenDeclaration + | NumberTokenDeclaration + | DurationTokenDeclaration + | CubicBezierTokenDeclaration + | ShadowTokenDeclaration + | GradientTokenDeclaration; + +export interface TokenCollectionDeclaration { + kind: "TokenCollectionDeclaration"; + name: string; + modes: string[]; +} + +export interface RootageAST { + kind: "RootageAST"; + componentSpecs: ComponentSpecDeclaration[]; + tokens: TokenDeclaration[]; + tokenCollections: TokenCollectionDeclaration[]; +} diff --git a/tools/rootage/core/src/stable/parser/component-spec.test.ts b/tools/rootage/core/src/stable/parser/component-spec.test.ts new file mode 100644 index 000000000..f65b24ddd --- /dev/null +++ b/tools/rootage/core/src/stable/parser/component-spec.test.ts @@ -0,0 +1,263 @@ +import { describe, expect, it } from "vitest"; + +import YAML from "yaml"; +import { transformComponentSpecModel } from "../transformer/component-spec"; +import { parseComponentSpecModel } from "./component-spec"; +import * as factory from "./factory"; + +describe("parseComponentSpecData", () => { + it("should parse base only", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + color: "#ffffff" + `; + + const parsed = parseComponentSpecModel(transformComponentSpecModel(YAML.parse(yaml))); + + const expected = factory.createComponentSpecDeclaration("test", "test", [ + factory.createVariantDeclaration( + [], + [ + factory.createStateDeclaration( + [factory.createStateExpression("enabled")], + [ + factory.createSlotDeclaration("root", [ + factory.createColorPropertyDeclaration( + "color", + factory.createColorHexLit("#ffffff"), + ), + ]), + ], + ), + ], + ), + ]); + + expect(parsed).toEqual(expected); + }); + + it("should parse base and variants", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + color: "#ffffff" + variant=primary: + enabled: + root: + color: "#000000" + `; + + const parsed = parseComponentSpecModel(transformComponentSpecModel(YAML.parse(yaml))); + + const expected = factory.createComponentSpecDeclaration("test", "test", [ + factory.createVariantDeclaration( + [], + [ + factory.createStateDeclaration( + [factory.createStateExpression("enabled")], + [ + factory.createSlotDeclaration("root", [ + factory.createColorPropertyDeclaration( + "color", + factory.createColorHexLit("#ffffff"), + ), + ]), + ], + ), + ], + ), + factory.createVariantDeclaration( + [factory.createVariantExpression("variant", "primary")], + [ + factory.createStateDeclaration( + [factory.createStateExpression("enabled")], + [ + factory.createSlotDeclaration("root", [ + factory.createColorPropertyDeclaration( + "color", + factory.createColorHexLit("#000000"), + ), + ]), + ], + ), + ], + ), + ]); + + expect(parsed).toEqual(expected); + }); + + it("should parse compound state", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled,selected: + root: + color: "#ffffff" + `; + + const parsed = parseComponentSpecModel(transformComponentSpecModel(YAML.parse(yaml))); + + const expected = factory.createComponentSpecDeclaration("test", "test", [ + factory.createVariantDeclaration( + [], + [ + factory.createStateDeclaration( + [factory.createStateExpression("enabled"), factory.createStateExpression("selected")], + [ + factory.createSlotDeclaration("root", [ + factory.createColorPropertyDeclaration( + "color", + factory.createColorHexLit("#ffffff"), + ), + ]), + ], + ), + ], + ), + ]); + + expect(parsed).toEqual(expected); + }); + + it("should parse compound variants", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + color: "#ffffff" + variant=primary,shape=rounded: + enabled: + root: + color: "#000000" + `; + + const parsed = parseComponentSpecModel(transformComponentSpecModel(YAML.parse(yaml))); + + const expected = factory.createComponentSpecDeclaration("test", "test", [ + factory.createVariantDeclaration( + [], + [ + factory.createStateDeclaration( + [factory.createStateExpression("enabled")], + [ + factory.createSlotDeclaration("root", [ + factory.createColorPropertyDeclaration( + "color", + factory.createColorHexLit("#ffffff"), + ), + ]), + ], + ), + ], + ), + factory.createVariantDeclaration( + [ + factory.createVariantExpression("variant", "primary"), + factory.createVariantExpression("shape", "rounded"), + ], + [ + factory.createStateDeclaration( + [factory.createStateExpression("enabled")], + [ + factory.createSlotDeclaration("root", [ + factory.createColorPropertyDeclaration( + "color", + factory.createColorHexLit("#000000"), + ), + ]), + ], + ), + ], + ), + ]); + + expect(parsed).toEqual(expected); + }); + + it("should parse shadow", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + shadow: + type: shadow + value: + - offsetX: 0px + offsetY: 3px + blur: 8px + spread: 0px + color: "#00000026" + - offsetX: 0px + offsetY: 1px + blur: 3px + spread: 0px + color: "#0000000f" + `; + + const parsed = parseComponentSpecModel(transformComponentSpecModel(YAML.parse(yaml))); + + const expected = factory.createComponentSpecDeclaration("test", "test", [ + factory.createVariantDeclaration( + [], + [ + factory.createStateDeclaration( + [factory.createStateExpression("enabled")], + [ + factory.createSlotDeclaration("root", [ + factory.createShadowPropertyDeclaration( + "shadow", + factory.createShadowLit([ + factory.createShadowLayerLit( + factory.createColorHexLit("#00000026"), + factory.createDimensionLit(0, "px"), + factory.createDimensionLit(3, "px"), + factory.createDimensionLit(8, "px"), + factory.createDimensionLit(0, "px"), + ), + factory.createShadowLayerLit( + factory.createColorHexLit("#0000000f"), + factory.createDimensionLit(0, "px"), + factory.createDimensionLit(1, "px"), + factory.createDimensionLit(3, "px"), + factory.createDimensionLit(0, "px"), + ), + ]), + ), + ]), + ], + ), + ], + ), + ]); + + expect(parsed).toEqual(expected); + }); +}); diff --git a/tools/rootage/core/src/stable/parser/component-spec.ts b/tools/rootage/core/src/stable/parser/component-spec.ts new file mode 100644 index 000000000..6e978dce1 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/component-spec.ts @@ -0,0 +1,96 @@ +import type * as Document from "./document"; +import * as factory from "./factory"; +import type { + ComponentSpecDeclaration, + PropertyDeclaration, + SlotDeclaration, + StateDeclaration, + VariantDeclaration, +} from "./ast"; +import { + parseColorValue, + parseDimensionValue, + parseNumberValue, + parseDurationValue, + parseCubicBezierValue, + parseShadowValue, + parseGradientValue, +} from "./value"; + +export function parseComponentSpecModel( + model: Document.ComponentSpecModel, +): ComponentSpecDeclaration { + // We'll produce exactly ONE ComponentSpecDeclaration per Document.ComponentSpecModel + const { id, name } = model.metadata; + const body: VariantDeclaration[] = []; + + for (const variantDecl of model.data) { + body.push(parseVariantDeclaration(variantDecl)); + } + + return factory.createComponentSpecDeclaration(id, name, body); +} + +function parseVariantDeclaration(input: Document.VariantDeclaration): VariantDeclaration { + // Convert each { [variantName]: string } pair => AST.createVariantExpression + const variantExprs = Object.entries(input.variants).map(([k, v]) => + factory.createVariantExpression(k, v), + ); + + // Convert definitions => array of StateDeclaration + const stateDecls: StateDeclaration[] = input.definitions.map((def) => parseStateDeclaration(def)); + + return factory.createVariantDeclaration(variantExprs, stateDecls); +} + +function parseStateDeclaration(def: { + states: string[]; + slots: Record>; +}): StateDeclaration { + // We'll treat def.states as an array of strings => an array of StateExpression + const stateExpressions = def.states.map((st) => factory.createStateExpression(st)); + + // Convert slot data => array of SlotDeclaration + const slotDecls: SlotDeclaration[] = []; + + for (const [slotName, props] of Object.entries(def.slots)) { + const propertyDecls: PropertyDeclaration[] = []; + + for (const [propKey, lhValue] of Object.entries(props)) { + propertyDecls.push(parsePropertyDeclaration(propKey, lhValue)); + } + + slotDecls.push(factory.createSlotDeclaration(slotName, propertyDecls)); + } + + return factory.createStateDeclaration(stateExpressions, slotDecls); +} + +/** + * Turn a property name + Document.Value => one of property declarations + * (ColorPropertyDeclaration, DimensionPropertyDeclaration, etc.). + */ +function parsePropertyDeclaration(property: string, lhValue: Document.Value): PropertyDeclaration { + switch (lhValue.type) { + case "color": + return factory.createColorPropertyDeclaration(property, parseColorValue(lhValue)); + + case "dimension": + return factory.createDimensionPropertyDeclaration(property, parseDimensionValue(lhValue)); + + case "number": + return factory.createNumberPropertyDeclaration(property, parseNumberValue(lhValue)); + + case "duration": + return factory.createDurationPropertyDeclaration(property, parseDurationValue(lhValue)); + + case "cubicBezier": + return factory.createCubicBezierPropertyDeclaration(property, parseCubicBezierValue(lhValue)); + + case "shadow": + return factory.createShadowPropertyDeclaration(property, parseShadowValue(lhValue)); + + case "gradient": + return factory.createGradientPropertyDeclaration(property, parseGradientValue(lhValue)); + } +} diff --git a/tools/rootage/core/src/stable/parser/document.ts b/tools/rootage/core/src/stable/parser/document.ts new file mode 100644 index 000000000..2a011b701 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/document.ts @@ -0,0 +1,111 @@ +export type TokenRef = `$${string}`; + +export type ColorLit = `#${string}`; +export type DimensionLit = { + value: number; + unit: "px" | "rem"; +}; +export type DurationLit = { + value: number; + unit: "ms" | "s"; +}; + +export type Color = { + type: "color"; + value: ColorLit | TokenRef; +}; +export type Dimension = { + type: "dimension"; + value: DimensionLit | TokenRef; +}; +export type Number = { + type: "number"; + value: number | TokenRef; +}; +export type Duration = { + type: "duration"; + value: DurationLit | TokenRef; +}; +export type CubicBezier = { + type: "cubicBezier"; + value: readonly [number, number, number, number] | TokenRef; +}; +export type ShadowLayer = { + color: ColorLit; + offsetX: DimensionLit; + offsetY: DimensionLit; + blur: DimensionLit; + spread: DimensionLit; +}; +export type Shadow = { + type: "shadow"; + value: ShadowLayer[] | TokenRef; +}; +export type GradientStop = { + color: ColorLit; + position: number; +}; +export type Gradient = { + type: "gradient"; + value: Array | TokenRef; +}; + +export type Value = Color | Dimension | Number | Duration | CubicBezier | Shadow | Gradient; + +export interface ComponentSpecModel { + kind: "ComponentSpec"; + metadata: { + id: string; + name: string; + }; + data: ComponentSpecData; +} + +export interface VariantDeclaration { + variants: Record; + definitions: Array<{ + states: string[]; + slots: { + [slot: string]: { + [property: string]: Value; + }; + }; + }>; +} + +export type ComponentSpecData = VariantDeclaration[]; + +export interface TokensModel { + kind: "Tokens"; + metadata: { + id: string; + name: string; + }; + data: TokensData; +} + +export interface TokensData { + collection: string; + tokens: { + [tokenName: TokenRef]: { + values: { + [mode: string]: Value; + }; + description?: string; + }; + }; +} + +export interface TokenCollectionsModel { + kind: "TokenCollections"; + metadata: { + id: string; + name: string; + }; + data: Array<{ + name: string; + modes: string[]; + }>; +} + +export type Model = ComponentSpecModel | TokensModel | TokenCollectionsModel; diff --git a/tools/rootage/core/src/stable/parser/factory.ts b/tools/rootage/core/src/stable/parser/factory.ts new file mode 100644 index 000000000..d3d64916b --- /dev/null +++ b/tools/rootage/core/src/stable/parser/factory.ts @@ -0,0 +1,535 @@ +import type { + ColorHexLit, + DimensionLit, + DurationLit, + NumberLit, + CubicBezierLit, + ShadowLayerLit, + ShadowLit, + GradientStopLit, + GradientLit, + TokenLit, + ColorPropertyDeclaration, + DimensionPropertyDeclaration, + NumberPropertyDeclaration, + DurationPropertyDeclaration, + CubicBezierPropertyDeclaration, + ShadowPropertyDeclaration, + GradientPropertyDeclaration, + PropertyDeclaration, + SlotDeclaration, + StateExpression, + StateDeclaration, + VariantExpression, + VariantDeclaration, + ComponentSpecDeclaration, + ColorTokenDeclaration, + DimensionTokenDeclaration, + NumberTokenDeclaration, + DurationTokenDeclaration, + CubicBezierTokenDeclaration, + ShadowTokenDeclaration, + GradientTokenDeclaration, + TokenDeclaration, + TokenCollectionDeclaration, + RootageAST, +} from "./ast"; + +/** + * ColorHexLit factory + */ +export function createColorHexLit(value: `#${string}`): ColorHexLit { + return { + kind: "ColorHexLit", + value, + }; +} + +/** + * DimensionLit factory + */ +export function createDimensionLit(value: number, unit: "px" | "rem"): DimensionLit { + return { + kind: "DimensionLit", + value, + unit, + }; +} + +/** + * DurationLit factory + */ +export function createDurationLit(value: number, unit: "ms" | "s"): DurationLit { + return { + kind: "DurationLit", + value, + unit, + }; +} + +/** + * NumberLit factory + */ +export function createNumberLit(value: number): NumberLit { + return { + kind: "NumberLit", + value, + }; +} + +/** + * CubicBezierLit factory + */ +export function createCubicBezierLit( + value: readonly [number, number, number, number], +): CubicBezierLit { + return { + kind: "CubicBezierLit", + value, + }; +} + +/** + * ShadowLayerLit factory + */ +export function createShadowLayerLit( + color: ColorHexLit, + offsetX: DimensionLit, + offsetY: DimensionLit, + blur: DimensionLit, + spread: DimensionLit, +): ShadowLayerLit { + return { + kind: "ShadowLayerLit", + color, + offsetX, + offsetY, + blur, + spread, + }; +} + +/** + * ShadowLit factory + */ +export function createShadowLit(layers: ShadowLayerLit[]): ShadowLit { + return { + kind: "ShadowLit", + layers, + }; +} + +/** + * GradientStopLit factory + */ +export function createGradientStopLit(color: ColorHexLit, position: NumberLit): GradientStopLit { + return { + kind: "GradientStopLit", + color, + position, + }; +} + +/** + * GradientLit factory + */ +export function createGradientLit(stops: GradientStopLit[]): GradientLit { + return { + kind: "GradientLit", + stops, + }; +} + +/** + * TokenLit factory + */ +export function createTokenLit(group: string[], key: string): TokenLit { + return { + kind: "TokenLit", + group, + key, + }; +} + +// ----------------------------------------------------------------------------- +// Property Declarations +// ----------------------------------------------------------------------------- + +/** + * ColorPropertyDeclaration factory + */ +export function createColorPropertyDeclaration( + property: string, + value: ColorHexLit | TokenLit, +): ColorPropertyDeclaration { + return { + kind: "ColorPropertyDeclaration", + property, + value, + }; +} + +/** + * DimensionPropertyDeclaration factory + */ +export function createDimensionPropertyDeclaration( + property: string, + value: DimensionLit | TokenLit, +): DimensionPropertyDeclaration { + return { + kind: "DimensionPropertyDeclaration", + property, + value, + }; +} + +/** + * NumberPropertyDeclaration factory + */ +export function createNumberPropertyDeclaration( + property: string, + value: NumberLit | TokenLit, +): NumberPropertyDeclaration { + return { + kind: "NumberPropertyDeclaration", + property, + value, + }; +} + +/** + * DurationPropertyDeclaration factory + */ +export function createDurationPropertyDeclaration( + property: string, + value: DurationLit | TokenLit, +): DurationPropertyDeclaration { + return { + kind: "DurationPropertyDeclaration", + property, + value, + }; +} + +/** + * CubicBezierPropertyDeclaration factory + */ +export function createCubicBezierPropertyDeclaration( + property: string, + value: CubicBezierLit | TokenLit, +): CubicBezierPropertyDeclaration { + return { + kind: "CubicBezierPropertyDeclaration", + property, + value, + }; +} + +/** + * ShadowPropertyDeclaration factory + */ +export function createShadowPropertyDeclaration( + property: string, + value: ShadowLit | TokenLit, +): ShadowPropertyDeclaration { + return { + kind: "ShadowPropertyDeclaration", + property, + value, + }; +} + +/** + * GradientPropertyDeclaration factory + */ +export function createGradientPropertyDeclaration( + property: string, + value: GradientLit | TokenLit, +): GradientPropertyDeclaration { + return { + kind: "GradientPropertyDeclaration", + property, + value, + }; +} + +// ----------------------------------------------------------------------------- +// SlotDeclaration +// ----------------------------------------------------------------------------- + +/** + * SlotDeclaration factory + */ +export function createSlotDeclaration(slot: string, body: PropertyDeclaration[]): SlotDeclaration { + return { + kind: "SlotDeclaration", + slot, + body, + }; +} + +// ----------------------------------------------------------------------------- +// State Expressions and Declarations +// ----------------------------------------------------------------------------- + +/** + * StateExpression factory + */ +export function createStateExpression(value: string): StateExpression { + return { + kind: "StateExpression", + value, + }; +} + +/** + * StateDeclaration factory + */ +export function createStateDeclaration( + states: StateExpression[], + body: SlotDeclaration[], +): StateDeclaration { + return { + kind: "StateDeclaration", + states, + body, + }; +} + +// ----------------------------------------------------------------------------- +// Variant Expressions and Declarations +// ----------------------------------------------------------------------------- + +/** + * VariantExpression factory + */ +export function createVariantExpression(name: string, value: string): VariantExpression { + return { + kind: "VariantExpression", + name, + value, + }; +} + +/** + * VariantDeclaration factory + */ +export function createVariantDeclaration( + variants: VariantExpression[], + body: StateDeclaration[], +): VariantDeclaration { + return { + kind: "VariantDeclaration", + variants, + body, + }; +} + +// ----------------------------------------------------------------------------- +// ComponentSpecDeclaration +// ----------------------------------------------------------------------------- + +/** + * ComponentSpecDeclaration factory + */ +export function createComponentSpecDeclaration( + id: string, + name: string, + body: VariantDeclaration[], +): ComponentSpecDeclaration { + return { + kind: "ComponentSpecDeclaration", + id, + name, + body, + }; +} + +// ----------------------------------------------------------------------------- +// Token Declarations +// ----------------------------------------------------------------------------- + +/** + * ColorTokenDeclaration factory + */ +export function createColorTokenDeclaration( + collection: string, + token: TokenLit, + values: Array<{ + mode: string; + value: ColorHexLit | TokenLit; + }>, + description?: string, +): ColorTokenDeclaration { + return { + kind: "ColorTokenDeclaration", + collection, + token, + values, + description, + }; +} + +/** + * DimensionTokenDeclaration factory + */ +export function createDimensionTokenDeclaration( + collection: string, + token: TokenLit, + values: Array<{ + mode: string; + value: DimensionLit | TokenLit; + }>, + description?: string, +): DimensionTokenDeclaration { + return { + kind: "DimensionTokenDeclaration", + collection, + token, + values, + description, + }; +} + +/** + * NumberTokenDeclaration factory + */ +export function createNumberTokenDeclaration( + collection: string, + token: TokenLit, + values: Array<{ + mode: string; + value: NumberLit | TokenLit; + }>, + description?: string, +): NumberTokenDeclaration { + return { + kind: "NumberTokenDeclaration", + collection, + token, + values, + description, + }; +} + +/** + * DurationTokenDeclaration factory + */ +export function createDurationTokenDeclaration( + collection: string, + token: TokenLit, + values: Array<{ + mode: string; + value: DurationLit | TokenLit; + }>, + description?: string, +): DurationTokenDeclaration { + return { + kind: "DurationTokenDeclaration", + collection, + token, + values, + description, + }; +} + +/** + * CubicBezierTokenDeclaration factory + */ +export function createCubicBezierTokenDeclaration( + collection: string, + token: TokenLit, + values: Array<{ + mode: string; + value: CubicBezierLit | TokenLit; + }>, + description?: string, +): CubicBezierTokenDeclaration { + return { + kind: "CubicBezierTokenDeclaration", + collection, + token, + values, + description, + }; +} + +/** + * ShadowTokenDeclaration factory + */ +export function createShadowTokenDeclaration( + collection: string, + token: TokenLit, + values: Array<{ + mode: string; + value: ShadowLit | TokenLit; + }>, + description?: string, +): ShadowTokenDeclaration { + return { + kind: "ShadowTokenDeclaration", + collection, + token, + values, + description, + }; +} + +/** + * GradientTokenDeclaration factory + */ +export function createGradientTokenDeclaration( + collection: string, + token: TokenLit, + values: Array<{ + mode: string; + value: GradientLit | TokenLit; + }>, + description?: string, +): GradientTokenDeclaration { + return { + kind: "GradientTokenDeclaration", + collection, + token, + values, + description, + }; +} + +// ----------------------------------------------------------------------------- +// Token Collection Declaration +// ----------------------------------------------------------------------------- + +/** + * TokenCollectionDeclaration factory + */ +export function createTokenCollectionDeclaration( + name: string, + modes: string[], +): TokenCollectionDeclaration { + return { + kind: "TokenCollectionDeclaration", + name, + modes, + }; +} + +// ----------------------------------------------------------------------------- +// RootageAST +// ----------------------------------------------------------------------------- + +/** + * Root AST node factory + */ +export function createRootageAST( + componentSpecs: ComponentSpecDeclaration[], + tokens: TokenDeclaration[], + tokenCollections: TokenCollectionDeclaration[], +): RootageAST { + return { + kind: "RootageAST", + componentSpecs, + tokens, + tokenCollections, + }; +} diff --git a/tools/rootage/core/src/stable/parser/index.ts b/tools/rootage/core/src/stable/parser/index.ts new file mode 100644 index 000000000..e5330401d --- /dev/null +++ b/tools/rootage/core/src/stable/parser/index.ts @@ -0,0 +1,7 @@ +export { parse } from "./parse"; +export { parseComponentSpecModel } from "./component-spec"; +export { parseTokenCollectionsModel } from "./token-collections"; +export { parseTokensModel } from "./tokens"; +export * as factory from "./factory"; +export type * as AST from "./ast"; +export type * as Document from "./document"; diff --git a/tools/rootage/core/src/stable/parser/is-token-ref.ts b/tools/rootage/core/src/stable/parser/is-token-ref.ts new file mode 100644 index 000000000..2aa7ca23b --- /dev/null +++ b/tools/rootage/core/src/stable/parser/is-token-ref.ts @@ -0,0 +1,13 @@ +import type { TokenRef } from "./document"; + +export function isTokenRef(expression: string | number | object): expression is TokenRef { + if (typeof expression === "number") { + return false; + } + + if (typeof expression === "object") { + return false; + } + + return expression.startsWith("$"); +} diff --git a/tools/rootage/core/src/stable/parser/parse.ts b/tools/rootage/core/src/stable/parser/parse.ts new file mode 100644 index 000000000..d43649d32 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/parse.ts @@ -0,0 +1,41 @@ +import type * as Document from "./document"; +import { parseComponentSpecModel } from "./component-spec"; +import * as factory from "./factory"; +import { parseTokenCollectionsModel } from "./token-collections"; +import { parseTokensModel } from "./tokens"; +import type { + ComponentSpecDeclaration, + RootageAST, + TokenCollectionDeclaration, + TokenDeclaration, +} from "./ast"; + +/** + * Main entry point. Loops through each `Document.Model` in the array, + * converting them into AST representation, then returns a + * single RootageAST that contains them all. + */ +export function parse(models: Document.Model[]): RootageAST { + const componentSpecs: ComponentSpecDeclaration[] = []; + const tokens: TokenDeclaration[] = []; + const tokenCollections: TokenCollectionDeclaration[] = []; + + for (const model of models) { + switch (model.kind) { + case "ComponentSpec": + componentSpecs.push(parseComponentSpecModel(model)); + break; + + case "Tokens": + tokens.push(...parseTokensModel(model)); + break; + + case "TokenCollections": + tokenCollections.push(...parseTokenCollectionsModel(model)); + break; + } + } + + // Build the final RootageAST node + return factory.createRootageAST(componentSpecs, tokens, tokenCollections); +} diff --git a/tools/rootage/core/src/stable/parser/token-collections.ts b/tools/rootage/core/src/stable/parser/token-collections.ts new file mode 100644 index 000000000..630697a22 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/token-collections.ts @@ -0,0 +1,9 @@ +import type * as Document from "./document"; +import type { TokenCollectionDeclaration } from "./ast"; +import * as factory from "./factory"; + +export function parseTokenCollectionsModel( + model: Document.TokenCollectionsModel, +): TokenCollectionDeclaration[] { + return model.data.map((tc) => factory.createTokenCollectionDeclaration(tc.name, tc.modes)); +} diff --git a/tools/rootage/core/src/stable/parser/token-ref.test.ts b/tools/rootage/core/src/stable/parser/token-ref.test.ts new file mode 100644 index 000000000..1701582d1 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/token-ref.test.ts @@ -0,0 +1,18 @@ +import { describe, expect, it } from "vitest"; +import { parseTokenRef } from "./token-ref"; + +describe("parseTokenRef", () => { + it("should parse token expression", () => { + const expression = "$color.bg.layer-1"; + + const result = parseTokenRef(expression); + + expect(result).toEqual({ group: ["color", "bg"], key: "layer-1" }); + }); + + it("should reject invalid token expression", () => { + const expression = "color.bg.layer-1"; + + expect(() => parseTokenRef(expression)).toThrowError(); + }); +}); diff --git a/tools/rootage/core/src/stable/parser/token-ref.ts b/tools/rootage/core/src/stable/parser/token-ref.ts new file mode 100644 index 000000000..90719dd67 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/token-ref.ts @@ -0,0 +1,20 @@ +import { isTokenRef } from "./is-token-ref"; + +/** + * A helper to parse the tokenRef string (e.g. "$brand.primary") into a group and key. + */ +export function parseTokenRef(ref: string): { group: string[]; key: string } { + // For demonstration, let's do something trivial: + // e.g. "$brand.colors.primary" => group=["brand", "colors"], key="primary" + if (!isTokenRef(ref)) { + throw new Error(`Invalid token format: ${ref}`); + } + const bare = ref.slice(1); // remove leading '$' + const segments = bare.split("."); + if (segments.length > 1) { + const key = segments.pop()!; + return { group: segments, key }; + } + // There's only one segment => no group + return { group: [], key: bare }; +} diff --git a/tools/rootage/core/src/stable/parser/tokens.test.ts b/tools/rootage/core/src/stable/parser/tokens.test.ts new file mode 100644 index 000000000..639fb1249 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/tokens.test.ts @@ -0,0 +1,130 @@ +import { describe, expect, it } from "vitest"; +import { parseTokensModel } from "./tokens"; +import type { TokensModel } from "./document"; +import * as factory from "./factory"; + +describe("parseTokensModel", () => { + it("should parse token model", () => { + const input: TokensModel = { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "collection", + tokens: { + "$color.palette.gray-00": { + values: { + light: { + type: "color", + value: "#ffffff", + }, + dark: { + type: "color", + value: "#000000", + }, + }, + }, + "$color.bg.layer-1": { + values: { + light: { + type: "color", + value: "$color.palette.gray-00", + }, + dark: { + type: "color", + value: "$color.palette.gray-00", + }, + }, + }, + }, + }, + }; + + const result = parseTokensModel(input); + + expect(result).toEqual([ + factory.createColorTokenDeclaration( + "collection", + factory.createTokenLit(["color", "palette"], "gray-00"), + [ + { mode: "light", value: factory.createColorHexLit("#ffffff") }, + { mode: "dark", value: factory.createColorHexLit("#000000") }, + ], + ), + factory.createColorTokenDeclaration( + "collection", + factory.createTokenLit(["color", "bg"], "layer-1"), + [ + { mode: "light", value: factory.createTokenLit(["color", "palette"], "gray-00") }, + { mode: "dark", value: factory.createTokenLit(["color", "palette"], "gray-00") }, + ], + ), + ]); + }); + + it("should parse token model with description", () => { + const input: TokensModel = { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "collection", + tokens: { + "$color.palette.gray-00": { + description: "Gray color 0", + values: { + light: { + type: "color", + value: "#ffffff", + }, + dark: { + type: "color", + value: "#000000", + }, + }, + }, + "$color.bg.layer-1": { + description: "Default background color", + values: { + light: { + type: "color", + value: "$color.palette.gray-00", + }, + dark: { + type: "color", + value: "$color.palette.gray-00", + }, + }, + }, + }, + }, + }; + + const result = parseTokensModel(input); + + expect(result).toEqual([ + factory.createColorTokenDeclaration( + "collection", + factory.createTokenLit(["color", "palette"], "gray-00"), + [ + { mode: "light", value: factory.createColorHexLit("#ffffff") }, + { mode: "dark", value: factory.createColorHexLit("#000000") }, + ], + "Gray color 0", + ), + factory.createColorTokenDeclaration( + "collection", + factory.createTokenLit(["color", "bg"], "layer-1"), + [ + { mode: "light", value: factory.createTokenLit(["color", "palette"], "gray-00") }, + { mode: "dark", value: factory.createTokenLit(["color", "palette"], "gray-00") }, + ], + "Default background color", + ), + ]); + }); +}); diff --git a/tools/rootage/core/src/stable/parser/tokens.ts b/tools/rootage/core/src/stable/parser/tokens.ts new file mode 100644 index 000000000..4d90e0e71 --- /dev/null +++ b/tools/rootage/core/src/stable/parser/tokens.ts @@ -0,0 +1,124 @@ +import type * as Document from "./document"; +import * as factory from "./factory"; +import { parseTokenRef } from "./token-ref"; +import type { + ColorHexLit, + CubicBezierLit, + DimensionLit, + DurationLit, + GradientLit, + NumberLit, + ShadowLit, + TokenDeclaration, + TokenLit, +} from "./ast"; +import { parseValue } from "./value"; + +export function parseTokensModel(model: Document.TokensModel): TokenDeclaration[] { + const out: TokenDeclaration[] = []; + const collectionName = model.data.collection; + + // Each token entry => a single TokenDeclaration + // For each token, we guess the type of token from the first mode's value type. + // In real usage, you'd enforce consistent types across all modes for that token. + for (const [tokenRef, tokenData] of Object.entries(model.data.tokens)) { + // `tokenRef` is something like `"$myColorPrimary"` + // We can parse that tokenRef => group/key, or just store it directly as the key. + const { group, key } = parseTokenRef(tokenRef); + + // get the first mode's value to guess the type + const firstMode = Object.keys(tokenData.values)[0]!; + const firstValue = tokenData.values[firstMode]!; + + // We'll do a quick check: if it's not a plain object or union with type, + // handle that scenario. (Could be a token reference again, etc.) + const baseType = firstValue.type; + + // Now gather all "modes" => array of { mode, value: AST literal or token lit } + const modeValues = Object.entries(tokenData.values).map(([mode, val]) => ({ + mode, + value: parseValue(val), // parseValue returns the appropriate *Lit or TokenLit + })); + + // Depending on `baseType`, pick the appropriate TokenDeclaration kind. + switch (baseType) { + case "color": + out.push( + factory.createColorTokenDeclaration( + collectionName, + factory.createTokenLit(group, key), + modeValues as Array<{ mode: string; value: ColorHexLit | TokenLit }>, + tokenData.description, + ), + ); + break; + case "dimension": + out.push( + factory.createDimensionTokenDeclaration( + collectionName, + factory.createTokenLit(group, key), + modeValues as Array<{ mode: string; value: DimensionLit | TokenLit }>, + tokenData.description, + ), + ); + break; + case "number": + out.push( + factory.createNumberTokenDeclaration( + collectionName, + factory.createTokenLit(group, key), + modeValues as Array<{ mode: string; value: NumberLit | TokenLit }>, + tokenData.description, + ), + ); + break; + case "duration": + out.push( + factory.createDurationTokenDeclaration( + collectionName, + factory.createTokenLit(group, key), + modeValues as Array<{ mode: string; value: DurationLit | TokenLit }>, + tokenData.description, + ), + ); + break; + case "cubicBezier": + out.push( + factory.createCubicBezierTokenDeclaration( + collectionName, + factory.createTokenLit(group, key), + modeValues as Array<{ mode: string; value: CubicBezierLit | TokenLit }>, + tokenData.description, + ), + ); + break; + case "shadow": + out.push( + factory.createShadowTokenDeclaration( + collectionName, + factory.createTokenLit(group, key), + modeValues as Array<{ mode: string; value: ShadowLit | TokenLit }>, + tokenData.description, + ), + ); + break; + case "gradient": + out.push( + factory.createGradientTokenDeclaration( + collectionName, + factory.createTokenLit(group, key), + modeValues as Array<{ mode: string; value: GradientLit | TokenLit }>, + tokenData.description, + ), + ); + break; + + // If none matched (e.g. if it's a reference to another token), + // you might fallback to color or throw an error. We'll just throw here. + default: + throw new Error(`Token '${tokenRef}' has unrecognized/unsupported value type: ${baseType}`); + } + } + + return out; +} diff --git a/tools/rootage/core/src/stable/parser/value.ts b/tools/rootage/core/src/stable/parser/value.ts new file mode 100644 index 000000000..bf830c7bb --- /dev/null +++ b/tools/rootage/core/src/stable/parser/value.ts @@ -0,0 +1,179 @@ +import { isTokenRef } from "./is-token-ref"; +import type * as Document from "./document"; +import type { + ColorHexLit, + CubicBezierLit, + DimensionLit, + DurationLit, + GradientLit, + GradientStopLit, + NumberLit, + ShadowLayerLit, + ShadowLit, + TokenLit, +} from "./ast"; +import * as factory from "./factory"; +import { parseTokenRef } from "./token-ref"; + +/* ------------------------------------------------------------------ + Value -> AST "literal" or token reference + Helpers below parse each type of Document.Value + into the corresponding AST node via the factory functions. + ------------------------------------------------------------------ */ + +/** + * Main entry point for property/mode values (Document.Value or tokenRef string). + * If it's a token string ("$..."), we create a TokenLit. Otherwise, + * we call the specialized parse function based on value.type. + */ +export function parseValue( + v: Document.Value | string, +): + | ColorHexLit + | DimensionLit + | DurationLit + | NumberLit + | CubicBezierLit + | ShadowLit + | GradientLit + | TokenLit { + if (typeof v === "string") { + // It's a token reference + const { group, key } = parseTokenRef(v); + return factory.createTokenLit(group, key); + } + + // Otherwise, it's a Document.Value + switch (v.type) { + case "color": + return parseColorValue(v); + case "dimension": + return parseDimensionValue(v); + case "number": + return parseNumberValue(v); + case "duration": + return parseDurationValue(v); + case "cubicBezier": + return parseCubicBezierValue(v); + case "shadow": + return parseShadowValue(v); + case "gradient": + return parseGradientValue(v); + } +} + +/* ------------------ Color ------------------ */ + +export function parseColorValue(colorVal: Document.Color): ColorHexLit | TokenLit { + const c = colorVal.value; + if (isTokenRef(c)) { + // It's a token reference + const { group, key } = parseTokenRef(c); + return factory.createTokenLit(group, key); + } + // Otherwise c is `#...` + return factory.createColorHexLit(c as `#${string}`); +} + +/* ------------------ Dimension ------------------ */ + +export function parseDimensionValue(dimVal: Document.Dimension): DimensionLit | TokenLit { + const d = dimVal.value; + if (isTokenRef(d)) { + const { group, key } = parseTokenRef(d); + return factory.createTokenLit(group, key); + } + // Otherwise d is { value: number, unit: "px"|"rem" } + return factory.createDimensionLit(d.value, d.unit); +} + +/* ------------------ Number ------------------ */ + +export function parseNumberValue(numVal: Document.Number): NumberLit | TokenLit { + const n = numVal.value; + if (typeof n === "string" && n.startsWith("$")) { + const { group, key } = parseTokenRef(n); + return factory.createTokenLit(group, key); + } + return factory.createNumberLit(n as number); +} + +/* ------------------ Duration ------------------ */ + +export function parseDurationValue(durVal: Document.Duration): DurationLit | TokenLit { + const d = durVal.value; + if (isTokenRef(d)) { + const { group, key } = parseTokenRef(d); + return factory.createTokenLit(group, key); + } + return factory.createDurationLit(d.value, d.unit); +} + +/* ------------------ CubicBezier ------------------ */ + +export function parseCubicBezierValue(cbVal: Document.CubicBezier): CubicBezierLit | TokenLit { + const c = cbVal.value; + if (isTokenRef(c)) { + const { group, key } = parseTokenRef(c); + return factory.createTokenLit(group, key); + } + // otherwise it's an array of [n1,n2,n3,n4] + return factory.createCubicBezierLit(c as [number, number, number, number]); +} + +/* ------------------ Shadow ------------------ */ + +export function parseShadowValue(shVal: Document.Shadow): ShadowLit | TokenLit { + const s = shVal.value; + if (isTokenRef(s)) { + const { group, key } = parseTokenRef(s); + return factory.createTokenLit(group, key); + } + // Otherwise it's an array of shadow layers + const layers = (s as Document.ShadowLayer[]).map(parseShadowLayer); + return factory.createShadowLit(layers); +} + +export function parseShadowLayer(layer: Document.ShadowLayer): ShadowLayerLit { + const colorLit = parseColorValue({ type: "color", value: layer.color }); + const offsetXLit = parseDimensionValue({ + type: "dimension", + value: layer.offsetX, + }); + const offsetYLit = parseDimensionValue({ + type: "dimension", + value: layer.offsetY, + }); + const blurLit = parseDimensionValue({ type: "dimension", value: layer.blur }); + const spreadLit = parseDimensionValue({ + type: "dimension", + value: layer.spread, + }); + + return factory.createShadowLayerLit( + colorLit as ColorHexLit, // we assume color isn't a token here, but you could check + offsetXLit as DimensionLit, + offsetYLit as DimensionLit, + blurLit as DimensionLit, + spreadLit as DimensionLit, + ); +} + +/* ------------------ Gradient ------------------ */ + +export function parseGradientValue(grVal: Document.Gradient): GradientLit | TokenLit { + const g = grVal.value; + if (isTokenRef(g)) { + const { group, key } = parseTokenRef(g); + return factory.createTokenLit(group, key); + } + // Otherwise it's an array of gradient stops + const stops = (g as Document.GradientStop[]).map(parseGradientStop); + return factory.createGradientLit(stops); +} + +export function parseGradientStop(stop: Document.GradientStop): GradientStopLit { + const colorLit = parseColorValue({ type: "color", value: stop.color }); + const positionLit = parseNumberValue({ type: "number", value: stop.position }); + return factory.createGradientStopLit(colorLit as ColorHexLit, positionLit as NumberLit); +} diff --git a/tools/rootage/core/src/stable/transformer/component-spec.test.ts b/tools/rootage/core/src/stable/transformer/component-spec.test.ts new file mode 100644 index 000000000..39be410d6 --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/component-spec.test.ts @@ -0,0 +1,294 @@ +import { describe, expect, it } from "vitest"; + +import YAML from "yaml"; +import type * as Document from "../parser/document"; +import { transformComponentSpecModel } from "./component-spec"; + +describe("transformComponentSpecData", () => { + it("should transform base only", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + color: "#ffffff" + `; + + const transformed = transformComponentSpecModel(YAML.parse(yaml)); + + const expected: Document.ComponentSpecModel = { + kind: "ComponentSpec", + metadata: { + id: "test", + name: "test", + }, + data: [ + { + variants: {}, + definitions: [ + { + states: ["enabled"], + slots: { + root: { + color: { + type: "color", + value: "#ffffff", + }, + }, + }, + }, + ], + }, + ], + }; + + expect(transformed).toEqual(expected); + }); + + it("should transform base and variants", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + color: "#ffffff" + variant=primary: + enabled: + root: + color: "#000000" + `; + + const transformed = transformComponentSpecModel(YAML.parse(yaml)); + + const expected: Document.ComponentSpecModel = { + kind: "ComponentSpec", + metadata: { + id: "test", + name: "test", + }, + data: [ + { + variants: {}, + definitions: [ + { + states: ["enabled"], + slots: { + root: { + color: { + type: "color", + value: "#ffffff", + }, + }, + }, + }, + ], + }, + { + variants: { variant: "primary" }, + definitions: [ + { + states: ["enabled"], + slots: { + root: { + color: { + type: "color", + value: "#000000", + }, + }, + }, + }, + ], + }, + ], + }; + + expect(transformed).toEqual(expected); + }); + + it("should transform compound state", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled,selected: + root: + color: "#ffffff" + `; + + const transformed = transformComponentSpecModel(YAML.parse(yaml)); + + const expected: Document.ComponentSpecModel = { + kind: "ComponentSpec", + metadata: { + id: "test", + name: "test", + }, + data: [ + { + variants: {}, + definitions: [ + { + states: ["enabled", "selected"], + slots: { + root: { + color: { + type: "color", + value: "#ffffff", + }, + }, + }, + }, + ], + }, + ], + }; + + expect(transformed).toEqual(expected); + }); + + it("should transform compound variants", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + color: "#ffffff" + variant=primary,shape=rounded: + enabled: + root: + color: "#000000" + `; + + const transformed = transformComponentSpecModel(YAML.parse(yaml)); + + const expected: Document.ComponentSpecModel = { + kind: "ComponentSpec", + metadata: { + id: "test", + name: "test", + }, + data: [ + { + variants: {}, + definitions: [ + { + states: ["enabled"], + slots: { + root: { + color: { + type: "color", + value: "#ffffff", + }, + }, + }, + }, + ], + }, + { + variants: { variant: "primary", shape: "rounded" }, + definitions: [ + { + states: ["enabled"], + slots: { + root: { + color: { + type: "color", + value: "#000000", + }, + }, + }, + }, + ], + }, + ], + }; + + expect(transformed).toEqual(expected); + }); + + it("should transform shadow", () => { + const yaml = ` + kind: ComponentSpec + metadata: + id: test + name: test + data: + base: + enabled: + root: + shadow: + type: shadow + value: + - offsetX: 0px + offsetY: 3px + blur: 8px + spread: 0px + color: "#00000026" + - offsetX: 0px + offsetY: 1px + blur: 3px + spread: 0px + color: "#0000000f" + `; + + const parsed = transformComponentSpecModel(YAML.parse(yaml)); + + const expected: Document.ComponentSpecModel = { + kind: "ComponentSpec", + metadata: { + id: "test", + name: "test", + }, + data: [ + { + variants: {}, + definitions: [ + { + states: ["enabled"], + slots: { + root: { + shadow: { + type: "shadow", + value: [ + { + color: "#00000026", + offsetX: { value: 0, unit: "px" }, + offsetY: { value: 3, unit: "px" }, + blur: { value: 8, unit: "px" }, + spread: { value: 0, unit: "px" }, + }, + { + color: "#0000000f", + offsetX: { value: 0, unit: "px" }, + offsetY: { value: 1, unit: "px" }, + blur: { value: 3, unit: "px" }, + spread: { value: 0, unit: "px" }, + }, + ], + }, + }, + }, + }, + ], + }, + ], + }; + + expect(parsed).toEqual(expected); + }); +}); diff --git a/tools/rootage/core/src/stable/transformer/component-spec.ts b/tools/rootage/core/src/stable/transformer/component-spec.ts new file mode 100644 index 000000000..48d68c2e0 --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/component-spec.ts @@ -0,0 +1,85 @@ +import type * as Shorthand from "./shorthand-document"; +import type * as Document from "../parser/document"; +import { transformValue } from "./value"; +import { isTokenRef } from "../parser/is-token-ref"; + +function parseVariantExpression(variantExpression: string) { + if (variantExpression === "base") { + return {}; + } + + const keyValues = variantExpression.split(",").map((s) => s.trim()); + const variant: Record = {}; + for (const keyValue of keyValues) { + const [key, value] = keyValue.split("="); + if (!key || !value) { + throw new Error(`Invalid variant format: ${variantExpression}`); + } + + variant[key] = value; + } + + return variant; +} + +function parseStateExpression(stateExpression: string) { + return stateExpression.split(","); +} + +function transformRighthandValue(rv: Shorthand.RighthandValue): Document.Value { + if (isTokenRef(rv)) { + return { + type: "color", + value: rv, + }; + } + return transformValue(rv as Shorthand.Value); +} + +function transformComponentSpecData(data: Shorthand.ComponentSpecData): Document.ComponentSpecData { + const variantDeclarations: Document.VariantDeclaration[] = []; + + // Each key is a "variantExpression" like "size=small|type=primary" + for (const [variantExpression, statesObject] of Object.entries(data)) { + const variants = parseVariantExpression(variantExpression); + + // Build an array of definitions, one per state (or merge if you like). + const definitions: Document.VariantDeclaration["definitions"] = []; + for (const [stateExpression, slotsObject] of Object.entries(statesObject)) { + // Convert each slot's properties + const transformedSlots: Record> = {}; + for (const [slotName, properties] of Object.entries(slotsObject)) { + const transformedProps: Record = {}; + for (const [propName, shorthandValue] of Object.entries(properties)) { + transformedProps[propName] = transformRighthandValue(shorthandValue); + } + transformedSlots[slotName] = transformedProps; + } + + definitions.push({ + states: parseStateExpression(stateExpression), + slots: transformedSlots, + }); + } + + variantDeclarations.push({ + variants, + definitions, + }); + } + + return variantDeclarations; +} + +export function transformComponentSpecModel( + shorthand: Shorthand.ComponentSpecModel, +): Document.ComponentSpecModel { + return { + kind: "ComponentSpec", + metadata: { + id: shorthand.metadata.id, + name: shorthand.metadata.name, + }, + data: transformComponentSpecData(shorthand.data), + }; +} diff --git a/tools/rootage/core/src/stable/transformer/index.ts b/tools/rootage/core/src/stable/transformer/index.ts new file mode 100644 index 000000000..fb8384e04 --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/index.ts @@ -0,0 +1,2 @@ +export { transform } from "./transform"; +export type * as ShorthandDocument from "./shorthand-document"; diff --git a/tools/rootage/core/src/stable/transformer/shorthand-document.ts b/tools/rootage/core/src/stable/transformer/shorthand-document.ts new file mode 100644 index 000000000..f24a7e155 --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/shorthand-document.ts @@ -0,0 +1,84 @@ +import type { TokenRef } from "../parser/document"; + +export type Color = `#${string}`; +export type Dimension = `${number}px` | `${number}rem`; +export type Number = number; +export type Duration = `${number}${"ms" | "s"}`; +export type CubicBezier = { + type: "cubicBezier"; + value: readonly [number, number, number, number]; +}; +export type Shadow = { + type: "shadow"; + value: Array<{ + color: Color; + offsetX: Dimension; + offsetY: Dimension; + blur: Dimension; + spread: Dimension; + }>; +}; +export type Gradient = { + type: "gradient"; + value: Array<{ + color: Color; + position: number; + }>; +}; + +export type Value = Color | Dimension | Number | Duration | CubicBezier | Shadow | Gradient; +export type RighthandValue = Value | TokenRef; + +export interface TokenCollectionsModel { + kind: "TokenCollections"; + metadata: { + id: string; + name: string; + }; + data: Array<{ + name: string; + modes: string[]; + }>; +} + +export interface TokensModel { + kind: "Tokens"; + metadata: { + id: string; + name: string; + }; + data: TokensData; +} + +export interface TokensData { + collection: string; + tokens: { + [tokenName: TokenRef]: { + values: { + [mode: string]: RighthandValue; + }; + description?: string; + }; + }; +} + +export interface ComponentSpecModel { + kind: "ComponentSpec"; + metadata: { + id: string; + name: string; + }; + data: ComponentSpecData; +} + +export interface ComponentSpecData { + [variantExpression: string]: { + [state: string]: { + [slot: string]: { + [property: string]: RighthandValue; + }; + }; + }; +} + +export type Model = TokenCollectionsModel | TokensModel | ComponentSpecModel; diff --git a/tools/rootage/core/src/stable/transformer/token-collection.ts b/tools/rootage/core/src/stable/transformer/token-collection.ts new file mode 100644 index 000000000..38c4b344f --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/token-collection.ts @@ -0,0 +1,8 @@ +import type * as Document from "../parser/document"; +import type * as Shorthand from "./shorthand-document"; + +export function transformTokenCollectionsModel( + input: Shorthand.TokenCollectionsModel, +): Document.TokenCollectionsModel { + return input; +} diff --git a/tools/rootage/core/src/stable/transformer/tokens.test.ts b/tools/rootage/core/src/stable/transformer/tokens.test.ts new file mode 100644 index 000000000..4b1f77fcc --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/tokens.test.ts @@ -0,0 +1,141 @@ +import { describe, expect, it } from "vitest"; +import type * as Shorthand from "./shorthand-document"; +import { transformTokensModel } from "./tokens"; + +describe("transformTokensModel", () => { + it("should transform token model", () => { + const input: Shorthand.TokensModel = { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "collection", + tokens: { + "$color.palette.gray-00": { + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-1": { + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }; + + const result = transformTokensModel(input); + + expect(result).toEqual({ + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "collection", + tokens: { + "$color.palette.gray-00": { + values: { + light: { + type: "color", + value: "#ffffff", + }, + dark: { + type: "color", + value: "#000000", + }, + }, + }, + "$color.bg.layer-1": { + values: { + light: { + type: "color", + value: "$color.palette.gray-00", + }, + dark: { + type: "color", + value: "$color.palette.gray-00", + }, + }, + }, + }, + }, + }); + }); + + it("should transform token model with description", () => { + const input: Shorthand.TokensModel = { + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "collection", + tokens: { + "$color.palette.gray-00": { + description: "Gray color 0", + values: { + light: "#ffffff", + dark: "#000000", + }, + }, + "$color.bg.layer-1": { + description: "Default background color", + values: { + light: "$color.palette.gray-00", + dark: "$color.palette.gray-00", + }, + }, + }, + }, + }; + + const result = transformTokensModel(input); + + expect(result).toEqual({ + kind: "Tokens", + metadata: { + name: "tokens", + id: "id", + }, + data: { + collection: "collection", + tokens: { + "$color.palette.gray-00": { + description: "Gray color 0", + values: { + light: { + type: "color", + value: "#ffffff", + }, + dark: { + type: "color", + value: "#000000", + }, + }, + }, + "$color.bg.layer-1": { + description: "Default background color", + values: { + light: { + type: "color", + value: "$color.palette.gray-00", + }, + dark: { + type: "color", + value: "$color.palette.gray-00", + }, + }, + }, + }, + }, + }); + }); +}); diff --git a/tools/rootage/core/src/stable/transformer/tokens.ts b/tools/rootage/core/src/stable/transformer/tokens.ts new file mode 100644 index 000000000..42b38d09c --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/tokens.ts @@ -0,0 +1,50 @@ +import { isTokenRef } from "../parser/is-token-ref"; +import type * as Document from "../parser/document"; +import type { TokenRef } from "../parser/document"; +import type * as Shorthand from "./shorthand-document"; +import { transformValue } from "./value"; + +export function transformTokensModel(model: Shorthand.TokensModel): Document.TokensModel { + const { tokens, collection } = model.data; + const result: Document.TokensModel["data"]["tokens"] = {}; + + const tokenEntries = Object.entries(tokens) as [ + TokenRef, + Shorthand.TokensData["tokens"][TokenRef], + ][]; + + for (const [tokenName, token] of tokenEntries) { + const values = Object.entries(token.values).map(([mode, righthand]) => { + return [mode, isTokenRef(righthand) ? null : transformValue(righthand)]; + }); + + result[tokenName] = { + values: Object.fromEntries(values), + description: token.description, + }; + } + + for (const [tokenName, token] of tokenEntries) { + for (const [mode, righthand] of Object.entries(token.values)) { + if (isTokenRef(righthand)) { + if (!result[righthand]) { + throw new Error(`Token not found: ${righthand}`); + } + + result[tokenName]!.values[mode] = { + type: result[righthand].values[mode]!.type, + value: righthand, + }; + } + } + } + + return { + kind: "Tokens", + metadata: model.metadata, + data: { + collection, + tokens: result, + }, + }; +} diff --git a/tools/rootage/core/src/stable/transformer/transform.ts b/tools/rootage/core/src/stable/transformer/transform.ts new file mode 100644 index 000000000..7254e81f0 --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/transform.ts @@ -0,0 +1,27 @@ +import type * as Document from "../parser/document"; +import type * as Shorthand from "./shorthand-document"; +import { transformComponentSpecModel } from "./component-spec"; +import { transformTokenCollectionsModel } from "./token-collection"; +import { transformTokensModel } from "./tokens"; + +export function transform(models: Shorthand.Model[]): Document.Model[] { + const result: Document.Model[] = []; + + for (const model of models) { + switch (model.kind) { + case "ComponentSpec": + result.push(transformComponentSpecModel(model)); + break; + + case "Tokens": + result.push(transformTokensModel(model)); + break; + + case "TokenCollections": + result.push(transformTokenCollectionsModel(model)); + break; + } + } + + return result; +} diff --git a/tools/rootage/core/src/stable/transformer/value.test.ts b/tools/rootage/core/src/stable/transformer/value.test.ts new file mode 100644 index 000000000..5c586dd32 --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/value.test.ts @@ -0,0 +1,247 @@ +import { describe, expect, it } from "vitest"; +import type { Gradient } from "./shorthand-document"; +import { transformValue } from "./value"; +import type * as Document from "../parser/document"; +import type * as Shorthand from "./shorthand-document"; + +describe("transformValue", () => { + it("should transform 24bit hex colors", () => { + const expression: Shorthand.Color = "#ffffff"; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "color", + value: expression, + } satisfies Document.Color); + }); + + it("should transform 24+8bit hex colors", () => { + const expression: Shorthand.Color = "#ffffffff"; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "color", + value: expression, + } satisfies Document.Color); + }); + + it("should reject invalid hex colors", () => { + const expression = "#ff"; + + expect(() => transformValue(expression)).toThrowError(); + }); + + it("should transform px unit dimension", () => { + const expression: Shorthand.Dimension = "16px"; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "dimension", + value: { + value: 16, + unit: "px", + }, + } satisfies Document.Dimension); + }); + + it("should transform rem unit dimension", () => { + const expression: Shorthand.Dimension = "1rem"; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "dimension", + value: { + value: 1, + unit: "rem", + }, + } satisfies Document.Dimension); + }); + + it("should transform dimension with negative value", () => { + const expression: Shorthand.Dimension = "-16px"; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "dimension", + value: { + value: -16, + unit: "px", + }, + } satisfies Document.Dimension); + }); + + it("should reject invalid dimension", () => { + const expression = "16em"; + + // @ts-expect-error + expect(() => transformValue(expression)).toThrowError(); + }); + + it("should transform number", () => { + const expression: Shorthand.Number = 42; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "number", + value: expression, + } satisfies Document.Number); + }); + + it("should transform ms unit duration", () => { + const expression: Shorthand.Duration = "500ms"; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "duration", + value: { + value: 500, + unit: "ms", + }, + } satisfies Document.Duration); + }); + + it("should transform s unit duration", () => { + const expression: Shorthand.Duration = "1.5s"; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "duration", + value: { + value: 1.5, + unit: "s", + }, + } satisfies Document.Duration); + }); + + it("should reject invalid duration", () => { + const expression = "500ns"; + + // @ts-expect-error + expect(() => transformValue(expression)).toThrowError(); + }); + + it("should transform cubic bezier", () => { + const expression: Shorthand.CubicBezier = { + type: "cubicBezier", + value: [0.25, 0.1, 0.25, 1], + } as const; + + const result = transformValue(expression); + + expect(result).toEqual(expression satisfies Document.CubicBezier); + }); + + it("should reject invalid cubic bezier", () => { + const expression = { type: "cubicBezier" } as const; + + // @ts-expect-error + expect(() => transformValue(expression)).toThrowError(); + }); + + it("should transform shadow", () => { + const expression: Shorthand.Shadow = { + type: "shadow" as const, + value: [ + { + color: "#000000", + offsetX: "16px", + offsetY: "24px", + blur: "8px", + spread: "0px", + } as const, + ], + }; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "shadow", + value: [ + { + color: "#000000", + offsetX: { value: 16, unit: "px" }, + offsetY: { value: 24, unit: "px" }, + blur: { value: 8, unit: "px" }, + spread: { value: 0, unit: "px" }, + }, + ], + } satisfies Document.Shadow); + }); + + it("should reject invalid shadow", () => { + const expression = { + type: "shadow", + value: [ + { + color: "#aaa", + offsetX: 0, + offsetY: 0, + blur: 0, + spread: 0, + }, + ], + } as const; + + // @ts-expect-error + expect(() => transformValue(expression)).toThrowError(); + }); + + it("should transform gradient", () => { + const expression: Shorthand.Gradient = { + type: "gradient", + value: [ + { + color: "#000000", + position: 0, + }, + { + color: "#ffffff", + position: 1, + }, + ], + } satisfies Gradient; + + const result = transformValue(expression); + + expect(result).toEqual({ + type: "gradient", + value: [ + { + color: "#000000", + position: 0, + }, + { + color: "#ffffff", + position: 1, + }, + ], + } satisfies Document.Gradient); + }); + + it("should reject invalid gradient", () => { + const expression = { + type: "gradient", + value: [ + { + color: "#00", + position: 0, + }, + { + color: "#ff", + position: 1, + }, + ], + } as const; + + // @ts-expect-error + expect(() => transformValue(expression)).toThrowError(); + }); +}); diff --git a/tools/rootage/core/src/stable/transformer/value.ts b/tools/rootage/core/src/stable/transformer/value.ts new file mode 100644 index 000000000..31b0c35d4 --- /dev/null +++ b/tools/rootage/core/src/stable/transformer/value.ts @@ -0,0 +1,219 @@ +import type * as Shorthand from "./shorthand-document"; +import type * as Document from "../parser/document"; + +function isHexColor(expr: unknown): expr is Shorthand.Color { + if (typeof expr !== "string") { + return false; + } + + const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/; + return regex.test(expr); +} + +function isNumber(expr: unknown): expr is Shorthand.Number { + return typeof expr === "number" && !Number.isNaN(expr); +} + +function parseDimensionLit(expr: unknown): Document.DimensionLit | null { + if (typeof expr !== "string") { + return null; + } + + const regex = /^(-?\d+(\.\d+)?)(px|rem)$/; + const match = expr.match(regex); + if (match) { + const value = Number.parseFloat(match[1]!); + const unit = match[3] as "px" | "rem"; + return { value, unit }; + } + return null; +} + +function parseDurationLit(str: string): Document.DurationLit | null { + const regex = /^(\d+(\.\d+)?)(ms|s)$/; + const match = str.match(regex); + if (match) { + const value = Number.parseFloat(match[1]!); + const unit = match[3] as "ms" | "s"; + return { value, unit }; + } + return null; +} + +function transformColor(expr: unknown): Document.Color | null { + if (isHexColor(expr)) { + return { type: "color", value: expr }; + } + return null; +} + +function transformDimension(expr: unknown): Document.Dimension | null { + const parsed = parseDimensionLit(expr); + if (parsed) { + return { type: "dimension", value: parsed }; + } + return null; +} + +function transformNumber(expr: unknown): Document.Number | null { + if (typeof expr === "number") { + if (!Number.isNaN(expr)) { + return { type: "number", value: expr }; + } + } + return null; +} + +function transformDuration(expr: unknown): Document.Duration | null { + if (typeof expr === "string") { + const parsed = parseDurationLit(expr); + if (parsed) { + return { type: "duration", value: parsed }; + } + } + return null; +} + +function transformCubicBezier(expr: unknown): Document.CubicBezier | null { + if ( + typeof expr === "object" && + expr !== null && + "type" in expr && + "value" in expr && + expr.type === "cubicBezier" && + Array.isArray(expr.value) && + expr.value.length === 4 && + expr.value.every((v) => typeof v === "number") + ) { + return { + type: "cubicBezier", + value: expr.value as [number, number, number, number], + }; + } + return null; +} + +function transformShadowLayer(expr: unknown): Document.ShadowLayer | null { + if ( + typeof expr === "object" && + expr !== null && + "color" in expr && + "offsetX" in expr && + "offsetY" in expr && + "blur" in expr && + "spread" in expr + ) { + const offsetX = parseDimensionLit(expr.offsetX); + const offsetY = parseDimensionLit(expr.offsetY); + const blur = parseDimensionLit(expr.blur); + const spread = parseDimensionLit(expr.spread); + + if (offsetX && offsetY && blur && spread && isHexColor(expr.color)) { + return { + offsetX: { + value: offsetX.value, + unit: offsetX.unit, + }, + offsetY: { + value: offsetY.value, + unit: offsetY.unit, + }, + blur: { + value: blur.value, + unit: blur.unit, + }, + spread: { + value: spread.value, + unit: spread.unit, + }, + color: expr.color, + }; + } + } + return null; +} + +function transformShadow(expr: unknown): Document.Shadow | null { + if ( + typeof expr === "object" && + expr !== null && + "type" in expr && + "value" in expr && + expr.type === "shadow" && + Array.isArray(expr.value) + ) { + const value: Document.Shadow["value"] = []; + + for (const shadowItem of expr.value) { + const layer = transformShadowLayer(shadowItem); + if (layer) { + value.push(layer); + } else { + return null; // If any shadow value fails to parse, return null + } + } + + return { + type: "shadow", + value: value, + }; + } + return null; +} + +function transformGradientStop(expr: unknown): Document.GradientStop | null { + if (typeof expr === "object" && expr !== null && "color" in expr && "position" in expr) { + if (isHexColor(expr.color) && isNumber(expr.position)) { + return { + color: expr.color, + position: expr.position, + }; + } + } + return null; +} + +function transformGradient(expr: unknown): Document.Gradient | null { + if ( + typeof expr === "object" && + expr !== null && + "type" in expr && + "value" in expr && + expr.type === "gradient" && + Array.isArray(expr.value) + ) { + const value: Document.Gradient["value"] = []; + + for (const gradientItem of expr.value) { + const stop = transformGradientStop(gradientItem); + if (stop) { + value.push(stop); + } else { + return null; // If any gradient value fails to parse, return null + } + } + + return { + type: "gradient", + value: value, + }; + } + return null; +} + +export function transformValue(input: Shorthand.Value): Document.Value { + const result = + transformColor(input) || + transformDimension(input) || + transformNumber(input) || + transformDuration(input) || + transformCubicBezier(input) || + transformShadow(input) || + transformGradient(input); + + if (result) { + return result; + } + + throw new Error(`Invalid value expression ${JSON.stringify(input, null, 2)}`); +}