@oneli8/core 1.0.0-beta.3 → 1.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/AGENTS.md +12 -0
  2. package/PRINCIPLES.md +48 -0
  3. package/README.md +33 -7
  4. package/ai-context.json +178 -0
  5. package/package.json +10 -4
  6. package/skills/oneli8-figma-to-code/SKILL.md +25 -0
  7. package/skills/oneli8-icons/SKILL.md +24 -0
  8. package/skills/oneli8-ui/SKILL.md +24 -0
  9. package/src/atoms/icon/icon.css +12 -12
  10. package/src/atoms/icon/icons.generated.js +295 -17
  11. package/src/atoms/selection-indicator/selection-indicator.css +18 -7
  12. package/src/materials/gem/gem.css +41 -41
  13. package/src/molecules/button/button.css +1 -1
  14. package/src/molecules/choice-item/choice-item.css +1 -1
  15. package/src/molecules/selection-option/selection-option.css +1 -1
  16. package/src/organisms/choice-group/choice-group.css +1 -1
package/AGENTS.md ADDED
@@ -0,0 +1,12 @@
1
+ # OneLi8 public beta usage
2
+
3
+ Read README.md and PRINCIPLES.md first. Public React exports are limited to Icon,
4
+ iconNames, Button, IconButton and Link. Do not treat unused token families as
5
+ available components. Use skills/oneli8-ui/SKILL.md for composition,
6
+ skills/oneli8-icons/SKILL.md for icon work, and
7
+ skills/oneli8-figma-to-code/SKILL.md for mapping work.
8
+
9
+ Reuse canonical code and semantic tokens. Do not create consumer-local copies
10
+ of existing icons, component skins or state geometry. Ask the maintainer about
11
+ missing design decisions. This public beta does not enforce arbitrary downstream
12
+ code automatically and does not claim complete Figma parity.
package/PRINCIPLES.md ADDED
@@ -0,0 +1,48 @@
1
+ # OneLi8 principles
2
+
3
+ OneLi8 is intended for broad human benefit and conceived as service to Guruji
4
+ Shrii Arnav. His teachings inspire the project; implementation specifications
5
+ are OneLi8's own work. Service, clarity, harmony, proportion, restraint and
6
+ evolution guide its decisions.
7
+
8
+ ## Three distinct operating laws
9
+
10
+ 1. Atomic Design governs composition: atoms → molecules → organisms → templates
11
+ → pages. Icon plus label is a molecule, not a new atom. Private vector pieces
12
+ and layout wrappers need not become public components.
13
+ 2. OneLi8 Modularity governs ownership, reuse, semantic token dependencies,
14
+ optional-slot collapse and independent updates. Reuse an existing owner,
15
+ extend its API, or compose it before inventing another owner.
16
+ 3. Numerical atomicity governs the 3px construction rhythm and approved optical
17
+ exceptions, including the shared 1.8 icon stroke. Do not invent per-size strokes.
18
+
19
+ An optional sixth level, Spatial Experience, follows Page; it is not an extra
20
+ layer inside a button. Spatial ambition does not imply physical-device validation.
21
+
22
+ ## Materials and color
23
+
24
+ Gem Morphism is a transparent material skin, not a separate component anatomy.
25
+ Its four guiding qualities are Cut (bezel/edge), Color (semantic tint), Clarity
26
+ (legibility), and Carat/weight (appropriate visual presence). Facets are rare
27
+ accents, not mandatory decoration. Preserve near-white Gem content and test
28
+ contrast on the actual backdrop; do not promise automatic background sensing.
29
+
30
+ Regular and Gem reuse structure, measurements and behavior. Theme and primary
31
+ color are independent. Product colors consume semantic/component roles rather
32
+ than copied palette values. Use approved inward focus treatment without clipping
33
+ or changing a control's outer dimensions.
34
+
35
+ ## Structural space
36
+
37
+ Declare Fill, Hug or governed Fixed sizing. State surfaces share their owner's
38
+ boundary. Parent inset plus child inset is intentional, not accidental duplicated
39
+ padding. Removing an optional icon removes its gap. Preserve canonical spacing,
40
+ radius relationships, typography and icon pool rather than drawing lookalikes.
41
+
42
+ ## Evidence before claims
43
+
44
+ For new patterns, inspect Mobbin examples and relevant official interaction
45
+ guidance, then apply OneLi8's own identity. For repairs, approved decisions and
46
+ canonical owners come first. Record property, structural/token, visual and
47
+ runtime evidence separately. Changes require a Figma/code impact assessment;
48
+ no access or missing mapping means an explicit gap, not assumed synchronization.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @oneli8/core
2
2
 
3
- OneLi8 Design System — framework-agnostic components.
3
+ OneLi8 Design System, framework agnostic components.
4
4
 
5
5
  Every component is two functions: `renderX(...)` returns an HTML **string**, and
6
6
  `hydrateX(root)` enforces the runtime contract on markup that already exists.
@@ -29,23 +29,49 @@ hydrateButtons();
29
29
  | Atom | `Icon`, `Selection Indicator` (checkbox, radio, switch) |
30
30
  | Molecule | `Button`, `Icon Button`, `Choice Item`, `Selection Option` |
31
31
  | Organism | `Choice Group` (checkbox hierarchy, radio group) |
32
- | Material | `Gem` — an attribute adapter, not a tier |
32
+ | Material | `Gem`, an attribute adapter, not a tier |
33
33
 
34
34
  Anything not listed is not exported. Tokens exist for component families whose
35
35
  implementations are not in this release; a token is not a promise of a component.
36
36
 
37
+ ## Why this exists
38
+
39
+ OneLi8 means One Light. It was created by Akshay Dhore, intended for broad human
40
+ benefit and conceived as service to Guruji Shrii Arnav, whose teachings inspire
41
+ it. Service, clarity, harmony, proportion, restraint and evolution guide its
42
+ decisions. `PRINCIPLES.md` ships inside this package and sets them out in full.
43
+
44
+ The practical intention: most design systems hand you components and hope you
45
+ stay inside them. This one hands you the reasoning too, so when you need
46
+ something it does not ship you can build it and have it still belong.
47
+
48
+ ## Naming
49
+
50
+ The structure is borrowed from Sanskrit grammar rather than a CSS convention.
51
+
52
+ **A compound naming one thing is one word.** `actionprimary` is not action plus
53
+ primary, it is a single role. `cutedge` is one feature of the Gem material.
54
+
55
+ **A qualifier stays separate from what it qualifies.** In
56
+ `--ol8-material-control-gem--primary-hover-start`, `hover` is a state applied to
57
+ `start`, so it keeps its hyphen. That is why `disabledcontent` is joined and
58
+ `hover-start` is not.
59
+
60
+ Hyphens separate levels of the hierarchy, never words inside a level. The words
61
+ themselves stay readable: no abbreviations and no truncation.
62
+
37
63
  ## Rendering and hydration
38
64
 
39
65
  `render*` covers everything expressible in markup. `hydrate*` exists only for
40
66
  what markup genuinely cannot express:
41
67
 
42
- - `indeterminate` on a checkbox is a JavaScript-only property, so Mixed needs
68
+ - `indeterminate` on a checkbox is a JavaScript only property, so Mixed needs
43
69
  hydration and every other state does not.
44
70
  - A `<button>` without an explicit `type` submits its form. Hydration pins it.
45
71
  - Links cannot be natively disabled, so they get `aria-disabled` and their
46
72
  activation is swallowed.
47
73
 
48
- Hydration is idempotent — running it twice changes nothing.
74
+ Hydration is idempotent, running it twice changes nothing.
49
75
 
50
76
  ## Styles
51
77
 
@@ -57,7 +83,7 @@ import '@oneli8/tokens/css';
57
83
  import '@oneli8/core/styles/button.css';
