@oxide/design-system 6.7.0-canary.e63e89e → 6.7.1

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.
package/README.md CHANGED
@@ -20,20 +20,11 @@ Releases are managed via GitHub Actions workflows triggered from the Actions tab
20
20
  tag. Install it with `npm install @oxide/design-system@canary` to test changes before
21
21
  merging.
22
22
 
23
- ## Figma Plugins
24
-
25
- Figma plugins live in `plugins/`. Each is a standalone npm project with its own
26
- `package.json` and `node_modules` — `cd plugins/<name> && npm install && npm run build`
27
- (or use the `dual-grid:*` / `token-sync:*` scripts at the root). Load a built plugin in
28
- Figma via **Plugins → Development → Import plugin from manifest…**.
29
-
30
- - `plugins/token-sync` — reads the CSS files in `styles/` and compares them against
31
- Figma variables; changes can be applied from the plugin UI.
32
- - `plugins/dual-grid` — generates a synchronised column + cell grid, ASCII grid, and
33
- type specimens on a frame.
34
-
35
23
  ## Syncing with Figma
36
24
 
25
+ The Token Sync Figma plugin reads the CSS files in `styles/` directly and compares them
26
+ against Figma variables. Changes can be applied from the plugin UI.
27
+
37
28
  To regenerate colour palettes, run `npm run color-gen:apply`. This updates the `--color-*`
38
29
  variables in `styles/main.css` and writes the accent override files.
39
30
 
@@ -81,7 +72,7 @@ This is type-checked, and will throw an error if the corresponding icon doesn't
81
72
 
82
73
  ## Usage
83
74
 
84
- This package provides three main entry points:
75
+ This package provides two main entry points:
85
76
 
86
77
  ### UI Components (`@oxide/design-system/ui`)
87
78
 
@@ -126,43 +117,3 @@ content: [
126
117
  'node_modules/@oxide/design-system/components/**/*.{ts,tsx,jsx,js}',
127
118
  ],
128
119
  ```
129
-
130
- ### Grid math (`@oxide/design-system/grid`)
131
-
132
- The maths behind the dual-grid Figma plugin: computes an ASCII cell grid aligned with a
133
- column grid, where margin, column and gutter widths are all whole multiples of the cell
134
- size. Pure TypeScript with no dependencies. See `plugins/dual-grid/README.md` for the
135
- derivation.
136
-
137
- `computeGrid` takes the layout column count, the frame size, and either pixel targets
138
- (`mode: 'auto'` — a solver finds the closest whole-cell fit) or explicit cell counts
139
- (`mode: 'manual'`):
140
-
141
- ```ts
142
- import { computeGrid, gridLineSegments } from '@oxide/design-system/grid'
143
-
144
- const grid = computeGrid({
145
- mode: 'auto', // or 'manual' with marginCells / gutterCells
146
- columns: 12, // layout columns
147
- width: 1920, // frame size, px
148
- height: 1080,
149
- targetMarginPx: 50, // the solver aims at these…
150
- targetGutterPx: 20,
151
- targetCellColumns: 89, // …and at this ASCII column count
152
- // optional: cellAspect, snapRows, pixelSnap, snapTolerancePx, aspectTolerancePct
153
- })
154
-
155
- grid.N // ASCII grid columns
156
- grid.rows // ASCII grid rows
157
- grid.u // cell width, px
158
- grid.cellH // cell height, px
159
- grid.solvedM // margin in cells
160
- grid.solvedG // gutter in cells
161
- grid.margin // margin in px (effectiveMargin includes the pixel-snap remainder)
162
- grid.gutterWidth // gutter in px
163
- grid.columnWidth // column width in px
164
-
165
- // The cell grid as drawable [x1, y1, x2, y2] line segments, with lines near
166
- // the frame edge culled.
167
- const segments = gridLineSegments(grid, 1920, 1080, { edgeCull: true })
168
- ```