@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 +4 -53
- package/dist/{chunk-H5ZEQGTH.js → chunk-CM7Z5JCS.js} +584 -555
- package/dist/chunk-CM7Z5JCS.js.map +1 -0
- package/dist/components/src/asciidoc/index.js +1 -1
- package/dist/components/src/ui/index.js +1 -1
- package/dist/icons/index.d.ts +3 -0
- package/dist/icons/react/index.d.ts +46 -40
- package/dist/icons/react/index.js +3 -1
- package/icons/sprite.svg +1 -1
- package/icons/svg/access-token-16.svg +1 -1
- package/icons/svg/monitoring-16.svg +1 -1
- package/icons/svg/notifications-24.svg +1 -0
- package/package.json +1 -6
- package/dist/chunk-H5ZEQGTH.js.map +0 -1
- package/dist/components/src/grid/index.d.ts +0 -98
- package/dist/components/src/grid/index.js +0 -267
- package/dist/components/src/grid/index.js.map +0 -1
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
|
|
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
|
-
```
|