58
84
  ```
59
85
 
60
- Tokens must always come first — every component rule reads them.
86
+ Tokens must always come first, every component rule reads them.
61
87
 
62
88
  ## Accessibility is enforced, not suggested
63
89
 
@@ -66,11 +92,11 @@ Tokens must always come first — every component rule reads them.
66
92
  Primary and Secondary only. These are errors rather than review comments on
67
93
  purpose.
68
94
 
69
- Test Gem against its real backdrop. Near-white content alone does not guarantee
95
+ Test Gem against its real backdrop. Content close to white content alone does not guarantee
70
96
  readable contrast.
71
97
 
72
98
  ## Licence
73
99
 
74
- Apache-2.0. Created by Akshay Dhore. See `LICENSE` and `NOTICE`; preserve the
100
+ Apache 2.0. Created by Akshay Dhore. See `LICENSE` and `NOTICE`; preserve the
75
101
  attribution notices when redistributing. This does not require a visible badge
76
102
  in your product, and implies no OneLi8 endorsement.
package/ai-context.json ADDED
@@ -0,0 +1,178 @@
1
+ {
2
+ "$comment": "GENERATED by packages/sync/src/build-package-context.mjs — do not edit.",
3
+ "system": "OneLi8",
4
+ "version": "1.0.0-beta.5",
5
+ "meaning": "OneLi8 means One Light.",
6
+ "foundations": {
7
+ "package": "@oneli8/tokens",
8
+ "css": "@oneli8/tokens/css",
9
+ "tokenPrefix": "--ol8-",
10
+ "namingAuthority": "Figma. Every variable carries an explicit codeSyntax, recorded verbatim in packages/tokens/src/figma-code-syntax.txt. Names are never derived from a rule.",
11
+ "rules": [
12
+ "Components consume SEMANTIC roles only. Primitives (color-<family>-<step>) are hidden from pickers in Figma and must not appear in component code.",
13
+ "color-primary-* is an alias ramp onto color-blue-* — identical values, distinct names. Prefer the semantic role over either.",
14
+ "Dimension scale is 3px-atomic. Even multiples for structural layout; odd multiples are deliberate optical or micro-gap choices.",
15
+ "Elevation ink is cyan-840 rgb(22,63,75) — never default black.",
16
+ "Typography roles are composite. Use the .ol8-type-<role> class, not the individual font vars.",
17
+ "shape-radius-full (999px) is reserved for pills and circles. Soft hexagons are component-specific recipes, not a radius token."
18
+ ]
19
+ },
20
+ "readFirst": [
21
+ "PRINCIPLES.md",
22
+ "AGENTS.md",
23
+ "skills/"
24
+ ],
25
+ "model": "Framework agnostic. renderX() returns an HTML string; hydrateX() applies the runtime rules to markup that already exists.",
26
+ "architecture": {
27
+ "convention": "Atomic Design for developers (benjaminwfox.com/blog/tech/atomic-design-for-developers)",
28
+ "rules": [
29
+ "ATOM: composes no other component — native elements only. May hold internal state; must not read application state.",
30
+ "MOLECULE: composed of one or more atoms. Reusable, more specialised.",
31
+ "ORGANISM: composed of atoms/molecules/organisms. May hold business logic and application state.",
32
+ "MATERIALS are not an atomic tier. They are cross-cutting surface adapters applied by attribute (data-ol8-material) to an existing component, and live outside the hierarchy.",
33
+ "Assign margins to a component via its parent, NEVER to the component itself. Enforced by packages/sync/src/check-structure.mjs, which runs in npm run build."
34
+ ]
35
+ },
36
+ "components": [
37
+ {
38
+ "tier": "atom",
39
+ "module": "atoms/icon/icon.js",
40
+ "exports": [
41
+ "OL8_ICON_SIZES",
42
+ "isOl8IconName",
43
+ "renderIconSvg",
44
+ "renderIcon",
45
+ "hydrateIcons"
46
+ ],
47
+ "constraint": "Composes no other component. Native elements only."
48
+ },
49
+ {
50
+ "tier": "atom",
51
+ "module": "atoms/selection-indicator/selection-indicator.js",
52
+ "exports": [
53
+ "OL8_SELECTION_KINDS",
54
+ "OL8_SELECTION_SIZES",
55
+ "OL8_SELECTION_STATES",
56
+ "renderSelectionIndicator"
57
+ ],
58
+ "constraint": "Composes no other component. Native elements only."
59
+ },
60
+ {
61
+ "tier": "molecule",
62
+ "module": "molecules/button/button.js",
63
+ "exports": [
64
+ "OL8_BUTTON_VARIANTS",
65
+ "OL8_BUTTON_SIZES",
66
+ "OL8_MATERIALS",
67
+ "GEM_VARIANTS",
68
+ "iconSizeForButton",
69
+ "renderButton",
70
+ "hydrateButtons",
71
+ "setButtonLoading"
72
+ ],
73
+ "constraint": "Composed of atoms. Reusable and more specialised."
74
+ },
75
+ {
76
+ "tier": "molecule",
77
+ "module": "molecules/choice-item/choice-item.js",
78
+ "exports": [
79
+ "OL8_CHOICE_KINDS",
80
+ "OL8_CHOICE_SIZES",
81
+ "indicatorSizeFor",
82
+ "selectionStateFor",
83
+ "renderChoiceItem",
84
+ "hydrateChoiceItems",
85
+ "syncIndicator",
86
+ "setChoiceMixed"
87
+ ],
88
+ "constraint": "Composed of atoms. Reusable and more specialised."
89
+ },
90
+ {
91
+ "tier": "molecule",
92
+ "module": "molecules/icon-button/icon-button.js",
93
+ "exports": [
94
+ "OL8_ICON_BUTTON_VARIANTS",
95
+ "OL8_ICON_BUTTON_SIZES",
96
+ "OL8_ICON_BUTTON_SHAPES",
97
+ "artworkSizeForIconButton",
98
+ "renderIconButton",
99
+ "hydrateIconButtons"
100
+ ],
101
+ "constraint": "Composed of atoms. Reusable and more specialised."
102
+ },
103
+ {
104
+ "tier": "molecule",
105
+ "module": "molecules/selection-option/selection-option.js",
106
+ "exports": [
107
+ "OL8_OPTION_SIZES",
108
+ "renderSelectionOption",
109
+ "setOptionSelected",
110
+ "setActiveOption"
111
+ ],
112
+ "constraint": "Composed of atoms. Reusable and more specialised."
113
+ },
114
+ {
115
+ "tier": "organism",
116
+ "module": "organisms/choice-group/choice-group.js",
117
+ "exports": [
118
+ "OL8_AGGREGATE",
119
+ "computeAggregate",
120
+ "renderRadioGroup",
121
+ "renderCheckboxGroup",
122
+ "hydrateChoiceGroups"
123
+ ],
124
+ "constraint": "Composed of atoms, molecules or organisms. May hold application state."
125
+ }
126
+ ],
127
+ "buildingWhatIsNotHere": {
128
+ "principle": "A component OneLi8 does not ship is still a OneLi8 component. Compose it from these foundations rather than inventing a parallel system.",
129
+ "steps": [
130
+ "Check the inventory below first. Do not rebuild something that exists.",
131
+ "Pick the tier by what it composes, not by how complex it feels.",
132
+ "Reach for a SEMANTIC token, never a primitive and never a literal. color-actionprimary-default, not color-blue-600 and not #2c438b.",
133
+ "Every dimension sits on the 3px grid. An exception needs an approval record, not a rounded number.",
134
+ "Icons come from the pool. To draw a new one follow skills/oneli8-icons: a 24px neutral source on the shared 1.8 stroke.",
135
+ "Give margins to the parent, never to the component.",
136
+ "States are not classes. Use :hover, :active, :focus-visible, [disabled] and data attributes.",
137
+ "Colour is currentColor on icons; the parent supplies the semantic role."
138
+ ],
139
+ "forbidden": [
140
+ "A literal colour, size or font value anywhere in a component.",
141
+ "A primitive token in a component. Primitives are hidden from the Figma pickers for the same reason.",
142
+ "An invented icon name. Choose from OL8_ICONS.",
143
+ "A per-size icon stroke. The 1.8 stroke is shared, and the 18px master is an exact 0.75 scale of the 24px one.",
144
+ "Mixing a filled treatment with an outlined one across selection controls. Checkbox and Radio share one language."
145
+ ]
146
+ },
147
+ "materials": {
148
+ "gem": {
149
+ "strategy": "attribute",
150
+ "emitAs": {
151
+ "data-ol8-material": "gem"
152
+ },
153
+ "note": "Gem is an attribute on an existing button, never a new class or variant. renderButton/renderIconButton throw for quiet and destructive.",
154
+ "appliesTo": {
155
+ "ol8-btn": [
156
+ "primary",
157
+ "secondary"
158
+ ],
159
+ "ol8-icon-btn": [
160
+ "primary",
161
+ "secondary"
162
+ ]
163
+ }
164
+ }
165
+ },
166
+ "pending": {
167
+ "Select and Combobox": {
168
+ "page": "1034:12628",
169
+ "remaining": {
170
+ "02 Selection Popup (organism)": "574:534, 6 variants — Width Content|Anchor|Wide x Size Standard|Large",
171
+ "03 Select Trigger": "583:338, 24 variants — Size x Appearance Outline|Filled x Condition",
172
+ "04 Choice Chip Foundation": "612:657 — Soft Hexagon 636:847 and Neutral 983:6552",
173
+ "05 Mobbin-informed Compositions": "603:281 (documentation)",
174
+ "06 Canonical Public Owners": "875:1399 (documentation)"
175
+ }
176
+ }
177
+ }
178
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oneli8/core",
3
- "version": "1.0.0-beta.3",
4
- "description": "OneLi8 Design System \u2014 framework-agnostic components. Renders HTML strings and hydrates existing DOM; no framework required.",
3
+ "version": "1.0.0-beta.5",
4
+ "description": "OneLi8 Design System, framework agnostic. renderX returns an HTML string, hydrateX wires existing DOM. Ships the design language and the rules it follows.",
5
5
  "keywords": [
6
6
  "design-system",
7
7
  "components",
@@ -53,7 +53,9 @@
53
53
  "./styles/selection-option.css": "./src/molecules/selection-option/selection-option.css",
54
54
  "./styles/choice-group.css": "./src/organisms/choice-group/choice-group.css",
55
55
  "./styles/gem.css": "./src/materials/gem/gem.css",
56
- "./package.json": "./package.json"
56
+ "./package.json": "./package.json",
57
+ "./ai-context.json": "./ai-context.json",
58
+ "./skills/*": "./skills/*"
57
59
  },
58
60
  "types": "./src/index.d.ts",
59
61
  "sideEffects": [
@@ -63,12 +65,16 @@
63
65
  "files": [
64
66
  "src",
65
67
  "styles.css",
68
+ "ai-context.json",
69
+ "skills",
70
+ "PRINCIPLES.md",
71
+ "AGENTS.md",
66
72
  "README.md",
67
73
  "LICENSE",
68
74
  "NOTICE"
69
75
  ],
70
76
  "dependencies": {
71
- "@oneli8/tokens": "1.0.0-beta.3"
77
+ "@oneli8/tokens": "1.0.0-beta.5"
72
78
  },
73
79
  "engines": {
74
80
  "node": ">=20"
package/skills/oneli8-figma-to-code/SKILL.md ADDED
@@ -0,0 +1,25 @@
1
+ ---
2
+ name: oneli8-figma-to-code
3
+ description: Translate inspected OneLi8 Button, IconButton and Link properties into canonical code without paid Code Connect.
4
+ ---
5
+
6
+ Locate the bundle; read README.md, PRINCIPLES.md and the matching JSON and module
7
+ in mappings/. These are property translators, not a Figma exporter. They need no
8
+ paid Code Connect service. They do not supply a consumer's Figma access.
9
+
10
+ Use an authorized connector, user-run read-only plugin, or manually supplied
11
+ observations to obtain owner identity, exact properties, nested icon identities
12
+ and token bindings. Never require enterprise Variables REST access. Screenshots
13
+ alone support provisional visual work, not structural certification.
14
+
15
+ Call mapButton, mapIconButton or mapLink with the shipped mapping and explicit
16
+ observations; use the function signature in its module. Block unknown properties
17
+ and missing identities. Copied libraries may change IDs: inspect rather than
18
+ silently guessing. Do not build replacement HTML from a screenshot when a public
19
+ owner exists. No component outside the public beta is supported by these adapters.
20
+
21
+ Preserve approved Figma and decisions. Code mapping does not authorize changing
22
+ Figma. Map focus/hover to real browser interactions, not invented public props.
23
+ Verify properties, structural/token ownership, matched visual states, and runtime
24
+ behavior separately. Record remaining gaps and observation dates. A mapped plan
25
+ or successful render is not full synchronization or accessibility certification.
package/skills/oneli8-icons/SKILL.md ADDED
@@ -0,0 +1,24 @@
1
+ ---
2
+ name: oneli8-icons
3
+ description: Reuse or propose additions to the OneLi8 public beta neutral 24px icon pool with shared presentation and color.
4
+ ---
5
+
6
+ Locate the public beta bundle. Read PRINCIPLES.md, packages/react/src/atoms/Icon.js,
7
+ packages/react/src/atoms/IconFrame.js and packages/react/src/Icon.d.ts. These are
8
+ the actual drawing and presentation owners, not templates to copy into controls.
9
+
10
+ Search iconNames first. Existing meaning uses its existing identity. For a missing
11
+ meaning, propose one neutral 24×24 source definition in the pool and update the
12
+ IconName type; no size-, color-, Gem- or consumer-specific duplicate masters.
13
+ Follow adjacent approved geometry and the shared semantic stroke token. The
14
+ shipped outlined paths use non-scaling-stroke; filled dots have no outline.
15
+ Do not substitute historic proportional stroke rules or invent per-size values.
16
+
17
+ Color follows currentColor and the consumer's semantic state. Button and
18
+ IconButton already own their IconFrame sizing. A new icon is a candidate until
19
+ Akshay approves it; an AI-generated candidate is not automatically canonical.
20
+ This skill is guidance, not an autonomous icon-generation program.
21
+
22
+ Test multi-part paths, clipping and color at 9, 12, 24 and a large display size;
23
+ test swaps in light/dark and Regular/Gem. Compare Figma geometry/instance behavior
24
+ when authorized access exists. Record unavailable checks instead of claiming sync.
package/skills/oneli8-ui/SKILL.md ADDED
@@ -0,0 +1,24 @@
1
+ ---
2
+ name: oneli8-ui
3
+ description: Compose UI using the OneLi8 public beta components and tokens without recreating canonical owners.
4
+ ---
5
+
6
+ Locate the extracted public beta bundle and read its README.md, PRINCIPLES.md and
7
+ packages/react/src/index.d.ts. If unavailable, obtain it rather than inventing
8
+ APIs. Paths here are relative to the bundle root.
9
+
10
+ Before composition, record the public component, icon identity, semantic color,
11
+ material, size and layout responsibility. Import from @oneli8/react; use generated
12
+ tokens rather than copied values. Reuse source atoms inside their existing
13
+ molecules. A new wrapper does not become a new atom merely because it is small.
14
+
15
+ Keep optional slots collapsible and parent/child insets intentional. Do not copy
16
+ private implementations into a product. For unsupported families, explicitly
17
+ separate consumer-owned work from canonical OneLi8; do not claim it is provided.
18
+ New canonical patterns need Mobbin visual research, official interaction guidance
19
+ and maintainer approval, not copied visual identity.
20
+
21
+ Check light/dark, Regular/Gem, focus, loading/disabled, accessible names and long
22
+ content where applicable. Do not claim screen-reader testing from HTML checks.
23
+ Record changed owners and the Figma/code impact; unavailable evidence stays open.
24
+ The public beta's smoke tests verify packaging, not downstream UI correctness.
package/src/atoms/icon/icon.css CHANGED
@@ -15,7 +15,7 @@
15
15
 
16
16
  .ol8-icon {
17
17
  /* The outer asset box. Defaults to the canonical 24px source size. */
18
- --_ol8-icon-size: var(--ol8-icon-size-024);
18
+ --_ol8-icon-size: var(--ol8-size-icon-standard);
19
19
 
20
20
  display: inline-flex;
21
21
  flex: none;
@@ -36,17 +36,17 @@
36
36
  }
37
37
 
38
38
  /* ---- Icon Frame · universal sizes (Figma 418:51) ---------------------- */
39
- .ol8-icon[data-ol8-icon-size="9"] { --_ol8-icon-size: var(--ol8-icon-size-009); }
40
- .ol8-icon[data-ol8-icon-size="12"] { --_ol8-icon-size: var(--ol8-icon-size-012); }
41
- .ol8-icon[data-ol8-icon-size="18"] { --_ol8-icon-size: var(--ol8-icon-size-018); }
42
- .ol8-icon[data-ol8-icon-size="24"] { --_ol8-icon-size: var(--ol8-icon-size-024); }
43
- .ol8-icon[data-ol8-icon-size="30"] { --_ol8-icon-size: var(--ol8-icon-size-030); }
44
- .ol8-icon[data-ol8-icon-size="36"] { --_ol8-icon-size: var(--ol8-icon-size-036); }
45
- .ol8-icon[data-ol8-icon-size="48"] { --_ol8-icon-size: var(--ol8-icon-size-048); }
46
- .ol8-icon[data-ol8-icon-size="60"] { --_ol8-icon-size: var(--ol8-icon-size-060); }
47
- .ol8-icon[data-ol8-icon-size="72"] { --_ol8-icon-size: var(--ol8-icon-size-072); }
48
- .ol8-icon[data-ol8-icon-size="96"] { --_ol8-icon-size: var(--ol8-icon-size-096); }
49
- .ol8-icon[data-ol8-icon-size="108"] { --_ol8-icon-size: var(--ol8-icon-size-108); }
39
+ .ol8-icon[data-ol8-icon-size="9"] { --_ol8-icon-size: var(--ol8-size-icon-micro); }
40
+ .ol8-icon[data-ol8-icon-size="12"] { --_ol8-icon-size: var(--ol8-size-icon-compact); }
41
+ .ol8-icon[data-ol8-icon-size="18"] { --_ol8-icon-size: var(--ol8-size-icon-small); }
42
+ .ol8-icon[data-ol8-icon-size="24"] { --_ol8-icon-size: var(--ol8-size-icon-standard); }
43
+ .ol8-icon[data-ol8-icon-size="30"] { --_ol8-icon-size: var(--ol8-size-icon-medium); }
44
+ .ol8-icon[data-ol8-icon-size="36"] { --_ol8-icon-size: var(--ol8-size-icon-large); }
45
+ .ol8-icon[data-ol8-icon-size="48"] { --_ol8-icon-size: var(--ol8-size-icon-xlarge); }
46
+ .ol8-icon[data-ol8-icon-size="60"] { --_ol8-icon-size: var(--ol8-size-icon-spacious); }
47
+ .ol8-icon[data-ol8-icon-size="72"] { --_ol8-icon-size: var(--ol8-size-icon-display); }
48
+ .ol8-icon[data-ol8-icon-size="96"] { --_ol8-icon-size: var(--ol8-size-icon-hero); }
49
+ .ol8-icon[data-ol8-icon-size="108"] { --_ol8-icon-size: var(--ol8-size-icon-landmark); }
50
50
 
51
51
  /* ---- Direction ------------------------------------------------------- */
52
52
  /* "Direction: semantic registry controls RTL mirroring" (Iconography doc 84:13).
package/src/atoms/icon/icons.generated.js CHANGED
@@ -11,118 +11,396 @@ export const OL8_ICONS = {
11
11
  "figmaNode": "418:14",
12
12
  "mirrorInRTL": false,
13
13
  "sourceInk": "#151817",
14
- "body": "<path id=\"glyph-path\" d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
14
+ "body": "<path id=\"glyph-path\" d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
15
+ "elements": [
16
+ {
17
+ "tag": "path",
18
+ "attrs": {
19
+ "d": "M12 5V19M5 12H19",
20
+ "stroke": "currentColor",
21
+ "strokeWidth": "1.8",
22
+ "strokeLinecap": "round",
23
+ "strokeLinejoin": "round"
24
+ }
25
+ }
26
+ ]
15
27
  },
16
28
  "caution": {
17
29
  "category": "status",
18
30
  "figmaNode": "440:4",
19
31
  "mirrorInRTL": false,
20
32
  "sourceInk": "#151817",
21
- "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Stem\" d=\"M12 7V13\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Dot\" d=\"M12 17.6C12.5523 17.6 13 17.1523 13 16.6C13 16.0477 12.5523 15.6 12 15.6C11.4477 15.6 11 16.0477 11 16.6C11 17.1523 11.4477 17.6 12 17.6Z\" fill=\"currentColor\"/>"
33
+ "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Stem\" d=\"M12 7V13\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Caution Dot\" d=\"M12 17.6C12.5523 17.6 13 17.1523 13 16.6C13 16.0477 12.5523 15.6 12 15.6C11.4477 15.6 11 16.0477 11 16.6C11 17.1523 11.4477 17.6 12 17.6Z\" fill=\"currentColor\"/>",
34
+ "elements": [
35
+ {
36
+ "tag": "path",
37
+ "attrs": {
38
+ "d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
39
+ "stroke": "currentColor",
40
+ "strokeWidth": "1.8",
41
+ "strokeLinecap": "round",
42
+ "strokeLinejoin": "round"
43
+ }
44
+ },
45
+ {
46
+ "tag": "path",
47
+ "attrs": {
48
+ "d": "M12 7V13",
49
+ "stroke": "currentColor",
50
+ "strokeWidth": "1.8",
51
+ "strokeLinecap": "round",
52
+ "strokeLinejoin": "round"
53
+ }
54
+ },
55
+ {
56
+ "tag": "path",
57
+ "attrs": {
58
+ "d": "M12 17.6C12.5523 17.6 13 17.1523 13 16.6C13 16.0477 12.5523 15.6 12 15.6C11.4477 15.6 11 16.0477 11 16.6C11 17.1523 11.4477 17.6 12 17.6Z",
59
+ "fill": "currentColor"
60
+ }
61
+ }
62
+ ]
22
63
  },
23
64
  "check": {
24
65
  "category": "selection",
25
66
  "figmaNode": "391:4",
26
67
  "mirrorInRTL": false,
27
68
  "sourceInk": "#1a2a59",
28
- "body": "<path id=\"Check Mark\" d=\"M6.9 12.15L10.2 15.45L17.1 8.55\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
69
+ "body": "<path id=\"Check Mark\" d=\"M6.9 12.15L10.2 15.45L17.1 8.55\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
70
+ "elements": [
71
+ {
72
+ "tag": "path",
73
+ "attrs": {
74
+ "d": "M6.9 12.15L10.2 15.45L17.1 8.55",
75
+ "stroke": "currentColor",
76
+ "strokeWidth": "1.8",
77
+ "strokeLinecap": "round",
78
+ "strokeLinejoin": "round"
79
+ }
80
+ }
81
+ ]
29
82
  },
30
83
  "chevron-down": {
31
84
  "category": "navigation",
32
85
  "figmaNode": "521:106",
33
86
  "mirrorInRTL": false,
34
87
  "sourceInk": "#151817",
35
- "body": "<path id=\"glyph-path\" d=\"M5 8.5L12 15.5L19 8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
88
+ "body": "<path id=\"glyph-path\" d=\"M5 8.5L12 15.5L19 8.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
89
+ "elements": [
90
+ {
91
+ "tag": "path",
92
+ "attrs": {
93
+ "d": "M5 8.5L12 15.5L19 8.5",
94
+ "stroke": "currentColor",
95
+ "strokeWidth": "1.8",
96
+ "strokeLinecap": "round",
97
+ "strokeLinejoin": "round"
98
+ }
99
+ }
100
+ ]
36
101
  },
37
102
  "chevron-up": {
38
103
  "category": "navigation",
39
104
  "figmaNode": "521:108",
40
105
  "mirrorInRTL": false,
41
106
  "sourceInk": "#151817",
42
- "body": "<path id=\"glyph-path\" d=\"M5 15.5L12 8.5L19 15.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
107
+ "body": "<path id=\"glyph-path\" d=\"M5 15.5L12 8.5L19 15.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
108
+ "elements": [
109
+ {
110
+ "tag": "path",
111
+ "attrs": {
112
+ "d": "M5 15.5L12 8.5L19 15.5",
113
+ "stroke": "currentColor",
114
+ "strokeWidth": "1.8",
115
+ "strokeLinecap": "round",
116
+ "strokeLinejoin": "round"
117
+ }
118
+ }
119
+ ]
43
120
  },
44
121
  "clear": {
45
122
  "category": "action",
46
123
  "figmaNode": "557:4",
47
124
  "mirrorInRTL": false,
48
125
  "sourceInk": "#151817",
49
- "body": "<path id=\"glyph-path\" d=\"M3 3L17 17M17 3L3 17\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
126
+ "body": "<path id=\"glyph-path\" d=\"M3 3L17 17M17 3L3 17\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
127
+ "elements": [
128
+ {
129
+ "tag": "path",
130
+ "attrs": {
131
+ "d": "M3 3L17 17M17 3L3 17",
132
+ "stroke": "currentColor",
133
+ "strokeWidth": "1.8",
134
+ "strokeLinecap": "round",
135
+ "strokeLinejoin": "round"
136
+ }
137
+ }
138
+ ]
50
139
  },
51
140
  "close": {
52
141
  "category": "action",
53
142
  "figmaNode": "894:123",
54
143
  "mirrorInRTL": false,
55
144
  "sourceInk": "#151817",
56
- "body": "<path id=\"glyph-path\" d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
145
+ "body": "<path id=\"glyph-path\" d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
146
+ "elements": [
147
+ {
148
+ "tag": "path",
149
+ "attrs": {
150
+ "d": "M6 6L18 18M18 6L6 18",
151
+ "stroke": "currentColor",
152
+ "strokeWidth": "1.8",
153
+ "strokeLinecap": "round",
154
+ "strokeLinejoin": "round"
155
+ }
156
+ }
157
+ ]
57
158
  },
58
159
  "critical": {
59
160
  "category": "status",
60
161
  "figmaNode": "418:18",
61
162
  "mirrorInRTL": false,
62
163
  "sourceInk": "#151817",
63
- "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Critical Mark\" d=\"M9 9L15 15M15 9L9 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
164
+ "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Critical Mark\" d=\"M9 9L15 15M15 9L9 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
165
+ "elements": [
166
+ {
167
+ "tag": "path",
168
+ "attrs": {
169
+ "d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
170
+ "stroke": "currentColor",
171
+ "strokeWidth": "1.8",
172
+ "strokeLinecap": "round",
173
+ "strokeLinejoin": "round"
174
+ }
175
+ },
176
+ {
177
+ "tag": "path",
178
+ "attrs": {
179
+ "d": "M9 9L15 15M15 9L9 15",
180
+ "stroke": "currentColor",
181
+ "strokeWidth": "1.8",
182
+ "strokeLinecap": "round",
183
+ "strokeLinejoin": "round"
184
+ }
185
+ }
186
+ ]
64
187
  },
65
188
  "forward": {
66
189
  "category": "navigation",
67
190
  "figmaNode": "418:16",
68
191
  "mirrorInRTL": true,
69
192
  "sourceInk": "#151817",
70
- "body": "<path id=\"artwork\" d=\"M3 12H21M15 18L21 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
193
+ "body": "<path id=\"artwork\" d=\"M3 12H21M15 18L21 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
194
+ "elements": [
195
+ {
196
+ "tag": "path",
197
+ "attrs": {
198
+ "d": "M3 12H21M15 18L21 12L15 6",
199
+ "stroke": "currentColor",
200
+ "strokeWidth": "1.8",
201
+ "strokeLinecap": "round",
202
+ "strokeLinejoin": "round"
203
+ }
204
+ }
205
+ ]
71
206
  },
72
207
  "informative": {
73
208
  "category": "status",
74
209
  "figmaNode": "440:11",
75
210
  "mirrorInRTL": false,
76
211
  "sourceInk": "#151817",
77
- "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Stem\" d=\"M12 11V16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Dot\" d=\"M12 8.6C12.5523 8.6 13 8.15228 13 7.6C13 7.04771 12.5523 6.6 12 6.6C11.4477 6.6 11 7.04771 11 7.6C11 8.15228 11.4477 8.6 12 8.6Z\" fill=\"currentColor\"/>"
212
+ "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Stem\" d=\"M12 11V16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Information Dot\" d=\"M12 8.6C12.5523 8.6 13 8.15228 13 7.6C13 7.04771 12.5523 6.6 12 6.6C11.4477 6.6 11 7.04771 11 7.6C11 8.15228 11.4477 8.6 12 8.6Z\" fill=\"currentColor\"/>",
213
+ "elements": [
214
+ {
215
+ "tag": "path",
216
+ "attrs": {
217
+ "d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
218
+ "stroke": "currentColor",
219
+ "strokeWidth": "1.8",
220
+ "strokeLinecap": "round",
221
+ "strokeLinejoin": "round"
222
+ }
223
+ },
224
+ {
225
+ "tag": "path",
226
+ "attrs": {
227
+ "d": "M12 11V16",
228
+ "stroke": "currentColor",
229
+ "strokeWidth": "1.8",
230
+ "strokeLinecap": "round",
231
+ "strokeLinejoin": "round"
232
+ }
233
+ },
234
+ {
235
+ "tag": "path",
236
+ "attrs": {
237
+ "d": "M12 8.6C12.5523 8.6 13 8.15228 13 7.6C13 7.04771 12.5523 6.6 12 6.6C11.4477 6.6 11 7.04771 11 7.6C11 8.15228 11.4477 8.6 12 8.6Z",
238
+ "fill": "currentColor"
239
+ }
240
+ }
241
+ ]
78
242
  },
79
243
  "loading": {
80
244
  "category": "status",
81
245
  "figmaNode": "440:2",
82
246
  "mirrorInRTL": false,
83
247
  "sourceInk": "#151817",
84
- "body": "<path id=\"glyph-path\" d=\"M12 3C14.0823 2.99817 16.1008 3.71843 17.7116 5.03806C19.3223 6.35769 20.4257 8.19503 20.8336 10.237C21.2415 12.2789 20.9287 14.3992 19.9485 16.2363C18.9684 18.0735 17.3815 19.514 15.4583 20.3123C13.5351 21.1106 11.3946 21.2174 9.40156 20.6143C7.40849 20.0113 5.68619 18.7358 4.52813 17.0053C3.37008 15.2747 2.84794 13.1961 3.05068 11.1237C3.25343 9.05131 4.16851 7.11332 5.64 5.64\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
248
+ "body": "<path id=\"glyph-path\" d=\"M12 3C14.0823 2.99817 16.1008 3.71843 17.7116 5.03806C19.3223 6.35769 20.4257 8.19503 20.8336 10.237C21.2415 12.2789 20.9287 14.3992 19.9485 16.2363C18.9684 18.0735 17.3815 19.514 15.4583 20.3123C13.5351 21.1106 11.3946 21.2174 9.40156 20.6143C7.40849 20.0113 5.68619 18.7358 4.52813 17.0053C3.37008 15.2747 2.84794 13.1961 3.05068 11.1237C3.25343 9.05131 4.16851 7.11332 5.64 5.64\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
249
+ "elements": [
250
+ {
251
+ "tag": "path",
252
+ "attrs": {
253
+ "d": "M12 3C14.0823 2.99817 16.1008 3.71843 17.7116 5.03806C19.3223 6.35769 20.4257 8.19503 20.8336 10.237C21.2415 12.2789 20.9287 14.3992 19.9485 16.2363C18.9684 18.0735 17.3815 19.514 15.4583 20.3123C13.5351 21.1106 11.3946 21.2174 9.40156 20.6143C7.40849 20.0113 5.68619 18.7358 4.52813 17.0053C3.37008 15.2747 2.84794 13.1961 3.05068 11.1237C3.25343 9.05131 4.16851 7.11332 5.64 5.64",
254
+ "stroke": "currentColor",
255
+ "strokeWidth": "1.8",
256
+ "strokeLinecap": "round",
257
+ "strokeLinejoin": "round"
258
+ }
259
+ }
260
+ ]
85
261
  },
86
262
  "mixed": {
87
263
  "category": "selection",
88
264
  "figmaNode": "391:9",
89
265
  "mirrorInRTL": false,
90
266
  "sourceInk": "#151817",
91
- "body": "<rect id=\"Mixed Mark\" x=\"7.5\" y=\"11.1\" width=\"9\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"/>"
267
+ "body": "<rect id=\"Mixed Mark\" x=\"7.5\" y=\"11.1\" width=\"9\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"/>",
268
+ "elements": [
269
+ {
270
+ "tag": "rect",
271
+ "attrs": {
272
+ "x": "7.5",
273
+ "y": "11.1",
274
+ "width": "9",
275
+ "height": "1.8",
276
+ "rx": "0.9",
277
+ "fill": "currentColor"
278
+ }
279
+ }
280
+ ]
92
281
  },
93
282
  "positive": {
94
283
  "category": "status",
95
284
  "figmaNode": "440:8",
96
285
  "mirrorInRTL": false,
97
286
  "sourceInk": "#151817",
98
- "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Positive Mark\" d=\"M7.60002 12.2L10.6 15.2L16.6 9.2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
287
+ "body": "<path id=\"Status Ring\" d=\"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Positive Mark\" d=\"M7.60002 12.2L10.6 15.2L16.6 9.2\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
288
+ "elements": [
289
+ {
290
+ "tag": "path",
291
+ "attrs": {
292
+ "d": "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
293
+ "stroke": "currentColor",
294
+ "strokeWidth": "1.8",
295
+ "strokeLinecap": "round",
296
+ "strokeLinejoin": "round"
297
+ }
298
+ },
299
+ {
300
+ "tag": "path",
301
+ "attrs": {
302
+ "d": "M7.60002 12.2L10.6 15.2L16.6 9.2",
303
+ "stroke": "currentColor",
304
+ "strokeWidth": "1.8",
305
+ "strokeLinecap": "round",
306
+ "strokeLinejoin": "round"
307
+ }
308
+ }
309
+ ]
99
310
  },
100
311
  "search": {
101
312
  "category": "action",
102
313
  "figmaNode": "557:2",
103
314
  "mirrorInRTL": false,
104
315
  "sourceInk": "#151817",
105
- "body": "<path id=\"glyph-path\" d=\"M15 15L20 20M10 3C6.134 3 3 6.134 3 10C3 13.866 6.134 17 10 17C13.866 17 17 13.866 17 10C17 6.134 13.866 3 10 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
316
+ "body": "<path id=\"glyph-path\" d=\"M15 15L20 20M10 3C6.134 3 3 6.134 3 10C3 13.866 6.134 17 10 17C13.866 17 17 13.866 17 10C17 6.134 13.866 3 10 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
317
+ "elements": [
318
+ {
319
+ "tag": "path",
320
+ "attrs": {
321
+ "d": "M15 15L20 20M10 3C6.134 3 3 6.134 3 10C3 13.866 6.134 17 10 17C13.866 17 17 13.866 17 10C17 6.134 13.866 3 10 3Z",
322
+ "stroke": "currentColor",
323
+ "strokeWidth": "1.8",
324
+ "strokeLinecap": "round",
325
+ "strokeLinejoin": "round"
326
+ }
327
+ }
328
+ ]
106
329
  },
107
330
  "selected-dot": {
108
331
  "category": "selection",
109
332
  "figmaNode": "391:14",
110
333
  "mirrorInRTL": false,
111
334
  "sourceInk": "#e2e9ff",
112
- "body": "<circle id=\"Selected Dot\" cx=\"12\" cy=\"12\" r=\"6\" fill=\"currentColor\"/>"
335
+ "body": "<circle id=\"Selected Dot\" cx=\"12\" cy=\"12\" r=\"6\" fill=\"currentColor\"/>",
336
+ "elements": [
337
+ {
338
+ "tag": "circle",
339
+ "attrs": {
340
+ "cx": "12",
341
+ "cy": "12",
342
+ "r": "6",
343
+ "fill": "currentColor"
344
+ }
345
+ }
346
+ ]
113
347
  },
114
348
  "visibility-closed": {
115
349
  "category": "action",
116
350
  "figmaNode": "440:15",
117
351
  "mirrorInRTL": false,
118
352
  "sourceInk": "#151817",
119
- "body": "<path id=\"Closed Lid\" d=\"M4.5 10.5C6.75 13.5 9.25 15 12 15C14.75 15 17.25 13.5 19.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Lashes\" d=\"M6.75 13.05L5.4 15M9.75 14.55L9.3 16.8M14.25 14.55L14.7 16.8M17.25 13.05L18.6 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
353
+ "body": "<path id=\"Closed Lid\" d=\"M4.5 10.5C6.75 13.5 9.25 15 12 15C14.75 15 17.25 13.5 19.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Lashes\" d=\"M6.75 13.05L5.4 15M9.75 14.55L9.3 16.8M14.25 14.55L14.7 16.8M17.25 13.05L18.6 15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
354
+ "elements": [
355
+ {
356
+ "tag": "path",
357
+ "attrs": {
358
+ "d": "M4.5 10.5C6.75 13.5 9.25 15 12 15C14.75 15 17.25 13.5 19.5 10.5",
359
+ "stroke": "currentColor",
360
+ "strokeWidth": "1.8",
361
+ "strokeLinecap": "round",
362
+ "strokeLinejoin": "round"
363
+ }
364
+ },
365
+ {
366
+ "tag": "path",
367
+ "attrs": {
368
+ "d": "M6.75 13.05L5.4 15M9.75 14.55L9.3 16.8M14.25 14.55L14.7 16.8M17.25 13.05L18.6 15",
369
+ "stroke": "currentColor",
370
+ "strokeWidth": "1.8",
371
+ "strokeLinecap": "round",
372
+ "strokeLinejoin": "round"
373
+ }
374
+ }
375
+ ]
120
376
  },
121
377
  "visibility-open": {
122
378
  "category": "action",
123
379
  "figmaNode": "418:21",
124
380
  "mirrorInRTL": false,
125
381
  "sourceInk": "#151817",
126
- "body": "<path id=\"Eye Contour\" d=\"M3 12C5.25 8.25 8.25 6.375 12 6.375C15.75 6.375 18.75 8.25 21 12C18.75 15.75 15.75 17.625 12 17.625C8.25 17.625 5.25 15.75 3 12Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Pupil\" d=\"M12 14.625C13.4497 14.625 14.625 13.4497 14.625 12C14.625 10.5503 13.4497 9.375 12 9.375C10.5503 9.375 9.375 10.5503 9.375 12C9.375 13.4497 10.5503 14.625 12 14.625Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
382
+ "body": "<path id=\"Eye Contour\" d=\"M3 12C5.25 8.25 8.25 6.375 12 6.375C15.75 6.375 18.75 8.25 21 12C18.75 15.75 15.75 17.625 12 17.625C8.25 17.625 5.25 15.75 3 12Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path id=\"Pupil\" d=\"M12 14.625C13.4497 14.625 14.625 13.4497 14.625 12C14.625 10.5503 13.4497 9.375 12 9.375C10.5503 9.375 9.375 10.5503 9.375 12C9.375 13.4497 10.5503 14.625 12 14.625Z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
383
+ "elements": [
384
+ {
385
+ "tag": "path",
386
+ "attrs": {
387
+ "d": "M3 12C5.25 8.25 8.25 6.375 12 6.375C15.75 6.375 18.75 8.25 21 12C18.75 15.75 15.75 17.625 12 17.625C8.25 17.625 5.25 15.75 3 12Z",
388
+ "stroke": "currentColor",
389
+ "strokeWidth": "1.8",
390
+ "strokeLinecap": "round",
391
+ "strokeLinejoin": "round"
392
+ }
393
+ },
394
+ {
395
+ "tag": "path",
396
+ "attrs": {
397
+ "d": "M12 14.625C13.4497 14.625 14.625 13.4497 14.625 12C14.625 10.5503 13.4497 9.375 12 9.375C10.5503 9.375 9.375 10.5503 9.375 12C9.375 13.4497 10.5503 14.625 12 14.625Z",
398
+ "stroke": "currentColor",
399
+ "strokeWidth": "1.8",
400
+ "strokeLinecap": "round",
401
+ "strokeLinejoin": "round"
402
+ }
403
+ }
404
+ ]
127
405
  }
128
406
  };
package/src/atoms/selection-indicator/selection-indicator.css CHANGED
@@ -61,7 +61,8 @@
61
61
  .ol8-selection--checkbox[data-ol8-selection="checked"],
62
62
  .ol8-selection--checkbox[data-ol8-selection="mixed"] {
63
63
  border-width: 0;
64
- --_surface: var(--ol8-color-selection-surface);
64
+ --_surface: var(--ol8-color-actionprimary-default);
65
+ --_ink: var(--ol8-color-actionprimary-content);
65
66
  }
66
67
  .ol8-selection--checkbox[data-ol8-availability="disabled"] { --_edge: var(--ol8-color-border-disabled); }
67
68
  .ol8-selection--checkbox[data-ol8-availability="disabled"][data-ol8-selection="checked"],
@@ -82,9 +83,9 @@
82
83
  9 x 1.8px bar — an approved optical exception — so it is a fixed-size rule
83
84
  here rather than a scaled glyph. */
84
85
  .ol8-selection--checkbox[data-ol8-selection="mixed"] > .ol8-selection__mark {
85
- inline-size: var(--ol8-component-choice-mixed-bar-width);
86
- block-size: var(--ol8-component-choice-mixed-bar-height);
87
- border-radius: calc(var(--ol8-component-choice-mixed-bar-height) / 2);
86
+ inline-size: var(--ol8-component-checkbox-mark-mixedwidth);
87
+ block-size: var(--ol8-component-checkbox-mark-stroke);
88
+ border-radius: calc(var(--ol8-component-checkbox-mark-stroke) / 2);
88
89
  background: currentColor;
89
90
  }
90
91
 
@@ -93,15 +94,25 @@
93
94
  border: var(--ol8-component-radio-boundary) solid var(--_edge);
94
95
  border-radius: var(--ol8-shape-radius-full);
95
96
  }
97
+ /* A selected radio is a checked checkbox in a circle, so it reads the same way:
98
+ the boundary drops and the whole indicator fills with the primary action
99
+ colour, carrying its own content role as the mark. Figma painted both the ring
100
+ and the dot in Selection Surface, which left the radio outlined where the
101
+ checkbox is filled and put the dot at 1.16:1 on the canvas against a 3:1
102
+ minimum. The fill is 8.81:1 and the mark 8.81:1 on the fill. */
96
103
  .ol8-selection--radio[data-ol8-selection="selected"] {
97
- --_edge: var(--ol8-color-selection-surface);
98
- --_ink: var(--ol8-color-selection-surface);
104
+ border-width: 0;
105
+ --_surface: var(--ol8-color-actionprimary-default);
106
+ --_ink: var(--ol8-color-actionprimary-content);
99
107
  }
100
108
  .ol8-selection--radio[data-ol8-availability="disabled"] { --_edge: var(--ol8-color-border-disabled); }
101
109
  .ol8-selection--radio[data-ol8-availability="disabled"][data-ol8-selection="selected"] {
102
- --_ink: var(--ol8-color-icon-disabled);
110
+ border-width: 0;
111
+ --_surface: var(--ol8-color-surface-disabled);
112
+ --_ink: var(--ol8-color-icon-disabled);
103
113
  }
104
114
  .ol8-selection--radio > .ol8-selection__mark {
115
+ flex: none; /* never let the flex row shrink it oval */
105
116
  inline-size: var(--_dot);
106
117
  block-size: var(--_dot);
107
118
  border-radius: var(--ol8-shape-radius-full);
package/src/materials/gem/gem.css CHANGED
@@ -35,7 +35,7 @@
35
35
  .ol8-icon-btn[data-ol8-material="gem"] > .ol8-icon-btn__surface {
36
36
  position: relative;
37
37
  isolation: isolate;
38
- --_rim: var(--ol8-material-control-gem--rim-default);
38
+ --_rim: var(--ol8-material-control-gem-rim-default);
39
39
  }
40
40
 
41
41
  /* The regular opaque background stays underneath on purpose — it is what
@@ -48,13 +48,13 @@
48
48
  z-index: -1;
49
49
  border-radius: inherit;
50
50
  pointer-events: none;
51
- backdrop-filter: blur(var(--ol8-material-control-gem--blur));
52
- -webkit-backdrop-filter: blur(var(--ol8-material-control-gem--blur));
51
+ backdrop-filter: blur(var(--ol8-material-control-gem-blur));
52
+ -webkit-backdrop-filter: blur(var(--ol8-material-control-gem-blur));
53
53
  background-image: linear-gradient(
54
54
  to bottom right,
55
- var(--_g1) var(--ol8-material-control-gem--stop-1),
56
- var(--_g2) var(--ol8-material-control-gem--stop-2),
57
- var(--_g3) var(--ol8-material-control-gem--stop-3));
55
+ var(--_g1) var(--ol8-material-control-gem-gradient-start),
56
+ var(--_g2) var(--ol8-material-control-gem-gradient-mid),
57
+ var(--_g3) var(--ol8-material-control-gem-gradient-end));
58
58
  }
59
59
 
60
60
  .ol8-btn[data-ol8-material="gem"]::after,
@@ -65,35 +65,35 @@
65
65
  border-radius: inherit;
66
66
  pointer-events: none;
67
67
  box-shadow:
68
- inset 0 2px 1px 0 var(--ol8-material-control-gem--rim-specular),
68
+ inset 0 2px 1px 0 var(--ol8-material-control-gem-rim-specular),
69
69
  inset 0 0 0 0 var(--_rim);
70
70
  }
71
71
 
72
72
  /* ---- Primary · three-stop same-hue body ------------------------------ */
73
73
  .ol8-btn--primary[data-ol8-material="gem"],
74
74
  .ol8-icon-btn--primary[data-ol8-material="gem"] > .ol8-icon-btn__surface {
75
- --_g1: var(--ol8-material-control-gem--primary-start);
76
- --_g2: var(--ol8-material-control-gem--primary-mid);
77
- --_g3: var(--ol8-material-control-gem--primary-end);
78
- --_fg: var(--ol8-material-control-gem--primary-content);
79
- --_ink: var(--ol8-material-control-gem--primary-content);
75
+ --_g1: var(--ol8-material-control-gem-primary-start);
76
+ --_g2: var(--ol8-material-control-gem-primary-mid);
77
+ --_g3: var(--ol8-material-control-gem-primary-end);
78
+ --_fg: var(--ol8-material-control-gem-primary-content);
79
+ --_ink: var(--ol8-material-control-gem-primary-content);
80
80
  }
81
81
  .ol8-btn--primary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]),
82
82
  .ol8-icon-btn--primary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface {
83
- --_g1: var(--ol8-material-control-gem--primary-hover-start);
84
- --_g2: var(--ol8-material-control-gem--primary-hover-mid);
85
- --_g3: var(--ol8-material-control-gem--primary-hover-end);
86
- --_rim: var(--ol8-material-control-gem--rim-hover);
83
+ --_g1: var(--ol8-material-control-gem-primary-hoverstart);
84
+ --_g2: var(--ol8-material-control-gem-primary-hovermid);
85
+ --_g3: var(--ol8-material-control-gem-primary-hoverend);
86
+ --_rim: var(--ol8-material-control-gem-rim-hover);
87
87
  }
88
88
  /* Pressed reuses the HOVER stops and adds the cut-edge drop shadow. */
89
89
  .ol8-btn--primary[data-ol8-material="gem"]:active:not(:disabled),
90
90
  .ol8-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled),
91
91
  .ol8-icon-btn--primary[data-ol8-material="gem"]:active:not(:disabled) > .ol8-icon-btn__surface,
92
92
  .ol8-icon-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled) > .ol8-icon-btn__surface {
93
- --_g1: var(--ol8-material-control-gem--primary-hover-start);
94
- --_g2: var(--ol8-material-control-gem--primary-hover-mid);
95
- --_g3: var(--ol8-material-control-gem--primary-hover-end);
96
- --_rim: var(--ol8-material-control-gem--rim-hover);
93
+ --_g1: var(--ol8-material-control-gem-primary-hoverstart);
94
+ --_g2: var(--ol8-material-control-gem-primary-hovermid);
95
+ --_g3: var(--ol8-material-control-gem-primary-hoverend);
96
+ --_rim: var(--ol8-material-control-gem-rim-hover);
97
97
  }
98
98
  .ol8-btn--primary[data-ol8-material="gem"]:active:not(:disabled),
99
99
  .ol8-btn--primary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled) {
@@ -101,9 +101,9 @@
101
101
  }
102
102
  .ol8-btn--primary[data-ol8-material="gem"][data-ol8-loading],
103
103
  .ol8-icon-btn--primary[data-ol8-material="gem"][data-ol8-loading] > .ol8-icon-btn__surface {
104
- --_g1: var(--ol8-material-control-gem--primary-loading-start);
105
- --_g2: var(--ol8-material-control-gem--primary-loading-mid);
106
- --_g3: var(--ol8-material-control-gem--primary-loading-end);
104
+ --_g1: var(--ol8-material-control-gem-primary-loadingstart);
105
+ --_g2: var(--ol8-material-control-gem-primary-loadingmid);
106
+ --_g3: var(--ol8-material-control-gem-primary-loadingend);
107
107
  }
108
108
 
109
109
  /* ---- Secondary · transparent body with an integrated light rim -------
@@ -112,35 +112,35 @@
112
112
  .ol8-btn--secondary[data-ol8-material="gem"] { --_bw: 0px; }
113
113
  .ol8-btn--secondary[data-ol8-material="gem"],
114
114
  .ol8-icon-btn--secondary[data-ol8-material="gem"] > .ol8-icon-btn__surface {
115
- --_g1: var(--ol8-material-control-gem--secondary-high);
116
- --_g2: var(--ol8-material-control-gem--secondary-mid);
117
- --_g3: var(--ol8-material-control-gem--secondary-low);
118
- --_fg: var(--ol8-material-control-gem--secondary-content);
119
- --_ink: var(--ol8-material-control-gem--secondary-content);
115
+ --_g1: var(--ol8-material-control-gem-secondary-high);
116
+ --_g2: var(--ol8-material-control-gem-secondary-mid);
117
+ --_g3: var(--ol8-material-control-gem-secondary-low);
118
+ --_fg: var(--ol8-material-control-gem-secondary-content);
119
+ --_ink: var(--ol8-material-control-gem-secondary-content);
120
120
  --_bd: transparent;
121
121
  }
122
122
  .ol8-btn--secondary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]),
123
123
  .ol8-icon-btn--secondary[data-ol8-material="gem"]:hover:not(:disabled):not([data-ol8-loading]) > .ol8-icon-btn__surface {
124
- --_g1: var(--ol8-material-control-gem--secondary-hover-high);
125
- --_g2: var(--ol8-material-control-gem--secondary-hover-mid);
126
- --_g3: var(--ol8-material-control-gem--secondary-hover-low);
127
- --_rim: var(--ol8-material-control-gem--rim-hover);
128
- --_fg: var(--ol8-material-control-gem--secondary-content);
124
+ --_g1: var(--ol8-material-control-gem-secondary-hoverhigh);
125
+ --_g2: var(--ol8-material-control-gem-secondary-hovermid);
126
+ --_g3: var(--ol8-material-control-gem-secondary-hoverlow);
127
+ --_rim: var(--ol8-material-control-gem-rim-hover);
128
+ --_fg: var(--ol8-material-control-gem-secondary-content);
129
129
  }
130
130
  .ol8-btn--secondary[data-ol8-material="gem"]:active:not(:disabled),
131
131
  .ol8-btn--secondary[data-ol8-material="gem"][aria-pressed="true"]:not(:disabled),
132
132
  .ol8-icon-btn--secondary[data-ol8-material="gem"]:active:not(:disabled) > .ol8-icon-btn__surface {
133
- --_g1: var(--ol8-material-control-gem--secondary-hover-high);
134
- --_g2: var(--ol8-material-control-gem--secondary-hover-mid);
135
- --_g3: var(--ol8-material-control-gem--secondary-hover-low);
136
- --_rim: var(--ol8-material-control-gem--rim-hover);
137
- --_fg: var(--ol8-material-control-gem--secondary-content);
133
+ --_g1: var(--ol8-material-control-gem-secondary-hoverhigh);
134
+ --_g2: var(--ol8-material-control-gem-secondary-hovermid);
135
+ --_g3: var(--ol8-material-control-gem-secondary-hoverlow);
136
+ --_rim: var(--ol8-material-control-gem-rim-hover);
137
+ --_fg: var(--ol8-material-control-gem-secondary-content);
138
138
  }
139
139
  .ol8-btn--secondary[data-ol8-material="gem"][data-ol8-loading],
140
140
  .ol8-icon-btn--secondary[data-ol8-material="gem"][data-ol8-loading] > .ol8-icon-btn__surface {
141
- --_g1: var(--ol8-material-control-gem--secondary-loading-high);
142
- --_g2: var(--ol8-material-control-gem--secondary-loading-mid);
143
- --_g3: var(--ol8-material-control-gem--secondary-loading-low);
141
+ --_g1: var(--ol8-material-control-gem-secondary-loadinghigh);
142
+ --_g2: var(--ol8-material-control-gem-secondary-loadingmid);
143
+ --_g3: var(--ol8-material-control-gem-secondary-loadinglow);
144
144
  }
145
145
 
146
146
  /* Content must sit above the ::before body. */
package/src/molecules/button/button.css CHANGED
@@ -54,7 +54,7 @@
54
54
  letter-spacing: 0;
55
55
  /* AR One Sans variable axis. Figma sets this on every functional text node;
56
56
  omitting it shifts glyph advances and the button measures narrow. */
57
- font-variation-settings: var(--ol8-font-variation-functional);
57
+ font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
58
58
 
59
59
  cursor: pointer;
60
60
  user-select: none;
package/src/molecules/choice-item/choice-item.css CHANGED
@@ -46,7 +46,7 @@
46
46
  min-block-size: var(--ol8-component-choice-rowminimum);
47
47
  padding-block: var(--_pad);
48
48
  font-family: var(--ol8-font-family-functional);
49
- font-variation-settings: var(--ol8-font-variation-functional);
49
+ font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
50
50
  cursor: pointer;
51
51
  }
52
52
  .ol8-choice[data-ol8-availability="disabled"] { cursor: not-allowed; }
package/src/molecules/selection-option/selection-option.css CHANGED
@@ -29,7 +29,7 @@
29
29
  align-items: center;
30
30
  min-block-size: var(--_min);
31
31
  font-family: var(--ol8-font-family-functional);
32
- font-variation-settings: var(--ol8-font-variation-functional);
32
+ font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
33
33
  list-style: none;
34
34
  cursor: pointer;
35
35
  }
package/src/organisms/choice-group/choice-group.css CHANGED
@@ -31,7 +31,7 @@
31
31
  border: 0;
32
32
  border-radius: var(--ol8-shape-radius-standard);
33
33
  font-family: var(--ol8-font-family-functional);
34
- font-variation-settings: var(--ol8-font-variation-functional);
34
+ font-variation-settings: "ARRR" var(--ol8-font-axis-arrr-baseline);
35
35
  min-inline-size: 0; /* fieldset defaults to min-content; this lets it shrink */
36
36
  }
37
37