diff --git a/.changeset/checkbox-relationship-context-prefix.md b/.changeset/checkbox-relationship-context-prefix.md index 420995587..b8e418786 100644 --- a/.changeset/checkbox-relationship-context-prefix.md +++ b/.changeset/checkbox-relationship-context-prefix.md @@ -9,10 +9,16 @@ Recipe lints and fixes for checkbox, switch and others; pressed scale includes n - **relationships**: strip the stray "S2 " prefix from contexts; add checkbox `Control`, disabled and error contexts; scope selected switch and radio-button records with `isSelected: true` (the schema allows boolean option values, the renderer maps them). -- **sdk/core, site runtime**: a pressed part's nested children scale with it. -- **visuals**: checkbox `pressTarget` is `control`; `notVisual` lists options with no look. +- **visuals**: pressed parts scale nested children; checkbox `pressTarget`; `notVisual` option list. - **validate**: SPEC-066 to SPEC-070 warn on uncovered options and states, token selectors a relationship covers, literals, deprecated tokens and focus ring names; SPEC-071 is info. `recipe_lint_baseline` holds each recipe at its current warning count. - **spec**: authoring conventions in `component-visuals.md`; `notVisual` recipe field. -- **switch**: document that `isReadOnly` has no distinct visual (hover and press only). +- **sdk/core**: render snapshot test for every recipe; `SceneCache` speeds matrix renders. +- **relationships**: `scope.options` pick a default or the most specific override (arrays allowed); + badge colors, padding and fonts bind that way, shrinking its recipe by 1,600 lines. + `scope.options.state` adds states to the bound token. +- **switch**: `isReadOnly` has no distinct visual (hover and press only). +- **button, action-button**: colors, press perspective, hold-icon inset bind via relationships. +- **focus-indicator**: the `focus-ring` anatomy, gap token and recipe parts are now + `focus-indicator` (legacy key `focus-ring-gap` kept). diff --git a/packages/design-data-spec/conformance/valid/SPEC-025/dataset.json b/packages/design-data-spec/conformance/valid/SPEC-025/dataset.json index c387ee48c..bc3e30ca3 100644 --- a/packages/design-data-spec/conformance/valid/SPEC-025/dataset.json +++ b/packages/design-data-spec/conformance/valid/SPEC-025/dataset.json @@ -20,7 +20,7 @@ }, { "name": { - "anatomy": "focus-ring", + "anatomy": "focus-indicator", "property": "gap" }, "value": "2px" diff --git a/packages/design-data-spec/conformance/valid/SPEC-049/dataset.json b/packages/design-data-spec/conformance/valid/SPEC-049/dataset.json index 82d66ee0e..bb6318b0b 100644 --- a/packages/design-data-spec/conformance/valid/SPEC-049/dataset.json +++ b/packages/design-data-spec/conformance/valid/SPEC-049/dataset.json @@ -12,7 +12,7 @@ }, { "name": { - "anatomy": "focus-ring", + "anatomy": "focus-indicator", "property": "gap" }, "value": "2px" diff --git a/packages/design-data-spec/schemas/relationship.schema.json b/packages/design-data-spec/schemas/relationship.schema.json index 77a7290d5..88febc0c7 100644 --- a/packages/design-data-spec/schemas/relationship.schema.json +++ b/packages/design-data-spec/schemas/relationship.schema.json @@ -64,7 +64,7 @@ }, "options": { "type": "object", - "description": "Option-scoped narrowing (e.g. variant, size, style, arbitrary component option keys). Each string value MUST validate against the referenced component's options..values (SPEC-053); a boolean option (for example isSelected) takes `true` or `false`. `state` is the exception: an ordered array of atomic state ids validated against the component's declared states (SPEC-054).", + "description": "Option-scoped narrowing (e.g. variant, size, style, arbitrary component option keys). Each string value MUST validate against the referenced component's options..values (SPEC-053); a boolean option (for example isSelected) takes `true` or `false`; an array matches when any listed value matches. `state` is the exception: an ordered array of atomic state ids validated against the component's declared states (SPEC-054).", "properties": { "state": { "type": "array", @@ -77,7 +77,9 @@ } }, "additionalProperties": { - "type": ["string", "boolean"] + "type": ["string", "boolean", "array"], + "items": { "type": ["string", "boolean"] }, + "minItems": 1 } } }, diff --git a/packages/design-data-spec/spec/component-visuals.md b/packages/design-data-spec/spec/component-visuals.md index 663c60502..1fe343ccf 100644 --- a/packages/design-data-spec/spec/component-visuals.md +++ b/packages/design-data-spec/spec/component-visuals.md @@ -85,6 +85,8 @@ A property value is either one **value source** or an ordered list of **conditio Selector strings **MAY** contain `{size}` (the request's `size` option value, e.g. `m`) and `{sizeIndex}` (that size's entry in `sizeScale`). A scalar `token` selector value matches an array-valued name field that contains it (e.g. `"state": "disabled"` matches `["disabled"]`). +**NORMATIVE:** A relationship may pin component options in its `scope.options` (a value, or an array of values that match when any listed value matches). For a `relationship` selector the renderer **MUST** keep only the matching relationships whose pinned options all match the request, and **MUST** prefer the ones that pin the most options. A relationship that pins no options is the default: it applies only when no relationship that pins options matches. Keys that are not declared options of the component, and the reserved keys `state`, `scale` and `colorScheme`, are not pinned options. A relationship's `scope.options.state` adds states to those of the token it binds, so a hover color that is a plain palette token can still be selected by state. This lets the component data, not the recipe, say which token applies under which options (for example a badge label is white by default, black for the light variants, and gray for subtle). + **NORMATIVE:** `token` and `relationship` selectors yield a set of candidate tokens. The renderer **MUST** narrow the candidates with the request's mode context (for example `colorScheme`, `scale`) using the [cascade](cascade.md), and **MUST** report a diagnostic if zero or more than one candidate remains. A conditional entry is a value source plus `when`. A condition has optional `options` (option name → value, or array of values), `states` (state names that must all be active) and `modes` (mode-set name → mode). An array matches when any listed value matches, and counts as one condition. @@ -122,7 +124,7 @@ SPEC-066 to SPEC-070 are warnings, so `validate` stays green while recipes are m These are the conventions the lints above enforce, plus the decisions made while adding the first five recipes. Follow them in a new recipe; a change to an existing recipe that breaks one needs a reason. -1. **Bind through relationships.** A recipe takes a value from the component's relationships by default (SPEC-067). Use a `token` selector only when no relationship covers the value, and a literal only for layout keywords, `transparent`, zero, ratio radii or geometry no token describes (SPEC-068). If the token you need is missing, file the gap; do not hide it behind a literal. +1. **Bind through relationships.** A recipe takes a value from the component's relationships by default (SPEC-067). Use a `token` selector only when no relationship covers the value, and a literal only for layout keywords, `transparent`, zero, ratio radii or geometry no token describes (SPEC-068). If the token you need is missing, file the gap; do not hide it behind a literal. Put option-dependent choices in the relationships, not in the recipe: pin `scope.options` on the relationship records (a default with no options, overrides that pin them) and bind the role once, so a variant added later is a data change. 2. **Bind current tokens.** Do not bind a deprecated token (SPEC-069; SPEC-058 covers relationships). When the only token is deprecated, bind it and record the gap, so the lint keeps showing it. 3. **Selection is an option, not a state.** Model "selected" as the `isSelected` option and scope relationships with `options.isSelected: true`. The renderer treats `isSelected` as the `selected` state and `isDisabled` as `disabled` when choosing between tokens that carry a state. 4. **Cover the component.** Every option and state the component declares either changes the recipe or is listed in `notVisual` (SPEC-066). `notVisual` records a deliberate absence, for example `isReadOnly` (it only suppresses hover and press) or `icon` until a shared icon registry exists. @@ -130,7 +132,7 @@ These are the conventions the lints above enforce, plus the decisions made while 6. **Priorities.** Disabled overrides interaction states with `priority: 10` (11 where a more specific disabled case must win). Error uses `priority: 5`. 7. **Relationship contexts are the design token group label,** with no `S1` or `S2` prefix, and the same label names the same concept in every component (for example `Control (disabled)`). 8. **Name the focus ring part alike** across recipes (SPEC-070). -9. **Prove a change.** After changing a recipe, a relationship or the renderer, render every option, state, size and color scheme combination before and after. Combinations the change should not touch must stay byte-identical. +9. **Prove a change.** `sdk/core/tests/recipe_snapshots.rs` renders every valid option, state, size, color scheme and scale combination of every recipe and compares a hash per option set with `tests/fixtures/recipe-snapshots.json`. It also fails on any render diagnostic. After a recipe, relationship, token or renderer change, review the option sets it reports with `design-data render`, then regenerate with `UPDATE_RECIPE_SNAPSHOTS=1`. A new recipe is covered automatically. New recipes **MUST** be free of SPEC-066 to SPEC-070 warnings. Existing recipes are held at their baseline until they are migrated. diff --git a/packages/design-data-spec/spec/relationship-format.md b/packages/design-data-spec/spec/relationship-format.md index c059f3daa..4a962cdc1 100644 --- a/packages/design-data-spec/spec/relationship-format.md +++ b/packages/design-data-spec/spec/relationship-format.md @@ -43,15 +43,15 @@ Each CTR is one of two subtypes, mirroring the token `oneOf` split (see [token-f ## Scope fields -| Field | Required | Type | Description | -| ----------------- | -------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `scope.component` | yes | string | Component name (kebab-case). **MUST** match the `name` of a declared component in the dataset (rule SPEC-051, mirrors SPEC-018). | -| `scope.part` | no | string | Anatomy part name. **MUST** match a declared anatomy part on the referenced component when present (rule SPEC-052, mirrors SPEC-020). | -| `scope.property` | yes | string | The stylistic attribute this relationship describes (e.g. `color`, `width`, `padding`). | -| `scope.options` | no | object | Option-scoped narrowing. Each `options.` value **MUST** validate against the referenced component's `options..values` (rule SPEC-053 — the headline CTR rule, stricter than the token-side SPEC-040 warning). A boolean option (for example `isSelected`) takes `true` or `false`; use it, not `state`, for conditions the component models as an option. `options.state` is the exception: an ordered array of atomic state ids, validated against the component's declared states (rule SPEC-054, mirrors SPEC-022). | -| `context` | no | string | Human-readable label for how this CTR is used (mirrors `tokenBindings[].context`; maps to a Figma Token Group label). Purely descriptive — not validated. | - -Layer 1 (`relationship.schema.json`) only enforces shape: `scope.options` is an object, `scope.options.state` (when present) is an array of strings, and other option values are strings or, for boolean options, `true`/`false`. It does **not** enforce which option values are valid — that is a Layer 2 (Rust, `sdk/core`) relational rule, because it requires cross-referencing the component catalog. +| Field | Required | Type | Description | +| ----------------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `scope.component` | yes | string | Component name (kebab-case). **MUST** match the `name` of a declared component in the dataset (rule SPEC-051, mirrors SPEC-018). | +| `scope.part` | no | string | Anatomy part name. **MUST** match a declared anatomy part on the referenced component when present (rule SPEC-052, mirrors SPEC-020). | +| `scope.property` | yes | string | The stylistic attribute this relationship describes (e.g. `color`, `width`, `padding`). | +| `scope.options` | no | object | Option-scoped narrowing. Each `options.` value **MUST** validate against the referenced component's `options..values` (rule SPEC-053 — the headline CTR rule, stricter than the token-side SPEC-040 warning). A boolean option (for example `isSelected`) takes `true` or `false`; use it, not `state`, for conditions the component models as an option. An array value matches when any listed value matches. A relationship with no pinned options is the default for its `(property, context)`; a recipe uses the one that pins the most options matching the request. `scope.options.state` adds states to those of the token the relationship binds. `options.state` is the exception: an ordered array of atomic state ids, validated against the component's declared states (rule SPEC-054, mirrors SPEC-022). | +| `context` | no | string | Human-readable label for how this CTR is used (mirrors `tokenBindings[].context`; maps to a Figma Token Group label). Purely descriptive — not validated. | + +Layer 1 (`relationship.schema.json`) only enforces shape: `scope.options` is an object, `scope.options.state` (when present) is an array of strings, and other option values are strings, booleans (for boolean options) or arrays of either. It does **not** enforce which option values are valid — that is a Layer 2 (Rust, `sdk/core`) relational rule, because it requires cross-referencing the component catalog. ## Value-owning vs. relationship-only diff --git a/packages/design-data/components/action-button.json b/packages/design-data/components/action-button.json index ac5663762..ae170ac2a 100644 --- a/packages/design-data/components/action-button.json +++ b/packages/design-data/components/action-button.json @@ -142,7 +142,7 @@ "description": "Corner triangle that signals a popover menu opens on hold." }, { - "name": "focus-ring", + "name": "focus-indicator", "description": "Outline drawn outside the container for keyboard focus." } ], diff --git a/packages/design-data/components/button.json b/packages/design-data/components/button.json index fe4a33a01..eec2a4a58 100644 --- a/packages/design-data/components/button.json +++ b/packages/design-data/components/button.json @@ -202,7 +202,7 @@ }, { "name": "label", "description": "Button text.", "required": true }, { - "name": "focus-ring", + "name": "focus-indicator", "description": "Outline drawn outside the container for keyboard focus." } ], diff --git a/packages/design-data/registry/anatomy-terms.json b/packages/design-data/registry/anatomy-terms.json index 9490e1e9d..7279a47a6 100644 --- a/packages/design-data/registry/anatomy-terms.json +++ b/packages/design-data/registry/anatomy-terms.json @@ -253,17 +253,10 @@ "description": "Heading text element within a component section", "usedIn": ["tokens", "s2-docs"] }, - { - "id": "focus-ring", - "label": "Focus Ring", - "description": "Visible ring drawn around a focused component for accessibility", - "usedIn": ["tokens"], - "standaloneScope": true - }, { "id": "focus-indicator", "label": "Focus Indicator", - "description": "Visual indicator showing keyboard focus state on a component", + "description": "Visual indicator showing keyboard focus state on a component. Named for its intent, not its shape: it may be a ring or a side indicator. Its tokens are focus-indicator color, gap and thickness.", "usedIn": ["tokens"], "standaloneScope": true }, diff --git a/packages/design-data/registry/token-terminology.json b/packages/design-data/registry/token-terminology.json index 1124beaa2..9c495faad 100644 --- a/packages/design-data/registry/token-terminology.json +++ b/packages/design-data/registry/token-terminology.json @@ -458,7 +458,7 @@ { "id": "focus-ring", "label": "Focus Ring", - "description": "Visual indication of interactive keyboard focus on any UI element", + "description": "Shared style class for the ring-shaped focus indicator, built from the focus-indicator tokens (color, gap, thickness). Not a token anatomy; tokens use focus-indicator.", "usedIn": ["tokens", "taxonomy"], "definition": { "superordinate": "structure", diff --git a/packages/design-data/relationships/action-button.json b/packages/design-data/relationships/action-button.json index b83920396..5a6702950 100644 --- a/packages/design-data/relationships/action-button.json +++ b/packages/design-data/relationships/action-button.json @@ -103,6 +103,14 @@ "context": "Component size (down)", "$ref": "103daec0-9711-4422-84d1-62ab77afa00d" }, + { + "scope": { + "component": "action-button", + "property": "component-size-maximum-perspective" + }, + "context": "Component size (down)", + "$ref": "437f2e57-2aa6-41b5-bdcc-e4993dc42168" + }, { "scope": { "component": "action-button", @@ -333,7 +341,7 @@ "property": "component-edge-to-visual-75" }, "context": "Spacing (start/end edges)", - "$ref": "ba072414-2cdd-4773-86a5-11ca47c08e23" + "$ref": "6b43633d-8f29-4c24-b26e-687d6f161bce" }, { "scope": { @@ -349,7 +357,7 @@ "property": "component-edge-to-visual-100" }, "context": "Spacing (start/end edges)", - "$ref": "52a75511-eb1b-4de2-a1bb-959365d8dc1a" + "$ref": "71731484-e759-4a5f-89ed-9fe04ac19aed" }, { "scope": { @@ -365,7 +373,7 @@ "property": "component-edge-to-visual-200" }, "context": "Spacing (start/end edges)", - "$ref": "ece70425-e509-45cc-8336-76fc8afdb921" + "$ref": "38e5af78-cb3e-4ff4-9849-28f9d4c56a38" }, { "scope": { @@ -381,7 +389,7 @@ "property": "component-edge-to-visual-300" }, "context": "Spacing (start/end edges)", - "$ref": "b32fb20b-31a7-43da-ba38-b9a177d0cffa" + "$ref": "698fa3d4-32dc-4cd2-bb79-d320effd8674" }, { "scope": { @@ -413,7 +421,7 @@ "property": "component-edge-to-text-75" }, "context": "Spacing (start/end edges)", - "$ref": "ba072414-2cdd-4773-86a5-11ca47c08e23" + "$ref": "6b43633d-8f29-4c24-b26e-687d6f161bce" }, { "scope": { @@ -429,7 +437,7 @@ "property": "component-edge-to-text-100" }, "context": "Spacing (start/end edges)", - "$ref": "52a75511-eb1b-4de2-a1bb-959365d8dc1a" + "$ref": "71731484-e759-4a5f-89ed-9fe04ac19aed" }, { "scope": { @@ -445,7 +453,7 @@ "property": "component-edge-to-text-200" }, "context": "Spacing (start/end edges)", - "$ref": "ece70425-e509-45cc-8336-76fc8afdb921" + "$ref": "38e5af78-cb3e-4ff4-9849-28f9d4c56a38" }, { "scope": { @@ -461,7 +469,7 @@ "property": "component-edge-to-text-300" }, "context": "Spacing (start/end edges)", - "$ref": "b32fb20b-31a7-43da-ba38-b9a177d0cffa" + "$ref": "698fa3d4-32dc-4cd2-bb79-d320effd8674" }, { "scope": { @@ -1480,5 +1488,1792 @@ "deprecatedComment": "Use semantic token accessory-gap-affixed-small instead.", "replacedBy": "7789a1e5-3bc8-494d-91c2-1309b4697da9" } + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "black" + } + }, + "context": "Background", + "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "black", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "black", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "black", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "black" + } + }, + "context": "Background", + "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "black", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "black", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "black", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "white" + } + }, + "context": "Background", + "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "white", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "white", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "white", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "white" + } + }, + "context": "Background", + "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "white", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "white", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "white", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false + } + }, + "context": "Background", + "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false + } + }, + "context": "Background", + "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false + } + }, + "context": "Background", + "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "8de4888d-8da5-45a0-8d5d-64a734993ae4" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "0a676e7a-8a89-4607-a918-3abcfb0234a2" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "eaad36fe-2827-4404-8876-060de75c2b34" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["down"] + } + }, + "context": "Background", + "$ref": "8de4888d-8da5-45a0-8d5d-64a734993ae4" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["down"] + } + }, + "context": "Background", + "$ref": "0a676e7a-8a89-4607-a918-3abcfb0234a2" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["down"] + } + }, + "context": "Background", + "$ref": "eaad36fe-2827-4404-8876-060de75c2b34" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": false, + "isSelected": false, + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Background", + "$ref": "fd1c9f2b-8358-4bd3-a5cc-d211673428bc" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "1c220122-5f32-42f9-848f-ae10061241e5" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["down"] + } + }, + "context": "Background", + "$ref": "966c56d0-4461-45e7-9e20-0277f2111a34" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "9b8df7df-3439-4614-b446-97a4de782e27" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": true, + "isSelected": false + } + }, + "context": "Background", + "$ref": "8de4888d-8da5-45a0-8d5d-64a734993ae4" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": true, + "isSelected": false + } + }, + "context": "Background", + "$ref": "0a676e7a-8a89-4607-a918-3abcfb0234a2" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": true, + "isSelected": false + } + }, + "context": "Background", + "$ref": "eaad36fe-2827-4404-8876-060de75c2b34" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": [false, true], + "isEmphasized": [false, true], + "isPending": true, + "isQuiet": false, + "isSelected": [false, true] + } + }, + "context": "Background", + "$ref": "a46de9d2-5c68-4a1e-97cd-7cbaf4038303" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": true, + "isQuiet": [false, true], + "isSelected": [false, true] + } + }, + "context": "Background", + "$ref": "a46de9d2-5c68-4a1e-97cd-7cbaf4038303" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": true, + "isEmphasized": [false, true], + "isPending": [false, true], + "isQuiet": false, + "isSelected": [false, true] + } + }, + "context": "Background", + "$ref": "a46de9d2-5c68-4a1e-97cd-7cbaf4038303" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black" + } + }, + "context": "Background", + "$ref": "d9d8488d-9b38-47e0-9660-dcad040f3ca8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black" + } + }, + "context": "Background", + "$ref": "f24eb871-6419-4cef-88a2-cca8548ae31e" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black" + } + }, + "context": "Background", + "$ref": "1f4f6c48-633c-4eb5-b7d6-bf5a9a7fde18" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "43ca5f34-decc-4de8-9413-74ce57802b65" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "af809118-7a97-409c-925f-8d7636a791c8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "black", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "afb8dd77-7de2-4749-a594-1ff68b2fcd67" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white" + } + }, + "context": "Background", + "$ref": "d9d8488d-9b38-47e0-9660-dcad040f3ca8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white" + } + }, + "context": "Background", + "$ref": "f24eb871-6419-4cef-88a2-cca8548ae31e" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white" + } + }, + "context": "Background", + "$ref": "1f4f6c48-633c-4eb5-b7d6-bf5a9a7fde18" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "43ca5f34-decc-4de8-9413-74ce57802b65" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "af809118-7a97-409c-925f-8d7636a791c8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "staticColor": "white", + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "afb8dd77-7de2-4749-a594-1ff68b2fcd67" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Background", + "$ref": "d9d8488d-9b38-47e0-9660-dcad040f3ca8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Background", + "$ref": "f24eb871-6419-4cef-88a2-cca8548ae31e" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Background", + "$ref": "1f4f6c48-633c-4eb5-b7d6-bf5a9a7fde18" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "9651d413-47dc-4b55-976f-91e5c6c91fb5" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "9e140a94-c11f-470b-b7af-49880e58d4ce" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "a4fb3dc6-b724-4e5d-bbc4-c4d985e85975" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["down"] + } + }, + "context": "Background", + "$ref": "026b1d5e-7cbc-4ee9-91e8-19766b9ac541" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["down"] + } + }, + "context": "Background", + "$ref": "e2c0de7e-d271-4b2c-9393-d864a95732e6" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["down"] + } + }, + "context": "Background", + "$ref": "a5201034-a592-47c6-be78-050ae951043e" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "43ca5f34-decc-4de8-9413-74ce57802b65" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "af809118-7a97-409c-925f-8d7636a791c8" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true, + "state": ["keyboard-focus"] + } + }, + "context": "Background", + "$ref": "afb8dd77-7de2-4749-a594-1ff68b2fcd67" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "black" + } + }, + "context": "Icon", + "$ref": "3e89f180-b0f0-4de0-904b-c80f0210a361" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "black" + } + }, + "context": "Icon", + "$ref": "3e89f180-b0f0-4de0-904b-c80f0210a361" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "white" + } + }, + "context": "Icon", + "$ref": "b85836bf-af47-412a-900a-4ec5ad0733b2" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "white" + } + }, + "context": "Icon", + "$ref": "b85836bf-af47-412a-900a-4ec5ad0733b2" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false + } + }, + "context": "Icon", + "$ref": "43ca4c0d-7803-4e8e-b444-26fe70d5304c" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "state": ["hover"] + } + }, + "context": "Icon", + "$ref": "d236bdc5-037b-4838-8401-8a0d5136936c" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "state": ["down"] + } + }, + "context": "Icon", + "$ref": "cf169d95-e427-4665-a983-c24727dbfa60" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "state": ["keyboard-focus"] + } + }, + "context": "Icon", + "$ref": "43ca4c0d-7803-4e8e-b444-26fe70d5304c" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Icon", + "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Icon", + "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Icon", + "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Icon", + "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": [false, true], + "isDisabled": true, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true] + } + }, + "context": "Icon", + "$ref": "8bf69fd3-1462-49b9-a78a-cc2f03380823" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "black" + } + }, + "context": "Label", + "$ref": "3e89f180-b0f0-4de0-904b-c80f0210a361" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "black" + } + }, + "context": "Label", + "$ref": "3e89f180-b0f0-4de0-904b-c80f0210a361" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "staticColor": "white" + } + }, + "context": "Label", + "$ref": "b85836bf-af47-412a-900a-4ec5ad0733b2" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true], + "staticColor": "white" + } + }, + "context": "Label", + "$ref": "b85836bf-af47-412a-900a-4ec5ad0733b2" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false + } + }, + "context": "Label", + "$ref": "43ca4c0d-7803-4e8e-b444-26fe70d5304c" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "state": ["hover"] + } + }, + "context": "Label", + "$ref": "d236bdc5-037b-4838-8401-8a0d5136936c" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "state": ["down"] + } + }, + "context": "Label", + "$ref": "cf169d95-e427-4665-a983-c24727dbfa60" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false, + "state": ["keyboard-focus"] + } + }, + "context": "Label", + "$ref": "43ca4c0d-7803-4e8e-b444-26fe70d5304c" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Label", + "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Label", + "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Label", + "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Label", + "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": [false, true], + "hideLabel": false, + "isDisabled": true, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true] + } + }, + "context": "Label", + "$ref": "8bf69fd3-1462-49b9-a78a-cc2f03380823" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": true, + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": false + } + }, + "context": "Hold icon", + "$ref": "43ca4c0d-7803-4e8e-b444-26fe70d5304c" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": true, + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Hold icon", + "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": true, + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Hold icon", + "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": true, + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": false, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Hold icon", + "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": true, + "hideLabel": [false, true], + "isDisabled": false, + "isEmphasized": true, + "isPending": false, + "isQuiet": [false, true], + "isSelected": true + } + }, + "context": "Hold icon", + "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837" + }, + { + "scope": { + "component": "action-button", + "property": "color", + "options": { + "hasHoldIcon": true, + "hideLabel": [false, true], + "isDisabled": true, + "isEmphasized": [false, true], + "isPending": false, + "isQuiet": [false, true], + "isSelected": [false, true] + } + }, + "context": "Hold icon", + "$ref": "8bf69fd3-1462-49b9-a78a-cc2f03380823" + }, + { + "scope": { + "component": "action-button", + "property": "color" + }, + "context": "Progress track", + "$ref": "aad52960-a7ec-4f69-85f9-3e1a87975120" + }, + { + "scope": { + "component": "action-button", + "property": "color" + }, + "context": "Progress track", + "$ref": "cc8c4299-c40d-4e93-80b2-c052ee8aaf40" + }, + { + "scope": { + "component": "action-button", + "property": "color" + }, + "context": "Progress track", + "$ref": "57d4b287-c9d9-4c56-894b-2df496d9a3b4" + }, + { + "scope": { + "component": "action-button", + "property": "color" + }, + "context": "Progress", + "$ref": "b14c876e-2930-413b-8688-1e0cf2358185" } ] diff --git a/packages/design-data/relationships/badge.json b/packages/design-data/relationships/badge.json index 9e044b330..956e0c2dc 100644 --- a/packages/design-data/relationships/badge.json +++ b/packages/design-data/relationships/badge.json @@ -237,7 +237,7 @@ "property": "component-edge-to-visual-75" }, "context": "Spacing (start/end edges)", - "$ref": "ba072414-2cdd-4773-86a5-11ca47c08e23" + "$ref": "6b43633d-8f29-4c24-b26e-687d6f161bce" }, { "scope": { @@ -253,7 +253,7 @@ "property": "component-edge-to-visual-100" }, "context": "Spacing (start/end edges)", - "$ref": "52a75511-eb1b-4de2-a1bb-959365d8dc1a" + "$ref": "71731484-e759-4a5f-89ed-9fe04ac19aed" }, { "scope": { @@ -269,7 +269,7 @@ "property": "component-edge-to-visual-200" }, "context": "Spacing (start/end edges)", - "$ref": "ece70425-e509-45cc-8336-76fc8afdb921" + "$ref": "38e5af78-cb3e-4ff4-9849-28f9d4c56a38" }, { "scope": { @@ -285,7 +285,7 @@ "property": "component-edge-to-visual-300" }, "context": "Spacing (start/end edges)", - "$ref": "b32fb20b-31a7-43da-ba38-b9a177d0cffa" + "$ref": "698fa3d4-32dc-4cd2-bb79-d320effd8674" }, { "scope": { @@ -301,7 +301,7 @@ "property": "component-edge-to-text-75" }, "context": "Spacing (start/end edges)", - "$ref": "ba072414-2cdd-4773-86a5-11ca47c08e23" + "$ref": "6b43633d-8f29-4c24-b26e-687d6f161bce" }, { "scope": { @@ -317,7 +317,7 @@ "property": "component-edge-to-text-100" }, "context": "Spacing (start/end edges)", - "$ref": "52a75511-eb1b-4de2-a1bb-959365d8dc1a" + "$ref": "71731484-e759-4a5f-89ed-9fe04ac19aed" }, { "scope": { @@ -333,7 +333,7 @@ "property": "component-edge-to-text-200" }, "context": "Spacing (start/end edges)", - "$ref": "ece70425-e509-45cc-8336-76fc8afdb921" + "$ref": "38e5af78-cb3e-4ff4-9849-28f9d4c56a38" }, { "scope": { @@ -349,7 +349,7 @@ "property": "component-edge-to-text-300" }, "context": "Spacing (start/end edges)", - "$ref": "b32fb20b-31a7-43da-ba38-b9a177d0cffa" + "$ref": "698fa3d4-32dc-4cd2-bb79-d320effd8674" }, { "scope": { @@ -626,7 +626,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": ["celery", "chartreuse", "notice", "orange", "yellow"], + "style": "bold" + } }, "context": "Text and icon (semantic)", "$ref": "86a162cc-9e91-494c-9fee-207721eb4e88" @@ -634,7 +638,23 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": ["celery", "chartreuse", "orange", "yellow"], + "style": "outline" + } + }, + "context": "Text and icon (semantic)", + "$ref": "86a162cc-9e91-494c-9fee-207721eb4e88" + }, + { + "scope": { + "component": "badge", + "property": "color", + "options": { + "variant": "neutral", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "3b09b2fd-cbf9-4933-9655-27a75d984f06" @@ -642,7 +662,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "neutral", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "bc9979cb-e7c6-45b2-be4d-0ba3c817e2ef" @@ -650,7 +674,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "neutral", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "fdcab585-e3a9-4026-bf40-e7fdd01bf05b" @@ -658,7 +686,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "d9d8488d-9b38-47e0-9660-dcad040f3ca8" @@ -666,7 +698,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "f24eb871-6419-4cef-88a2-cca8548ae31e" @@ -674,7 +710,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "1f4f6c48-633c-4eb5-b7d6-bf5a9a7fde18" @@ -682,7 +722,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "3acd52f0-d19c-4174-9ad5-42885ec9d49d" @@ -690,7 +734,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "da3a7c08-7f54-4486-bb66-146db21f0627" @@ -698,7 +746,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "02e7121e-71eb-4228-a61a-963d7f2a531b" @@ -706,7 +758,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "46204746-7fe7-4f22-887e-2c9b85c3b7bc" @@ -714,7 +770,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "1117b73b-42e3-4ad6-8b26-af76859a27bb" @@ -722,7 +782,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "ebadb88b-90a3-492e-ba3c-e9f1232b5ce5" @@ -730,7 +794,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "48f3445a-63d8-4477-a2f5-1fee6a022328" @@ -738,7 +806,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "323428c1-792d-41b4-8a17-a12f1ac00e2a" @@ -746,7 +818,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "85515d6c-4674-435f-a2d4-b9bf8311781e" @@ -754,7 +830,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "d878d795-2292-4d90-a9e2-37af1d97a532" @@ -762,7 +842,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "82b54f71-7c9e-4388-9e3b-4d13f12fad60" @@ -770,7 +854,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "bold" + } }, "context": "Background (semantic)", "$ref": "27688f39-6b46-4b40-a3c5-67694a0ff672" @@ -778,7 +866,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "gray", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "5adeb281-3183-43e0-b20c-bd4e29f4da7e" @@ -786,7 +878,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "gray", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "a3e71134-b44f-4b52-a84d-4841e01505e6" @@ -794,7 +890,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "gray", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "385372e9-8b04-45ea-a7a2-f1f62ac68ad6" @@ -802,7 +902,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "red", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "8cec4a84-3eea-45d6-ae1b-64907be7da78" @@ -810,7 +914,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "red", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "ce074ee2-a2a2-4da3-a99e-603524193d46" @@ -818,7 +926,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "red", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "3fb6aa49-631f-489b-9dab-63a5712d72da" @@ -826,7 +938,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "orange", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "981c054e-9db5-4589-b9e7-eed307b115ca" @@ -834,7 +950,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "orange", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "3e9a6c2a-bd09-4d28-a95c-920109c1852f" @@ -842,7 +962,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "orange", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "37c3db03-6dd6-47e5-a03c-25663d116c52" @@ -850,7 +974,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "yellow", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "f8e435de-1630-4628-8b6d-128987d66ddc" @@ -858,7 +986,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "yellow", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "61c5e375-bff3-479f-8c32-2d2a5edb906c" @@ -866,7 +998,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "yellow", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "ff49d6b0-4f39-4cbb-a580-db03b0579a71" @@ -874,7 +1010,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "chartreuse", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "f6e68186-e7fe-4d36-b371-72461a271358" @@ -882,7 +1022,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "chartreuse", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "5df9a029-dc91-4078-a198-574486948834" @@ -890,7 +1034,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "chartreuse", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "67d55f09-a468-4174-9b59-13008b32b44e" @@ -898,7 +1046,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "celery", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "d4fd682d-4bef-4a92-bf14-90ce02b534e6" @@ -906,7 +1058,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "celery", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "a9ab7a59-9cab-47fb-876d-6f0af93dc5df" @@ -914,7 +1070,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "celery", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "b6e14409-7a61-46fc-80d0-2b7854baf871" @@ -922,7 +1082,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "green", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "d5cac08e-56e8-4217-a153-33f43c1a2059" @@ -930,7 +1094,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "green", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "49170573-9c22-42e1-a1ce-cd3d3972ddb7" @@ -938,7 +1106,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "green", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "f7814be9-b21f-40ff-9d34-8c0a96eea93e" @@ -946,7 +1118,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "seafoam", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "be1d8187-effc-430f-ac31-3904cf83a6d6" @@ -954,7 +1130,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "seafoam", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "9a727140-328d-430f-9b10-8965eebe77d1" @@ -962,7 +1142,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "seafoam", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "e2f2ef18-aabf-44fd-b074-d94f75862f3d" @@ -970,7 +1154,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cyan", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "12c060c6-db12-41ca-8b53-f4fc0afd2ed7" @@ -978,7 +1166,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cyan", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "543af64f-9c28-4e88-8597-3259cd7ebf1f" @@ -986,7 +1178,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cyan", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "764bb832-de5a-4c21-b429-f911a931ead6" @@ -994,7 +1190,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "blue", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "c6c435b6-34b3-4fc1-bf96-a56a15e01fe5" @@ -1002,7 +1202,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "blue", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "83591a94-83e1-4557-8f50-cc1fe9793b76" @@ -1010,7 +1214,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "blue", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "db8b9268-68dc-46be-aace-1adf8d85061b" @@ -1018,7 +1226,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "indigo", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "23859fff-27f5-4576-83c9-0fbc316e880a" @@ -1026,7 +1238,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "indigo", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "b7f5a677-4e89-40e1-8324-7619a628ce8b" @@ -1034,7 +1250,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "indigo", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "dedf817e-2883-4632-936c-207fdafe7469" @@ -1042,7 +1262,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "purple", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "ed07d8f4-390f-4124-a4c4-81b62767c6cd" @@ -1050,7 +1274,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "purple", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "e577d521-0271-4226-a094-624b35a05826" @@ -1058,7 +1286,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "purple", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "720cfaa3-6bb1-4df1-946f-94fabae54e7b" @@ -1066,7 +1298,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "fuchsia", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "5f61f890-93b3-4ab9-bc80-d75198a5bacf" @@ -1074,7 +1310,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "fuchsia", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "7b4d71d3-ad78-4e02-a48e-fa79f40854a2" @@ -1082,7 +1322,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "fuchsia", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "13e66afc-a9d8-46a9-8b15-310c5b35e52f" @@ -1090,7 +1334,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "magenta", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "4e02601f-12da-4ce2-b58c-0aa0e309442d" @@ -1098,7 +1346,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "magenta", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "5867d764-d909-4490-b947-533e89997d0a" @@ -1106,7 +1358,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "magenta", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "c7b29eba-f8a3-43f7-b5b9-0c1a7f04bb38" @@ -1114,7 +1370,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "pink", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "78fc6322-a961-429a-bd40-3e1c1bf2c4e9" @@ -1122,7 +1382,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "pink", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "3a363aa8-cf27-48a1-8c61-b1f1eaff6110" @@ -1130,7 +1394,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "pink", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "b60042cd-3ce7-4952-aeae-338d2b5fe98d" @@ -1138,7 +1406,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "turquoise", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "e763acbc-2c17-46c5-8484-1d8536e7ef10" @@ -1146,7 +1418,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "turquoise", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "6beacbfc-6d61-4567-86fe-39771550cf20" @@ -1154,7 +1430,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "turquoise", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "50eb3d20-ab84-4541-8807-551391016b54" @@ -1162,7 +1442,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "brown", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "168c3534-c54e-415b-a623-27c2a8caea8c" @@ -1170,7 +1454,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "brown", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "c6dcdb8e-4966-4de6-a74a-fffa0793d58e" @@ -1178,7 +1466,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "brown", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "fbd8df06-a6c9-462b-ad25-a3f77016128e" @@ -1186,7 +1478,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cinnamon", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "6dc7df67-2cfb-440f-9b1c-b7262a7cc2d3" @@ -1194,7 +1490,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cinnamon", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "d442e5b5-5083-443d-ba60-12c60406c452" @@ -1202,7 +1502,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cinnamon", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "8e940601-2401-46ff-a5fb-9137d12678b7" @@ -1210,7 +1514,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "silver", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "13d332e4-45b0-4549-a1a3-a608034960a1" @@ -1218,7 +1526,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "silver", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "a6e04390-003e-4565-bf96-e0fb8a791cb9" @@ -1226,7 +1538,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "silver", + "style": ["bold", "outline"] + } }, "context": "Background (non-semantic)", "$ref": "e0bb7dad-7f1b-4b6e-b2fe-99f8b14f3240" @@ -1234,7 +1550,10 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "style": "subtle" + } }, "context": "Text and icon (semantic)", "$ref": "457fbeb8-56cd-4f3c-9950-f5e01f83f07c" @@ -1242,7 +1561,29 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": "outline" + } + }, + "context": "Text and icon (semantic)", + "$ref": "457fbeb8-56cd-4f3c-9950-f5e01f83f07c" + }, + { + "scope": { + "component": "badge", + "property": "color", + "options": { + "style": "subtle" + } }, "context": "Text and icon (semantic)", "$ref": "5ce8c477-ae6e-427a-ac5c-79d15c8056ab" @@ -1250,7 +1591,29 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": "outline" + } + }, + "context": "Text and icon (semantic)", + "$ref": "5ce8c477-ae6e-427a-ac5c-79d15c8056ab" + }, + { + "scope": { + "component": "badge", + "property": "color", + "options": { + "style": "subtle" + } }, "context": "Text and icon (semantic)", "$ref": "e804baf9-ae2c-4574-96d9-10cd5253fe47" @@ -1258,7 +1621,30 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": "outline" + } + }, + "context": "Text and icon (semantic)", + "$ref": "e804baf9-ae2c-4574-96d9-10cd5253fe47" + }, + { + "scope": { + "component": "badge", + "property": "color", + "options": { + "variant": "neutral", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "cc79fbaf-a2e1-4761-82e7-1dbea52acee8" @@ -1266,7 +1652,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "neutral", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "9a9589e8-c08c-486f-a42f-8e139dedaa37" @@ -1274,7 +1664,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "neutral", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "64b2528e-4c1b-4850-a67f-8bd7bb05d36c" @@ -1282,7 +1676,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "97293b77-c21d-4ba1-bd2c-5d1de37d75eb" @@ -1290,7 +1688,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "c120499e-98c4-442d-971f-31dee8d16c4d" @@ -1298,7 +1700,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "5c9c8a1c-c4ac-45e5-ba5f-b08edd9f4297" @@ -1306,7 +1712,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "62dfb07f-5eee-451c-9c77-745d8f714766" @@ -1314,7 +1724,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "4cbe010f-0608-47e3-bf27-c7da70a70b9e" @@ -1322,7 +1736,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "71ebebf0-95e7-45f7-9f6f-d14ef51cf4f0" @@ -1330,7 +1748,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "8e9429cf-4c89-47be-bc6e-eeecc632aeb1" @@ -1338,7 +1760,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "c7575b76-8035-4037-8bd5-e8bdb82bddc3" @@ -1346,7 +1772,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "ea3ceaa2-235b-4c55-88b2-c0d744434d83" @@ -1354,7 +1784,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "f0799e87-dbb2-4e71-8253-65f45eddc078" @@ -1362,7 +1796,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "c9bfd62b-95c7-47d3-bace-ce3f2bfaade8" @@ -1370,7 +1808,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "163958bd-7303-4328-ad3c-b04f8dacaf32" @@ -1378,7 +1820,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "57a1aa8f-5c06-4ff6-8d1c-0e278a433ebf" @@ -1386,7 +1832,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "c7644c81-1b2c-40ee-b3a6-b25e88fc34ea" @@ -1394,7 +1844,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "subtle" + } }, "context": "Background (semantic)", "$ref": "531be3e1-ddfa-4d3b-9a7f-73d7f0e38cd9" @@ -1402,7 +1856,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "gray", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "83fd0c1f-fbf3-4540-b370-6f44a6dbba7e" @@ -1410,7 +1868,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "gray", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "a95998aa-d6ce-4090-9743-614196862acf" @@ -1418,7 +1880,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "gray", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "6529e76c-0c21-449f-a318-2629cf90a58a" @@ -1426,7 +1892,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "red", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "5d7cd7c1-66fa-49d4-923b-8cca2dcb4726" @@ -1434,7 +1904,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "red", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "c098c385-7fce-4f16-b1d1-54a86c608e64" @@ -1442,7 +1916,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "red", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "8a6b560b-50b2-4dbf-900b-0ed63233df8b" @@ -1450,7 +1928,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "orange", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "e7e1eb3c-7590-4622-a261-8de879bb1500" @@ -1458,7 +1940,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "orange", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "9b2505cc-2a71-4b1e-804d-3f2ffa69d06c" @@ -1466,7 +1952,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "orange", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "a9671857-3e09-4132-a522-cd8f5b4cf8ff" @@ -1474,7 +1964,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "yellow", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "5d5cfc7a-e6f4-4d6d-a39b-359350ddd280" @@ -1482,7 +1976,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "yellow", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "fcb0fe04-3498-4cfa-964d-5134bbcc74c6" @@ -1490,7 +1988,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "yellow", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "a238d434-3d0b-48fe-a413-a07e9229cdda" @@ -1498,7 +2000,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "chartreuse", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "2dd50902-f9bb-4f79-b31c-3997f4fd2163" @@ -1506,7 +2012,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "chartreuse", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "b80c47b0-222b-49a2-9012-1465a4575092" @@ -1514,7 +2024,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "chartreuse", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "ab75a3ba-17ce-4aae-902f-2b3e0233b726" @@ -1522,7 +2036,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "celery", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "cf459b71-0d91-4cb4-96b8-f536e553f66e" @@ -1530,7 +2048,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "celery", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "67618d20-60a0-44d9-b98a-a84faf409788" @@ -1538,7 +2060,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "celery", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "2182ee3c-55aa-4d07-9cc1-f827c88ce3d6" @@ -1546,7 +2072,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "green", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "3b582b64-988e-4b5d-a08d-e04269403536" @@ -1554,7 +2084,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "green", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "e10ef55e-c18d-4b73-97d0-330b480e9aa4" @@ -1562,7 +2096,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "green", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "3911fa84-a5b3-4ea1-b6ad-47f222482ddb" @@ -1570,7 +2108,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "seafoam", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "7623166b-5320-40eb-8a5f-2cd12f17bdb2" @@ -1578,7 +2120,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "seafoam", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "73620c8b-3943-46c0-acb8-d517e7e6081e" @@ -1586,7 +2132,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "seafoam", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "0acaf55e-7e99-45f9-b99b-e461fa78a481" @@ -1594,7 +2144,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cyan", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "084200e3-85bf-496e-b12a-b439e108b9fb" @@ -1602,7 +2156,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cyan", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "740e1c42-e68c-4c10-9bcd-30dc0bae6418" @@ -1610,7 +2168,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cyan", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "2f72eaf9-547a-436e-86ab-695979db4f93" @@ -1618,7 +2180,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "blue", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "7d52711e-43fa-4a95-a7b1-3a7367570596" @@ -1626,7 +2192,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "blue", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "7da4709c-caf3-401a-a2ce-07186a7e8e8c" @@ -1634,7 +2204,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "blue", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "93563495-60af-4a84-b811-9672fc46a1cc" @@ -1642,7 +2216,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "indigo", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "dda05431-bce9-4686-8738-78fb409ab28f" @@ -1650,7 +2228,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "indigo", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "533023cb-f78a-4f1c-af52-244b3c10a7bb" @@ -1658,7 +2240,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "indigo", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "2110b943-24cf-4afd-81b2-31676f1400f8" @@ -1666,7 +2252,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "purple", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "a53f9f9a-8fde-4de2-83a3-944e1c4556c1" @@ -1674,7 +2264,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "purple", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "896f2a2f-4d02-4104-ac33-a3705a9c61e3" @@ -1682,7 +2276,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "purple", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "1d628f99-7c9c-423d-a470-a260d84d0d8d" @@ -1690,7 +2288,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "fuchsia", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "9bb9c1e9-6067-49a4-b4af-13ccd87830d9" @@ -1698,7 +2300,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "fuchsia", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "3e62d682-c770-498d-a25a-5544775aeaa1" @@ -1706,7 +2312,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "fuchsia", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "28ef060d-098c-4388-b600-00f4f8fe49aa" @@ -1714,7 +2324,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "magenta", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "09787c85-44e0-4efe-b427-f6e7dde544a4" @@ -1722,7 +2336,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "magenta", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "143b0387-7069-4bef-b852-9c456d692b88" @@ -1730,7 +2348,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "magenta", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "b526e518-47b2-4a1c-b54b-42596381b7fd" @@ -1738,7 +2360,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "pink", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "41f3d269-85d6-4c82-9b1c-e40ea508fa78" @@ -1746,7 +2372,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "pink", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "72400c8f-2e44-4757-8be6-3c1eb28d9606" @@ -1754,7 +2384,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "pink", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "d726501f-8920-4434-b397-b0974037161a" @@ -1762,7 +2396,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "turquoise", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "aa7d44fd-6c77-43dc-8981-4200356fd02a" @@ -1770,7 +2408,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "turquoise", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "5e5d9ba8-df94-43e1-ad40-f78312925ec5" @@ -1778,7 +2420,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "turquoise", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "4e874813-4ebc-4855-bcb3-83024a6d1ba2" @@ -1786,7 +2432,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "brown", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "4f1f131b-b6d1-401b-82ff-be6fc0cce9f3" @@ -1794,7 +2444,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "brown", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "77b47209-4527-462b-a11f-b3e5f47857ec" @@ -1802,7 +2456,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "brown", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "ac6995d9-8982-4dac-ba85-4c79ec7850a1" @@ -1810,7 +2468,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cinnamon", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "4d114a18-a876-4b01-a356-64b6098496f4" @@ -1818,7 +2480,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cinnamon", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "68b6af88-a951-48f8-89c3-9d599a05f4dc" @@ -1826,7 +2492,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "cinnamon", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "f326443a-8f5d-4aa2-8bbb-17dc7b0420d6" @@ -1834,7 +2504,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "silver", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "c80f665a-801e-45c8-b59b-8b9b47ebb356" @@ -1842,7 +2516,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "silver", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "6f596774-e326-4d80-bf1d-23f7ad1f4ccb" @@ -1850,7 +2528,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "silver", + "style": "subtle" + } }, "context": "Background (non-semantic)", "$ref": "ec3dddb5-3944-493c-b5c8-f08c3272dc06" @@ -1858,7 +2540,18 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": "outline" + } }, "context": "Background (semantic)", "$ref": "b7b2bf98-b96a-40ca-b51e-5876d3418085" @@ -1866,7 +2559,18 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": "outline" + } }, "context": "Background (semantic)", "$ref": "e30b7936-6ae7-4ada-8892-94a1f67d55c9" @@ -1874,7 +2578,18 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": "outline" + } }, "context": "Background (semantic)", "$ref": "b834a6a5-e582-4450-b87a-57fa23e12179" @@ -1882,7 +2597,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "neutral", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "0dc6ed4d-17d5-4878-8ac3-bd99549b4f42" @@ -1890,7 +2609,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "neutral", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "35ef6675-7e66-4ef5-8c8d-e8e70939b224" @@ -1898,7 +2621,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "neutral", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "57233b29-bbc6-4f9e-83c1-9325fd6f964c" @@ -1906,7 +2633,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "dbcb4372-f250-42bd-a5bc-b9d48cfb9322" @@ -1914,7 +2645,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "8ccd197f-fc8e-4d31-866c-2b96049eea89" @@ -1922,7 +2657,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "accent", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "6e12afb7-c76e-4a83-acc2-f891953d5190" @@ -1930,7 +2669,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "cd900a8d-1852-4592-9031-9edab2f9721f" @@ -1938,7 +2681,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "fd64c9ca-6ad7-415c-b0b8-2579399e33a5" @@ -1946,7 +2693,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "informative", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "556d02fd-fecb-4772-92cb-921ac509bcae" @@ -1954,7 +2705,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "d1beeda3-a00d-4f8c-8553-0a0f84093b1f" @@ -1962,7 +2717,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "70cb0316-5b7a-416c-bf93-7d8885c4fce6" @@ -1970,7 +2729,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "negative", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "9211e320-de05-4097-8350-fef2293be6a0" @@ -1978,7 +2741,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "b8b38df6-aac5-49fc-99bb-d64a543c5bf8" @@ -1986,7 +2753,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "2759c912-6385-40e4-9ed9-ff2e11815b4d" @@ -1994,7 +2765,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "notice", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "e6e779ea-6015-467f-8df7-9027280bdea2" @@ -2002,7 +2777,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "455acfc0-1997-4fee-b1dc-3c91bbd9fca2" @@ -2010,7 +2789,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "25e8289f-6c82-4485-8920-a187f790cd47" @@ -2018,7 +2801,11 @@ { "scope": { "component": "badge", - "property": "color" + "property": "color", + "options": { + "variant": "positive", + "style": "outline" + } }, "context": "Border (semantic)", "$ref": "96075e1a-6739-41c8-985b-af30b09be6c3" @@ -2028,6 +2815,7 @@ "component": "badge", "property": "font-family" }, + "context": "Label", "$ref": "45d43d4e-a4e4-4c5f-94ec-644a81300eb0" }, { @@ -2035,6 +2823,7 @@ "component": "badge", "property": "font-weight" }, + "context": "Label", "$ref": "c966c3b6-1bf5-4064-89f9-00d9ec673fd4" }, { @@ -2042,6 +2831,7 @@ "component": "badge", "property": "font-style" }, + "context": "Label", "$ref": "25668698-bf78-46f4-bc6c-8fea068ddb34" }, { @@ -2049,6 +2839,7 @@ "component": "badge", "property": "font-size-75" }, + "context": "Label", "$ref": "55d90327-8cc9-4d4f-891f-9d42751d989a" }, { @@ -2056,6 +2847,7 @@ "component": "badge", "property": "font-size-75" }, + "context": "Label", "$ref": "07e1c2a8-3925-4d71-8fae-3486483ff44c" }, { @@ -2063,6 +2855,7 @@ "component": "badge", "property": "font-size-100" }, + "context": "Label", "$ref": "938e2d24-1e90-48f0-a596-595a69103707" }, { @@ -2070,6 +2863,7 @@ "component": "badge", "property": "font-size-100" }, + "context": "Label", "$ref": "2f9ee3cf-ccb1-4f0b-aed6-96e472fb7411" }, { @@ -2077,6 +2871,7 @@ "component": "badge", "property": "font-size-200" }, + "context": "Label", "$ref": "b36caaa3-7047-4dfb-8a84-f990a8ac3a91" }, { @@ -2084,6 +2879,7 @@ "component": "badge", "property": "font-size-200" }, + "context": "Label", "$ref": "7e51ff4e-2749-49d1-b9ed-75de92a73991" }, { @@ -2091,6 +2887,7 @@ "component": "badge", "property": "font-size-300" }, + "context": "Label", "$ref": "3dc9b6a4-77e3-484b-be8c-fbc2f50e6175" }, { @@ -2098,6 +2895,7 @@ "component": "badge", "property": "font-size-300" }, + "context": "Label", "$ref": "9b9a7175-dcca-43aa-98ce-f1c3e4eefda7" }, { @@ -2105,6 +2903,7 @@ "component": "badge", "property": "line-height-100" }, + "context": "Label", "$ref": "dd125d1d-cf4d-45c8-ab21-52331a9a264b" }, { @@ -2112,6 +2911,7 @@ "component": "badge", "property": "line-height-100" }, + "context": "Label", "$ref": "8b4ab68d-9060-4e11-9ecc-3b9d3db27fe4" } ] diff --git a/packages/design-data/relationships/button.json b/packages/design-data/relationships/button.json index df0885dd5..67e3edbd8 100644 --- a/packages/design-data/relationships/button.json +++ b/packages/design-data/relationships/button.json @@ -111,6 +111,14 @@ "context": "Component size (down)", "$ref": "103daec0-9711-4422-84d1-62ab77afa00d" }, + { + "scope": { + "component": "button", + "property": "component-size-maximum-perspective" + }, + "context": "Component size (down)", + "$ref": "437f2e57-2aa6-41b5-bdcc-e4993dc42168" + }, { "scope": { "component": "button", @@ -189,7 +197,7 @@ "property": "component-pill-edge-to-visual-75" }, "context": "Spacing (start/end edges)", - "$ref": "ba072414-2cdd-4773-86a5-11ca47c08e23" + "$ref": "6b43633d-8f29-4c24-b26e-687d6f161bce" }, { "scope": { @@ -205,7 +213,7 @@ "property": "component-pill-edge-to-visual-100" }, "context": "Spacing (start/end edges)", - "$ref": "52a75511-eb1b-4de2-a1bb-959365d8dc1a" + "$ref": "71731484-e759-4a5f-89ed-9fe04ac19aed" }, { "scope": { @@ -221,7 +229,7 @@ "property": "component-pill-edge-to-visual-200" }, "context": "Spacing (start/end edges)", - "$ref": "ece70425-e509-45cc-8336-76fc8afdb921" + "$ref": "38e5af78-cb3e-4ff4-9849-28f9d4c56a38" }, { "scope": { @@ -237,7 +245,7 @@ "property": "component-pill-edge-to-visual-300" }, "context": "Spacing (start/end edges)", - "$ref": "b32fb20b-31a7-43da-ba38-b9a177d0cffa" + "$ref": "698fa3d4-32dc-4cd2-bb79-d320effd8674" }, { "scope": { @@ -253,7 +261,7 @@ "property": "component-pill-edge-to-text-75" }, "context": "Spacing (start/end edges)", - "$ref": "ba072414-2cdd-4773-86a5-11ca47c08e23" + "$ref": "6b43633d-8f29-4c24-b26e-687d6f161bce" }, { "scope": { @@ -269,7 +277,7 @@ "property": "component-pill-edge-to-text-100" }, "context": "Spacing (start/end edges)", - "$ref": "52a75511-eb1b-4de2-a1bb-959365d8dc1a" + "$ref": "71731484-e759-4a5f-89ed-9fe04ac19aed" }, { "scope": { @@ -285,7 +293,7 @@ "property": "component-pill-edge-to-text-200" }, "context": "Spacing (start/end edges)", - "$ref": "ece70425-e509-45cc-8336-76fc8afdb921" + "$ref": "38e5af78-cb3e-4ff4-9849-28f9d4c56a38" }, { "scope": { @@ -301,7 +309,7 @@ "property": "component-pill-edge-to-text-300" }, "context": "Spacing (start/end edges)", - "$ref": "b32fb20b-31a7-43da-ba38-b9a177d0cffa" + "$ref": "698fa3d4-32dc-4cd2-bb79-d320effd8674" }, { "scope": { @@ -757,7 +765,7 @@ "property": "color" }, "context": "Background", - "$ref": "d9d8488d-9b38-47e0-9660-dcad040f3ca8" + "$ref": "43ca5f34-decc-4de8-9413-74ce57802b65" }, { "scope": { @@ -765,7 +773,7 @@ "property": "color" }, "context": "Background", - "$ref": "f24eb871-6419-4cef-88a2-cca8548ae31e" + "$ref": "af809118-7a97-409c-925f-8d7636a791c8" }, { "scope": { @@ -773,15 +781,15 @@ "property": "color" }, "context": "Background", - "$ref": "1f4f6c48-633c-4eb5-b7d6-bf5a9a7fde18" + "$ref": "afb8dd77-7de2-4749-a594-1ff68b2fcd67" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "9651d413-47dc-4b55-976f-91e5c6c91fb5" + "context": "Icon", + "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837" }, { "scope": { @@ -789,7 +797,7 @@ "property": "color" }, "context": "Background", - "$ref": "9e140a94-c11f-470b-b7af-49880e58d4ce" + "$ref": "41a6ee21-8db2-410b-a694-fca1fbf70f2a" }, { "scope": { @@ -797,7 +805,7 @@ "property": "color" }, "context": "Background", - "$ref": "a4fb3dc6-b724-4e5d-bbc4-c4d985e85975" + "$ref": "f1470931-f4f8-47d9-b118-5b813e4c154a" }, { "scope": { @@ -805,7 +813,7 @@ "property": "color" }, "context": "Background", - "$ref": "026b1d5e-7cbc-4ee9-91e8-19766b9ac541" + "$ref": "abcf178e-0e44-4f57-a62c-382cb9478be2" }, { "scope": { @@ -813,7 +821,7 @@ "property": "color" }, "context": "Background", - "$ref": "e2c0de7e-d271-4b2c-9393-d864a95732e6" + "$ref": "95cf1481-f476-47ce-a45a-54da64b44255" }, { "scope": { @@ -821,7 +829,7 @@ "property": "color" }, "context": "Background", - "$ref": "a5201034-a592-47c6-be78-050ae951043e" + "$ref": "142f9467-e519-4ed7-bd98-69a31e876e70" }, { "scope": { @@ -829,7 +837,7 @@ "property": "color" }, "context": "Background", - "$ref": "43ca5f34-decc-4de8-9413-74ce57802b65" + "$ref": "5a0fdda5-6ac2-4a31-a7b9-6b3a5dd868d6" }, { "scope": { @@ -837,71 +845,71 @@ "property": "color" }, "context": "Background", - "$ref": "af809118-7a97-409c-925f-8d7636a791c8" + "$ref": "f52c6bfb-2d62-4fc8-a1cd-6c8d7420eeb4" }, { "scope": { "component": "button", - "property": "color" + "property": "content-color" }, - "context": "Background", - "$ref": "afb8dd77-7de2-4749-a594-1ff68b2fcd67" + "context": "Icon", + "$ref": "43ca4c0d-7803-4e8e-b444-26fe70d5304c" }, { "scope": { "component": "button", - "property": "color" + "property": "content-color" }, "context": "Icon", - "$ref": "9b799da8-2130-417e-b7ee-5e1154a89837" + "$ref": "d236bdc5-037b-4838-8401-8a0d5136936c" }, { "scope": { "component": "button", - "property": "color" + "property": "content-color" }, - "context": "Background", - "$ref": "46204746-7fe7-4f22-887e-2c9b85c3b7bc" + "context": "Icon", + "$ref": "cf169d95-e427-4665-a983-c24727dbfa60" }, { "scope": { "component": "button", - "property": "color" + "property": "content-color" }, - "context": "Background", - "$ref": "1117b73b-42e3-4ad6-8b26-af76859a27bb" + "context": "Icon", + "$ref": "c2c538e0-6f8d-4586-953a-b98ef40c9eca" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "ebadb88b-90a3-492e-ba3c-e9f1232b5ce5" + "context": "Fill", + "$ref": "a46de9d2-5c68-4a1e-97cd-7cbaf4038303" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "d2481a50-13a0-4f19-8faa-a1a215fee21d" + "context": "Outline", + "$ref": "474ae56c-709a-4f5a-a56b-62d01093f412" }, { "scope": { "component": "button", - "property": "color" + "property": "content-color" }, - "context": "Background", - "$ref": "648da867-549e-47c3-9312-e9cfda288705" + "context": "Icon", + "$ref": "8bf69fd3-1462-49b9-a78a-cc2f03380823" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "b1104fe3-4965-411e-95d3-87f59cdbc756" + "context": "Focus indicator", + "$ref": "fe914904-a368-414b-a4ac-21c0b0340d05" }, { "scope": { @@ -909,7 +917,7 @@ "property": "color" }, "context": "Background", - "$ref": "3c2d5afe-fff4-487d-a312-000f738c8704" + "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" }, { "scope": { @@ -917,15 +925,15 @@ "property": "color" }, "context": "Background", - "$ref": "8565ec8e-2196-47ac-8636-40084acbfd4f" + "$ref": "1409a50a-9a9d-463d-957f-fa2e4f98a0cd" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "ce2e6ea6-c692-4cff-a2ac-f0c1c2e054ca" + "context": "Icon", + "$ref": "28dea8b0-4e9a-46f9-babb-c8910e6ae783" }, { "scope": { @@ -933,7 +941,7 @@ "property": "color" }, "context": "Background", - "$ref": "41a6ee21-8db2-410b-a694-fca1fbf70f2a" + "$ref": "98a7279b-e21c-41ae-9bae-8b9b2b243e35" }, { "scope": { @@ -941,15 +949,15 @@ "property": "color" }, "context": "Background", - "$ref": "f1470931-f4f8-47d9-b118-5b813e4c154a" + "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "abcf178e-0e44-4f57-a62c-382cb9478be2" + "context": "Border", + "$ref": "12e610d4-e3dc-4e86-9c09-09d86915b6f1" }, { "scope": { @@ -957,55 +965,55 @@ "property": "color" }, "context": "Background", - "$ref": "95cf1481-f476-47ce-a45a-54da64b44255" + "$ref": "fbd40c55-bb12-43ff-9fa6-c93884befc89" }, { "scope": { "component": "button", - "property": "color" + "property": "content-color" }, - "context": "Background", - "$ref": "142f9467-e519-4ed7-bd98-69a31e876e70" + "context": "Icon and label", + "$ref": "fe319bca-0413-4ad8-a783-c64563e05816" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "5a0fdda5-6ac2-4a31-a7b9-6b3a5dd868d6" + "context": "Border", + "$ref": "c0dfeb64-983e-4f4c-a13e-24b5fbd2b791" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "f52c6bfb-2d62-4fc8-a1cd-6c8d7420eeb4" + "context": "Static white – Focus indicator", + "$ref": "1dd6dc5b-47a2-41eb-80fc-f06293ae8e13" }, { "scope": { "component": "button", "property": "color" }, - "context": "Icon", - "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + "context": "Background", + "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" }, { "scope": { "component": "button", "property": "color" }, - "context": "Icon", - "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + "context": "Background", + "$ref": "098f2f56-e52f-47b1-943a-d1d7218de484" }, { "scope": { "component": "button", "property": "color" }, - "context": "Icon", - "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + "context": "Background", + "$ref": "d0867b86-6245-4c02-8617-ea7fd5c80288" }, { "scope": { @@ -1013,15 +1021,15 @@ "property": "color" }, "context": "Background", - "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" }, { "scope": { "component": "button", "property": "color" }, - "context": "Background", - "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + "context": "Border", + "$ref": "b769453b-586c-4dd2-b3a1-ddf5964160bc" }, { "scope": { @@ -1029,15 +1037,15 @@ "property": "color" }, "context": "Background", - "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + "$ref": "579e401c-de49-41af-a8c7-a0a070c31979" }, { "scope": { "component": "button", - "property": "color" + "property": "content-color" }, - "context": "Border", - "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + "context": "Icon and label", + "$ref": "e75dbb08-80eb-4de5-afd4-55a532c69c97" }, { "scope": { @@ -1045,368 +1053,3033 @@ "property": "color" }, "context": "Border", - "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + "$ref": "2df7303f-3c34-47d1-9ec9-b901dfbcf947" }, { "scope": { "component": "button", "property": "color" }, - "context": "Border", - "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + "context": "Static black – Focus indicator", + "$ref": "c6b8275b-f44e-43b4-b763-82dda94d963c" }, { "scope": { "component": "button", - "property": "color" + "property": "minimum-width-multiplier" }, - "context": "Border", - "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/multiplier.json", + "value": 2.25, + "uuid": "68b6ac88-d229-460d-8d59-3f5c141db358", + "legacyKey": "button-minimum-width-multiplier" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent" + } }, - "context": "Border", - "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + "context": "Background", + "$ref": "d9d8488d-9b38-47e0-9660-dcad040f3ca8" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent" + } }, - "context": "Border", - "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + "context": "Background", + "$ref": "f24eb871-6419-4cef-88a2-cca8548ae31e" }, { "scope": { "component": "button", - "property": "content-color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent" + } }, - "context": "Icon", - "$ref": "43ca4c0d-7803-4e8e-b444-26fe70d5304c" + "context": "Background", + "$ref": "1f4f6c48-633c-4eb5-b7d6-bf5a9a7fde18" }, { "scope": { "component": "button", - "property": "content-color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["hover"] + } }, - "context": "Icon", - "$ref": "d236bdc5-037b-4838-8401-8a0d5136936c" + "context": "Background", + "$ref": "9651d413-47dc-4b55-976f-91e5c6c91fb5" }, { "scope": { "component": "button", - "property": "content-color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["hover"] + } }, - "context": "Icon", - "$ref": "cf169d95-e427-4665-a983-c24727dbfa60" + "context": "Background", + "$ref": "9e140a94-c11f-470b-b7af-49880e58d4ce" }, { "scope": { "component": "button", - "property": "content-color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["hover"] + } }, - "context": "Icon", - "$ref": "c2c538e0-6f8d-4586-953a-b98ef40c9eca" + "context": "Background", + "$ref": "a4fb3dc6-b724-4e5d-bbc4-c4d985e85975" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["down"] + } }, "context": "Background", - "$ref": "8de4888d-8da5-45a0-8d5d-64a734993ae4" + "$ref": "026b1d5e-7cbc-4ee9-91e8-19766b9ac541" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["down"] + } }, "context": "Background", - "$ref": "0a676e7a-8a89-4607-a918-3abcfb0234a2" + "$ref": "e2c0de7e-d271-4b2c-9393-d864a95732e6" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["down"] + } }, "context": "Background", - "$ref": "eaad36fe-2827-4404-8876-060de75c2b34" + "$ref": "a5201034-a592-47c6-be78-050ae951043e" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["focus"] + } }, - "context": "Border", - "$ref": "aad52960-a7ec-4f69-85f9-3e1a87975120" + "context": "Background", + "$ref": "d9d8488d-9b38-47e0-9660-dcad040f3ca8" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["focus"] + } }, - "context": "Border", - "$ref": "cc8c4299-c40d-4e93-80b2-c052ee8aaf40" + "context": "Background", + "$ref": "f24eb871-6419-4cef-88a2-cca8548ae31e" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "accent", + "state": ["focus"] + } }, - "context": "Border", - "$ref": "57d4b287-c9d9-4c56-894b-2df496d9a3b4" + "context": "Background", + "$ref": "1f4f6c48-633c-4eb5-b7d6-bf5a9a7fde18" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative" + } }, - "context": "Border", - "$ref": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e" + "context": "Background", + "$ref": "46204746-7fe7-4f22-887e-2c9b85c3b7bc" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative" + } }, - "context": "Border", - "$ref": "c34dd99f-e576-4c98-a89d-86dd47514c55" + "context": "Background", + "$ref": "1117b73b-42e3-4ad6-8b26-af76859a27bb" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative" + } }, - "context": "Border", - "$ref": "4634f126-2240-4de9-b244-ab2b833d70ef" + "context": "Background", + "$ref": "ebadb88b-90a3-492e-ba3c-e9f1232b5ce5" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["hover"] + } }, - "context": "Fill", - "$ref": "a46de9d2-5c68-4a1e-97cd-7cbaf4038303" + "context": "Background", + "$ref": "d2481a50-13a0-4f19-8faa-a1a215fee21d" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["hover"] + } }, - "context": "Outline", - "$ref": "474ae56c-709a-4f5a-a56b-62d01093f412" + "context": "Background", + "$ref": "648da867-549e-47c3-9312-e9cfda288705" }, { "scope": { "component": "button", - "property": "content-color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["hover"] + } }, - "context": "Icon", - "$ref": "8bf69fd3-1462-49b9-a78a-cc2f03380823" + "context": "Background", + "$ref": "b1104fe3-4965-411e-95d3-87f59cdbc756" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["down"] + } }, - "context": "Focus indicator", - "$ref": "fe914904-a368-414b-a4ac-21c0b0340d05" + "context": "Background", + "$ref": "3c2d5afe-fff4-487d-a312-000f738c8704" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["down"] + } }, "context": "Background", - "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" + "$ref": "8565ec8e-2196-47ac-8636-40084acbfd4f" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["down"] + } }, "context": "Background", - "$ref": "1409a50a-9a9d-463d-957f-fa2e4f98a0cd" + "$ref": "ce2e6ea6-c692-4cff-a2ac-f0c1c2e054ca" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["focus"] + } }, - "context": "Icon", - "$ref": "28dea8b0-4e9a-46f9-babb-c8910e6ae783" + "context": "Background", + "$ref": "46204746-7fe7-4f22-887e-2c9b85c3b7bc" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["focus"] + } }, "context": "Background", - "$ref": "98a7279b-e21c-41ae-9bae-8b9b2b243e35" + "$ref": "1117b73b-42e3-4ad6-8b26-af76859a27bb" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "negative", + "state": ["focus"] + } }, "context": "Background", - "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" + "$ref": "ebadb88b-90a3-492e-ba3c-e9f1232b5ce5" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "black", + "style": "fill", + "variant": "primary" + } }, "context": "Background", - "$ref": "936db837-bc5a-40b0-a0e8-8e39b9fc62cb" + "$ref": "3e89f180-b0f0-4de0-904b-c80f0210a361" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": [false, true], + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "black", + "style": "fill", + "variant": "secondary" + } }, - "context": "Border", - "$ref": "5ffa0283-ce9c-4f96-9227-f559ec54ee0c" + "context": "Background", + "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "black", + "style": "fill", + "variant": ["primary", "secondary"] + } }, - "context": "Border", - "$ref": "12e610d4-e3dc-4e86-9c09-09d86915b6f1" + "context": "Background", + "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "black", + "style": "outline", + "variant": ["primary", "secondary"] + } }, "context": "Background", - "$ref": "fbd40c55-bb12-43ff-9fa6-c93884befc89" + "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" }, { "scope": { "component": "button", - "property": "content-color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "white", + "style": "fill", + "variant": "primary" + } }, - "context": "Icon and label", - "$ref": "fe319bca-0413-4ad8-a783-c64563e05816" + "context": "Background", + "$ref": "b85836bf-af47-412a-900a-4ec5ad0733b2" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": [false, true], + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "white", + "style": "fill", + "variant": "secondary" + } }, - "context": "Border", - "$ref": "c0dfeb64-983e-4f4c-a13e-24b5fbd2b791" + "context": "Background", + "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "white", + "style": "fill", + "variant": ["primary", "secondary"] + } }, - "context": "Static white – Focus indicator", - "$ref": "1dd6dc5b-47a2-41eb-80fc-f06293ae8e13" + "context": "Background", + "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "white", + "style": "outline", + "variant": ["primary", "secondary"] + } }, "context": "Background", - "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" + "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary" + } }, "context": "Background", - "$ref": "098f2f56-e52f-47b1-943a-d1d7218de484" + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary" + } }, "context": "Background", - "$ref": "d0867b86-6245-4c02-8617-ea7fd5c80288" + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary" + } }, "context": "Background", - "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a" + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["hover"] + } }, "context": "Background", - "$ref": "a84ecad8-8005-4ce4-add6-7f83f7e05ba0" + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["hover"] + } }, - "context": "Border", - "$ref": "16a871e1-d9df-42bb-8889-99059d70e82e" + "context": "Background", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["hover"] + } }, - "context": "Border", - "$ref": "b769453b-586c-4dd2-b3a1-ddf5964160bc" + "context": "Background", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["down"] + } }, "context": "Background", - "$ref": "579e401c-de49-41af-a8c7-a0a070c31979" + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" }, { "scope": { "component": "button", - "property": "content-color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["down"] + } }, - "context": "Icon and label", - "$ref": "e75dbb08-80eb-4de5-afd4-55a532c69c97" + "context": "Background", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["down"] + } }, - "context": "Border", - "$ref": "2df7303f-3c34-47d1-9ec9-b901dfbcf947" + "context": "Background", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" }, { "scope": { "component": "button", - "property": "color" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["focus"] + } }, - "context": "Static black – Focus indicator", - "$ref": "c6b8275b-f44e-43b4-b763-82dda94d963c" + "context": "Background", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" }, { "scope": { "component": "button", - "property": "minimum-width-multiplier" + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["focus"] + } }, - "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/multiplier.json", - "value": 2.25, - "uuid": "68b6ac88-d229-460d-8d59-3f5c141db358", - "legacyKey": "button-minimum-width-multiplier" + "context": "Background", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "primary", + "state": ["focus"] + } + }, + "context": "Background", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary" + } + }, + "context": "Background", + "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary" + } + }, + "context": "Background", + "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary" + } + }, + "context": "Background", + "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "8de4888d-8da5-45a0-8d5d-64a734993ae4" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "0a676e7a-8a89-4607-a918-3abcfb0234a2" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "eaad36fe-2827-4404-8876-060de75c2b34" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "8de4888d-8da5-45a0-8d5d-64a734993ae4" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "0a676e7a-8a89-4607-a918-3abcfb0234a2" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Background", + "$ref": "eaad36fe-2827-4404-8876-060de75c2b34" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Background", + "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Background", + "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Background", + "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Background", + "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Background", + "$ref": "8de4888d-8da5-45a0-8d5d-64a734993ae4" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Background", + "$ref": "0a676e7a-8a89-4607-a918-3abcfb0234a2" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Background", + "$ref": "eaad36fe-2827-4404-8876-060de75c2b34" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": ["accent", "negative"] + } + }, + "context": "Background", + "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": ["accent", "negative"] + } + }, + "context": "Background", + "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": ["accent", "negative"] + } + }, + "context": "Background", + "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Background", + "$ref": "64e2dbc2-05fa-43d7-80ae-d4d11c55348f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Background", + "$ref": "abd011c4-87a5-4b1f-82e2-e94d118f417f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "fill", + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Background", + "$ref": "3605974e-8f93-4907-81b3-fb6ab55d03f8" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "black", + "style": "outline", + "variant": "primary" + } + }, + "context": "Border", + "$ref": "3e89f180-b0f0-4de0-904b-c80f0210a361" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": [false, true], + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "black", + "style": "outline", + "variant": "secondary" + } + }, + "context": "Border", + "$ref": "16a871e1-d9df-42bb-8889-99059d70e82e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "black", + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Border", + "$ref": "16a871e1-d9df-42bb-8889-99059d70e82e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "white", + "style": "outline", + "variant": "primary" + } + }, + "context": "Border", + "$ref": "b85836bf-af47-412a-900a-4ec5ad0733b2" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": [false, true], + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "white", + "style": "outline", + "variant": "secondary" + } + }, + "context": "Border", + "$ref": "5ffa0283-ce9c-4f96-9227-f559ec54ee0c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "staticColor": "white", + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Border", + "$ref": "5ffa0283-ce9c-4f96-9227-f559ec54ee0c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary" + } + }, + "context": "Border", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary" + } + }, + "context": "Border", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary" + } + }, + "context": "Border", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["hover"] + } + }, + "context": "Border", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["hover"] + } + }, + "context": "Border", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["hover"] + } + }, + "context": "Border", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["down"] + } + }, + "context": "Border", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["down"] + } + }, + "context": "Border", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["down"] + } + }, + "context": "Border", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["focus"] + } + }, + "context": "Border", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["focus"] + } + }, + "context": "Border", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "primary", + "state": ["focus"] + } + }, + "context": "Border", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary" + } + }, + "context": "Border", + "$ref": "aad52960-a7ec-4f69-85f9-3e1a87975120" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary" + } + }, + "context": "Border", + "$ref": "cc8c4299-c40d-4e93-80b2-c052ee8aaf40" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary" + } + }, + "context": "Border", + "$ref": "57d4b287-c9d9-4c56-894b-2df496d9a3b4" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Border", + "$ref": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Border", + "$ref": "c34dd99f-e576-4c98-a89d-86dd47514c55" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Border", + "$ref": "4634f126-2240-4de9-b244-ab2b833d70ef" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Border", + "$ref": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Border", + "$ref": "c34dd99f-e576-4c98-a89d-86dd47514c55" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Border", + "$ref": "4634f126-2240-4de9-b244-ab2b833d70ef" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Border", + "$ref": "aad52960-a7ec-4f69-85f9-3e1a87975120" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Border", + "$ref": "cc8c4299-c40d-4e93-80b2-c052ee8aaf40" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Border", + "$ref": "57d4b287-c9d9-4c56-894b-2df496d9a3b4" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Border", + "$ref": "aad52960-a7ec-4f69-85f9-3e1a87975120" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Border", + "$ref": "cc8c4299-c40d-4e93-80b2-c052ee8aaf40" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": [false, true], + "style": "outline", + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Border", + "$ref": "57d4b287-c9d9-4c56-894b-2df496d9a3b4" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Icon", + "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Icon", + "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Icon", + "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "fill", + "variant": ["accent", "negative", "primary"] + } + }, + "context": "Icon", + "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "fill", + "variant": ["accent", "negative", "primary"] + } + }, + "context": "Icon", + "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "fill", + "variant": ["accent", "negative", "primary"] + } + }, + "context": "Icon", + "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "black", + "style": "fill", + "variant": "primary" + } + }, + "context": "Icon", + "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "white", + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Icon", + "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "white", + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "black", + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Icon", + "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "black", + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "white", + "style": "fill", + "variant": "primary" + } + }, + "context": "Icon", + "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Icon", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Icon", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Icon", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Icon", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Icon", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Icon", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Icon", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Icon", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Icon", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Icon", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Icon", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Icon", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Icon", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Icon", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Icon", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Icon", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Icon", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Icon", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["focus"] + } + }, + "context": "Icon", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["focus"] + } + }, + "context": "Icon", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": [false, true], + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["focus"] + } + }, + "context": "Icon", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Icon", + "$ref": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Icon", + "$ref": "c34dd99f-e576-4c98-a89d-86dd47514c55" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Icon", + "$ref": "4634f126-2240-4de9-b244-ab2b833d70ef" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "c34dd99f-e576-4c98-a89d-86dd47514c55" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "4634f126-2240-4de9-b244-ab2b833d70ef" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "black", + "style": ["fill", "outline"], + "variant": ["primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "b769453b-586c-4dd2-b3a1-ddf5964160bc" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": [false, true], + "isPending": false, + "staticColor": "white", + "style": ["fill", "outline"], + "variant": ["primary", "secondary"] + } + }, + "context": "Icon", + "$ref": "12e610d4-e3dc-4e86-9c09-09d86915b6f1" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Label", + "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Label", + "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Label", + "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "fill", + "variant": ["accent", "negative", "primary"] + } + }, + "context": "Label", + "$ref": "a8c6363c-5297-41e3-ad76-1b6d0d3a3cc9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "fill", + "variant": ["accent", "negative", "primary"] + } + }, + "context": "Label", + "$ref": "ac61b090-d356-4f7f-ac6d-b4f20617c9e3" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "fill", + "variant": ["accent", "negative", "primary"] + } + }, + "context": "Label", + "$ref": "0906f3b2-74a9-4012-9e26-4d8f68f0eba9" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "staticColor": "black", + "style": "fill", + "variant": "primary" + } + }, + "context": "Label", + "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "staticColor": "white", + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Label", + "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "staticColor": "white", + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Label", + "$ref": "c5c823c6-1911-4e0e-ba2f-5105f467e108" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "staticColor": "black", + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Label", + "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "staticColor": "black", + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Label", + "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "staticColor": "white", + "style": "fill", + "variant": "primary" + } + }, + "context": "Label", + "$ref": "c0a331f9-53e3-4c72-b5e3-139d730a1752" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Label", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Label", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary" + } + }, + "context": "Label", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Label", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Label", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["hover"] + } + }, + "context": "Label", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Label", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Label", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["down"] + } + }, + "context": "Label", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Label", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Label", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": "secondary", + "state": ["focus"] + } + }, + "context": "Label", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Label", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Label", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"] + } + }, + "context": "Label", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Label", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Label", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["hover"] + } + }, + "context": "Label", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Label", + "$ref": "59093f0d-98b7-4659-bea6-3248ad20e96c" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Label", + "$ref": "90d25d68-afb1-4b2a-9dba-3fe22d44976f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["down"] + } + }, + "context": "Label", + "$ref": "93fb6cac-b190-4a5a-951f-f5dc4c0d5978" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["focus"] + } + }, + "context": "Label", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["focus"] + } + }, + "context": "Label", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": false, + "isLabelHidden": false, + "isPending": false, + "style": "outline", + "variant": ["primary", "secondary"], + "state": ["focus"] + } + }, + "context": "Label", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Label", + "$ref": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Label", + "$ref": "c34dd99f-e576-4c98-a89d-86dd47514c55" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative"] + } + }, + "context": "Label", + "$ref": "4634f126-2240-4de9-b244-ab2b833d70ef" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Label", + "$ref": "9a4b4fc4-25e4-4ca8-b0d1-949c5851b47e" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Label", + "$ref": "c34dd99f-e576-4c98-a89d-86dd47514c55" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "style": ["fill", "outline"], + "variant": ["accent", "negative", "primary", "secondary"] + } + }, + "context": "Label", + "$ref": "4634f126-2240-4de9-b244-ab2b833d70ef" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "staticColor": "black", + "style": ["fill", "outline"], + "variant": ["primary", "secondary"] + } + }, + "context": "Label", + "$ref": "b769453b-586c-4dd2-b3a1-ddf5964160bc" + }, + { + "scope": { + "component": "button", + "property": "color", + "options": { + "isDisabled": true, + "isLabelHidden": false, + "isPending": false, + "staticColor": "white", + "style": ["fill", "outline"], + "variant": ["primary", "secondary"] + } + }, + "context": "Label", + "$ref": "12e610d4-e3dc-4e86-9c09-09d86915b6f1" + }, + { + "scope": { + "component": "button", + "property": "color" + }, + "context": "Progress track", + "$ref": "aad52960-a7ec-4f69-85f9-3e1a87975120" + }, + { + "scope": { + "component": "button", + "property": "color" + }, + "context": "Progress track", + "$ref": "cc8c4299-c40d-4e93-80b2-c052ee8aaf40" + }, + { + "scope": { + "component": "button", + "property": "color" + }, + "context": "Progress track", + "$ref": "57d4b287-c9d9-4c56-894b-2df496d9a3b4" + }, + { + "scope": { + "component": "button", + "property": "color" + }, + "context": "Progress", + "$ref": "2caf1f36-80b9-4659-90be-8d89672bb19f" + }, + { + "scope": { + "component": "button", + "property": "color" + }, + "context": "Progress", + "$ref": "d39fc368-ec71-40cd-85e9-afb07862f2b7" + }, + { + "scope": { + "component": "button", + "property": "color" + }, + "context": "Progress", + "$ref": "22e79b14-2a60-4721-8e9b-800fa9e7a128" } ] diff --git a/packages/design-data/tokens/layout.tokens.json b/packages/design-data/tokens/layout.tokens.json index e272b1b3f..f5b7311af 100644 --- a/packages/design-data/tokens/layout.tokens.json +++ b/packages/design-data/tokens/layout.tokens.json @@ -5769,8 +5769,9 @@ }, { "name": { - "anatomy": "focus-ring", - "property": "gap" + "anatomy": "focus-indicator", + "property": "gap", + "legacyKey": "focus-ring-gap" }, "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json", "$ref": "1b06f6e2-d9be-4934-b3da-bed75986d104", diff --git a/packages/design-data/visuals/action-button.json b/packages/design-data/visuals/action-button.json index 28f1d7080..2818be423 100644 --- a/packages/design-data/visuals/action-button.json +++ b/packages/design-data/visuals/action-button.json @@ -33,10 +33,9 @@ }, "paddingInlineStart": [ { - "token": { - "structure": "base", - "property": "padding-horizontal", - "size": "{size}" + "relationship": { + "property": "component-edge-to-visual-{sizeIndex}", + "context": "Spacing (start/end edges)" } }, { @@ -45,19 +44,17 @@ "hideLabel": true } }, - "token": { - "structure": "base", - "property": "padding-vertical", - "size": "{size}" + "relationship": { + "property": "component-edge-to-visual-only-{sizeIndex}", + "context": "Spacing (start/end edges, icon only)" } } ], "paddingInlineEnd": [ { - "token": { - "structure": "base", - "property": "padding-horizontal", - "size": "{size}" + "relationship": { + "property": "component-edge-to-visual-{sizeIndex}", + "context": "Spacing (start/end edges)" } }, { @@ -66,35 +63,25 @@ "hideLabel": true } }, - "token": { - "structure": "base", - "property": "padding-vertical", - "size": "{size}" + "relationship": { + "property": "component-edge-to-visual-only-{sizeIndex}", + "context": "Spacing (start/end edges, icon only)" } } ], "gap": { - "token": { - "structure": "base", - "property": "gap", - "size": "{size}" + "relationship": { + "property": "space-between", + "context": "Spacing (icon to label)" } }, "cornerRadius": { - "token": { + "relationship": { "property": "corner-radius", - "role": "container", - "size": "{size}" + "context": "Rounding" } }, "fill": [ - { - "token": { - "colorFamily": "gray", - "scaleIndex": 100, - "property": "color" - } - }, { "when": { "options": { @@ -103,181 +90,91 @@ }, "value": "transparent" }, - { - "when": { - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 200, - "property": "color" - } - }, - { - "when": { - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 200, - "property": "color" - } - }, { "when": { "options": { - "isSelected": true + "isQuiet": true, + "isDisabled": true } }, - "relationship": { - "property": "color", - "context": "Background (selected, non emphasized)" - } + "priority": 11, + "value": "transparent" }, { "when": { "options": { - "isSelected": true, - "isEmphasized": true + "isQuiet": false } }, "relationship": { "property": "color", - "context": "Background (selected, emphasized)" + "context": "Background" } }, { "when": { "options": { - "staticColor": "black" + "isDisabled": false, + "staticColor": ["black", "white"] } }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 200, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 200, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 200, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 200, - "property": "color" + "relationship": { + "property": "color", + "context": "Background" } }, { "when": { "options": { - "isDisabled": true + "isDisabled": false, + "isSelected": true } }, "relationship": { "property": "color", - "context": "Background (disabled)" - }, - "priority": 10 + "context": "Background" + } }, { "when": { "options": { - "isDisabled": true, - "staticColor": "black" + "isDisabled": false, + "isPending": true } }, "relationship": { "property": "color", - "context": "Background (disabled, black)" + "context": "Background" } }, { "when": { "options": { - "isDisabled": true, - "staticColor": "white" - } + "isDisabled": false, + "isPending": false, + "isQuiet": true, + "isSelected": false + }, + "states": ["hover"] }, "relationship": { "property": "color", - "context": "Background (disabled, white)" + "context": "Background" } }, { "when": { "options": { + "isDisabled": false, + "isPending": false, "isQuiet": true, - "isDisabled": true - } - }, - "priority": 11, - "value": "transparent" - }, - { - "when": { - "options": { - "isPending": true - } + "isSelected": false + }, + "states": ["down"] }, - "priority": 10, "relationship": { "property": "color", - "context": "Background (disabled)" + "context": "Background" } } ], @@ -312,9 +209,9 @@ "when": { "states": ["down"] }, - "token": { + "relationship": { "property": "component-size-maximum-perspective", - "state": "down" + "context": "Component size (down)" } } } @@ -337,85 +234,16 @@ } }, "color": [ - { - "token": { - "legacyKey": "neutral-content-color-default" - } - }, - { - "when": { - "states": ["hover"] - }, - "token": { - "legacyKey": "neutral-content-color-hover" - } - }, - { - "when": { - "states": ["down"] - }, - "token": { - "legacyKey": "neutral-content-color-down" - } - }, { "when": { "options": { - "isSelected": true + "isPending": false } }, "relationship": { "property": "color", - "context": "Label, icon, and hold icon (selected, non emphasized)" + "context": "Icon" } - }, - { - "when": { - "options": { - "isSelected": true, - "isEmphasized": true - } - }, - "relationship": { - "property": "color", - "context": "Label, icon, and hold icon (selected, emphasized)" - } - }, - { - "when": { - "options": { - "staticColor": "black" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "isDisabled": true - } - }, - "relationship": { - "property": "content-color", - "context": "Label, icon, and hold icon (disabled)" - }, - "priority": 10 } ] }, @@ -435,8 +263,9 @@ }, "props": { "fontSize": { - "token": { - "property": "font-size-{sizeIndex}" + "relationship": { + "property": "font-size-{sizeIndex}", + "context": "Label" } }, "fontWeight": { @@ -446,85 +275,17 @@ } }, "color": [ - { - "token": { - "legacyKey": "neutral-content-color-default" - } - }, - { - "when": { - "states": ["hover"] - }, - "token": { - "legacyKey": "neutral-content-color-hover" - } - }, - { - "when": { - "states": ["down"] - }, - "token": { - "legacyKey": "neutral-content-color-down" - } - }, { "when": { "options": { - "isSelected": true + "hideLabel": false, + "isPending": false } }, "relationship": { "property": "color", - "context": "Label, icon, and hold icon (selected, non emphasized)" + "context": "Label" } - }, - { - "when": { - "options": { - "isSelected": true, - "isEmphasized": true - } - }, - "relationship": { - "property": "color", - "context": "Label, icon, and hold icon (selected, emphasized)" - } - }, - { - "when": { - "options": { - "staticColor": "black" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "isDisabled": true - } - }, - "relationship": { - "property": "content-color", - "context": "Label, icon, and hold icon (disabled)" - }, - "priority": 10 } ] } @@ -540,60 +301,30 @@ "placement": { "anchor": "bottom-end", "inset": { - "token": { - "structure": "accessory", - "property": "gap", - "position": "affixed", - "size": "{size}" + "relationship": { + "property": "space-between", + "context": "Spacing (edge to hold icon)" } } }, "props": { "color": [ - { - "token": { - "legacyKey": "neutral-content-color-default" - } - }, - { - "when": { - "options": { - "isSelected": true - } - }, - "relationship": { - "property": "color", - "context": "Label, icon, and hold icon (selected, non emphasized)" - } - }, { "when": { "options": { - "isSelected": true, - "isEmphasized": true + "hasHoldIcon": true, + "isPending": false } }, "relationship": { "property": "color", - "context": "Label, icon, and hold icon (selected, emphasized)" + "context": "Hold icon" } - }, - { - "when": { - "options": { - "isDisabled": true - } - }, - "relationship": { - "property": "content-color", - "context": "Label, icon, and hold icon (disabled)" - }, - "priority": 10 } ] } }, - "focus-ring": { + "focus-indicator": { "kind": "ring", "visibleWhen": { "states": ["keyboard-focus"] @@ -642,15 +373,15 @@ } }, "trackColor": { - "token": { - "colorFamily": "gray", - "scaleIndex": 300, - "property": "color" + "relationship": { + "property": "color", + "context": "Progress track" } }, "color": { - "token": { - "legacyKey": "accent-content-color-default" + "relationship": { + "property": "color", + "context": "Progress" } } } diff --git a/packages/design-data/visuals/badge.json b/packages/design-data/visuals/badge.json index 3ae99fd7b..8ae9a692e 100644 --- a/packages/design-data/visuals/badge.json +++ b/packages/design-data/visuals/badge.json @@ -31,10 +31,9 @@ }, "paddingInlineStart": [ { - "token": { - "structure": "base", - "property": "padding-horizontal", - "size": "{size}" + "relationship": { + "property": "component-edge-to-text-{sizeIndex}", + "context": "Spacing (start/end edges)" } }, { @@ -43,19 +42,17 @@ "label": false } }, - "token": { - "structure": "base", - "property": "padding-vertical", - "size": "{size}" + "relationship": { + "property": "component-edge-to-visual-only-{sizeIndex}", + "context": "Spacing (start/end edges, icon only)" } } ], "paddingInlineEnd": [ { - "token": { - "structure": "base", - "property": "padding-horizontal", - "size": "{size}" + "relationship": { + "property": "component-edge-to-text-{sizeIndex}", + "context": "Spacing (start/end edges)" } }, { @@ -64,25 +61,22 @@ "label": false } }, - "token": { - "structure": "base", - "property": "padding-vertical", - "size": "{size}" + "relationship": { + "property": "component-edge-to-visual-only-{sizeIndex}", + "context": "Spacing (start/end edges, icon only)" } } ], "gap": { - "token": { - "structure": "base", - "property": "gap", - "size": "{size}" + "relationship": { + "property": "space-between", + "context": "Spacing (icon to label)" } }, "cornerRadius": { - "token": { + "relationship": { "property": "corner-radius", - "role": "container", - "size": "{size}" + "context": "Rounding" } }, "cornerRadiusStartStart": [ @@ -159,747 +153,75 @@ ], "fill": [ { - "token": { - "legacyKey": "neutral-subdued-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "accent" - } - }, - "token": { - "legacyKey": "accent-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "subtle" - } - }, - "token": { - "legacyKey": "accent-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "informative" - } - }, - "token": { - "legacyKey": "informative-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "subtle" - } - }, - "token": { - "legacyKey": "informative-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "negative" - } - }, - "token": { - "legacyKey": "negative-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "subtle" - } - }, - "token": { - "legacyKey": "negative-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "neutral" - } - }, - "token": { - "legacyKey": "neutral-subdued-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "subtle" - } - }, - "token": { - "legacyKey": "neutral-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "notice" - } - }, - "token": { - "legacyKey": "notice-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "subtle" - } - }, - "token": { - "legacyKey": "notice-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "positive" - } - }, - "token": { - "legacyKey": "positive-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "subtle" - } - }, - "token": { - "legacyKey": "positive-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "indigo" - } - }, - "token": { - "legacyKey": "indigo-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "indigo", - "style": "subtle" - } - }, - "token": { - "legacyKey": "indigo-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "yellow" - } - }, - "token": { - "legacyKey": "yellow-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "yellow", - "style": "subtle" - } - }, - "token": { - "legacyKey": "yellow-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "magenta" - } - }, - "token": { - "legacyKey": "magenta-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "magenta", - "style": "subtle" - } - }, - "token": { - "legacyKey": "magenta-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "fuchsia" - } - }, - "token": { - "legacyKey": "fuchsia-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "fuchsia", - "style": "subtle" - } - }, - "token": { - "legacyKey": "fuchsia-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "purple" - } - }, - "token": { - "legacyKey": "purple-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "purple", - "style": "subtle" - } - }, - "token": { - "legacyKey": "purple-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "seafoam" - } - }, - "token": { - "legacyKey": "seafoam-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "seafoam", - "style": "subtle" - } - }, - "token": { - "legacyKey": "seafoam-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "gray" - } - }, - "token": { - "legacyKey": "gray-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "gray", - "style": "subtle" - } - }, - "token": { - "legacyKey": "gray-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "red" - } - }, - "token": { - "legacyKey": "red-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "red", - "style": "subtle" - } - }, - "token": { - "legacyKey": "red-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "orange" - } - }, - "token": { - "legacyKey": "orange-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "orange", - "style": "subtle" - } - }, - "token": { - "legacyKey": "orange-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "chartreuse" - } - }, - "token": { - "legacyKey": "chartreuse-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "chartreuse", - "style": "subtle" - } - }, - "token": { - "legacyKey": "chartreuse-subtle-background-color-default" + "relationship": { + "property": "color", + "context": "Background (non-semantic)" } }, { "when": { "options": { - "variant": "celery" + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ] } }, - "token": { - "legacyKey": "celery-background-color-default" + "relationship": { + "property": "color", + "context": "Background (semantic)" } - }, + } + ], + "stroke": [ { - "when": { - "options": { - "variant": "celery", - "style": "subtle" - } - }, - "token": { - "legacyKey": "celery-subtle-background-color-default" - } + "value": "transparent" }, { "when": { "options": { - "variant": "green" + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": ["outline"] } }, - "token": { - "legacyKey": "green-background-color-default" + "relationship": { + "property": "color", + "context": "Border (semantic)" } - }, + } + ], + "strokeWidth": [ { - "when": { - "options": { - "variant": "green", - "style": "subtle" - } - }, - "token": { - "legacyKey": "green-subtle-background-color-default" - } + "value": 0 }, { "when": { "options": { - "variant": "cyan" + "variant": [ + "neutral", + "informative", + "positive", + "negative", + "accent", + "notice" + ], + "style": ["outline"] } }, - "token": { - "legacyKey": "cyan-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "cyan", - "style": "subtle" - } - }, - "token": { - "legacyKey": "cyan-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "blue" - } - }, - "token": { - "legacyKey": "blue-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "blue", - "style": "subtle" - } - }, - "token": { - "legacyKey": "blue-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "pink" - } - }, - "token": { - "legacyKey": "pink-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "pink", - "style": "subtle" - } - }, - "token": { - "legacyKey": "pink-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "turquoise" - } - }, - "token": { - "legacyKey": "turquoise-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "turquoise", - "style": "subtle" - } - }, - "token": { - "legacyKey": "turquoise-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "brown" - } - }, - "token": { - "legacyKey": "brown-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "brown", - "style": "subtle" - } - }, - "token": { - "legacyKey": "brown-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "cinnamon" - } - }, - "token": { - "legacyKey": "cinnamon-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "cinnamon", - "style": "subtle" - } - }, - "token": { - "legacyKey": "cinnamon-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "silver" - } - }, - "token": { - "legacyKey": "silver-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "silver", - "style": "subtle" - } - }, - "token": { - "legacyKey": "silver-subtle-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "outline" - } - }, - "token": { - "legacyKey": "background-layer-2-color" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "outline" - } - }, - "token": { - "legacyKey": "background-layer-2-color" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "outline" - } - }, - "token": { - "legacyKey": "background-layer-2-color" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "outline" - } - }, - "token": { - "legacyKey": "background-layer-2-color" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "outline" - } - }, - "token": { - "legacyKey": "background-layer-2-color" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "outline" - } - }, - "token": { - "legacyKey": "background-layer-2-color" - } - } - ], - "stroke": [ - { - "value": "transparent" - }, - { - "when": { - "options": { - "variant": "accent", - "style": "outline" - } - }, - "token": { - "legacyKey": "accent-visual-color" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "outline" - } - }, - "token": { - "legacyKey": "informative-visual-color" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "outline" - } - }, - "token": { - "legacyKey": "negative-visual-color" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "outline" - } - }, - "token": { - "legacyKey": "neutral-visual-color" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "outline" - } - }, - "token": { - "legacyKey": "notice-visual-color" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "outline" - } - }, - "token": { - "legacyKey": "positive-visual-color" - } - } - ], - "strokeWidth": [ - { - "value": 0 - }, - { - "when": { - "options": { - "variant": "accent", - "style": "outline" - } - }, - "relationship": { - "property": "border-width", - "context": "Border" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "outline" - } - }, - "relationship": { - "property": "border-width", - "context": "Border" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "outline" - } - }, - "relationship": { - "property": "border-width", - "context": "Border" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "outline" - } - }, - "relationship": { - "property": "border-width", - "context": "Border" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "outline" - } - }, - "relationship": { - "property": "border-width", - "context": "Border" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "outline" - } - }, - "relationship": { - "property": "border-width", - "context": "Border" + "relationship": { + "property": "border-width", + "context": "Border" } } ] @@ -925,478 +247,12 @@ "context": "Icon" } }, - "color": [ - { - "token": { - "colorFamily": "transparent-static-white", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "celery" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "chartreuse" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "notice" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "orange" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "yellow" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "indigo", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "yellow", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "magenta", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "fuchsia", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "purple", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "seafoam", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "gray", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "red", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "orange", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "chartreuse", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "celery", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "green", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "cyan", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "blue", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "pink", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "turquoise", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "brown", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "cinnamon", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "silver", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } + "color": { + "relationship": { + "property": "color", + "context": "Text and icon (semantic)" } - ] + } } }, "label": { @@ -1408,488 +264,23 @@ }, "props": { "fontSize": { - "token": { - "property": "font-size-{sizeIndex}" + "relationship": { + "property": "font-size-{sizeIndex}", + "context": "Label" } }, "fontWeight": { - "token": { + "relationship": { "property": "font-weight", - "weight": "medium" + "context": "Label" } }, - "color": [ - { - "token": { - "colorFamily": "transparent-static-white", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "celery" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "chartreuse" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "notice" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "orange" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "yellow" - } - }, - "token": { - "colorFamily": "transparent-static-black", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "indigo", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "yellow", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "magenta", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "fuchsia", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "purple", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "seafoam", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "gray", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "red", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "orange", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "chartreuse", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "celery", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "green", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "cyan", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "blue", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "pink", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "turquoise", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "brown", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "cinnamon", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "silver", - "style": "subtle" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "informative", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "neutral", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "notice", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "positive", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 1000, - "property": "color" - } + "color": { + "relationship": { + "property": "color", + "context": "Text and icon (semantic)" } - ] + } } } } diff --git a/packages/design-data/visuals/button.json b/packages/design-data/visuals/button.json index 89b73cb88..1645aadc6 100644 --- a/packages/design-data/visuals/button.json +++ b/packages/design-data/visuals/button.json @@ -32,10 +32,9 @@ }, "paddingInlineStart": [ { - "token": { - "structure": "base", - "property": "padding-horizontal", - "size": "{size}" + "relationship": { + "property": "component-pill-edge-to-visual-{sizeIndex}", + "context": "Spacing (start/end edges)" } }, { @@ -44,19 +43,17 @@ "isLabelHidden": true } }, - "token": { - "structure": "base", - "property": "padding-vertical", - "size": "{size}" + "relationship": { + "property": "component-pill-edge-to-visual-only-{sizeIndex}", + "context": "Spacing (start/end edges, icon only)" } } ], "paddingInlineEnd": [ { - "token": { - "structure": "base", - "property": "padding-horizontal", - "size": "{size}" + "relationship": { + "property": "component-pill-edge-to-visual-{sizeIndex}", + "context": "Spacing (start/end edges)" } }, { @@ -65,18 +62,16 @@ "isLabelHidden": true } }, - "token": { - "structure": "base", - "property": "padding-vertical", - "size": "{size}" + "relationship": { + "property": "component-pill-edge-to-visual-only-{sizeIndex}", + "context": "Spacing (start/end edges, icon only)" } } ], "gap": { - "token": { - "structure": "base", - "property": "gap", - "size": "{size}" + "relationship": { + "property": "space-between", + "context": "Spacing (icon to label)" } }, "cornerRadius": { @@ -87,47 +82,6 @@ "relativeTo": "height" }, "fill": [ - { - "when": { - "options": { - "variant": "primary", - "style": "fill" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "primary", - "style": "fill" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "primary", - "style": "fill" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, { "when": { "options": { @@ -137,75 +91,6 @@ }, "value": "transparent" }, - { - "when": { - "options": { - "variant": "primary", - "style": "outline" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "primary", - "style": "outline" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 200, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "secondary", - "style": "fill" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "secondary", - "style": "fill" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 200, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "secondary", - "style": "fill" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 200, - "property": "color" - } - }, { "when": { "options": { @@ -218,332 +103,51 @@ { "when": { "options": { - "variant": "secondary", - "style": "outline" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "secondary", + "isDisabled": true, "style": "outline" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 200, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "fill" } }, - "token": { - "legacyKey": "accent-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "fill" - }, - "states": ["hover"] - }, - "token": { - "legacyKey": "accent-background-color-hover" - } - }, - { - "when": { - "options": { - "variant": "accent", - "style": "fill" - }, - "states": ["down"] - }, - "token": { - "legacyKey": "accent-background-color-down" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "fill" - } - }, - "token": { - "legacyKey": "negative-background-color-default" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "fill" - }, - "states": ["hover"] - }, - "token": { - "legacyKey": "negative-background-color-hover" - } - }, - { - "when": { - "options": { - "variant": "negative", - "style": "fill" - }, - "states": ["down"] - }, - "token": { - "legacyKey": "negative-background-color-down" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "primary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "secondary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": "primary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 800, - "property": "color" - } + "value": "transparent", + "priority": 10 }, { "when": { "options": { - "staticColor": "black", - "variant": "secondary", "style": "fill" } }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "primary", - "style": "outline" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "primary", - "style": "outline" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "secondary", - "style": "outline" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "secondary", - "style": "outline" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": "primary", - "style": "outline" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 100, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": "primary", - "style": "outline" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 100, - "property": "color" + "relationship": { + "property": "color", + "context": "Background" } }, { "when": { "options": { - "staticColor": "black", - "variant": "secondary", - "style": "outline" + "isDisabled": false, + "style": "outline", + "variant": ["primary", "secondary"] }, "states": ["hover"] }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 100, - "property": "color" + "relationship": { + "property": "color", + "context": "Background" } }, { "when": { "options": { - "staticColor": "black", - "variant": "secondary", - "style": "outline" + "isDisabled": false, + "style": "outline", + "variant": ["primary", "secondary"] }, "states": ["down"] }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 100, - "property": "color" + "relationship": { + "property": "color", + "context": "Background" } - }, - { - "when": { - "options": { - "isDisabled": true, - "style": "fill" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 100, - "property": "color" - }, - "priority": 10 - }, - { - "when": { - "options": { - "isDisabled": true, - "style": "outline" - } - }, - "value": "transparent", - "priority": 10 - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": ["primary", "secondary"], - "isDisabled": true, - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 100, - "property": "color" - }, - "priority": 10 - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": ["primary", "secondary"], - "isDisabled": true, - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 100, - "property": "color" - }, - "priority": 10 } ], "stroke": [ @@ -553,186 +157,26 @@ { "when": { "options": { - "variant": "primary", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "primary", - "style": "outline" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "primary", - "style": "outline" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "secondary", - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 300, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "secondary", - "style": "outline" - }, - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 400, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "secondary", - "style": "outline" - }, - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 400, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "primary", - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "secondary", - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 300, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": "primary", - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": "secondary", - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 300, - "property": "color" - } - }, - { - "when": { - "options": { - "isDisabled": true, - "style": "outline" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 300, - "property": "color" - }, - "priority": 10 - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": ["primary", "secondary"], - "isDisabled": true, - "style": "outline" + "style": "outline", + "variant": ["primary", "secondary"] } }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 300, - "property": "color" - }, - "priority": 10 + "relationship": { + "property": "color", + "context": "Border" + } }, { "when": { "options": { - "staticColor": "black", - "variant": ["primary", "secondary"], "isDisabled": true, "style": "outline" } }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 300, - "property": "color" - }, - "priority": 10 + "relationship": { + "property": "color", + "context": "Border" + } } ], "strokeWidth": [ @@ -745,9 +189,9 @@ "style": "outline" } }, - "token": { + "relationship": { "property": "border-width", - "scaleIndex": 200 + "context": "Border" } } ], @@ -782,9 +226,9 @@ "when": { "states": ["down"] }, - "token": { + "relationship": { "property": "component-size-maximum-perspective", - "state": "down" + "context": "Component size (down)" } } } @@ -810,196 +254,16 @@ } }, "color": [ - { - "token": { - "colorFamily": "gray", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "primary", - "style": "fill" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 25, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "accent" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 25, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "negative" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 25, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": ["primary", "secondary"], - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": ["primary", "secondary"], - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "secondary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": "secondary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "primary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 900, - "property": "color" - } - }, { "when": { "options": { - "staticColor": "black", - "variant": "primary", - "style": "fill" + "isPending": false } }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 900, - "property": "color" + "relationship": { + "property": "color", + "context": "Icon" } - }, - { - "when": { - "options": { - "isDisabled": true - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 400, - "property": "color" - }, - "priority": 10 - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": ["primary", "secondary"], - "isDisabled": true - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 400, - "property": "color" - }, - "priority": 10 - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": ["primary", "secondary"], - "isDisabled": true - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 400, - "property": "color" - }, - "priority": 10 } ] } @@ -1014,8 +278,9 @@ }, "props": { "fontSize": { - "token": { - "property": "font-size-{sizeIndex}" + "relationship": { + "property": "font-size-{sizeIndex}", + "context": "Label" } }, "fontWeight": { @@ -1025,196 +290,17 @@ } }, "color": [ - { - "token": { - "colorFamily": "gray", - "scaleIndex": 800, - "property": "color" - } - }, - { - "when": { - "states": ["hover"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "states": ["down"] - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "primary", - "style": "fill" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 25, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "accent" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 25, - "property": "color" - } - }, - { - "when": { - "options": { - "variant": "negative" - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 25, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": ["primary", "secondary"], - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": ["primary", "secondary"], - "style": "outline" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "secondary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": "secondary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 900, - "property": "color" - } - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": "primary", - "style": "fill" - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 900, - "property": "color" - } - }, { "when": { "options": { - "staticColor": "black", - "variant": "primary", - "style": "fill" + "isLabelHidden": false, + "isPending": false } }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 900, - "property": "color" + "relationship": { + "property": "color", + "context": "Label" } - }, - { - "when": { - "options": { - "isDisabled": true - } - }, - "token": { - "colorFamily": "gray", - "scaleIndex": 400, - "property": "color" - }, - "priority": 10 - }, - { - "when": { - "options": { - "staticColor": "white", - "variant": ["primary", "secondary"], - "isDisabled": true - } - }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 400, - "property": "color" - }, - "priority": 10 - }, - { - "when": { - "options": { - "staticColor": "black", - "variant": ["primary", "secondary"], - "isDisabled": true - } - }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 400, - "property": "color" - }, - "priority": 10 } ] } @@ -1240,22 +326,20 @@ } }, "trackColor": { - "token": { - "colorFamily": "gray", - "scaleIndex": 300, - "property": "color" + "relationship": { + "property": "color", + "context": "Progress track" } }, "color": { - "token": { - "colorFamily": "gray", - "scaleIndex": 800, - "property": "color" + "relationship": { + "property": "color", + "context": "Progress" } } } }, - "focus-ring": { + "focus-indicator": { "kind": "ring", "visibleWhen": { "states": ["focus"] @@ -1275,10 +359,9 @@ "variant": ["primary", "secondary"] } }, - "token": { - "colorFamily": "transparent-white", - "scaleIndex": 1000, - "property": "color" + "relationship": { + "property": "color", + "context": "Static white – Focus indicator" } }, { @@ -1288,10 +371,9 @@ "variant": ["primary", "secondary"] } }, - "token": { - "colorFamily": "transparent-black", - "scaleIndex": 1000, - "property": "color" + "relationship": { + "property": "color", + "context": "Static black – Focus indicator" } } ], diff --git a/sdk/core/src/registry_data.rs b/sdk/core/src/registry_data.rs index 31832a0d2..c3199683f 100644 --- a/sdk/core/src/registry_data.rs +++ b/sdk/core/src/registry_data.rs @@ -1178,17 +1178,10 @@ const ANATOMY_TERMS_JSON: &str = r##"{ "description": "Heading text element within a component section", "usedIn": ["tokens", "s2-docs"] }, - { - "id": "focus-ring", - "label": "Focus Ring", - "description": "Visible ring drawn around a focused component for accessibility", - "usedIn": ["tokens"], - "standaloneScope": true - }, { "id": "focus-indicator", "label": "Focus Indicator", - "description": "Visual indicator showing keyboard focus state on a component", + "description": "Visual indicator showing keyboard focus state on a component. Named for its intent, not its shape: it may be a ring or a side indicator. Its tokens are focus-indicator color, gap and thickness.", "usedIn": ["tokens"], "standaloneScope": true }, diff --git a/sdk/core/src/validate/rules/spec025.rs b/sdk/core/src/validate/rules/spec025.rs index 4cb5766a6..866854133 100644 --- a/sdk/core/src/validate/rules/spec025.rs +++ b/sdk/core/src/validate/rules/spec025.rs @@ -123,7 +123,7 @@ mod tests { let g = TokenGraph::from_pairs(vec![( "focus-ring-gap".into(), PathBuf::from("a.tokens.json"), - json!({"name": {"property": "gap", "anatomy": "focus-ring"}, "value": "2px"}), + json!({"name": {"property": "gap", "anatomy": "focus-indicator"}, "value": "2px"}), )]); assert!(diagnostics_for_rule(&g, "SPEC-025").is_empty()); } diff --git a/sdk/core/src/validate/rules/spec049.rs b/sdk/core/src/validate/rules/spec049.rs index 8e7bde70e..19d70648c 100644 --- a/sdk/core/src/validate/rules/spec049.rs +++ b/sdk/core/src/validate/rules/spec049.rs @@ -96,7 +96,7 @@ mod tests { let g = TokenGraph::from_pairs(vec![( "focus-ring-gap".into(), PathBuf::from("a.tokens.json"), - json!({"name": {"property": "gap", "anatomy": "focus-ring"}, "value": "2px"}), + json!({"name": {"property": "gap", "anatomy": "focus-indicator"}, "value": "2px"}), )]); assert!(diagnostics_for_rule(&g, "SPEC-049").is_empty()); } diff --git a/sdk/core/src/validate/rules/spec053.rs b/sdk/core/src/validate/rules/spec053.rs index 30a271e21..889029049 100644 --- a/sdk/core/src/validate/rules/spec053.rs +++ b/sdk/core/src/validate/rules/spec053.rs @@ -20,6 +20,8 @@ //! multi-purpose scope fields, so a wrong option value is always an error, //! not an advisory warning. +use serde_json::Value; + use crate::report::{Diagnostic, Severity}; use crate::validate::rule::{ValidationContext, ValidationRule}; @@ -64,8 +66,10 @@ impl ValidationRule for Rule { if RESERVED.contains(&key.as_str()) { continue; } - let Some(field_val) = val.as_str() else { - continue; // boolean option values (isSelected: true) have no values[] to match + let values: Vec<&str> = match val { + Value::String(s) => vec![s.as_str()], + Value::Array(a) => a.iter().filter_map(Value::as_str).collect(), + _ => continue, // boolean option values have no values[] to match }; let Some(declared) = crate::validate::rules::component_option_values(comp, key) @@ -77,8 +81,10 @@ impl ValidationRule for Rule { continue; } - if !declared.contains(field_val) { - invalid.push((key.as_str(), field_val)); + for field_val in values { + if !declared.contains(field_val) { + invalid.push((key.as_str(), field_val)); + } } } @@ -193,6 +199,22 @@ mod tests { assert!(diags.is_empty()); } + #[test] + fn array_values_are_each_checked() { + let comp = json!({"name": "button", "options": {"style": {"values": [{"value": "fill"}, {"value": "outline"}]}}}); + let ok = run( + json!({"scope": {"component": "button", "property": "color", "options": {"style": ["fill", "outline"]}}, "value": "#fff"}), + comp.clone(), + ); + assert!(ok.is_empty()); + let bad = run( + json!({"scope": {"component": "button", "property": "color", "options": {"style": ["fill", "ghost"]}}, "value": "#fff"}), + comp, + ); + assert_eq!(bad.len(), 1); + assert!(bad[0].message.contains("ghost")); + } + #[test] fn state_key_skipped_owned_by_spec054() { let diags = run( diff --git a/sdk/core/src/validate/rules/spec066.rs b/sdk/core/src/validate/rules/spec066.rs index 6a72410d9..28a72fc9b 100644 --- a/sdk/core/src/validate/rules/spec066.rs +++ b/sdk/core/src/validate/rules/spec066.rs @@ -76,6 +76,7 @@ fn used_by(ctx: &ValidationContext<'_>, v: &VisualRecord) -> Used { for r in &rels { if r.property == property && r.context.as_deref() == context { used.states.extend(r.states.iter().cloned()); + used.options.extend(r.options.iter().cloned()); } } } diff --git a/sdk/core/src/validate/rules/visual_util.rs b/sdk/core/src/validate/rules/visual_util.rs index 1d338ce57..138c0d048 100644 --- a/sdk/core/src/validate/rules/visual_util.rs +++ b/sdk/core/src/validate/rules/visual_util.rs @@ -127,6 +127,8 @@ pub(crate) struct RelTarget<'a> { pub token: Option<&'a TokenRecord>, /// State ids the relationship selects, from the bound token or its own scope. pub states: Vec, + /// Option names the relationship's `scope.options` pins (not `state`). + pub options: Vec, } pub(crate) fn component_relationships<'a>( @@ -154,25 +156,37 @@ pub(crate) fn component_relationships<'a>( .get("$ref") .and_then(Value::as_str) .and_then(|rf| graph.resolve_alias_key(rf)); + let pinned: Vec = r + .raw + .pointer("/scope/options") + .and_then(Value::as_object) + .map(crate::visual::scope_states) + .unwrap_or_default() + .iter() + .filter_map(|v| v.as_str().map(String::from)) + .collect(); + // A pinned relationship state replaces the bound token's own states. let states = match token { - Some(t) => crate::visual::name_states(t.raw.get("name")), - None => r - .raw - .pointer("/scope/options") - .and_then(Value::as_object) - .map(|o| { - crate::visual::scope_states(o) - .iter() - .filter_map(|v| v.as_str().map(String::from)) - .collect() - }) - .unwrap_or_default(), + Some(t) if pinned.is_empty() => crate::visual::name_states(t.raw.get("name")), + _ => pinned, }; + let options = r + .raw + .pointer("/scope/options") + .and_then(Value::as_object) + .map(|o| { + o.keys() + .filter(|k| k.as_str() != "state") + .cloned() + .collect() + }) + .unwrap_or_default(); RelTarget { property, context, token, states, + options, } }) .collect() diff --git a/sdk/core/src/visual.rs b/sdk/core/src/visual.rs index 819d96764..2b31aa44c 100644 --- a/sdk/core/src/visual.rs +++ b/sdk/core/src/visual.rs @@ -119,8 +119,43 @@ impl Resolved { } } +/// A candidate token with the component options its relationship pins (`None`: none) and the +/// states it pins (its `scope.options.state`; empty: use the token's own `name.state`). +type Candidate<'g> = (&'g crate::graph::TokenRecord, Option, Vec); + +/// A relationship's `$ref` with the component options and states it pins. +type PinnedRef = (String, Option, Vec); + +/// Memoized token lookups shared across renders of one graph. A token selector's +/// candidates do not depend on the request, so a matrix of renders can reuse them. +#[derive(Default)] +pub struct SceneCache { + /// Selector (templates expanded) → keys into `TokenGraph::tokens`. + tokens: std::cell::RefCell>>, + /// Component, property, context → the `$ref` of each matching relationship and the + /// component options its `scope.options` pins (see `RELATIONSHIP_RESERVED_OPTIONS`). + relationships: std::cell::RefCell>>, + /// Component → its relationship-owned scoped values (see `scoped_values`). + scoped: std::cell::RefCell>>>, +} + +impl SceneCache { + fn scoped( + &self, + graph: &TokenGraph, + component: &str, + ) -> std::rc::Rc> { + self.scoped + .borrow_mut() + .entry(component.to_string()) + .or_insert_with(|| std::rc::Rc::new(scoped_values(graph, component))) + .clone() + } +} + struct Ctx<'a> { graph: &'a TokenGraph, + cache: &'a SceneCache, req: &'a RenderRequest, size_index: String, option_defaults: HashMap, @@ -337,17 +372,17 @@ impl<'a> Ctx<'a> { active } - /// Mode-compatible candidates, best fit first. Candidates that contradict the - /// mode context are dropped; ties prefer the fewest extra name fields. - fn rank<'g>( + /// Mode-compatible candidates, best fit first, each kept with its extra data. Candidates + /// that contradict the mode context are dropped; ties prefer the fewest extra name fields. + fn rank_by<'g, X>( &self, - cands: Vec<&'g crate::graph::TokenRecord>, - ) -> Vec<&'g crate::graph::TokenRecord> { + cands: Vec<(&'g crate::graph::TokenRecord, X)>, + ) -> Vec<(&'g crate::graph::TokenRecord, X)> { let mut mctx = self.mode_ctx(); mctx.insert("size".into(), self.req.size.clone()); let mut fit: Vec<_> = cands .into_iter() - .filter(|t| { + .filter(|(t, _)| { mctx.iter().all(|(k, v)| { match t .raw @@ -361,7 +396,7 @@ impl<'a> Ctx<'a> { }) }) .collect(); - fit.sort_by(|a, b| { + fit.sort_by(|(a, _), (b, _)| { let sa = name_ctx_score(&a.raw, &mctx); let sb = name_ctx_score(&b.raw, &mctx); let ea = a @@ -385,15 +420,28 @@ impl<'a> Ctx<'a> { &self, cands: Vec<&'g crate::graph::TokenRecord>, ) -> Option<&'g crate::graph::TokenRecord> { - let fit = self.rank(cands); + self.pick_with_states(cands.into_iter().map(|t| (t, Vec::new())).collect()) + } + + /// [`Self::pick`] for candidates that carry states of their own (a relationship's + /// `scope.options.state`), which replace the token's `name.state`. + fn pick_with_states<'g>( + &self, + cands: Vec<(&'g crate::graph::TokenRecord, Vec)>, + ) -> Option<&'g crate::graph::TokenRecord> { + let fit = self.rank_by(cands); let active = self.active_states(); fit.iter() - .copied() - .find(|t| { - let st = token_states(t); + .find(|(t, extra)| { + let st = if extra.is_empty() { + token_states(t) + } else { + extra.clone() + }; !st.is_empty() && st.iter().all(|x| active.contains(x)) }) - .or_else(|| fit.first().copied()) + .or_else(|| fit.first()) + .map(|(t, _)| *t) } fn terminal(&self, rec: &crate::graph::TokenRecord) -> Option { @@ -450,70 +498,129 @@ impl<'a> Ctx<'a> { sel_obj.insert("property".into(), Value::String(p)); } let graph = self.graph; - let find = |sel: &serde_json::Map| -> Vec<&'a crate::graph::TokenRecord> { + // The key holds the selector with every template expanded: its candidates depend on + // the request size, but the selector reported in diagnostics keeps its templates. + let mut keyed = sel_obj.clone(); + for v in keyed.values_mut() { + if let Value::String(t) = v { + *t = self.template(t); + } + } + let key = Value::Object(keyed).to_string(); + if let Some(keys) = self.cache.tokens.borrow().get(&key) { + let cands = keys.iter().filter_map(|k| graph.tokens.get(k)).collect(); + return Some((cands, sel_obj)); + } + let find = |sel: &serde_json::Map| -> Vec { graph .tokens - .values() - .filter(|t| { + .iter() + .filter(|(_, t)| { t.raw .get("name") .is_some_and(|n| self.matches_selector(n, sel)) }) + .map(|(k, _)| k.clone()) .collect() }; - let mut cands = find(&sel_obj); + let mut keys = find(&sel_obj); // A bare `font-size-{n}` style property may also be encoded as property + scaleIndex. - if cands.is_empty() { + if keys.is_empty() { if let Some(Value::String(p)) = sel_obj.get("property") { if let Some((base, idx)) = p.rsplit_once('-') { if let Ok(i) = idx.parse::() { let mut alt = sel_obj.clone(); alt.insert("property".into(), Value::String(base.into())); alt.insert("scaleIndex".into(), Value::from(i)); - cands = find(&alt); + keys = find(&alt); } } } } + let cands = keys.iter().filter_map(|k| graph.tokens.get(k)).collect(); + self.cache.tokens.borrow_mut().insert(key, keys); Some((cands, sel_obj)) } - /// Tokens bound to this component by a relationship, plus its templated - /// property and trimmed context. - fn relationship_cands( - &self, - rel: &Value, - ) -> Option<(Vec<&'a crate::graph::TokenRecord>, String, String)> { + /// Tokens bound to this component by a relationship, each with the component options its + /// relationship pins, plus the templated property and trimmed context. + fn relationship_cands(&self, rel: &Value) -> Option<(Vec>, String, String)> { let property = self.template(rel.get("property")?.as_str()?); let context = rel.get("context")?.as_str()?.trim().to_string(); - let mut cands = Vec::new(); - for r in &self.graph.relationships { - let scope = r.raw.get("scope"); - let comp = scope - .and_then(|s| s.get("component")) - .and_then(Value::as_str); - let p = scope - .and_then(|s| s.get("property")) - .and_then(Value::as_str); - let c = r.raw.get("context").and_then(Value::as_str).map(str::trim); - if comp == Some(&self.req.component) - && p == Some(property.as_str()) - && c == Some(context.as_str()) - { - if let Some(rf) = r.raw.get("$ref").and_then(Value::as_str) { - if let Some(t) = self.graph.resolve_alias_key(rf) { - cands.push(t); - } else if let Some(t) = - self.scoped.iter().find(|t| t.uuid.as_deref() == Some(rf)) - { - cands.push(t); + let key = format!("{}\u{1f}{property}\u{1f}{context}", self.req.component); + let cached = self.cache.relationships.borrow().get(&key).cloned(); + let refs = cached.unwrap_or_else(|| { + let declared: Vec<&str> = self + .graph + .components + .iter() + .find(|c| c.name == self.req.component) + .and_then(|c| c.raw.get("options")) + .and_then(Value::as_object) + .map(|o| o.keys().map(String::as_str).collect()) + .unwrap_or_default(); + let mut refs = Vec::new(); + for r in &self.graph.relationships { + let scope = r.raw.get("scope"); + let comp = scope + .and_then(|s| s.get("component")) + .and_then(Value::as_str); + let p = scope + .and_then(|s| s.get("property")) + .and_then(Value::as_str); + let c = r.raw.get("context").and_then(Value::as_str).map(str::trim); + if comp == Some(&self.req.component) + && p == Some(property.as_str()) + && c == Some(context.as_str()) + { + if let Some(rf) = r.raw.get("$ref").and_then(Value::as_str) { + refs.push(( + rf.to_string(), + pinned_options(scope, &declared), + scope_state_ids(scope), + )); } } } + self.cache + .relationships + .borrow_mut() + .insert(key, refs.clone()); + refs + }); + let mut cands = Vec::new(); + for (rf, options, states) in &refs { + if let Some(t) = self.graph.resolve_alias_key(rf) { + cands.push((t, options.clone(), states.clone())); + } else if let Some(t) = self.scoped.iter().find(|t| t.uuid.as_deref() == Some(rf)) { + cands.push((t, options.clone(), states.clone())); + } } Some((cands, property, context)) } + /// Keep the relationships whose pinned options match the request, preferring the ones + /// that pin the most options. A relationship with no pinned options is the default: + /// it is used only when no more specific one matches. + fn select_by_options<'g>( + &self, + cands: Vec>, + ) -> Vec<(&'g crate::graph::TokenRecord, Vec)> { + let scored: Vec<(usize, &crate::graph::TokenRecord, Vec)> = cands + .into_iter() + .filter_map(|(t, opts, states)| { + let when = opts.map(|o| serde_json::json!({ "options": o })); + self.when_score(when.as_ref()).map(|s| (s, t, states)) + }) + .collect(); + let best = scored.iter().map(|(s, ..)| *s).max().unwrap_or(0); + scored + .into_iter() + .filter(|(s, ..)| *s == best) + .map(|(_, t, states)| (t, states)) + .collect() + } + fn resolve_token(&mut self, prop: &str, sel: &Value) -> Option { let (cands, sel_obj) = self.token_cands(sel)?; let Some(rec) = self.pick(cands) else { @@ -534,7 +641,8 @@ impl<'a> Ctx<'a> { fn resolve_relationship(&mut self, prop: &str, rel: &Value) -> Option { let (cands, property, context) = self.relationship_cands(rel)?; - let Some(rec) = self.pick(cands) else { + let cands = self.select_by_options(cands); + let Some(rec) = self.pick_with_states(cands) else { self.diags.push(format!( "{prop}: no relationship '{property}' / '{context}'" )); @@ -550,6 +658,35 @@ impl<'a> Ctx<'a> { } } +/// `scope.options` keys a relationship never pins as a component option: `state` is a token +/// state, `scale` and `colorScheme` are modes. +const RELATIONSHIP_RESERVED_OPTIONS: &[&str] = &["state", "scale", "colorScheme"]; + +/// State ids a relationship's `scope.options.state` pins, normalized like a token +/// `name.state` (so `key-focus` is `keyboard-focus`). They replace the token's own. +fn scope_state_ids(scope: Option<&Value>) -> Vec { + let state = scope + .and_then(|s| s.get("options")) + .and_then(|o| o.get("state")); + name_states(state.map(|v| serde_json::json!({ "state": v })).as_ref()) +} + +/// The component options a relationship's `scope.options` pins, or `None` when it pins none. +/// Keys the component does not declare as options are ignored. +fn pinned_options(scope: Option<&Value>, declared: &[&str]) -> Option { + let options = scope + .and_then(|s| s.get("options")) + .and_then(Value::as_object)?; + let pinned: serde_json::Map = options + .iter() + .filter(|(k, _)| { + !RELATIONSHIP_RESERVED_OPTIONS.contains(&k.as_str()) && declared.contains(&k.as_str()) + }) + .map(|(k, v)| (k.clone(), v.clone())) + .collect(); + (!pinned.is_empty()).then_some(Value::Object(pinned)) +} + /// A token's `name.state` as individual state ids. Legacy compound ids such as /// `selected-key-focus` split into `selected` + `keyboard-focus`. fn token_states(t: &crate::graph::TokenRecord) -> Vec { @@ -573,7 +710,7 @@ pub(crate) fn name_states(name: Option<&Value>) -> Vec { out.push("selected".to_string()); } let r = rest.unwrap_or(&s); - out.push(if r == "key-focus" { + out.push(if r == "key-focus" || r == "focus" { "keyboard-focus".into() } else { r.to_string() @@ -645,6 +782,60 @@ pub fn recipe_options(recipe: &Value) -> (Vec, Vec) { (used, structural) } +/// [`recipe_options`] for a recipe bound to a component's data: it also counts the component +/// options pinned (`scope.options`) by the relationships the recipe binds, since a recipe +/// that moves its conditions into relationships no longer names those options itself. +pub fn recipe_options_in( + graph: &TokenGraph, + recipe: &Value, + component: &str, +) -> (Vec, Vec) { + let (mut used, structural) = recipe_options(recipe); + let mut contexts: Vec = Vec::new(); + fn walk(v: &Value, out: &mut Vec) { + match v { + Value::Array(a) => a.iter().for_each(|x| walk(x, out)), + Value::Object(o) => { + if let Some(c) = o + .get("relationship") + .and_then(|r| r.get("context")) + .and_then(Value::as_str) + { + out.push(c.trim().to_string()); + } + o.values().for_each(|x| walk(x, out)); + } + _ => {} + } + } + walk(recipe, &mut contexts); + let declared: Vec<&str> = graph + .components + .iter() + .find(|c| c.name == component) + .and_then(|c| c.raw.get("options")) + .and_then(Value::as_object) + .map(|o| o.keys().map(String::as_str).collect()) + .unwrap_or_default(); + for r in &graph.relationships { + let comp = r.raw.pointer("/scope/component").and_then(Value::as_str); + let ctx = r.raw.get("context").and_then(Value::as_str).map(str::trim); + if comp != Some(component) || !ctx.is_some_and(|c| contexts.iter().any(|x| x == c)) { + continue; + } + let Some(opts) = r.raw.pointer("/scope/options").and_then(Value::as_object) else { + continue; + }; + for key in opts.keys() { + let reserved = RELATIONSHIP_RESERVED_OPTIONS.contains(&key.as_str()); + if !reserved && declared.contains(&key.as_str()) && !used.contains(key) { + used.push(key.clone()); + } + } + } + (used, structural) +} + /// Pre-resolve every token and relationship binding in a recipe so a renderer needs /// no token graph. Each binding becomes a `candidates` list (`{value, token, states}`, /// best mode fit first) per `size|colorScheme|scale`; the renderer only applies the @@ -677,6 +868,7 @@ pub fn compile_recipe( .unwrap_or_default(); let scoped = scoped_values(graph, component); + let cache = SceneCache::default(); let mut variants = serde_json::Map::new(); for (size, idx) in scale { for mode in modes { @@ -688,6 +880,7 @@ pub fn compile_recipe( }; let cx = Ctx { graph, + cache: &cache, req: &req, size_index: value_to_string(idx).unwrap_or_default(), option_defaults: HashMap::new(), @@ -736,10 +929,10 @@ fn compile_source(cx: &Ctx, prop: &str, entry: &mut Value) { let Some(obj) = entry.as_object_mut() else { return; }; - let cands = if let Some(sel) = obj.get("token") { + let cands: Option<(Vec, String)> = if let Some(sel) = obj.get("token") { cx.token_cands(sel).map(|(c, sel_obj)| { ( - c, + c.into_iter().map(|t| (t, None, Vec::new())).collect(), format!("{prop}: no token matches {}", Value::Object(sel_obj)), ) }) @@ -753,15 +946,24 @@ fn compile_source(cx: &Ctx, prop: &str, entry: &mut Value) { obj.remove("relationship"); let (cands, miss) = cands.unwrap_or_default(); let list: Vec = cx - .rank(cands) + .rank_by(cands.into_iter().map(|(t, o, s)| (t, (o, s))).collect()) .into_iter() - .map(|t| { - serde_json::json!({ + .map(|(t, (options, extra))| { + let states = if extra.is_empty() { + token_states(t) + } else { + extra + }; + let mut c = serde_json::json!({ "value": cx.terminal(t), "token": Ctx::token_label(t), "chain": cx.alias_chain(t), - "states": token_states(t), - }) + "states": states, + }); + if let Some(o) = options { + c["options"] = o; + } + c }) .collect(); obj.insert("candidates".into(), Value::Array(list)); @@ -773,6 +975,17 @@ pub fn build_scene( graph: &TokenGraph, recipe: &Value, req: &RenderRequest, +) -> Result { + build_scene_cached(graph, recipe, req, &SceneCache::default()) +} + +/// Like [`build_scene`], reusing token lookups from `cache`. Use one cache per graph when +/// rendering many requests (a matrix); results are identical. +pub fn build_scene_cached( + graph: &TokenGraph, + recipe: &Value, + req: &RenderRequest, + cache: &SceneCache, ) -> Result { let size_index = recipe .get("sizeScale") @@ -791,9 +1004,10 @@ pub fn build_scene( .collect() }) .unwrap_or_default(); - let scoped = scoped_values(graph, &req.component); + let scoped = cache.scoped(graph, &req.component); let mut cx = Ctx { graph, + cache, req, size_index, option_defaults, @@ -1747,6 +1961,68 @@ mod tests { ); } + #[test] + fn relationship_options_pick_the_default_or_the_most_specific_override() { + let (g, _) = load(); + let recipe: Value = serde_json::from_str( + &std::fs::read_to_string(root().join("visuals/badge.json")).unwrap(), + ) + .unwrap(); + let label_color = |variant: &str, style: &str| { + let mut r = req(&[]); + r.component = "badge".into(); + r.label = "Label".into(); + r.options + .insert("variant".into(), Value::String(variant.into())); + r.options + .insert("style".into(), Value::String(style.into())); + let scene = build_scene(&g, &recipe, &r).unwrap(); + assert!(scene.diagnostics.is_empty(), "{:?}", scene.diagnostics); + let label = scene.nodes.iter().find(|n| n.part == "label").unwrap(); + label + .tokens + .iter() + .find(|t| t.prop == "color") + .unwrap() + .token + .clone() + }; + let white = "color-transparent-static-white-1000"; + let black = "color-transparent-static-black-1000"; + let gray = "color-gray-1000-light"; + assert_eq!( + label_color("accent", "bold"), + white, + "no override: the default" + ); + assert_eq!( + label_color("fuchsia", "outline"), + white, + "default for most outlines" + ); + assert_eq!(label_color("celery", "bold"), black, "light variant, bold"); + assert_eq!( + label_color("yellow", "outline"), + black, + "light variant, outline" + ); + assert_eq!( + label_color("accent", "subtle"), + gray, + "subtle overrides the default" + ); + assert_eq!( + label_color("celery", "subtle"), + gray, + "style, not variant, wins" + ); + assert_eq!( + label_color("notice", "outline"), + gray, + "two pinned options beat the default" + ); + } + #[test] fn badge_fixed_edge_squares_corners_and_maps_weight() { let (g, _) = load(); @@ -1781,7 +2057,7 @@ mod tests { assert_ne!(hover.nodes[0].fill, default.nodes[0].fill); let focus = build_scene(&g, &recipe, &req(&["keyboard-focus"])).unwrap(); assert!(focus.nodes.iter().any(|n| n.kind == "ring")); - assert!(scene_to_svg(&focus).contains("data-part=\"focus-ring\"")); + assert!(scene_to_svg(&focus).contains("data-part=\"focus-indicator\"")); } #[test] @@ -1905,7 +2181,7 @@ mod tests { .as_array() .unwrap() .iter() - .any(|e| !e["candidates"].as_array().unwrap().is_empty())); + .any(|e| e["candidates"].as_array().is_some_and(|c| !c.is_empty()))); let (used, structural) = recipe_options(&recipe); assert!(used.contains(&"isPending".to_string())); assert!(structural.contains(&"isPending".to_string())); diff --git a/sdk/core/tests/fixtures/recipe-lint-baseline.json b/sdk/core/tests/fixtures/recipe-lint-baseline.json index 423081367..6f86f0bf7 100644 --- a/sdk/core/tests/fixtures/recipe-lint-baseline.json +++ b/sdk/core/tests/fixtures/recipe-lint-baseline.json @@ -2,23 +2,11 @@ "SPEC-066": { "action-button": 1 }, - "SPEC-067": { - "action-button": 28, - "badge": 145, - "button": 81 - }, "SPEC-068": { "checkbox": 16 }, "SPEC-069": { - "action-button": 13, "badge": 2, - "button": 42 - }, - "SPEC-070": { - "action-button": 1, - "button": 1, - "checkbox": 1, - "switch": 1 + "button": 4 } } diff --git a/sdk/core/tests/fixtures/recipe-snapshots.json b/sdk/core/tests/fixtures/recipe-snapshots.json new file mode 100644 index 000000000..da7f06fc3 --- /dev/null +++ b/sdk/core/tests/fixtures/recipe-snapshots.json @@ -0,0 +1,787 @@ +{ + "action-button": { + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "fcdfae7b335e4fd4", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "ea24bbba143237dc", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "50365f5f8632ceb6", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "d1442488a24f4596", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "c837d064cc529cbe", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "495abdb9a2085e7e", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "49c10d893fbbf77c", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "760afbc294c2c5ac", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "21d482a3a49a5174", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "da9094704f2c8e40", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "eef9e1f57761f984", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "5812bb62a88b1118", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "1dfbca66db29a984", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "56dfe72dda0b3950", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "19d0020a5a8497c0", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "d28e8c733e5a937c", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "2568636c51da5656", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "9e337ca1183e48e6", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "7901d5fdf6be7736", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "f66f1e8f96fd952e", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "656162f38455787c", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "fef51edef7846274", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "d551327f4dfa19ac", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "4ca4cda9a167fdbc", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "84aa07f104218a10", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "8929d113295b2ae4", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "3cecdbb0632211bc", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "03728ce9e5262990", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "973e754a53fec8a4", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "31aaf2a867bd2510", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "41654cc5ae662c94", + "hasHoldIcon=false,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "62978f6fec3755a8", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "b8bfe3fb3916e14e", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "a8ffeaf84ca17c16", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "e29e4ac040f24c20", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "afdf659db5271ea0", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "512f96bf28afbf82", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "a1bdeecba13e3142", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "271fa03ae6fa5fb0", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "b04ccbfa6eeecea0", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "bcc01665b48647d4", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "7c104a018fcc0a90", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "79d20679020a4930", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "ff4d3336256a0c7c", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "c9299f2ff31705ac", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "ea2f7b1d6ae463d0", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "8bdae934ab2e44dc", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "d7f3866166a63f60", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "766296e1a77fb388", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "9e43a2dfb54b3f50", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "e56eb9991b335726", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "49da2ba3885f385e", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "5635d584ddedc6c0", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "dbaf5ba74b5cd798", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "f2f6ae4288acac4a", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "45b76f31b3269cfa", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "b88c26b1ee4b3c64", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "8d2f41aea73a9590", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "f80ee1ed30941db4", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "2e92b52f6d2f1d98", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "56c7621172b7af78", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "49e3ab9e54d4643c", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "730fdb5ded22dcb4", + "hasHoldIcon=false,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "0397df6859ac34d0", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "8233e0bd125b6bf6", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "82bdc1005ec2639c", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "54dd4ce9056ed284", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "21f211362e4676c2", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "521bc48023c87704", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "ec6306807ef9db62", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "f29a699bee3a25de", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "db20500ca9197d4c", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "362a735c30e19f56", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "9902998492e08efe", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "f205ecf8c46ec2b4", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "394c77289573f1f4", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "5a69e1c03b2635ec", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "8c6f62527101b96c", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "45589b283e8b455e", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "f5d8765dc5e84166", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "6fb0b15eef70a434", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "ee899601680dafea", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "c3f0825cb1340dea", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "66907bb63b8f27aa", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "a9ea9b45bc01c60e", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "0e73cbddadbf5d74", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "3c8b316bc4b88b2c", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "9c91e2b1c93ee8cc", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "8f603d7d31db60a4", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "f59a5669f79e5d14", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "f23ce858eb7697c6", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "c2096c8964bcb69e", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "d13d43fe380f0a3e", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "3a18db30dffa4ea6", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "36d91d6ce46a382c", + "hasHoldIcon=false,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "d075c2b6e371eafc", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "fb7f21c130acbcc8", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "4b1dddf099b727c8", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "c2008db98e88165e", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "e29a75e5b2e476be", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "08826d738c668518", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "468d4459768c10c0", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "f36c51292e5afb22", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "5ea9152c59357cc2", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "cc9a6c7dd761c958", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "df4a5d0e0ffa2bf8", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "948105f697493c12", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "9ae3ed7e22bb177a", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "b914c800fafb5e20", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "1c002a6fb0c401d8", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "58bfbd624b572286", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "ea207baa0a39670e", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "d0207796563d32ae", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "e4fca3d8023dc24e", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "0f4345373dbbf538", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "6bc6aa62ced04378", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "07263c54d145336a", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "a044d249069494aa", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "fadfdd0933c5a108", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "280aaa8ca853dad0", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "7e6238157ce91932", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "c9a5c4a41f4f2d3a", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "3a73a77c61d304b8", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "2ead69e67a2d3d68", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "1567de4cee096b66", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "ae0ad91c5cf4234e", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "329493efafa89c28", + "hasHoldIcon=false,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "7e840421eabded00", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "858ab9c390e80ff2", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "43475b90437a1546", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "268bffddf785e1f4", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "972c0d0d10dc41fc", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "c79da470174561a0", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "b7c25e90130525a0", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "6a15e696133cbdae", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "ee22eb2add9a031a", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "c8a317ade8e31f08", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "0fa94a124f3bfa54", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "249148845e7e7ab4", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "01dafff7f1855f90", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "1fca7f65e79a3afc", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "7b03c38ed2efc720", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "50ec212bf14b8474", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "0ef4f402b706e820", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "b23545c6431a13d0", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "205c6851068fb1b8", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "48291c3134345d28", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "057c477b04189958", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "d0507249053dec22", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "19120fc5928d14a6", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "9a68cc962e300e06", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "09e9a53ab8a783a6", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "78cbdc546ba96730", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "1788cdb3aeba2d6c", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "f9b71781c9ac3090", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "eeacb7e567c8d9d4", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "c247243ee4c7b2c8", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "6cd78fe5d2bcd804", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "96dd5a4bcbc89a14", + "hasHoldIcon=true,hideLabel=false,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "c5320077100b9b10", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "d6fe576fd36ed6f8", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "13468e24318e2ae8", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "a7b01c3d1e19bd42", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "8884d3f17dfcc61a", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "9f638c3abe403058", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "fead8241fcf77e90", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "367c67a0fb6a3046", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "2ca09d31916ccb2e", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "6ee41ab4a9db928c", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "c05182ad36dc56a0", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "879cc9fbfbf9a7a4", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "c80086ed68f08aa0", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "6555d84cbaa00938", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "b82bde1675e4b264", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "a35d7035b005a34c", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "20110b4a9511e9a0", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "8fae21fb85f970ea", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "4b02a6cdd4f6146a", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "b60581fd5a8c1c88", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "df64362e88453468", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "50359871aa48d226", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "9a078278caea5956", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "d3f7213d68a3b688", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "66fa022d88ce8b80", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "3822f92f896918c8", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "1d88831dc773eab4", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "c90caa01b6761324", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "0d9e926881b03540", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "e0871617fe64f380", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "8145a4d9a26a35c4", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "d88979660dea2370", + "hasHoldIcon=true,hideLabel=false,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "19e3fe46c3816ac4", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "2e7d7425ceb7325e", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "a63bdca9819c0c50", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "32f3e3c61b8446c4", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "52784e6436db1baa", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "37bcb5bf1865aa90", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "be7e93b7ca61444e", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "f7d6a5f013a9f63e", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "68abcd7b02666d08", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "038c2742dd598328", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "4c20a6498cbf1038", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "28e3c7c860d4b9aa", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "d5f3aaff72296f42", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "7ec455766adcac02", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "ac074f40d02aec1a", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "dbe756c2d0e19330", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "7170c0a61c458060", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "0512d35f995a1d30", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "cfb905c9d041e156", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "2f35adbf4a882252", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "f197840e18058a0a", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "96aff360d9fb0a06", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "10239089be018ca8", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "ce19c6d83174d0b0", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "44608fc219408200", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "74d8e21ae7a2e752", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "54bcb36ba66fac6a", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "05c6e0283b126820", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "7313d295e3e86720", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "a08d850d902f80d0", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "68ef14bfaa30fef0", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "f0f5c27e4344bdb2", + "hasHoldIcon=true,hideLabel=true,isDisabled=false,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "a83608494406fc8a", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "16e7e81741815900", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "066185ac51a9c260", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "5686ee92259f9246", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "afc1228f353b3466", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "0f96006ceb3c06f0", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "85c94bdcba6ad3c8", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "cbe2415835021132", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "24ba43378189c9d2", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "6557a5ca72c31d0e", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "56277abca7d64b26", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "f5847c2c393cedc4", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "0f2a2e1b9c1455e4", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "c1f62a5ed848c9da", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "933f77d9f5b3b762", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "bb8e47342e082704", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=false,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "25990d673de722ac", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"black\"": "f5f7040c0c153d96", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=false,staticColor=\"white\"": "4e2b0a3bc09f6536", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"black\"": "211f462ab01f2500", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=false,isSelected=true,staticColor=\"white\"": "140c6e17c8f3efc0", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"black\"": "5c8a1cce3102a26a", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=false,staticColor=\"white\"": "547ad4ab6ef24eaa", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"black\"": "ede45f5daf431eb0", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=false,isQuiet=true,isSelected=true,staticColor=\"white\"": "6cfe215d0b166078", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"black\"": "8492cca9e737b074", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=false,staticColor=\"white\"": "68de2a45b29e8834", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"black\"": "0259c3a31b13f9be", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=false,isSelected=true,staticColor=\"white\"": "ec7560cde1f5b1e6", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"black\"": "def13acf0960b364", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=false,staticColor=\"white\"": "39b5b815e91fcc4c", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"black\"": "f676e1fd2da6e35a", + "hasHoldIcon=true,hideLabel=true,isDisabled=true,isEmphasized=true,isPending=true,isQuiet=true,isSelected=true,staticColor=\"white\"": "618392ba0b226282" + }, + "badge": { + "fixed=\"bottom\",style=\"bold\",variant=\"accent\"": "242266c3ac6080ba", + "fixed=\"bottom\",style=\"bold\",variant=\"blue\"": "875395124bfdd1b2", + "fixed=\"bottom\",style=\"bold\",variant=\"brown\"": "26b328fe4f57b22a", + "fixed=\"bottom\",style=\"bold\",variant=\"celery\"": "f765c8a9bfc3d782", + "fixed=\"bottom\",style=\"bold\",variant=\"chartreuse\"": "75c5bf884266ba62", + "fixed=\"bottom\",style=\"bold\",variant=\"cinnamon\"": "bb50e598086eddfc", + "fixed=\"bottom\",style=\"bold\",variant=\"cyan\"": "f38cb9f0e6830cfc", + "fixed=\"bottom\",style=\"bold\",variant=\"fuchsia\"": "eb36d1a555560c88", + "fixed=\"bottom\",style=\"bold\",variant=\"gray\"": "deefd164106d7be4", + "fixed=\"bottom\",style=\"bold\",variant=\"green\"": "7f8ff92aa88e5584", + "fixed=\"bottom\",style=\"bold\",variant=\"indigo\"": "ae735a7ba7cd8082", + "fixed=\"bottom\",style=\"bold\",variant=\"informative\"": "9a19e810b3b4cd4e", + "fixed=\"bottom\",style=\"bold\",variant=\"magenta\"": "de4d1810ec5d6e40", + "fixed=\"bottom\",style=\"bold\",variant=\"negative\"": "a61ad5a02bacb92c", + "fixed=\"bottom\",style=\"bold\",variant=\"neutral\"": "140584f8dc52db70", + "fixed=\"bottom\",style=\"bold\",variant=\"notice\"": "4944bfc32b3efa18", + "fixed=\"bottom\",style=\"bold\",variant=\"orange\"": "288a072fed574ce8", + "fixed=\"bottom\",style=\"bold\",variant=\"pink\"": "8c85bfc2d5c83e6c", + "fixed=\"bottom\",style=\"bold\",variant=\"positive\"": "14e61fe0f83f4a68", + "fixed=\"bottom\",style=\"bold\",variant=\"purple\"": "31d1aa5cea1d4a6a", + "fixed=\"bottom\",style=\"bold\",variant=\"red\"": "14fa521d6f68a878", + "fixed=\"bottom\",style=\"bold\",variant=\"seafoam\"": "5ccb5b605db465ac", + "fixed=\"bottom\",style=\"bold\",variant=\"silver\"": "d04fbcfdeec5d5b6", + "fixed=\"bottom\",style=\"bold\",variant=\"turquoise\"": "edac9478f0c0a768", + "fixed=\"bottom\",style=\"bold\",variant=\"yellow\"": "853c2a76370e9374", + "fixed=\"bottom\",style=\"outline\",variant=\"accent\"": "391463b3c3a1fe36", + "fixed=\"bottom\",style=\"outline\",variant=\"blue\"": "c738110fa350672c", + "fixed=\"bottom\",style=\"outline\",variant=\"brown\"": "70570eb95c91433c", + "fixed=\"bottom\",style=\"outline\",variant=\"celery\"": "c1e504e00976eb64", + "fixed=\"bottom\",style=\"outline\",variant=\"chartreuse\"": "9d9218fc0262e4bc", + "fixed=\"bottom\",style=\"outline\",variant=\"cinnamon\"": "73693c80c597ad4a", + "fixed=\"bottom\",style=\"outline\",variant=\"cyan\"": "db3a2c2944404fe6", + "fixed=\"bottom\",style=\"outline\",variant=\"fuchsia\"": "19fa9ca2b33a9b6e", + "fixed=\"bottom\",style=\"outline\",variant=\"gray\"": "f23199724283480a", + "fixed=\"bottom\",style=\"outline\",variant=\"green\"": "7e48df25f35e6c46", + "fixed=\"bottom\",style=\"outline\",variant=\"indigo\"": "d71f3fc47da9e130", + "fixed=\"bottom\",style=\"outline\",variant=\"informative\"": "9e6d3ec162c8f896", + "fixed=\"bottom\",style=\"outline\",variant=\"magenta\"": "e9eb438d8d905666", + "fixed=\"bottom\",style=\"outline\",variant=\"negative\"": "fe0029ee00aada86", + "fixed=\"bottom\",style=\"outline\",variant=\"neutral\"": "1cce204255a3157e", + "fixed=\"bottom\",style=\"outline\",variant=\"notice\"": "faba21adb65912c0", + "fixed=\"bottom\",style=\"outline\",variant=\"orange\"": "4b197a7f5e98682a", + "fixed=\"bottom\",style=\"outline\",variant=\"pink\"": "c2cadefb3920b932", + "fixed=\"bottom\",style=\"outline\",variant=\"positive\"": "5e845f81d6eea126", + "fixed=\"bottom\",style=\"outline\",variant=\"purple\"": "28aa67f5d568f54c", + "fixed=\"bottom\",style=\"outline\",variant=\"red\"": "6a9c740b236f4c0a", + "fixed=\"bottom\",style=\"outline\",variant=\"seafoam\"": "007ed840d8a47752", + "fixed=\"bottom\",style=\"outline\",variant=\"silver\"": "5e5301562f8c5220", + "fixed=\"bottom\",style=\"outline\",variant=\"turquoise\"": "5ea6fc058efdd3e6", + "fixed=\"bottom\",style=\"outline\",variant=\"yellow\"": "7369ed0a18c76d9a", + "fixed=\"bottom\",style=\"subtle\",variant=\"accent\"": "7c80462c4a8033c8", + "fixed=\"bottom\",style=\"subtle\",variant=\"blue\"": "923e5d59c6cdddb8", + "fixed=\"bottom\",style=\"subtle\",variant=\"brown\"": "42f1ed6b4d9250e6", + "fixed=\"bottom\",style=\"subtle\",variant=\"celery\"": "c29a1f1ac245c33e", + "fixed=\"bottom\",style=\"subtle\",variant=\"chartreuse\"": "fc747b4b17f8f622", + "fixed=\"bottom\",style=\"subtle\",variant=\"cinnamon\"": "464c1277cc981b0c", + "fixed=\"bottom\",style=\"subtle\",variant=\"cyan\"": "70142c454a15d5ce", + "fixed=\"bottom\",style=\"subtle\",variant=\"fuchsia\"": "6fd463a6f1f72848", + "fixed=\"bottom\",style=\"subtle\",variant=\"gray\"": "b7ab1997dbb08d1c", + "fixed=\"bottom\",style=\"subtle\",variant=\"green\"": "a0f0d4c7aafbf93a", + "fixed=\"bottom\",style=\"subtle\",variant=\"indigo\"": "cff7ea75f12aa54a", + "fixed=\"bottom\",style=\"subtle\",variant=\"informative\"": "523c3b67a9f2ef24", + "fixed=\"bottom\",style=\"subtle\",variant=\"magenta\"": "c1b97c9485b4db30", + "fixed=\"bottom\",style=\"subtle\",variant=\"negative\"": "872d49d70babc57a", + "fixed=\"bottom\",style=\"subtle\",variant=\"neutral\"": "9f6003dd16c4a19c", + "fixed=\"bottom\",style=\"subtle\",variant=\"notice\"": "66cef319e9d7667a", + "fixed=\"bottom\",style=\"subtle\",variant=\"orange\"": "4a80f178ef9ed9fa", + "fixed=\"bottom\",style=\"subtle\",variant=\"pink\"": "daedb8cd9153a9e6", + "fixed=\"bottom\",style=\"subtle\",variant=\"positive\"": "88b16d230e399c5e", + "fixed=\"bottom\",style=\"subtle\",variant=\"purple\"": "d4c2688b6c16c8f4", + "fixed=\"bottom\",style=\"subtle\",variant=\"red\"": "db4bc381a9536ce6", + "fixed=\"bottom\",style=\"subtle\",variant=\"seafoam\"": "1dcb0b2b28fe5b00", + "fixed=\"bottom\",style=\"subtle\",variant=\"silver\"": "0af440647ee60034", + "fixed=\"bottom\",style=\"subtle\",variant=\"turquoise\"": "ae6a1549907bd5f2", + "fixed=\"bottom\",style=\"subtle\",variant=\"yellow\"": "24e4a14577fb996e", + "fixed=\"left\",style=\"bold\",variant=\"accent\"": "bd9cb4b1bc1d7acb", + "fixed=\"left\",style=\"bold\",variant=\"blue\"": "d30f514894e6d373", + "fixed=\"left\",style=\"bold\",variant=\"brown\"": "2eb84c5bf8bbae11", + "fixed=\"left\",style=\"bold\",variant=\"celery\"": "3c47fb6a58e209f3", + "fixed=\"left\",style=\"bold\",variant=\"chartreuse\"": "2a14b60d722416db", + "fixed=\"left\",style=\"bold\",variant=\"cinnamon\"": "29bfe2b84411cf5f", + "fixed=\"left\",style=\"bold\",variant=\"cyan\"": "2f8ba2fe77151833", + "fixed=\"left\",style=\"bold\",variant=\"fuchsia\"": "b6db377dfd5b26e3", + "fixed=\"left\",style=\"bold\",variant=\"gray\"": "e77c5385ec4e7ec3", + "fixed=\"left\",style=\"bold\",variant=\"green\"": "91d6fdec57d3fd57", + "fixed=\"left\",style=\"bold\",variant=\"indigo\"": "bc309835bb0880ad", + "fixed=\"left\",style=\"bold\",variant=\"informative\"": "4e042dfd89bc11c3", + "fixed=\"left\",style=\"bold\",variant=\"magenta\"": "60a34e155e01d9bd", + "fixed=\"left\",style=\"bold\",variant=\"negative\"": "445138c28df2ae13", + "fixed=\"left\",style=\"bold\",variant=\"neutral\"": "bf00724565d147eb", + "fixed=\"left\",style=\"bold\",variant=\"notice\"": "bae1c94631eceedd", + "fixed=\"left\",style=\"bold\",variant=\"orange\"": "857d74ba98727309", + "fixed=\"left\",style=\"bold\",variant=\"pink\"": "35681d931a1237b7", + "fixed=\"left\",style=\"bold\",variant=\"positive\"": "e2e41829856ddbeb", + "fixed=\"left\",style=\"bold\",variant=\"purple\"": "f656ea27cc6a8d31", + "fixed=\"left\",style=\"bold\",variant=\"red\"": "4be315eebe91645f", + "fixed=\"left\",style=\"bold\",variant=\"seafoam\"": "23aed63d722fd877", + "fixed=\"left\",style=\"bold\",variant=\"silver\"": "8ff124f847f152f1", + "fixed=\"left\",style=\"bold\",variant=\"turquoise\"": "d19b367507f2735b", + "fixed=\"left\",style=\"bold\",variant=\"yellow\"": "9b316315a394e50d", + "fixed=\"left\",style=\"outline\",variant=\"accent\"": "8036139528541955", + "fixed=\"left\",style=\"outline\",variant=\"blue\"": "53547000861d1dc1", + "fixed=\"left\",style=\"outline\",variant=\"brown\"": "960740393a986057", + "fixed=\"left\",style=\"outline\",variant=\"celery\"": "74e31358befd37b9", + "fixed=\"left\",style=\"outline\",variant=\"chartreuse\"": "74ffeacebd99d42d", + "fixed=\"left\",style=\"outline\",variant=\"cinnamon\"": "35c7800bffcb3205", + "fixed=\"left\",style=\"outline\",variant=\"cyan\"": "9590ff7d20306d65", + "fixed=\"left\",style=\"outline\",variant=\"fuchsia\"": "0b14cca86cb4e40d", + "fixed=\"left\",style=\"outline\",variant=\"gray\"": "1628f8e645594c55", + "fixed=\"left\",style=\"outline\",variant=\"green\"": "2199874f095cefd5", + "fixed=\"left\",style=\"outline\",variant=\"indigo\"": "760a7d2dff7654a3", + "fixed=\"left\",style=\"outline\",variant=\"informative\"": "7feee4faef8b1f45", + "fixed=\"left\",style=\"outline\",variant=\"magenta\"": "dd2a42f155139d33", + "fixed=\"left\",style=\"outline\",variant=\"negative\"": "392683c1736385ed", + "fixed=\"left\",style=\"outline\",variant=\"neutral\"": "2ed4254ba5a53b09", + "fixed=\"left\",style=\"outline\",variant=\"notice\"": "f7a4a1deddd7176f", + "fixed=\"left\",style=\"outline\",variant=\"orange\"": "a53995ba810babe7", + "fixed=\"left\",style=\"outline\",variant=\"pink\"": "741b45e21296c8ed", + "fixed=\"left\",style=\"outline\",variant=\"positive\"": "24a00cdd172791e9", + "fixed=\"left\",style=\"outline\",variant=\"purple\"": "bc4c03f19a35ca8b", + "fixed=\"left\",style=\"outline\",variant=\"red\"": "cbb64667aa8783f5", + "fixed=\"left\",style=\"outline\",variant=\"seafoam\"": "6ff5ed27df3720e1", + "fixed=\"left\",style=\"outline\",variant=\"silver\"": "94273fc17b154267", + "fixed=\"left\",style=\"outline\",variant=\"turquoise\"": "a64dde8fb8d19809", + "fixed=\"left\",style=\"outline\",variant=\"yellow\"": "439af3fc1af0ad2f", + "fixed=\"left\",style=\"subtle\",variant=\"accent\"": "5381b5385e50650b", + "fixed=\"left\",style=\"subtle\",variant=\"blue\"": "8373453f7cbe7393", + "fixed=\"left\",style=\"subtle\",variant=\"brown\"": "2a17385ee21ed1db", + "fixed=\"left\",style=\"subtle\",variant=\"celery\"": "83db0aa7e6334579", + "fixed=\"left\",style=\"subtle\",variant=\"chartreuse\"": "ee74f7e8dc30a935", + "fixed=\"left\",style=\"subtle\",variant=\"cinnamon\"": "97b7fab714a6b97b", + "fixed=\"left\",style=\"subtle\",variant=\"cyan\"": "01af0559ac059389", + "fixed=\"left\",style=\"subtle\",variant=\"fuchsia\"": "a722588a71c2352b", + "fixed=\"left\",style=\"subtle\",variant=\"gray\"": "0ab7e8441b61d335", + "fixed=\"left\",style=\"subtle\",variant=\"green\"": "9c2819efa86c77d1", + "fixed=\"left\",style=\"subtle\",variant=\"indigo\"": "79030a760d8068db", + "fixed=\"left\",style=\"subtle\",variant=\"informative\"": "dd9867f1555d1d93", + "fixed=\"left\",style=\"subtle\",variant=\"magenta\"": "6cee507fc2244e9f", + "fixed=\"left\",style=\"subtle\",variant=\"negative\"": "266e00eff66de3f5", + "fixed=\"left\",style=\"subtle\",variant=\"neutral\"": "4cc5542c64acaf3d", + "fixed=\"left\",style=\"subtle\",variant=\"notice\"": "dba22de8ae5986a9", + "fixed=\"left\",style=\"subtle\",variant=\"orange\"": "fa0dd914a6667745", + "fixed=\"left\",style=\"subtle\",variant=\"pink\"": "5575122a165f8d69", + "fixed=\"left\",style=\"subtle\",variant=\"positive\"": "f600244e5bf8c40d", + "fixed=\"left\",style=\"subtle\",variant=\"purple\"": "5da0f5adf3a724b5", + "fixed=\"left\",style=\"subtle\",variant=\"red\"": "1fdab8ff57117a69", + "fixed=\"left\",style=\"subtle\",variant=\"seafoam\"": "05e2c21f1b6fc107", + "fixed=\"left\",style=\"subtle\",variant=\"silver\"": "d4c00b036e86eeed", + "fixed=\"left\",style=\"subtle\",variant=\"turquoise\"": "919544174e4f7df1", + "fixed=\"left\",style=\"subtle\",variant=\"yellow\"": "be5571892bfdc381", + "fixed=\"none\",style=\"bold\",variant=\"accent\"": "95a91c99e46a8879", + "fixed=\"none\",style=\"bold\",variant=\"blue\"": "4ab1d451eb852581", + "fixed=\"none\",style=\"bold\",variant=\"brown\"": "6aefac2eda99935b", + "fixed=\"none\",style=\"bold\",variant=\"celery\"": "cf61d66dd731dc91", + "fixed=\"none\",style=\"bold\",variant=\"chartreuse\"": "37ce02bef7dc8655", + "fixed=\"none\",style=\"bold\",variant=\"cinnamon\"": "8e94b700ee1b2047", + "fixed=\"none\",style=\"bold\",variant=\"cyan\"": "f41076a196a2605f", + "fixed=\"none\",style=\"bold\",variant=\"fuchsia\"": "8bd3700f351df4eb", + "fixed=\"none\",style=\"bold\",variant=\"gray\"": "17066beab0802737", + "fixed=\"none\",style=\"bold\",variant=\"green\"": "3b1498e276495d6f", + "fixed=\"none\",style=\"bold\",variant=\"indigo\"": "5226607759733507", + "fixed=\"none\",style=\"bold\",variant=\"informative\"": "d7279bf993572ca1", + "fixed=\"none\",style=\"bold\",variant=\"magenta\"": "36da260538bae8c9", + "fixed=\"none\",style=\"bold\",variant=\"negative\"": "3c390f3a38f599df", + "fixed=\"none\",style=\"bold\",variant=\"neutral\"": "248fcd44e750cff9", + "fixed=\"none\",style=\"bold\",variant=\"notice\"": "e74c3fd2cc63aeb9", + "fixed=\"none\",style=\"bold\",variant=\"orange\"": "9e15521b4d203115", + "fixed=\"none\",style=\"bold\",variant=\"pink\"": "f1057ee5141c4b67", + "fixed=\"none\",style=\"bold\",variant=\"positive\"": "85bd90544562dd6b", + "fixed=\"none\",style=\"bold\",variant=\"purple\"": "b6b95ec4e2a1ee93", + "fixed=\"none\",style=\"bold\",variant=\"red\"": "6640884aaa01979b", + "fixed=\"none\",style=\"bold\",variant=\"seafoam\"": "00ac42c5223fd48f", + "fixed=\"none\",style=\"bold\",variant=\"silver\"": "1313031c559f80a3", + "fixed=\"none\",style=\"bold\",variant=\"turquoise\"": "894647516def161b", + "fixed=\"none\",style=\"bold\",variant=\"yellow\"": "385d89e61a6ff219", + "fixed=\"none\",style=\"outline\",variant=\"accent\"": "d362dec49a9fb5c7", + "fixed=\"none\",style=\"outline\",variant=\"blue\"": "8be96609ad9d9309", + "fixed=\"none\",style=\"outline\",variant=\"brown\"": "621579680bb30b93", + "fixed=\"none\",style=\"outline\",variant=\"celery\"": "382a5623b3dc2941", + "fixed=\"none\",style=\"outline\",variant=\"chartreuse\"": "ec5a2820c592f1f9", + "fixed=\"none\",style=\"outline\",variant=\"cinnamon\"": "b2517d9b4bfe5147", + "fixed=\"none\",style=\"outline\",variant=\"cyan\"": "37c42c71532daba7", + "fixed=\"none\",style=\"outline\",variant=\"fuchsia\"": "270c8db38216f14f", + "fixed=\"none\",style=\"outline\",variant=\"gray\"": "676c40ee4d9b9887", + "fixed=\"none\",style=\"outline\",variant=\"green\"": "0db74748d4af52d3", + "fixed=\"none\",style=\"outline\",variant=\"indigo\"": "da008a7344fa69af", + "fixed=\"none\",style=\"outline\",variant=\"informative\"": "4bb7ed4abd0b826b", + "fixed=\"none\",style=\"outline\",variant=\"magenta\"": "160c2d5b40da9ee9", + "fixed=\"none\",style=\"outline\",variant=\"negative\"": "07d9ed3c5abc85af", + "fixed=\"none\",style=\"outline\",variant=\"neutral\"": "b7ffa209b504fd8f", + "fixed=\"none\",style=\"outline\",variant=\"notice\"": "36d76dc7a1713f77", + "fixed=\"none\",style=\"outline\",variant=\"orange\"": "ebc5a61386f5bbd9", + "fixed=\"none\",style=\"outline\",variant=\"pink\"": "e0655d8949120b67", + "fixed=\"none\",style=\"outline\",variant=\"positive\"": "7d22fc0d0f8f5ef3", + "fixed=\"none\",style=\"outline\",variant=\"purple\"": "59d27a601ed7c6bb", + "fixed=\"none\",style=\"outline\",variant=\"red\"": "8684e8b649c085a3", + "fixed=\"none\",style=\"outline\",variant=\"seafoam\"": "4fbaa1fd9431702b", + "fixed=\"none\",style=\"outline\",variant=\"silver\"": "d061e48d5341afdf", + "fixed=\"none\",style=\"outline\",variant=\"turquoise\"": "395662bdf223a8d3", + "fixed=\"none\",style=\"outline\",variant=\"yellow\"": "a615c01965725579", + "fixed=\"none\",style=\"subtle\",variant=\"accent\"": "90d548885b985d61", + "fixed=\"none\",style=\"subtle\",variant=\"blue\"": "df076a00058f2949", + "fixed=\"none\",style=\"subtle\",variant=\"brown\"": "36b87c4480a567ff", + "fixed=\"none\",style=\"subtle\",variant=\"celery\"": "cf5ddd09b28b2d85", + "fixed=\"none\",style=\"subtle\",variant=\"chartreuse\"": "cba3fa24b10ab8b1", + "fixed=\"none\",style=\"subtle\",variant=\"cinnamon\"": "9ff1d6cead87cba1", + "fixed=\"none\",style=\"subtle\",variant=\"cyan\"": "c333abc69499dc4d", + "fixed=\"none\",style=\"subtle\",variant=\"fuchsia\"": "0e7f273b76e62db1", + "fixed=\"none\",style=\"subtle\",variant=\"gray\"": "979325d7d095fdc3", + "fixed=\"none\",style=\"subtle\",variant=\"green\"": "ee78097ef2ce7285", + "fixed=\"none\",style=\"subtle\",variant=\"indigo\"": "4a7480c64cf7ec8b", + "fixed=\"none\",style=\"subtle\",variant=\"informative\"": "8ca4afdf7fdf9a71", + "fixed=\"none\",style=\"subtle\",variant=\"magenta\"": "dbad0df2dc77eb81", + "fixed=\"none\",style=\"subtle\",variant=\"negative\"": "5d6d2c84d36f6e09", + "fixed=\"none\",style=\"subtle\",variant=\"neutral\"": "a94a78098f0d9ea3", + "fixed=\"none\",style=\"subtle\",variant=\"notice\"": "992c4e75589fc9bd", + "fixed=\"none\",style=\"subtle\",variant=\"orange\"": "ec985bcdbc875f61", + "fixed=\"none\",style=\"subtle\",variant=\"pink\"": "31481567753e54f1", + "fixed=\"none\",style=\"subtle\",variant=\"positive\"": "5d35e4c96bb78839", + "fixed=\"none\",style=\"subtle\",variant=\"purple\"": "14af717e966aa2ff", + "fixed=\"none\",style=\"subtle\",variant=\"red\"": "c7e5eddf1bc4c225", + "fixed=\"none\",style=\"subtle\",variant=\"seafoam\"": "d21b5d897105cb89", + "fixed=\"none\",style=\"subtle\",variant=\"silver\"": "086b749f25a65f7b", + "fixed=\"none\",style=\"subtle\",variant=\"turquoise\"": "dad3c66a10beaaf5", + "fixed=\"none\",style=\"subtle\",variant=\"yellow\"": "42a5156851917c05", + "fixed=\"right\",style=\"bold\",variant=\"accent\"": "89d6547196528bc9", + "fixed=\"right\",style=\"bold\",variant=\"blue\"": "c7a06e954f7c1081", + "fixed=\"right\",style=\"bold\",variant=\"brown\"": "867ab95d3ebf8e2b", + "fixed=\"right\",style=\"bold\",variant=\"celery\"": "0ed5a1b82721c111", + "fixed=\"right\",style=\"bold\",variant=\"chartreuse\"": "8a8349b95cc078c9", + "fixed=\"right\",style=\"bold\",variant=\"cinnamon\"": "fc30d18d91e9d83d", + "fixed=\"right\",style=\"bold\",variant=\"cyan\"": "5142249505888d11", + "fixed=\"right\",style=\"bold\",variant=\"fuchsia\"": "959e8d6c6caa77a1", + "fixed=\"right\",style=\"bold\",variant=\"gray\"": "9832b7ec6143cf19", + "fixed=\"right\",style=\"bold\",variant=\"green\"": "a015e950d24d6fb9", + "fixed=\"right\",style=\"bold\",variant=\"indigo\"": "6fe9ed0b1d67195f", + "fixed=\"right\",style=\"bold\",variant=\"informative\"": "4a8b95d88731c279", + "fixed=\"right\",style=\"bold\",variant=\"magenta\"": "a60917c421a1ddfb", + "fixed=\"right\",style=\"bold\",variant=\"negative\"": "7b11b933136f3329", + "fixed=\"right\",style=\"bold\",variant=\"neutral\"": "96258d545aa68095", + "fixed=\"right\",style=\"bold\",variant=\"notice\"": "9e0908f423c6509b", + "fixed=\"right\",style=\"bold\",variant=\"orange\"": "5a45ca0732e97c2b", + "fixed=\"right\",style=\"bold\",variant=\"pink\"": "3b10bf2ff3dee20d", + "fixed=\"right\",style=\"bold\",variant=\"positive\"": "eddd1cd6adcce11d", + "fixed=\"right\",style=\"bold\",variant=\"purple\"": "cdbc7085578dab3f", + "fixed=\"right\",style=\"bold\",variant=\"red\"": "2b8e95a654a2724d", + "fixed=\"right\",style=\"bold\",variant=\"seafoam\"": "b31b2dc75470a8c9", + "fixed=\"right\",style=\"bold\",variant=\"silver\"": "151a298c7ae6805b", + "fixed=\"right\",style=\"bold\",variant=\"turquoise\"": "30c87b00d0560e11", + "fixed=\"right\",style=\"bold\",variant=\"yellow\"": "e6b7b27354415e5f", + "fixed=\"right\",style=\"outline\",variant=\"accent\"": "fe8dcf88c8ff9c69", + "fixed=\"right\",style=\"outline\",variant=\"blue\"": "7aac79ce106a2447", + "fixed=\"right\",style=\"outline\",variant=\"brown\"": "b192b026c5c548b1", + "fixed=\"right\",style=\"outline\",variant=\"celery\"": "3668ba3a488ee1ff", + "fixed=\"right\",style=\"outline\",variant=\"chartreuse\"": "aebcb33896d49c23", + "fixed=\"right\",style=\"outline\",variant=\"cinnamon\"": "2a66f50a238f9d33", + "fixed=\"right\",style=\"outline\",variant=\"cyan\"": "5e22970a144e0363", + "fixed=\"right\",style=\"outline\",variant=\"fuchsia\"": "e4929c044d667463", + "fixed=\"right\",style=\"outline\",variant=\"gray\"": "29f01681266c5db3", + "fixed=\"right\",style=\"outline\",variant=\"green\"": "d134171a1cf6056f", + "fixed=\"right\",style=\"outline\",variant=\"indigo\"": "4f65a42cc3082a45", + "fixed=\"right\",style=\"outline\",variant=\"informative\"": "d0184fd45b99de41", + "fixed=\"right\",style=\"outline\",variant=\"magenta\"": "31beb4c31788f6c1", + "fixed=\"right\",style=\"outline\",variant=\"negative\"": "c6b7159e2b1f7ff9", + "fixed=\"right\",style=\"outline\",variant=\"neutral\"": "c0037b02409535cd", + "fixed=\"right\",style=\"outline\",variant=\"notice\"": "d6ff2885c2d57433", + "fixed=\"right\",style=\"outline\",variant=\"orange\"": "00c39308c40b9341", + "fixed=\"right\",style=\"outline\",variant=\"pink\"": "2b8b21df16d582db", + "fixed=\"right\",style=\"outline\",variant=\"positive\"": "a06e7ef7c1f947b9", + "fixed=\"right\",style=\"outline\",variant=\"purple\"": "df1dc557335b0401", + "fixed=\"right\",style=\"outline\",variant=\"red\"": "63beb69362d495db", + "fixed=\"right\",style=\"outline\",variant=\"seafoam\"": "8d47a6aed196caf3", + "fixed=\"right\",style=\"outline\",variant=\"silver\"": "d5254669c3d2ab49", + "fixed=\"right\",style=\"outline\",variant=\"turquoise\"": "85f152c262b47cbf", + "fixed=\"right\",style=\"outline\",variant=\"yellow\"": "a12bcaec9c639461", + "fixed=\"right\",style=\"subtle\",variant=\"accent\"": "8c843f8654b3039d", + "fixed=\"right\",style=\"subtle\",variant=\"blue\"": "167bb20c10ad3ed5", + "fixed=\"right\",style=\"subtle\",variant=\"brown\"": "a72f20986e02cd91", + "fixed=\"right\",style=\"subtle\",variant=\"celery\"": "a22cbd95fbdac00b", + "fixed=\"right\",style=\"subtle\",variant=\"chartreuse\"": "5625726baf77bc17", + "fixed=\"right\",style=\"subtle\",variant=\"cinnamon\"": "abe116401167de35", + "fixed=\"right\",style=\"subtle\",variant=\"cyan\"": "38e679ec1d0b770f", + "fixed=\"right\",style=\"subtle\",variant=\"fuchsia\"": "75a4c416218ff565", + "fixed=\"right\",style=\"subtle\",variant=\"gray\"": "e836f11fc9a92a67", + "fixed=\"right\",style=\"subtle\",variant=\"green\"": "bc7d297958b71abb", + "fixed=\"right\",style=\"subtle\",variant=\"indigo\"": "0b2bdc451084fd79", + "fixed=\"right\",style=\"subtle\",variant=\"informative\"": "9aa3c9a017ed9735", + "fixed=\"right\",style=\"subtle\",variant=\"magenta\"": "80d6a9434ad51fb5", + "fixed=\"right\",style=\"subtle\",variant=\"negative\"": "b4cd0a6fbadb2473", + "fixed=\"right\",style=\"subtle\",variant=\"neutral\"": "bbe6083ab3fdfdef", + "fixed=\"right\",style=\"subtle\",variant=\"notice\"": "1dc7fb0b54a3ace7", + "fixed=\"right\",style=\"subtle\",variant=\"orange\"": "0b172f90cfb9916f", + "fixed=\"right\",style=\"subtle\",variant=\"pink\"": "9049926e6af5a977", + "fixed=\"right\",style=\"subtle\",variant=\"positive\"": "47b8b11a4a0cc24f", + "fixed=\"right\",style=\"subtle\",variant=\"purple\"": "fd702751f2cc2207", + "fixed=\"right\",style=\"subtle\",variant=\"red\"": "487838fba4787c67", + "fixed=\"right\",style=\"subtle\",variant=\"seafoam\"": "1bd24b639e9a238d", + "fixed=\"right\",style=\"subtle\",variant=\"silver\"": "c0df8b7a37969eeb", + "fixed=\"right\",style=\"subtle\",variant=\"turquoise\"": "7cd530ae18682ad7", + "fixed=\"right\",style=\"subtle\",variant=\"yellow\"": "95dc46a0802e52eb", + "fixed=\"top\",style=\"bold\",variant=\"accent\"": "6fe0b437354ba9ee", + "fixed=\"top\",style=\"bold\",variant=\"blue\"": "0d876e67b2057a86", + "fixed=\"top\",style=\"bold\",variant=\"brown\"": "677b3ee0e47b2172", + "fixed=\"top\",style=\"bold\",variant=\"celery\"": "e2884123db50860a", + "fixed=\"top\",style=\"bold\",variant=\"chartreuse\"": "21b0dddfe7681dd2", + "fixed=\"top\",style=\"bold\",variant=\"cinnamon\"": "d2b8b4c4eef7cd08", + "fixed=\"top\",style=\"bold\",variant=\"cyan\"": "8b0acd228e30bb98", + "fixed=\"top\",style=\"bold\",variant=\"fuchsia\"": "ee1d4099ed2e2bdc", + "fixed=\"top\",style=\"bold\",variant=\"gray\"": "50f55ae1ca9c1ec8", + "fixed=\"top\",style=\"bold\",variant=\"green\"": "64d4d6e4c9821f4c", + "fixed=\"top\",style=\"bold\",variant=\"indigo\"": "04c9ba2775933822", + "fixed=\"top\",style=\"bold\",variant=\"informative\"": "928c6a51651cfa6a", + "fixed=\"top\",style=\"bold\",variant=\"magenta\"": "c3ea2a5501bf92c4", + "fixed=\"top\",style=\"bold\",variant=\"negative\"": "21c34eaff15d2fe8", + "fixed=\"top\",style=\"bold\",variant=\"neutral\"": "9aab56a8d3a8e678", + "fixed=\"top\",style=\"bold\",variant=\"notice\"": "90c6e355f7b802a0", + "fixed=\"top\",style=\"bold\",variant=\"orange\"": "f4d366a7da2bfd04", + "fixed=\"top\",style=\"bold\",variant=\"pink\"": "dad173e103f540e8", + "fixed=\"top\",style=\"bold\",variant=\"positive\"": "c36817ecf8bf9bc0", + "fixed=\"top\",style=\"bold\",variant=\"purple\"": "000c8c5e764f94de", + "fixed=\"top\",style=\"bold\",variant=\"red\"": "52256db3c798805c", + "fixed=\"top\",style=\"bold\",variant=\"seafoam\"": "abc7d532171e59ec", + "fixed=\"top\",style=\"bold\",variant=\"silver\"": "da6e41e5e5eda91e", + "fixed=\"top\",style=\"bold\",variant=\"turquoise\"": "5df0ca672f86f104", + "fixed=\"top\",style=\"bold\",variant=\"yellow\"": "2cdbb5826b9e06f0", + "fixed=\"top\",style=\"outline\",variant=\"accent\"": "a28ff7263a39f666", + "fixed=\"top\",style=\"outline\",variant=\"blue\"": "2d07f4ef092be0bc", + "fixed=\"top\",style=\"outline\",variant=\"brown\"": "ee1ff49bb2846ca0", + "fixed=\"top\",style=\"outline\",variant=\"celery\"": "66a87388be265958", + "fixed=\"top\",style=\"outline\",variant=\"chartreuse\"": "d529ee5327b41888", + "fixed=\"top\",style=\"outline\",variant=\"cinnamon\"": "c9d6d0b3dab1a2e2", + "fixed=\"top\",style=\"outline\",variant=\"cyan\"": "a8bb3e5d95dd72e6", + "fixed=\"top\",style=\"outline\",variant=\"fuchsia\"": "923605441b1baf06", + "fixed=\"top\",style=\"outline\",variant=\"gray\"": "ae5b7fa3c1664692", + "fixed=\"top\",style=\"outline\",variant=\"green\"": "28caff15f2fa5c02", + "fixed=\"top\",style=\"outline\",variant=\"indigo\"": "af204bfe68268c8c", + "fixed=\"top\",style=\"outline\",variant=\"informative\"": "4e42f2196af00e9a", + "fixed=\"top\",style=\"outline\",variant=\"magenta\"": "8b2c23fc976e486e", + "fixed=\"top\",style=\"outline\",variant=\"negative\"": "a89e51e206700fee", + "fixed=\"top\",style=\"outline\",variant=\"neutral\"": "0067d8a1cae02182", + "fixed=\"top\",style=\"outline\",variant=\"notice\"": "42c2094a71826984", + "fixed=\"top\",style=\"outline\",variant=\"orange\"": "12b4924cb7990caa", + "fixed=\"top\",style=\"outline\",variant=\"pink\"": "ff44e6cd015dab3a", + "fixed=\"top\",style=\"outline\",variant=\"positive\"": "529a9f70220c467a", + "fixed=\"top\",style=\"outline\",variant=\"purple\"": "65daac088ecdb98c", + "fixed=\"top\",style=\"outline\",variant=\"red\"": "a8439fbbb7a16eb2", + "fixed=\"top\",style=\"outline\",variant=\"seafoam\"": "69415f7cf6332956", + "fixed=\"top\",style=\"outline\",variant=\"silver\"": "2dbada78ec9cebc4", + "fixed=\"top\",style=\"outline\",variant=\"turquoise\"": "2e77751c32754ea6", + "fixed=\"top\",style=\"outline\",variant=\"yellow\"": "fc4cde8f9241fd3a", + "fixed=\"top\",style=\"subtle\",variant=\"accent\"": "ab650a813bb7d07c", + "fixed=\"top\",style=\"subtle\",variant=\"blue\"": "6b77f54f4e6227bc", + "fixed=\"top\",style=\"subtle\",variant=\"brown\"": "71ec12c15ddd5226", + "fixed=\"top\",style=\"subtle\",variant=\"celery\"": "1b9ab5ecf517af4a", + "fixed=\"top\",style=\"subtle\",variant=\"chartreuse\"": "6b7ed0a8d305531e", + "fixed=\"top\",style=\"subtle\",variant=\"cinnamon\"": "f586b660039524f8", + "fixed=\"top\",style=\"subtle\",variant=\"cyan\"": "457b4a7945f6d6ce", + "fixed=\"top\",style=\"subtle\",variant=\"fuchsia\"": "570e99fe65825edc", + "fixed=\"top\",style=\"subtle\",variant=\"gray\"": "abf60f9eabf38480", + "fixed=\"top\",style=\"subtle\",variant=\"green\"": "3a8e55b9537e2f3e", + "fixed=\"top\",style=\"subtle\",variant=\"indigo\"": "a293d05ee174c8a2", + "fixed=\"top\",style=\"subtle\",variant=\"informative\"": "47aace91572177c8", + "fixed=\"top\",style=\"subtle\",variant=\"magenta\"": "8db929bf9d2ae578", + "fixed=\"top\",style=\"subtle\",variant=\"negative\"": "556da04f2ae5cf9a", + "fixed=\"top\",style=\"subtle\",variant=\"neutral\"": "b348d97e880e49d0", + "fixed=\"top\",style=\"subtle\",variant=\"notice\"": "0dc5366eef8af36a", + "fixed=\"top\",style=\"subtle\",variant=\"orange\"": "7b7776e664f038ae", + "fixed=\"top\",style=\"subtle\",variant=\"pink\"": "b32a53631097bd06", + "fixed=\"top\",style=\"subtle\",variant=\"positive\"": "18d26f935e9f65c2", + "fixed=\"top\",style=\"subtle\",variant=\"purple\"": "c0028c88124e41a8", + "fixed=\"top\",style=\"subtle\",variant=\"red\"": "45785892429e4676", + "fixed=\"top\",style=\"subtle\",variant=\"seafoam\"": "f863c39cca70f790", + "fixed=\"top\",style=\"subtle\",variant=\"silver\"": "52bd1f84d9201dc4", + "fixed=\"top\",style=\"subtle\",variant=\"turquoise\"": "152e07a5d9206d62", + "fixed=\"top\",style=\"subtle\",variant=\"yellow\"": "4811605f3dfc584a" + }, + "button": { + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "74f9ca9a2c1d66be", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "744550c8d4258c36", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "e030e25b1590e07a", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "5bc234983e16f516", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "923c295141915b76", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "4bdfe1127582866a", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "dd17c3265bc70882", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "0df1852ad51438b2", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "2d38518cd5554b4a", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "1166f56a5cb9a7a2", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "3517a062936d8e50", + "isDisabled=false,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "c45e2801ebe63488", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "611549746d073b71", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "0ba6e0733f1705d5", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "e3ca8d644961be55", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "bcf9fced116b3789", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "a1ea57a81227e9ad", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "ae0c65a59d60a9a5", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "dd3ddece2ef67e59", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "6f06bd56855864bd", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "deb259a2cf2d1165", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "97d9736f30235c29", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "8bb8e83d2ccc4995", + "isDisabled=false,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "8302393bcbfd91c1", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "899797b2145f11e6", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "b3a78f8b74c86268", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "414dd2c84c71eeaa", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "904b4224e0ff9efe", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "f7b7206db9575a8a", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "a9e5a0484c3dbfa6", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "e5f1ce4d6bffbc8e", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "c1cb84e8bb98caa0", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "2fb588c53cca2a66", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "c879fc8750c3100a", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "98f8bf7a73156032", + "isDisabled=false,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "e3ada8a91a66fdd2", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "c2fd415930e6aaf8", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "6c0eb5b6b52cee9e", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "d964deff6d3a022c", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "a5ee48218445fe28", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "d3d54533ef47069c", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "a2de7265963d5f24", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "d5b77b7a6523d4b8", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "190bcaf3bec5f3d6", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "17286b0b4936b220", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "6d1282e4a82bada0", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "4bfbbe77218501bc", + "isDisabled=false,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "20383a15bee57f38", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "f7e7178b2ab9de8a", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "8adc4061192ba390", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "283064433467aefa", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "8fe367b4ea911eee", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "a7d7204a2fbe8f10", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "cb28d348cb170d94", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "bc6396a078488c66", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "925760086456be5c", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "77f0ddd1a774a3f6", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "4618769b0be1f64e", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "0cf444c80b9d2224", + "isDisabled=true,isLabelHidden=false,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "ff9ca8d197e346c0", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "9a681447b28e1ebf", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "7828f09d0d036ea7", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "d91c0ff74a7f2be9", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "dd5343a52d939e29", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "a5c97085a02fa829", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "8caa7d3a7c4ba389", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "b5b2133b8b99c337", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "26eff3ee73757f5f", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "143b6ccc1673f8bd", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "6aa76106cbdaed35", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "49fe7c3dfeed2111", + "isDisabled=true,isLabelHidden=false,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "91c595aeb4b79231", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "3e06dd41de6c724a", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "ca79d26abca75bda", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "3dd8d07241f337cc", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "007f69b2a5888690", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "20c36e3a66b66c08", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "8d87f78f32a02c90", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "b753b4e0d12acdb2", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "30f6b2329c6b32fa", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "7fc2a82e3000da00", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "b757424fe9490a14", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "32e90375cfd4abcc", + "isDisabled=true,isLabelHidden=true,isPending=false,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "99dfd7beeae2c154", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"accent\"": "4e449ef3ac3e7064", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"negative\"": "d8036cc3f5ef8510", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"primary\"": "309de13c45b5bd5a", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"fill\",variant=\"secondary\"": "77c32e14a56c9ff6", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"primary\"": "a8bd94774066834e", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"black\",style=\"outline\",variant=\"secondary\"": "3549e90b9228fef6", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"accent\"": "36b68fb9e865bb3c", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"negative\"": "5bd4c794da95cf38", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"primary\"": "43de9ff3e289c86e", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"fill\",variant=\"secondary\"": "4b38e04fd70450c2", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"primary\"": "5cdfa6f9d8f43ad6", + "isDisabled=true,isLabelHidden=true,isPending=true,staticColor=\"white\",style=\"outline\",variant=\"secondary\"": "13fcf2e9a46cd17e" + }, + "checkbox": { + "isDisabled=false,isEmphasized=false,isError=false,isIndeterminate=false,isSelected=false": "888bb9378a7d33fd", + "isDisabled=false,isEmphasized=false,isError=false,isIndeterminate=false,isSelected=true": "a0a918d802756a9f", + "isDisabled=false,isEmphasized=false,isError=false,isIndeterminate=true,isSelected=false": "7deae4cb82e3174d", + "isDisabled=false,isEmphasized=false,isError=false,isIndeterminate=true,isSelected=true": "73b782c8d1baeb4f", + "isDisabled=false,isEmphasized=false,isError=true,isIndeterminate=false,isSelected=false": "4fe81c0be5348f35", + "isDisabled=false,isEmphasized=false,isError=true,isIndeterminate=false,isSelected=true": "f3707b0d61df2b7f", + "isDisabled=false,isEmphasized=false,isError=true,isIndeterminate=true,isSelected=false": "765181c659bfef17", + "isDisabled=false,isEmphasized=false,isError=true,isIndeterminate=true,isSelected=true": "c742d13c4ed8e8eb", + "isDisabled=false,isEmphasized=true,isError=false,isIndeterminate=false,isSelected=false": "a97da1d1f0266585", + "isDisabled=false,isEmphasized=true,isError=false,isIndeterminate=false,isSelected=true": "2a12f1fe6667d537", + "isDisabled=false,isEmphasized=true,isError=false,isIndeterminate=true,isSelected=false": "bf4f91450b8ce3ef", + "isDisabled=false,isEmphasized=true,isError=false,isIndeterminate=true,isSelected=true": "d925aa55b103dfe3", + "isDisabled=false,isEmphasized=true,isError=true,isIndeterminate=false,isSelected=false": "e3a415b83920ceed", + "isDisabled=false,isEmphasized=true,isError=true,isIndeterminate=false,isSelected=true": "5baf8acf7d748733", + "isDisabled=false,isEmphasized=true,isError=true,isIndeterminate=true,isSelected=false": "e8987b60d9b1f903", + "isDisabled=false,isEmphasized=true,isError=true,isIndeterminate=true,isSelected=true": "043dee48a24d5db7", + "isDisabled=true,isEmphasized=false,isError=false,isIndeterminate=false,isSelected=false": "faf957f93b13145b", + "isDisabled=true,isEmphasized=false,isError=false,isIndeterminate=false,isSelected=true": "d17917a5aace214f", + "isDisabled=true,isEmphasized=false,isError=false,isIndeterminate=true,isSelected=false": "a9308fe6d288d3bb", + "isDisabled=true,isEmphasized=false,isError=false,isIndeterminate=true,isSelected=true": "bcb231ada28dce17", + "isDisabled=true,isEmphasized=false,isError=true,isIndeterminate=false,isSelected=false": "d73f20ae87d0c63f", + "isDisabled=true,isEmphasized=false,isError=true,isIndeterminate=false,isSelected=true": "e58194c507bababf", + "isDisabled=true,isEmphasized=false,isError=true,isIndeterminate=true,isSelected=false": "ab589d8f57e36ce7", + "isDisabled=true,isEmphasized=false,isError=true,isIndeterminate=true,isSelected=true": "cb846d023450570b", + "isDisabled=true,isEmphasized=true,isError=false,isIndeterminate=false,isSelected=false": "19e7260f9c65748f", + "isDisabled=true,isEmphasized=true,isError=false,isIndeterminate=false,isSelected=true": "7afe3535860f3277", + "isDisabled=true,isEmphasized=true,isError=false,isIndeterminate=true,isSelected=false": "08e435430ebb6137", + "isDisabled=true,isEmphasized=true,isError=false,isIndeterminate=true,isSelected=true": "35f8b66a01bde323", + "isDisabled=true,isEmphasized=true,isError=true,isIndeterminate=false,isSelected=false": "944ffbb0b6b404db", + "isDisabled=true,isEmphasized=true,isError=true,isIndeterminate=false,isSelected=true": "422f46f096af45cf", + "isDisabled=true,isEmphasized=true,isError=true,isIndeterminate=true,isSelected=false": "6b5892a1a0e2a2f3", + "isDisabled=true,isEmphasized=true,isError=true,isIndeterminate=true,isSelected=true": "d1bd81f5dba98307" + }, + "switch": { + "hideLabel=false,isDisabled=false,isEmphasized=false,isSelected=false": "5ce4750be0ac2509", + "hideLabel=false,isDisabled=false,isEmphasized=false,isSelected=true": "b1559f062d7f72f9", + "hideLabel=false,isDisabled=false,isEmphasized=true,isSelected=false": "6baf1d35522bcf8d", + "hideLabel=false,isDisabled=false,isEmphasized=true,isSelected=true": "56dc16b175d06431", + "hideLabel=false,isDisabled=true,isEmphasized=false,isSelected=false": "6f8284aea2230415", + "hideLabel=false,isDisabled=true,isEmphasized=false,isSelected=true": "478227ecac5b5827", + "hideLabel=false,isDisabled=true,isEmphasized=true,isSelected=false": "432ee0863574ed45", + "hideLabel=false,isDisabled=true,isEmphasized=true,isSelected=true": "ce85d822e6dbcb03", + "hideLabel=true,isDisabled=false,isEmphasized=false,isSelected=false": "8af7649e15fe7341", + "hideLabel=true,isDisabled=false,isEmphasized=false,isSelected=true": "e02a1c13251ac4a5", + "hideLabel=true,isDisabled=false,isEmphasized=true,isSelected=false": "3c8e93620c908dc5", + "hideLabel=true,isDisabled=false,isEmphasized=true,isSelected=true": "98224d2b1c21eb39", + "hideLabel=true,isDisabled=true,isEmphasized=false,isSelected=false": "cbada75f9680d2eb", + "hideLabel=true,isDisabled=true,isEmphasized=false,isSelected=true": "d4ed8577b115bbf1", + "hideLabel=true,isDisabled=true,isEmphasized=true,isSelected=false": "5c5e667251fe1ae7", + "hideLabel=true,isDisabled=true,isEmphasized=true,isSelected=true": "73a9dc861da20a01" + } +} diff --git a/sdk/core/tests/recipe_snapshots.rs b/sdk/core/tests/recipe_snapshots.rs new file mode 100644 index 000000000..0389b842f --- /dev/null +++ b/sdk/core/tests/recipe_snapshots.rs @@ -0,0 +1,339 @@ +// Copyright 2026 Adobe. All rights reserved. +// This file is licensed to you under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may obtain a copy +// of the License at http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software distributed under +// the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +// OF ANY KIND, either express or implied. See the License for the specific language +// governing permissions and limitations under the License. + +//! Render snapshots for every visual recipe. +//! +//! For each recipe this renders every valid option combination (booleans and +//! declared values of the options the recipe uses; combinations an `error` +//! constraint excludes are skipped) across every size, interaction state, color +//! scheme and scale, and hashes the SVG and diagnostics of each option set. The +//! hashes are committed in `tests/fixtures/recipe-snapshots.json`, so a change to +//! a recipe, a relationship, a token or the renderer shows up in review as the +//! option sets whose output changed. Every combination must also render without +//! a diagnostic. +//! +//! After an intended change, regenerate with: +//! `UPDATE_RECIPE_SNAPSHOTS=1 cargo test -p design-data-core --test recipe_snapshots` + +use std::collections::{BTreeMap, HashMap}; +use std::path::PathBuf; + +use design_data_core::constraints::{read_constraints, Combination}; +use design_data_core::graph::TokenGraph; +use design_data_core::visual::{ + build_scene_cached, recipe_options_in, scene_to_svg, RenderRequest, SceneCache, +}; +use serde_json::Value; + +const SCHEMES: &[&str] = &["light", "dark", "wireframe"]; +const SCALES: &[&str] = &["desktop", "mobile"]; + +type Snapshots = BTreeMap>; + +fn data_dir() -> PathBuf { + PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("../../packages/design-data") +} + +fn fixture_path() -> PathBuf { + PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("tests/fixtures/recipe-snapshots.json") +} + +/// FNV-1a, 64 bit: stable across Rust versions, unlike `DefaultHasher`. +struct Fnv(u64); + +impl Fnv { + fn new() -> Self { + Fnv(0xcbf2_9ce4_8422_2325) + } + fn write(&mut self, s: &str) { + for b in s.bytes() { + self.0 ^= u64::from(b); + self.0 = self.0.wrapping_mul(0x0100_0000_01b3); + } + } + fn finish(&self) -> String { + format!("{:016x}", self.0) + } +} + +fn load_graph() -> TokenGraph { + let d = data_dir(); + TokenGraph::from_json_dir_with_catalogs( + &d.join("tokens"), + Some(&d.join("mode-sets")), + Some(&d.join("components")), + ) + .expect("graph") + .with_relationships( + TokenGraph::load_spec_relationships(&d.join("relationships")).expect("rels"), + ) +} + +fn read_json(path: PathBuf) -> Value { + serde_json::from_str( + &std::fs::read_to_string(&path).unwrap_or_else(|e| panic!("{path:?}: {e}")), + ) + .unwrap_or_else(|e| panic!("{path:?}: {e}")) +} + +/// Values an option takes in the matrix: booleans, or its declared `values`. +/// Options with any other domain (free text, icons) keep their default. +fn domain(option: &Value) -> Option> { + if let Some(vals) = option.get("values").and_then(Value::as_array) { + return Some( + vals.iter() + .map(|v| v.get("value").cloned().unwrap_or_else(|| v.clone())) + .collect(), + ); + } + (option.get("type").and_then(Value::as_str) == Some("boolean")) + .then(|| vec![Value::Bool(false), Value::Bool(true)]) +} + +/// Every combination of the given option domains, in a stable order. +fn option_sets(domains: &[(String, Vec)]) -> Vec> { + let mut sets: Vec> = vec![vec![]]; + for (name, values) in domains { + let mut next = Vec::new(); + for set in &sets { + for v in values { + let mut s = set.clone(); + s.push((name.clone(), v.clone())); + next.push(s); + } + } + sets = next; + } + sets +} + +fn key(set: &[(String, Value)]) -> String { + if set.is_empty() { + return "(defaults)".into(); + } + set.iter() + .map(|(k, v)| format!("{k}={v}")) + .collect::>() + .join(",") +} + +struct Run { + snapshots: BTreeMap, + diagnostics: Vec, + combinations: usize, +} + +fn render_recipe(graph: &TokenGraph, cache: &SceneCache, name: &str) -> Run { + let d = data_dir(); + let recipe = read_json(d.join(format!("visuals/{name}.json"))); + let component = read_json(d.join(format!("components/{name}.json"))); + // Sorted, so the manifest does not depend on the order a recipe mentions its options. + let (mut used, _) = recipe_options_in(graph, &recipe, name); + used.sort(); + let options = component.get("options").and_then(Value::as_object); + + let domains: Vec<(String, Vec)> = used + .iter() + .filter(|o| o.as_str() != "size") + .filter_map(|o| { + let vals = domain(options?.get(o)?)?; + Some((o.clone(), vals)) + }) + .collect(); + let states: Vec = component + .get("states") + .and_then(Value::as_array) + .map(|a| { + a.iter() + .filter(|s| s.get("trigger").and_then(Value::as_str) == Some("interaction")) + .filter_map(|s| s.get("name").and_then(Value::as_str).map(String::from)) + .collect() + }) + .unwrap_or_default(); + let sizes: Vec = recipe + .get("sizeScale") + .and_then(Value::as_object) + .map(|m| m.keys().cloned().collect()) + .unwrap_or_default(); + let constraints = read_constraints(&component); + + let mut run = Run { + snapshots: BTreeMap::new(), + diagnostics: Vec::new(), + combinations: 0, + }; + for set in option_sets(&domains) { + let valid_for = |size: &str| { + let mut combo: Combination = set + .iter() + .map(|(k, v)| (k.clone(), Some(v.clone()))) + .collect(); + combo.insert("size".into(), Some(Value::String(size.into()))); + !constraints.iter().any(|(_, c)| { + c.severity == design_data_core::constraints::ConstraintSeverity::Error + && c.excludes(&combo) + }) + }; + let mut hash = Fnv::new(); + let mut any = false; + for size in &sizes { + if !valid_for(size) { + continue; + } + let state_list: Vec> = std::iter::once(None) + .chain(states.iter().map(Some)) + .collect(); + for state in state_list { + for scheme in SCHEMES { + for scale in SCALES { + let req = RenderRequest { + component: name.into(), + size: size.clone(), + states: state.into_iter().cloned().collect(), + options: set.iter().cloned().collect::>(), + mode: [("colorScheme", *scheme), ("scale", *scale)] + .iter() + .map(|(k, v)| (k.to_string(), v.to_string())) + .collect(), + label: "Label".into(), + }; + let label = format!( + "{name} [{}] size={size} state={} {scheme}/{scale}", + key(&set), + state.map_or("none", |s| s.as_str()) + ); + hash.write(&label); + match build_scene_cached(graph, &recipe, &req, cache) { + Ok(scene) => { + hash.write(&scene_to_svg(&scene)); + for diag in &scene.diagnostics { + hash.write(diag); + run.diagnostics.push(format!("{label}: {diag}")); + } + } + Err(e) => { + hash.write(&e); + run.diagnostics.push(format!("{label}: {e}")); + } + } + run.combinations += 1; + any = true; + } + } + } + } + if any { + run.snapshots.insert(key(&set), hash.finish()); + } + } + run +} + +fn recipe_names() -> Vec { + let mut names: Vec = std::fs::read_dir(data_dir().join("visuals")) + .expect("visuals dir") + .filter_map(|e| e.ok()) + .filter_map(|e| { + e.path() + .file_stem() + .and_then(|s| s.to_str()) + .map(String::from) + .filter(|_| e.path().extension().is_some_and(|x| x == "json")) + }) + .collect(); + names.sort(); + names +} + +#[test] +fn recipe_renders_match_the_snapshots() { + let graph = load_graph(); + let cache = SceneCache::default(); + let mut actual = Snapshots::new(); + let mut diagnostics = Vec::new(); + let mut total = 0; + for name in recipe_names() { + let started = std::time::Instant::now(); + let run = render_recipe(&graph, &cache, &name); + eprintln!( + "{name}: {} combinations in {:.1}s", + run.combinations, + started.elapsed().as_secs_f64() + ); + total += run.combinations; + diagnostics.extend(run.diagnostics); + actual.insert(name, run.snapshots); + } + eprintln!( + "rendered {total} combinations across {} recipes", + actual.len() + ); + + assert!( + diagnostics.is_empty(), + "render diagnostics ({}):\n{}", + diagnostics.len(), + diagnostics + .iter() + .take(20) + .cloned() + .collect::>() + .join("\n") + ); + + if std::env::var_os("UPDATE_RECIPE_SNAPSHOTS").is_some() { + let json = serde_json::to_string_pretty(&actual).unwrap() + "\n"; + std::fs::write(fixture_path(), json).expect("write snapshots"); + return; + } + + let expected: Snapshots = + serde_json::from_str(&std::fs::read_to_string(fixture_path()).expect("read snapshots")) + .expect("parse snapshots"); + + let mut problems = Vec::new(); + let recipes: std::collections::BTreeSet<&String> = + actual.keys().chain(expected.keys()).collect(); + for recipe in recipes { + let empty = BTreeMap::new(); + let (a, e) = ( + actual.get(recipe).unwrap_or(&empty), + expected.get(recipe).unwrap_or(&empty), + ); + let sets: std::collections::BTreeSet<&String> = a.keys().chain(e.keys()).collect(); + let (mut changed, mut added, mut removed) = (Vec::new(), Vec::new(), Vec::new()); + for set in sets { + match (a.get(set), e.get(set)) { + (Some(x), Some(y)) if x != y => changed.push(set.as_str()), + (Some(_), None) => added.push(set.as_str()), + (None, Some(_)) => removed.push(set.as_str()), + _ => {} + } + } + for (what, list) in [ + ("changed", &changed), + ("new", &added), + ("removed", &removed), + ] { + if !list.is_empty() { + problems.push(format!( + "{recipe}: {} option set(s) {what}, for example [{}]", + list.len(), + list.iter().take(3).copied().collect::>().join(" | ") + )); + } + } + } + assert!( + problems.is_empty(), + "\nRendered output differs from tests/fixtures/recipe-snapshots.json:\n{}\n\nIf the change is intended, review it with `design-data render --option name=value ...` and regenerate with UPDATE_RECIPE_SNAPSHOTS=1.\n", + problems.join("\n") + ); +} diff --git a/sdk/core/tests/relationship_states.rs b/sdk/core/tests/relationship_states.rs new file mode 100644 index 000000000..b7709de71 --- /dev/null +++ b/sdk/core/tests/relationship_states.rs @@ -0,0 +1,169 @@ +// Copyright 2026 Adobe. All rights reserved. +// This file is licensed to you under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may obtain a copy +// of the License at http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software distributed under +// the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +// OF ANY KIND, either express or implied. See the License for the specific language +// governing permissions and limitations under the License. + +//! A relationship's `scope.options.state` counts as a state of the token it binds, so a +//! recipe can bind a stateful color through a relationship even when the tokens are +//! plain palette steps whose names carry no state. + +use std::collections::HashMap; +use std::path::PathBuf; + +use design_data_core::graph::{ + ComponentRecord, Layer, RelationshipRecord, TokenGraph, TokenRecord, +}; +use design_data_core::visual::{build_scene, compile_recipe, RenderRequest}; +use serde_json::{json, Value}; + +fn token(key: &str, scale: u32, value: &str) -> TokenRecord { + TokenRecord { + name: key.into(), + file: PathBuf::from("tokens.json"), + index: 0, + schema_url: None, + uuid: Some(key.into()), + alias_target: None, + raw: json!({ + "name": {"property": "color", "colorFamily": "gray", "scaleIndex": scale, "colorScheme": "light"}, + "value": value, + }), + layer: Layer::Foundation, + } +} + +fn relationship(i: usize, token: &str, options: Option) -> RelationshipRecord { + let mut scope = json!({"component": "widget", "property": "color"}); + if let Some(o) = options { + scope["options"] = o; + } + RelationshipRecord { + file: PathBuf::from("relationships.json"), + index: i, + uuid: None, + raw: json!({"scope": scope, "context": "Fill", "$ref": token}), + } +} + +fn graph() -> TokenGraph { + let mut g = TokenGraph::default(); + for t in [ + token("gray-800", 800, "rgb(1, 1, 1)"), + token("gray-900", 900, "rgb(2, 2, 2)"), + ] { + g.tokens.insert(t.name.clone(), t); + } + g.components.push(ComponentRecord { + name: "widget".into(), + file: PathBuf::from("dataset.json"), + raw: json!({"name": "widget", "options": {}}), + layer: Layer::Foundation, + }); + g.relationships.push(relationship(0, "gray-800", None)); + g.relationships.push(relationship( + 1, + "gray-900", + Some(json!({"state": ["hover"]})), + )); + g +} + +fn recipe() -> Value { + json!({ + "component": "widget", + "root": "box", + "sizeScale": {"m": 100}, + "parts": {"box": {"kind": "box", "props": { + "width": {"value": 10}, + "height": {"value": 10}, + "fill": {"relationship": {"property": "color", "context": "Fill"}} + }}} + }) +} + +fn mode() -> HashMap { + [("colorScheme", "light"), ("scale", "desktop")] + .iter() + .map(|(k, v)| (k.to_string(), v.to_string())) + .collect() +} + +fn fill(states: &[&str]) -> Option { + let req = RenderRequest { + component: "widget".into(), + size: "m".into(), + states: states.iter().map(|s| s.to_string()).collect(), + mode: mode(), + ..Default::default() + }; + let scene = build_scene(&graph(), &recipe(), &req).unwrap(); + assert!(scene.diagnostics.is_empty(), "{:?}", scene.diagnostics); + scene.nodes.iter().find(|n| n.part == "box")?.fill.clone() +} + +#[test] +fn the_relationship_state_picks_the_hover_token() { + assert_eq!( + fill(&[]).as_deref(), + Some("rgb(1, 1, 1)"), + "idle: the default" + ); + assert_eq!(fill(&["hover"]).as_deref(), Some("rgb(2, 2, 2)"), "hover"); + assert_eq!( + fill(&["down"]).as_deref(), + Some("rgb(1, 1, 1)"), + "a state no relationship names falls back to the default" + ); +} + +#[test] +fn compiled_candidates_carry_the_relationship_state() { + let compiled = compile_recipe(&graph(), &recipe(), "widget", &[mode()]).unwrap(); + let cands = compiled + .pointer("/variants/m|light|desktop/box/props/fill/candidates") + .and_then(Value::as_array) + .expect("candidates"); + let hover: Vec<&Value> = cands + .iter() + .filter(|c| c["states"] == json!(["hover"])) + .collect(); + assert_eq!(hover.len(), 1, "{cands:?}"); + assert_eq!(hover[0]["value"], "rgb(2, 2, 2)"); +} + +#[test] +fn a_pinned_state_replaces_the_tokens_own_state() { + // gray-900 carries the state `default` and is reused at keyboard-focus. Its own state + // must not be required as well: if it were, nothing would match, and the fallback + // (the first candidate by name) would give gray-800 instead. + let mut g = graph(); + if let Some(t) = g.tokens.get_mut("gray-900") { + t.raw["name"]["state"] = json!(["default"]); + } + g.relationships.push(relationship( + 2, + "gray-900", + Some(json!({"state": ["keyboard-focus"]})), + )); + let req = RenderRequest { + component: "widget".into(), + size: "m".into(), + states: vec!["keyboard-focus".into()], + mode: mode(), + ..Default::default() + }; + let scene = build_scene(&g, &recipe(), &req).unwrap(); + let fill = scene + .nodes + .iter() + .find(|n| n.part == "box") + .unwrap() + .fill + .clone(); + assert_eq!(fill.as_deref(), Some("rgb(2, 2, 2)")); +} diff --git a/sdk/plugins/site/assets/visual-runtime.js b/sdk/plugins/site/assets/visual-runtime.js index 28f7d7ca6..2507ed605 100644 --- a/sdk/plugins/site/assets/visual-runtime.js +++ b/sdk/plugins/site/assets/visual-runtime.js @@ -86,11 +86,24 @@ function makeCtx(compiled, req) { (c) => c.states.length > 0 && c.states.every((s) => active.includes(s)), ) ?? cands[0]; + // Keep the relationships whose pinned options match the request, preferring the ones that + // pin the most options. A candidate with no `options` is the default: used only when no + // more specific one matches. Mirrors `select_by_options` in Rust. + const selectByOptions = (cands) => { + const scored = []; + for (const c of cands) { + const score = c.options ? whenScore({ options: c.options }) : 0; + if (score !== null) scored.push([score, c]); + } + const best = Math.max(0, ...scored.map(([score]) => score)); + return scored.filter(([score]) => score === best).map(([, c]) => c); + }; + const withRel = (r, entry) => r && entry.relativeTo ? { ...r, relativeTo: entry.relativeTo } : r; const resolveCands = (entry) => { - const rec = pick(entry.candidates); + const rec = pick(selectByOptions(entry.candidates)); if (!rec) { if (entry.miss) diags.push(entry.miss); return undefined; diff --git a/sdk/plugins/site/src/lib.rs b/sdk/plugins/site/src/lib.rs index a310a8b1c..82094565c 100644 --- a/sdk/plugins/site/src/lib.rs +++ b/sdk/plugins/site/src/lib.rs @@ -71,7 +71,7 @@ pub fn write_site( .map_err(|e| format!("failed to read {}: {e}", recipe_path.display()))?; let recipe: serde_json::Value = serde_json::from_str(&text) .map_err(|e| format!("{} is not valid JSON: {e}", recipe_path.display()))?; - let (used, structural) = visual::recipe_options(&recipe); + let (used, structural) = visual::recipe_options_in(graph, &recipe, &c.name); let mut def = c.raw.clone(); def["recipe"] = serde_json::json!({ "sizeScale": recipe.get("sizeScale"), diff --git a/sdk/wasm/test/visual-runtime-parity.test.js b/sdk/wasm/test/visual-runtime-parity.test.js index 8b0350e6f..30d010a4b 100644 --- a/sdk/wasm/test/visual-runtime-parity.test.js +++ b/sdk/wasm/test/visual-runtime-parity.test.js @@ -82,6 +82,11 @@ const badgeOptionSets = [ { variant: "seafoam", style: "subtle", fixed: "right" }, { variant: "notice", fixed: "bottom", label: false, icon: true }, { variant: "neutral", isDisabled: true }, + { variant: "celery", style: "bold" }, + { variant: "celery", style: "subtle" }, + { variant: "yellow", style: "outline" }, + { variant: "notice", style: "outline" }, + { variant: "accent", style: "outline" }, ]; const switchOptionSets = [