Rename space models values and primitives to "size"

docs/designer-decisions/src/content/docs/api/designer-decisions/Values/Types/SizeValue.mdx

@@ -0,0 +1,38 @@
+---
+title: SizeValue
+slug: api/designer-decisions/Values/Types/SizeValue
+sidebar:
+    order: 0
+---
+
+Extends `BaseValue<Size>`
+
+```ts
+export type SizeRaw = string | number;
+
+export type SizeAbsoluteUnits = 'px' | 'rem';
+
+export type SizeObjectLiteral = {
+    value: number;
+    units: SizeAbsoluteUnits;
+};
+export type SizeLiteral = SizeRaw | SizeObjectLiteral;
+
+export type Size = {
+    value: number;
+    units: SizeAbsoluteUnits;
+    toString: () => string;
+};
+
+export type SizeFormatOptions = {
+    quantize?: number;
+};
+
+export type SizeValue = {
+    get: () => Size;
+    raw: () => number;
+    quantized: (quantize?: number) => number;
+    toString: (options?: SizeFormatOptions) => string;
+    toObject: (options?: SizeFormatOptions) => SizeObjectLiteral;
+};
+```

docs/designer-decisions/src/content/docs/api/designer-functions/cli-helpers/formatDecisionStatus.mdx

@@ -53,10 +53,10 @@ produced.decisions().forEach(status => console.info(formatDecisionStatus(status)
 Returns one decision per line, with nested value errors.
 
 ```
-🟨 | Sizing Scale | space-scale/bounded | [0px, 0px, 0px, 0px, 0px, 0px] | 2 warnings
+🟨 | Sizing Scale | size-scale/bounded | [0px, 0px, 0px, 0px, 0px, 0px] | 2 warnings
 
- > 🟨 Ref (SpaceValue) {"$name":"Size Smallest"} not found.
- > 🟨 Ref (SpaceValue) {"$name":"Brand Black"} matched "color-value".
+ > 🟨 Ref (SizeValue) {"$name":"Size Smallest"} not found.
+ > 🟨 Ref (SizeValue) {"$name":"Brand Black"} matched "color-value".
 ```
 
 Using `formatDecisionStatus(status, ['status-colors', 'name', 'value'])`

docs/designer-decisions/src/content/docs/api/designer-shows/Types/SpaceVizName.mdx → docs/designer-decisions/src/content/docs/api/designer-shows/Types/SizeVizName.mdx

@@ -1,27 +1,27 @@
 ---
-title: SpaceVizName
-slug: api/designer-shows/Types/SpaceVizName
+title: SizeVizName
+slug: api/designer-shows/Types/SizeVizName
 ---
 
 import { ShowDecision } from '@noodlestan/designer-shows/astro';
 
-Available visualizations for [Space Values](/integrations/Astro/Composable/Values/#showspacevalue)
+Available visualizations for [Size Values](/integrations/Astro/Composable/Values/#showsizevalue)
 
 ```ts
-type SpaceVizName = 'bar-h' | 'bar-v' | 'square' | 'circle';
+type SizeVizName = 'bar-h' | 'bar-v' | 'square' | 'circle';
 ```
 
 When rendering decisions you can chose a different visualization by setting the [viz prop](/integrations/Astro/Props#-viz-true-boolean--string) to one of these.
 
 ```mdx
-<ShowSpaceValueDecision d="Space Unit" viz="..." />
+<ShowSizeValueDecision d="Size Unit" viz="..." />
 ```
 
 ## Type Values
 
 ### `bar-h` (default)
 
-<ShowDecision d="Space Unit" size="xs" viz="bar-h" />
+<ShowDecision d="Size Unit" size="xs" viz="bar-h" />
 
 ### `bar-v`
 

docs/designer-decisions/src/content/docs/examples/space.mdx

@@ -13,36 +13,36 @@ import {
     ShowDecisionCard,
 } from '@noodlestan/designer-shows/astro';
 
-## Space values
+## Size values
 
 <details>
-<summary>SpaceValue</summary>
+<summary>SizeValue</summary>
 
 ```mdx
-<ShowDecision d="Space Unit" viz="square" />
+<ShowDecision d="Size Unit" viz="square" />
 ```
 
 </details>
 
 <LayoutCentered>
-    <ShowDecision d="Space Unit" viz="square" />
+    <ShowDecision d="Size Unit" viz="square" />
 </LayoutCentered>
 
-## Space scales
+## Size scales
 
 <details>
-<summary>SpaceScale (default viz / xs size)</summary>
+<summary>SizeScale (default viz / xs size)</summary>
 
 ```mdx
-<ShowDecision d="Layout Space Scale" size="xs" />
+<ShowDecision d="Layout Gap Scale" size="xs" />
 ```
 
 </details>
 
-<ShowDecision d="Layout Space Scale" size="xs" />
+<ShowDecision d="Layout Gap Scale" size="xs" />
 
 <details>
-<summary>SpaceScale (vertical bar viz)</summary>
+<summary>SizeScale (vertical bar viz)</summary>
 
 ```mdx
 <ShowDecision d="Layout Rhythm Scale" viz="bar-v" />
@@ -53,18 +53,18 @@ import {
 <ShowDecision d="Layout Rhythm Scale" viz="bar-v" />
 
 <details>
-<summary>SpaceScale (square viz vs circle viz)</summary>
+<summary>SizeScale (square viz vs circle viz)</summary>
 
 ```mdx
-<ShowDecision d="Sizing Space Scale" viz="square" />
-<ShowDecision d="Sizing Space Scale" viz="circle" />
+<ShowDecision d="Sizing Scale" viz="square" />
+<ShowDecision d="Sizing Scale" viz="circle" />
 ```
 
 </details>
 
 <LayoutGrid>
-    <ShowDecision d="Sizing Space Scale" viz="square" />
-    <ShowDecision d="Sizing Space Scale" viz="circle" />
+    <ShowDecision d="Sizing Scale" viz="square" />
+    <ShowDecision d="Sizing Scale" viz="circle" />
 </LayoutGrid>
 
 ## Cards
@@ -73,23 +73,23 @@ import {
 <summary>SpaceValue (DecisionCard / model and params shown)</summary>
 
 ```mdx
-<ShowDecisionCard d="Space Unit" model params>
+<ShowDecisionCard d="Size Unit" model params>
 ```
 
 </details>
 
-<ShowDecisionCard d="Space Unit" model params />
+<ShowDecisionCard d="Size Unit" model params />
 
 <details>
-<summary>SpaceScale (DecisionCard / column layout)</summary>
+<summary>SizeScale (DecisionCard / column layout)</summary>
 
 ```mdx
-<ShowDecisionCard d="Sizing Space Scale" layout={["column","row"]}>
+<ShowDecisionCard d="Sizing Scale" layout={["column","row"]}>
 ```
 
 </details>
 
-<ShowDecisionCard d="Sizing Space Scale" layout={['column', 'row']} />
+<ShowDecisionCard d="Sizing Scale" layout={['column', 'row']} />
 
 ## See also
 

docs/designer-decisions/src/content/docs/guides/10-decisions-as-data.mdx

@@ -65,22 +65,22 @@ When declaring decisions in JSON files you are encouraged to organize them in sm
 
 You can reuse decision values and avoid repetition by referencing them in other decisions.
 
-The following example defines an explicit [Space Value](/models/decision-types/space-value) decision called "Space Unit" and a [Space Scale](/models/decision-types/space-scale#anchored) anchored on the value of the first one.
+The following example defines an explicit [Size Value](/models/decision-types/size-value) decision called "Size Unit" and a [Size Scale](/models/decision-types/size-scale#anchored) anchored on the value of the first one.
 
 ```json
 [
     {
-        "type": "space-value/explicit",
-        "name": "Space Unit",
+        "type": "size-value/explicit",
+        "name": "Size Unit",
         "params": {
             "value": "8"
         }
     },
     {
-        "type": "space-scale/anchored",
+        "type": "size-scale/anchored",
         "name": "Sizing Scale",
         "params": {
-            "anchor": { "$name": "Space Unit" },
+            "anchor": { "$name": "Size Unit" },
             "after": {
                 "steps": 5,
                 "modifier": { "mode": "gemetric", "by": 1.5 }
@@ -92,12 +92,12 @@ The following example defines an explicit [Space Value](/models/decision-types/s
 
 You can also reference items of a decision set set or scale by adding the index to the reference.
 
-In the following example we are creating a [Space Value](/models/decision-types/space-value) decision based on the second element of the "Sizing Scale" declared before.
+In the following example we are creating a [Size Value](/models/decision-types/size-value) decision based on the second element of the "Sizing Scale" declared before.
 
 ```json
 [
     {
-        "type": "space-value/explicit",
+        "type": "size-value/explicit",
         "name": "Default Size",
         "params": {
             "value": { "$name": "Sizing Scale", "index": 3 }

docs/designer-decisions/src/content/docs/guides/20-loading-and-validating.mdx

@@ -131,10 +131,10 @@ If no errors occur, the output should look something like:
 
 ```
 ...
-Sizing Space Scale space-scale/anchored
-Card Thumb Minimum Size space-value/explicit
-Avatar Minimum Size space-value/explicit
-Avatar Sizes space-scale/anchored
+Sizing Scale size-scale/anchored
+Card Thumb Minimum Size size-value/explicit
+Avatar Minimum Size size-value/explicit
+Avatar Sizes size-scale/anchored
 🐘 67 records
 ```
 
@@ -182,8 +182,8 @@ If you run `node scripts/validate-decisions.js` again, you will see two new deci
 
 ```
 ...
-Avatar Minimum Size space-value/explicit
-Avatar Sizes space-scale/anchored
+Avatar Minimum Size size-value/explicit
+Avatar Sizes size-scale/anchored
 Warm Color color-value/explicit
 Cold Color color-value/explicit
 🐘 68 records
@@ -317,19 +317,19 @@ Without any errors, the output will now display the decision status, the name an
 
 ```
 ...
-🟩 | Textarea Maximum Height | space-value/explicit | 300 |
-🟩 | Card Thumb Minimum Size | space-value/explicit | 175 |
-🟩 | Avatar Minimum Size | space-value/explicit | 50 |
-🟩 | Avatar Sizes | space-scale/anchored | [50, 100, 150, 200] |
+🟩 | Textarea Maximum Height | size-value/explicit | 300 |
+🟩 | Card Thumb Minimum Size | size-value/explicit | 175 |
+🟩 | Avatar Minimum Size | size-value/explicit | 50 |
+🟩 | Avatar Sizes | size-scale/anchored | [50, 100, 150, 200] |
 ```
 
 If we introduce a validation issue in one of the items, as in the previous example, the output will also include details about the error.
 
 ```
 ...
-🟩 | Card Thumb Minimum Size | space-value/explicit | 175 |
-🟩 | Avatar Minimum Size | space-value/explicit | 50 |
-🟩 | Avatar Sizes | space-scale/anchored | [50, 100, 150, 200] |
+🟩 | Card Thumb Minimum Size | size-value/explicit | 175 |
+🟩 | Avatar Minimum Size | size-value/explicit | 50 |
+🟩 | Avatar Sizes | size-scale/anchored | [50, 100, 150, 200] |
 🟨 | Warm Color | color-value/explicit | #000000 | 1 errors, 1 warnings
  > 🟨 Decision "Warm Color" /params (required) must have required property 'value'
  > 🟨 Invalid input data for a ColorValue in {"$name":"Warm Color"}: undefined
@@ -374,7 +374,7 @@ loadDecisions();
 You can use it to summarize all counts in one line.
 
 ```
-🟨 Decision "Sizing Space Scale" /params/after (required) must have required property 'steps'
+🟨 Decision "Sizing Scale" /params/after (required) must have required property 'steps'
 🐘 59 records, 0 errors, 1 warnings
 ```
 

docs/designer-decisions/src/content/docs/guides/Generating Docs/42-documenting-decisions.mdx

@@ -22,12 +22,12 @@ This guide explains how to document design decisions and tokens in your document
 
 ```mdx
 <ShowDecision d="Brand Color Set" layout="column" size="xs" value="oklch" />
-<ShowDecision d="Sizing Space Scale" layout="column" size="xs" />
+<ShowDecision d="Sizing Scale" layout="column" size="xs" />
 ```
 
 <LayoutGrid>
     <ShowDecision d="Brand Color Set" layout="column" size="xs" value="oklch" />
-    <ShowDecision d="Sizing Space Scale" layout="column" size="xs" />
+    <ShowDecision d="Sizing Scale" layout="column" size="xs" />
 </LayoutGrid>
 
 ## Setup
@@ -220,7 +220,7 @@ Some decision types can be rendered using different visualizations.
 
 The `viz` prop is passed down to value components to determine which visualization is used.
 
-For instance, the [ShowSpaceViz](/integrations/Astro/Composable/Visualizations/#showspaceviz) component can represent a space value with a few different shapes.
+For instance, the [ShowSizeViz](/integrations/Astro/Composable/Visualizations/#showsizeviz) component can represent a size value with a few different shapes.
 
 ```mdx
 <ShowDecision d="Avatar Minimum Size" viz="circle" />

docs/designer-decisions/src/content/docs/integrations/Astro/Composable/types.mdx

@@ -11,16 +11,16 @@ import { Aside } from '@astrojs/starlight/components';
 import {
     createColorValue,
     createValueContext,
-    createSpaceValue,
+    createSizeValue,
 } from '@noodlestan/designer-decisions';
 import { integrationAPI } from '@noodlestan/designer-integration-astro';
-import { ShowColorValue, ShowSpaceValue } from '@noodlestan/designer-shows/astro';
+import { ShowColorValue, ShowSizeValue } from '@noodlestan/designer-shows/astro';
 
 import { TableDecisionComponents } from '../_partials';
 
 export const store = await integrationAPI.build();
 export const colorValue = createColorValue(store.createValueContext(), '#ff0000');
-export const spaceValue = createSpaceValue(store.createValueContext(), 12);
+export const sizeValue = createSizeValue(store.createValueContext(), 12);
 
 These components render a decision's visualization directly.
 
@@ -42,3 +42,7 @@ The following table lists all decision types and which component is used interna
 ### Color
 
 <TableDecisionComponents domain="color" />
+
+### Typography
+
+<TableDecisionComponents domain="typography" />