@swiftsolve/rove-tokens 1.0.0 → 1.1.0

package/DESIGN.md

@@ -74,7 +74,7 @@ Disabled controls use `--opacity-disabled`.
 
 ## Changing the design
 
-Figma is the source of truth. Change a token in the Rove Design System Figma file, export it with the plugin in `figma-plugin/` into `src/figma/`, then run `npm run build` (see the [README](README.md#update-the-tokens)). Don't edit `tokens.css`, `tokens/` or the values in `src/figma/` by hand. What Figma can't hold (shadows, layout, motion) lives in `src/code-tokens.json`.
+Figma is the source of truth. Change a token in the Rove Design System Figma file, export it with the plugin in `figma-plugin/` into `src/figma/`, then run `npm run build` (see the [README](README.md#update-the-tokens)). Don't edit `tokens.css`, `tokens/` or the values in `src/figma/` by hand. What Figma can't hold (shadows, easing curves, the focus outline) lives in `src/code-tokens.json`.
 
 Everything below the next line is rewritten by `npm run build`; edit only above it.
 
@@ -101,8 +101,12 @@ Names and uses, from Figma. The values are in `tokens.css`; Dark and Light diffe
 - **Radius:** `--radius-xs` 5px, `--radius-sm` 8px, `--radius-md` 10px, `--radius-lg` 13px, `--radius-full` 999px
 - **Font sizes:** `--font-size-2xs` 10px, `--font-size-xs` 11px, `--font-size-sm` 12px, `--font-size-md` 13px, `--font-size-lg` 14px, `--font-size-xl` 15px (dialog titles), `--font-size-2xl` 17px, `--font-size-3xl` 28px
 - **Font families:** `--font-family-sans` Inter, `--font-family-numeric` Questrial
-- **Focus:** `--focus-offset` 2px (focus ring offset)
+- **Focus:** `--focus-ring-width` 1px (focus ring stroke), `--focus-offset` 2px (focus ring offset)
 - **Opacity:** `--opacity-tint-xs` 8% (faintest tint), `--opacity-tint-sm` 10% (light tint), `--opacity-tint-md` 14% (tint), `--opacity-tint-lg` 22% (strong tint), `--opacity-tint-xl` 28% (strongest tint), `--opacity-high` 80% (nearly opaque), `--opacity-disabled` 40% (disabled controls)
+- **Layout:** `--rail-item-size` 38px (rail items), `--titlebar-height` 56px (title bar)
+- **Cards:** `--card-padding` `var(--spacing-14)` (card inset), `--card-header-padding-y` `var(--card-padding)`, `--card-header-padding-x` `var(--card-padding)`, `--card-header-min-height` 42px (compact card header), `--card-header-height` 44px (card header), `--card-body-padding` `var(--card-padding)`, `--row-padding-y` 8px (data row, above and below)
+- **Font weights:** `--weight-regular` 400, `--weight-medium` 500, `--weight-semibold` 600
+- **Motion:** `--duration-fast` 140ms (hovers, small changes), `--duration-normal` 220ms (panels, page changes)
 
 ### Text styles
 
@@ -130,8 +134,5 @@ Apply a style with its class from `text-styles.css`. Each class reads four varia
 What Figma variables can't hold, from `src/code-tokens.json`.
 
 - **Shadows:** `--shadow-panel`, `--shadow-raised`, `--shadow-popover`
-- **Focus:** `--focus-ring-width` 1px, `--focus-outline`, `--focus-inset`
-- **Layout:** `--titlebar-height` 56px, `--rail-item-size` 38px
-- **Cards:** `--card-padding` `var(--spacing-14)`, `--card-header-padding-y` `var(--card-padding)`, `--card-header-padding-x` `var(--card-padding)`, `--card-header-min-height` 42px, `--card-header-height` 44px, `--card-body-padding` `var(--card-padding)`, `--row-padding-y` 8px
-- **Motion:** `--ease-out`, `--ease-in-out`, `--ease-pulse`, `--duration-fast` 140ms, `--duration-normal` 220ms
-- **Font weights:** `--weight-regular` 400, `--weight-medium` 500, `--weight-semibold` 600
+- **Focus:** `--focus-outline`, `--focus-inset`
+- **Motion:** `--ease-out`, `--ease-in-out`, `--ease-pulse`

package/README.md

@@ -59,9 +59,9 @@ Each Figma text style becomes four tokens: `--type-<style>-size`, `-weight`, `-l
 | --- | --- |
 | `palette.tokens.json` | Every colour, once |
 | `color.dark.tokens.json`, `color.light.tokens.json` | The Color tokens in each theme, pointing at the palette (`{neutral.850}`) |
-| `spacing.tokens.json`, `typography.tokens.json`, `opacity.tokens.json` | The other Figma collections |
+| `spacing.tokens.json`, `typography.tokens.json`, `opacity.tokens.json`, `layout.tokens.json`, `motion.tokens.json` | The other Figma collections |
 | `text-styles.tokens.json` | Each text style as a `typography` token |
-| `code.tokens.json` | The code-only tokens (shadows, motion, layout) |
+| `code.tokens.json` | The code-only tokens (shadows, easing curves, the focus outline) |
 
 A theme is every file plus one of the two color files. Paths follow the Figma names (`bg/base` is `bg.base`). Tokens that other tokens point at but that aren't CSS variables (the palette, the shadow colours) are marked `"$extensions": { "net.swiftsolve.rove-tokens": { "css": false } }`. CSS-only expressions (`--focus-inset`, a `calc()`) aren't in them.
 
@@ -110,7 +110,7 @@ It opens on <http://localhost:6007>; the Theme menu in the toolbar switches Dark
 | `src/figma/variables.json` | Raw Figma export. Every variable with a Web code syntax becomes that CSS variable. |
 | `src/figma/text-styles.json` | Raw export of the local text styles: font, size, weight, line height, letter spacing, text case (when set) and the variables bound to them. Each style becomes a `--type-*` group. |
 | `figma-plugin/` | The Figma plugin that writes the two exports. |
-| `src/code-tokens.json` | What Figma variables can't hold: font stacks for the font-family variables, shadows, layout constants, motion. `{figma/name}` pulls a Figma value in per theme. |
+| `src/code-tokens.json` | What Figma variables can't hold: font stacks for the font-family variables, shadows, easing curves and the CSS expressions built on variables (`--focus-outline`). `{figma/name}` pulls a Figma value in per theme. |
 | `DESIGN.md` | How to build Rove UI with the tokens. The rules at the top are written by hand; the token reference below the marker line is generated by the build. |
 | `scripts/tokens/build.mjs` | `npm run build`: runs the steps below and writes `tokens.css` and `text-styles.css` at the package root, where the import paths point. |
 | `scripts/tokens/dtcg.mjs` | Figma export → the DTCG files in `tokens/`, checking that every reference resolves in both themes. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftsolve/rove-tokens",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Rove's design tokens, exported from the Rove Design System in Figma, as CSS and DTCG.",
   "type": "module",
   "license": "UNLICENSED",

package/src/code-tokens.json

@@ -9,29 +9,11 @@
     "--shadow-raised": "0 12px 32px {shadow-color/raised}",
     "--shadow-popover": "0 2px 6px {shadow-color/popover-1}, 0 6px 16px {shadow-color/popover-2}",
 
-    "--focus-ring-width": "1px",
     "--focus-outline": "var(--focus-ring-width) solid var(--focus-ring)",
     "--focus-inset": "calc(-1 * var(--focus-ring-width))",
 
-    "--titlebar-height": "56px",
-    "--rail-item-size": "38px",
-
-    "--card-padding": "var(--spacing-14)",
-    "--card-header-padding-y": "var(--card-padding)",
-    "--card-header-padding-x": "var(--card-padding)",
-    "--card-header-min-height": "42px",
-    "--card-header-height": "44px",
-    "--card-body-padding": "var(--card-padding)",
-    "--row-padding-y": "8px",
-
     "--ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
     "--ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
-    "--ease-pulse": "cubic-bezier(0.42, 0, 0.58, 1)",
-    "--duration-fast": "140ms",
-    "--duration-normal": "220ms",
-
-    "--weight-regular": "400",
-    "--weight-medium": "500",
-    "--weight-semibold": "600"
+    "--ease-pulse": "cubic-bezier(0.42, 0, 0.58, 1)"
   }
 }

package/src/figma/variables.json

@@ -56,6 +56,18 @@
       "modes": [
         "Value"
       ]
+    },
+    {
+      "name": "Layout",
+      "modes": [
+        "Value"
+      ]
+    },
+    {
+      "name": "Motion",
+      "modes": [
+        "Value"
+      ]
     }
   ],
   "variables": [
@@ -1902,6 +1914,164 @@
           "alias": "neutral/850-a2"
         }
       }
+    },
+    {
+      "name": "titlebar/height",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--titlebar-height)",
+      "description": "Title bar",
+      "values": {
+        "Value": 56
+      }
+    },
+    {
+      "name": "rail/item-size",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--rail-item-size)",
+      "description": "Rail items",
+      "values": {
+        "Value": 38
+      }
+    },
+    {
+      "name": "card/padding",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--card-padding)",
+      "description": "Card inset",
+      "values": {
+        "Value": {
+          "alias": "spacing/14"
+        }
+      }
+    },
+    {
+      "name": "card/header-padding-y",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--card-header-padding-y)",
+      "description": "",
+      "values": {
+        "Value": {
+          "alias": "card/padding"
+        }
+      }
+    },
+    {
+      "name": "card/header-padding-x",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--card-header-padding-x)",
+      "description": "",
+      "values": {
+        "Value": {
+          "alias": "card/padding"
+        }
+      }
+    },
+    {
+      "name": "card/header-min-height",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--card-header-min-height)",
+      "description": "Compact card header",
+      "values": {
+        "Value": 42
+      }
+    },
+    {
+      "name": "card/header-height",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--card-header-height)",
+      "description": "Card header",
+      "values": {
+        "Value": 44
+      }
+    },
+    {
+      "name": "card/body-padding",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--card-body-padding)",
+      "description": "",
+      "values": {
+        "Value": {
+          "alias": "card/padding"
+        }
+      }
+    },
+    {
+      "name": "row/padding-y",
+      "collection": "Layout",
+      "type": "FLOAT",
+      "code": "var(--row-padding-y)",
+      "description": "Data row, above and below",
+      "values": {
+        "Value": 8
+      }
+    },
+    {
+      "name": "focus/ring-width",
+      "collection": "Spacing",
+      "type": "FLOAT",
+      "code": "var(--focus-ring-width)",
+      "description": "Focus ring stroke",
+      "values": {
+        "Value": 1
+      }
+    },
+    {
+      "name": "weight/regular",
+      "collection": "Typography",
+      "type": "FLOAT",
+      "code": "var(--weight-regular)",
+      "description": "",
+      "values": {
+        "Value": 400
+      }
+    },
+    {
+      "name": "weight/medium",
+      "collection": "Typography",
+      "type": "FLOAT",
+      "code": "var(--weight-medium)",
+      "description": "",
+      "values": {
+        "Value": 500
+      }
+    },
+    {
+      "name": "weight/semibold",
+      "collection": "Typography",
+      "type": "FLOAT",
+      "code": "var(--weight-semibold)",
+      "description": "",
+      "values": {
+        "Value": 600
+      }
+    },
+    {
+      "name": "duration/fast",
+      "collection": "Motion",
+      "type": "FLOAT",
+      "code": "var(--duration-fast)",
+      "description": "Hovers, small changes",
+      "values": {
+        "Value": 140
+      }
+    },
+    {
+      "name": "duration/normal",
+      "collection": "Motion",
+      "type": "FLOAT",
+      "code": "var(--duration-normal)",
+      "description": "Panels, page changes",
+      "values": {
+        "Value": 220
+      }
     }
   ]
 }

package/text-styles.css

@@ -1,4 +1,4 @@
-/* @swiftsolve/rove-tokens 1.0.0. Generated from Figma by scripts/tokens/build.mjs; do not edit. */
+/* @swiftsolve/rove-tokens 1.1.0. Generated from Figma by scripts/tokens/build.mjs; do not edit. */
 
 @layer components {
   /* Page titles, the wordmark. */

package/tokens/code.tokens.json

@@ -107,68 +107,14 @@
       }
     ]
   },
-  "focus-ring-width": {
-    "$type": "dimension",
-    "$value": {
-      "value": 1,
-      "unit": "px"
-    }
-  },
   "focus-outline": {
     "$type": "border",
     "$value": {
-      "width": "{focus-ring-width}",
+      "width": "{focus.ring-width}",
       "style": "solid",
       "color": "{focus.ring}"
     }
   },
-  "titlebar-height": {
-    "$type": "dimension",
-    "$value": {
-      "value": 56,
-      "unit": "px"
-    }
-  },
-  "rail-item-size": {
-    "$type": "dimension",
-    "$value": {
-      "value": 38,
-      "unit": "px"
-    }
-  },
-  "card-padding": {
-    "$value": "{spacing.14}"
-  },
-  "card-header-padding-y": {
-    "$value": "{card-padding}"
-  },
-  "card-header-padding-x": {
-    "$value": "{card-padding}"
-  },
-  "card-header-min-height": {
-    "$type": "dimension",
-    "$value": {
-      "value": 42,
-      "unit": "px"
-    }
-  },
-  "card-header-height": {
-    "$type": "dimension",
-    "$value": {
-      "value": 44,
-      "unit": "px"
-    }
-  },
-  "card-body-padding": {
-    "$value": "{card-padding}"
-  },
-  "row-padding-y": {
-    "$type": "dimension",
-    "$value": {
-      "value": 8,
-      "unit": "px"
-    }
-  },
   "ease-out": {
     "$type": "cubicBezier",
     "$value": [
@@ -195,31 +141,5 @@
       0.58,
       1
     ]
-  },
-  "duration-fast": {
-    "$type": "duration",
-    "$value": {
-      "value": 140,
-      "unit": "ms"
-    }
-  },
-  "duration-normal": {
-    "$type": "duration",
-    "$value": {
-      "value": 220,
-      "unit": "ms"
-    }
-  },
-  "weight-regular": {
-    "$type": "fontWeight",
-    "$value": 400
-  },
-  "weight-medium": {
-    "$type": "fontWeight",
-    "$value": 500
-  },
-  "weight-semibold": {
-    "$type": "fontWeight",
-    "$value": 600
   }
 }

package/tokens/layout.tokens.json

@@ -0,0 +1,67 @@
+{
+  "titlebar": {
+    "height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 56,
+        "unit": "px"
+      },
+      "$description": "Title bar"
+    }
+  },
+  "rail": {
+    "item-size": {
+      "$type": "dimension",
+      "$value": {
+        "value": 38,
+        "unit": "px"
+      },
+      "$description": "Rail items"
+    }
+  },
+  "card": {
+    "padding": {
+      "$type": "dimension",
+      "$value": "{spacing.14}",
+      "$description": "Card inset"
+    },
+    "header-padding-y": {
+      "$type": "dimension",
+      "$value": "{card.padding}"
+    },
+    "header-padding-x": {
+      "$type": "dimension",
+      "$value": "{card.padding}"
+    },
+    "header-min-height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 42,
+        "unit": "px"
+      },
+      "$description": "Compact card header"
+    },
+    "header-height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 44,
+        "unit": "px"
+      },
+      "$description": "Card header"
+    },
+    "body-padding": {
+      "$type": "dimension",
+      "$value": "{card.padding}"
+    }
+  },
+  "row": {
+    "padding-y": {
+      "$type": "dimension",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      },
+      "$description": "Data row, above and below"
+    }
+  }
+}

package/tokens/motion.tokens.json

@@ -0,0 +1,20 @@
+{
+  "duration": {
+    "fast": {
+      "$type": "duration",
+      "$value": {
+        "value": 140,
+        "unit": "ms"
+      },
+      "$description": "Hovers, small changes"
+    },
+    "normal": {
+      "$type": "duration",
+      "$value": {
+        "value": 220,
+        "unit": "ms"
+      },
+      "$description": "Panels, page changes"
+    }
+  }
+}

package/tokens/spacing.tokens.json

@@ -109,6 +109,14 @@
         "unit": "px"
       },
       "$description": "Focus ring offset"
+    },
+    "ring-width": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      },
+      "$description": "Focus ring stroke"
     }
   }
 }

package/tokens/typography.tokens.json

@@ -78,5 +78,19 @@
         "sans-serif"
       ]
     }
+  },
+  "weight": {
+    "regular": {
+      "$type": "fontWeight",
+      "$value": 400
+    },
+    "medium": {
+      "$type": "fontWeight",
+      "$value": 500
+    },
+    "semibold": {
+      "$type": "fontWeight",
+      "$value": 600
+    }
   }
 }

package/tokens.css

@@ -1,4 +1,4 @@
-/* @swiftsolve/rove-tokens 1.0.0. Generated from Figma by scripts/tokens/build.mjs; do not edit. */
+/* @swiftsolve/rove-tokens 1.1.0. Generated from Figma by scripts/tokens/build.mjs; do not edit. */
 :root {
   /* Color */
   --bg-base: #0b0b0c; /* Backdrop */
@@ -44,6 +44,7 @@
 
   /* Spacing */
   --focus-offset: 2px; /* Focus ring offset */
+  --focus-ring-width: 1px; /* Focus ring stroke */
   --spacing-2: 2px;
   --spacing-4: 4px;
   --spacing-6: 6px;
@@ -70,6 +71,9 @@
   --font-size-3xl: 28px;
   --font-family-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-family-numeric: 'Questrial', ui-sans-serif, system-ui, sans-serif;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
 
   /* Opacity */
   --opacity-tint-xs: 8%; /* Faintest tint */
@@ -80,29 +84,29 @@
   --opacity-high: 80%; /* Nearly opaque */
   --opacity-disabled: 40%; /* Disabled controls */
 
+  /* Layout */
+  --titlebar-height: 56px; /* Title bar */
+  --rail-item-size: 38px; /* Rail items */
+  --card-padding: var(--spacing-14); /* Card inset */
+  --card-header-padding-y: var(--card-padding);
+  --card-header-padding-x: var(--card-padding);
+  --card-header-min-height: 42px; /* Compact card header */
+  --card-header-height: 44px; /* Card header */
+  --card-body-padding: var(--card-padding);
+  --row-padding-y: 8px; /* Data row, above and below */
+
+  /* Motion */
+  --duration-fast: 140ms; /* Hovers, small changes */
+  --duration-normal: 220ms; /* Panels, page changes */
+
   /* Code-only */
   --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.22);
   --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.22);
-  --focus-ring-width: 1px;
   --focus-outline: var(--focus-ring-width) solid var(--focus-ring);
-  --titlebar-height: 56px;
-  --rail-item-size: 38px;
-  --card-padding: var(--spacing-14);
-  --card-header-padding-y: var(--card-padding);
-  --card-header-padding-x: var(--card-padding);
-  --card-header-min-height: 42px;
-  --card-header-height: 44px;
-  --card-body-padding: var(--card-padding);
-  --row-padding-y: 8px;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-pulse: cubic-bezier(0.42, 0, 0.58, 1);
-  --duration-fast: 140ms;
-  --duration-normal: 220ms;
-  --weight-regular: 400;
-  --weight-medium: 500;
-  --weight-semibold: 600;
   --focus-inset: calc(-1 * var(--focus-ring-width));
 
   /* Type styles */