@cloudgrid-io/ui 0.27.2 → 0.28.0
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/dist/blocks/avatar.d.ts +10 -4
- package/dist/blocks/avatar.d.ts.map +1 -1
- package/dist/blocks/avatar.js +8 -2
- package/dist/blocks/avatar.js.map +1 -1
- package/dist/fonts.css +38 -9
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/cloudgrid-cn.d.ts +1 -1
- package/dist/lib/cloudgrid-cn.d.ts.map +1 -1
- package/dist/lib/cloudgrid-cn.js +7 -0
- package/dist/lib/cloudgrid-cn.js.map +1 -1
- package/dist/theme.css +95 -0
- package/dist/tokens/base.json +389 -3
- package/dist/tokens/surface-ink.json +10 -0
- package/dist/tokens/surface-panel.json +10 -0
- package/dist/tokens.css +520 -10
- package/dist/tokens.json +43 -2
- package/dist/ui/button.d.ts +1 -1
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +28 -0
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/dialog.d.ts +17 -1
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +18 -2
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/drawer.d.ts +208 -0
- package/dist/ui/drawer.d.ts.map +1 -0
- package/dist/ui/drawer.js +265 -0
- package/dist/ui/drawer.js.map +1 -0
- package/package.json +2 -1
package/dist/blocks/avatar.d.ts
CHANGED
|
@@ -92,17 +92,23 @@ export type AvatarDiameter = (typeof AVATAR_DIAMETERS)[number];
|
|
|
92
92
|
* The 0.26 letter names, and what each one was worth in pixels.
|
|
93
93
|
*
|
|
94
94
|
* @deprecated Pass the diameter instead: `18`, `24`, `38`. Kept working through
|
|
95
|
-
* 0.
|
|
95
|
+
* 0.28 so a consumer's 23 call sites do not all have to move on the same bump;
|
|
96
96
|
* the shape is unchanged, so `AVATAR_SIZES[size]` still returns the pixels.
|
|
97
|
-
* Removed in 0.
|
|
97
|
+
* Removed in 0.29. There is deliberately no letter for 32: a name added the same
|
|
98
98
|
* release it was deprecated would be a rung nobody should start using.
|
|
99
|
+
*
|
|
100
|
+
* The target moved from 0.28 to 0.29 in #216: 0.28.0 shipped without the
|
|
101
|
+
* removal because the consumer sweep it is gated on has not happened, and a
|
|
102
|
+
* published version is immutable, so the date had to move rather than the
|
|
103
|
+
* promise. The reason is recorded on #216, which stays open until the removal
|
|
104
|
+
* lands.
|
|
99
105
|
*/
|
|
100
106
|
export declare const AVATAR_SIZES: {
|
|
101
107
|
readonly s: 18;
|
|
102
108
|
readonly m: 24;
|
|
103
109
|
readonly l: 38;
|
|
104
110
|
};
|
|
105
|
-
/** @deprecated Use `AvatarDiameter`. Removed in 0.
|
|
111
|
+
/** @deprecated Use `AvatarDiameter`. Removed in 0.29. See #216. */
|
|
106
112
|
export type AvatarSize = keyof typeof AVATAR_SIZES;
|
|
107
113
|
declare function Avatar({ name, seed, src, alt, size, monogram, className, style, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
|
|
108
114
|
/** Whose mark this is. Read for the initials, and for the hue unless `seed` is given. */
|
|
@@ -126,7 +132,7 @@ declare function Avatar({ name, seed, src, alt, size, monogram, className, style
|
|
|
126
132
|
* The diameter: `18`, `24`, `32` or `38`.
|
|
127
133
|
*
|
|
128
134
|
* The 0.26 letters — `'s'`, `'m'`, `'l'` — still resolve to 18, 24 and 38
|
|
129
|
-
* through 0.
|
|
135
|
+
* through 0.28. They are deprecated; see `AVATAR_DIAMETERS`.
|
|
130
136
|
*/
|
|
131
137
|
size?: AvatarDiameter | AvatarSize;
|
|
132
138
|
/** Overrides the derived initials, for a name they read badly from. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,gBAAgB,2BAA4B,CAAA;AAEzD,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,gBAAgB,2BAA4B,CAAA;AAEzD,+BAA+B;AAC/B,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;;;CAIf,CAAA;AAEV,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAA;AAgBlD,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,GAAG,UAAU,CAAA;IAClC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,+BA2DA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
package/dist/blocks/avatar.js
CHANGED
|
@@ -93,10 +93,16 @@ export const AVATAR_DIAMETERS = [18, 24, 32, 38];
|
|
|
93
93
|
* The 0.26 letter names, and what each one was worth in pixels.
|
|
94
94
|
*
|
|
95
95
|
* @deprecated Pass the diameter instead: `18`, `24`, `38`. Kept working through
|
|
96
|
-
* 0.
|
|
96
|
+
* 0.28 so a consumer's 23 call sites do not all have to move on the same bump;
|
|
97
97
|
* the shape is unchanged, so `AVATAR_SIZES[size]` still returns the pixels.
|
|
98
|
-
* Removed in 0.
|
|
98
|
+
* Removed in 0.29. There is deliberately no letter for 32: a name added the same
|
|
99
99
|
* release it was deprecated would be a rung nobody should start using.
|
|
100
|
+
*
|
|
101
|
+
* The target moved from 0.28 to 0.29 in #216: 0.28.0 shipped without the
|
|
102
|
+
* removal because the consumer sweep it is gated on has not happened, and a
|
|
103
|
+
* published version is immutable, so the date had to move rather than the
|
|
104
|
+
* promise. The reason is recorded on #216, which stays open until the removal
|
|
105
|
+
* lands.
|
|
100
106
|
*/
|
|
101
107
|
export const AVATAR_SIZES = {
|
|
102
108
|
s: 18,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAA;AAKzD
|
|
1
|
+
{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/blocks/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAU,CAAA;AAKzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;CACG,CAAA;AAKV;;;;;;;;;;;GAWG;AACH,MAAM,cAAc,GAAG,IAAI,CAAA;AAE3B,SAAS,MAAM,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,GAAG,EACH,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EA4BT;IACC,4EAA4E;IAC5E,gEAAgE;IAChE,MAAM,GAAG,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IAChE,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,CAAA;IAEhD,6EAA6E;IAC7E,uEAAuE;IACvE,MAAM,MAAM,GAAG,GAAG,KAAK,SAAS,CAAA;IAEhC,OAAO,CACL,6BACY,QAAQ,eASP,GAAG,eACH,IAAI,CAAC,IAAI,KAChB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,EAC3E,SAAS,EAAE,EAAE,CACX,wHAAwH,EACxH,SAAS,CACV,EACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG,EAAE,CAAC,GAAG,EAAE;YACpD,UAAU,EAAE,CAAC;YACb,yEAAyE;YACzE,wEAAwE;YACxE,mEAAmE;YACnE,4CAA4C;YAC5C,UAAU,EAAE,0BAA0B,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,kBAAkB;YAC9E,KAAK,EAAE,2BAA2B;YAClC,GAAG,KAAK;SACT,KACG,KAAK,aAET,4BAAgB,iBAAiB,iBAAa,MAAM,YACjD,OAAO,GACH,EACN,GAAG,CAAC,CAAC,CAAC;YACL,sEAAsE;YACtE,+DAA+D;YAC/D,2BACY,cAAc,EACxB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EACtB,SAAS,EAAC,yCAAyC,GACnD,CACH,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
package/dist/fonts.css
CHANGED
|
@@ -2,27 +2,56 @@
|
|
|
2
2
|
Self-hosted webfonts, not a font CDN: a third-party request in the critical
|
|
3
3
|
path is both a latency cost and a privacy one.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
Three faces ship here, and a fourth is named but deliberately absent.
|
|
6
|
+
|
|
7
|
+
Space Grotesk carries everything a reader reads. Every body string on all six
|
|
8
|
+
canonical Figma frames is set in it, at 20/1.46 for a lede and 15/1.46 for card
|
|
9
|
+
copy and nav, and it arrives as @fontsource-variable/space-grotesk under
|
|
10
|
+
OFL-1.1, which permits redistribution — the same mechanism Manrope already uses,
|
|
11
|
+
one more line. cloudgrid-landing#145 has the frame-by-frame evidence.
|
|
12
|
+
|
|
13
|
+
Manrope stays, and not as a fallback. The frames keep it for exactly two jobs,
|
|
14
|
+
the eyebrow above a heading and the label inside a button, and that pair is now
|
|
15
|
+
--cg-font-ui rather than --cg-font-body. Nothing about how those two render
|
|
16
|
+
changed; only which token spells them.
|
|
17
|
+
|
|
18
|
+
JetBrains Mono is used only inside prompt and terminal surfaces. Worth knowing:
|
|
19
|
+
NO monospace face appears anywhere in the six frames. What reads as a terminal
|
|
20
|
+
there is Space Grotesk at 22px (thegrid 8364:4510) or Manrope at 15px (builders
|
|
21
|
+
6916:8104), so the mono rung is this package's own idea and the design does not
|
|
22
|
+
contradict it or confirm it.
|
|
23
|
+
|
|
24
|
+
All three are VARIABLE faces, so the brand's four weights (400 regular, 500
|
|
25
|
+
medium, 600 semibold, 700 display) are one file each rather than four.
|
|
26
|
+
|
|
27
|
+
TANKER IS THE DISPLAY FACE AND IT CANNOT SHIP HERE. The frames set every
|
|
28
|
+
headline in it; the ITF Free Font Licence section 02 forbids redistributing the
|
|
29
|
+
Font Software through "a repository, download service, application or platform",
|
|
30
|
+
and this package is public on registry.npmjs.org. So tokens.css names the stack
|
|
31
|
+
and each consumer fetches its own copy from Fontshare, bound by section 03 in
|
|
32
|
+
its own right. --cg-font-display's note carries the full reasoning; ui#240 is
|
|
33
|
+
the issue, and its open question — whether naming a display face at all
|
|
34
|
+
reverses the 2026-09-10 re-skin (#197) — is the founder's, not this file's.
|
|
10
35
|
|
|
11
36
|
Saira Semi Condensed 800 was here as the self-hosted stand-in for the licensed
|
|
12
37
|
Futura Condensed Extra Bold, and both are gone with the condensed display rung.
|
|
13
|
-
|
|
14
|
-
in its own :root
|
|
38
|
+
The escape hatch that note described — a consumer putting its own display face
|
|
39
|
+
in front of --cg-font-display in its own :root — is what cloudgrid-landing PR
|
|
40
|
+
#132 used, and it is what naming Tanker in the stack retires. A consumer still
|
|
41
|
+
has to @font-face its own Tanker files; it no longer has to copy this package's
|
|
42
|
+
fallback chain verbatim to do it, and that copy is what went stale.
|
|
15
43
|
|
|
16
44
|
The family stacks live in tokens.css.
|
|
17
45
|
|
|
18
46
|
These are bare package specifiers: Vite (Astro) and Next's css-loader both
|
|
19
|
-
resolve them. A pipeline that cannot should import the
|
|
47
|
+
resolve them. A pipeline that cannot should import the three fontsource packages
|
|
20
48
|
directly.
|
|
21
49
|
|
|
22
|
-
|
|
50
|
+
All three are real dependencies of @cloudgrid-io/ui, so installing this
|
|
23
51
|
package is enough. v0 also shipped a '@cloudgrid/ui/fonts' JS entry for
|
|
24
52
|
pipelines that cannot resolve bare CSS specifiers; it was not ported. Add it
|
|
25
53
|
if a consumer turns out to need it rather than on speculation.
|
|
26
54
|
*/
|
|
55
|
+
@import '@fontsource-variable/space-grotesk';
|
|
27
56
|
@import '@fontsource-variable/manrope';
|
|
28
57
|
@import '@fontsource-variable/jetbrains-mono';
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from "./ui/checkbox.js";
|
|
|
7
7
|
export * from "./ui/code-block.js";
|
|
8
8
|
export * from "./ui/combobox.js";
|
|
9
9
|
export * from "./ui/dialog.js";
|
|
10
|
+
export * from "./ui/drawer.js";
|
|
10
11
|
export * from "./ui/dropdown-menu.js";
|
|
11
12
|
export * from "./ui/input-group.js";
|
|
12
13
|
export * from "./ui/input.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAG/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -23,6 +23,7 @@ export * from "./ui/checkbox.js";
|
|
|
23
23
|
export * from "./ui/code-block.js";
|
|
24
24
|
export * from "./ui/combobox.js";
|
|
25
25
|
export * from "./ui/dialog.js";
|
|
26
|
+
export * from "./ui/drawer.js";
|
|
26
27
|
export * from "./ui/dropdown-menu.js";
|
|
27
28
|
export * from "./ui/input-group.js";
|
|
28
29
|
export * from "./ui/input.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,gFAAgF;AAChF,8EAA8E;AAC9E,oEAAoE;AACpE,EAAE;AACF,gFAAgF;AAChF,+EAA+E;AAC/E,yEAAyE;AACzE,gFAAgF;AAChF,4EAA4E;AAC5E,EAAE;AACF,kEAAkE;AAClE,8EAA8E;AAC9E,uEAAuE;AAEvE,cAAc;AACd,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAE/B,mBAAmB;AACnB,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AAEtC,0EAA0E;AAC1E,cAAc,uBAAuB,CAAA"}
|
|
@@ -60,6 +60,6 @@ import { type ClassValue } from "clsx";
|
|
|
60
60
|
* to write `font-regular` rediscovers this.
|
|
61
61
|
*/
|
|
62
62
|
export declare const BRAND_FONT_WEIGHTS: readonly ["heavy", "regular"];
|
|
63
|
-
export declare const BRAND_FONT_SIZES: readonly ["display-xl", "display-lg", "display-md", "display-sm", "heading-lg", "heading-md", "heading-sm", "body-lg", "body-md", "body-sm", "caption", "mono", "label"];
|
|
63
|
+
export declare const BRAND_FONT_SIZES: readonly ["display-3xl", "display-2xl", "display-xl", "display-lg", "display-md", "display-sm", "title-lg", "title-md", "title-sm", "heading-lg", "heading-md", "heading-sm", "body-xl", "body-lg", "body-md", "body-sm", "caption", "mono", "label", "eyebrow"];
|
|
64
64
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
65
65
|
//# sourceMappingURL=cloudgrid-cn.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cloudgrid-cn.d.ts","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,+BAAgC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"cloudgrid-cn.d.ts","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,+BAAgC,CAAA;AAE/D,eAAO,MAAM,gBAAgB,kQAqBnB,CAAA;AAWV,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
|
package/dist/lib/cloudgrid-cn.js
CHANGED
|
@@ -62,19 +62,26 @@ import { extendTailwindMerge } from "tailwind-merge";
|
|
|
62
62
|
*/
|
|
63
63
|
export const BRAND_FONT_WEIGHTS = ["heavy", "regular"];
|
|
64
64
|
export const BRAND_FONT_SIZES = [
|
|
65
|
+
"display-3xl",
|
|
66
|
+
"display-2xl",
|
|
65
67
|
"display-xl",
|
|
66
68
|
"display-lg",
|
|
67
69
|
"display-md",
|
|
68
70
|
"display-sm",
|
|
71
|
+
"title-lg",
|
|
72
|
+
"title-md",
|
|
73
|
+
"title-sm",
|
|
69
74
|
"heading-lg",
|
|
70
75
|
"heading-md",
|
|
71
76
|
"heading-sm",
|
|
77
|
+
"body-xl",
|
|
72
78
|
"body-lg",
|
|
73
79
|
"body-md",
|
|
74
80
|
"body-sm",
|
|
75
81
|
"caption",
|
|
76
82
|
"mono",
|
|
77
83
|
"label",
|
|
84
|
+
"eyebrow",
|
|
78
85
|
];
|
|
79
86
|
const twMerge = extendTailwindMerge({
|
|
80
87
|
extend: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cloudgrid-cn.js","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAA;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,MAAM;IACN,OAAO;
|
|
1
|
+
{"version":3,"file":"cloudgrid-cn.js","sourceRoot":"","sources":["../../src/lib/cloudgrid-cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAA;AAE/D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,aAAa;IACb,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,UAAU;IACV,UAAU;IACV,UAAU;IACV,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,MAAM;IACN,OAAO;IACP,SAAS;CACD,CAAA;AAEV,MAAM,OAAO,GAAG,mBAAmB,CAAC;IAClC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,gBAAgB,CAAC,EAAE,CAAC;YAC9C,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,kBAAkB,CAAC,EAAE,CAAC;SACnD;KACF;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}
|
package/dist/theme.css
CHANGED
|
@@ -81,6 +81,10 @@
|
|
|
81
81
|
--color-ink: var(--cg-text-primary);
|
|
82
82
|
--color-body: var(--cg-text-secondary);
|
|
83
83
|
--color-faint: var(--cg-text-muted);
|
|
84
|
+
/* The muted rung that clears the 4.5:1 body-text floor on all four grounds
|
|
85
|
+
(#232). text-faint is large-text-legal only; this is what a caption a reader
|
|
86
|
+
has to read should use. */
|
|
87
|
+
--color-faint-strong: var(--cg-text-muted-strong);
|
|
84
88
|
--color-placeholder: var(--cg-text-placeholder);
|
|
85
89
|
--color-inverse: var(--cg-text-inverse);
|
|
86
90
|
--color-on-primary: var(--cg-text-on-primary);
|
|
@@ -95,6 +99,50 @@
|
|
|
95
99
|
--color-lime-press: var(--cg-secondary-press);
|
|
96
100
|
--color-cyan: var(--cg-tertiary);
|
|
97
101
|
--color-cyan-press: var(--cg-tertiary-press);
|
|
102
|
+
|
|
103
|
+
/* ---- the hue ramps (#239) ----
|
|
104
|
+
The rungs the canonical Figma frames spend on chips, badges, avatar strokes,
|
|
105
|
+
step diagrams and the enterprise button. tokens.css's `hue-ramps` note has
|
|
106
|
+
the provenance of each value; this block is only about the NAMES.
|
|
107
|
+
|
|
108
|
+
Violet takes numbered rungs under `brand`, because brand is already this
|
|
109
|
+
package's word for the hue and Tailwind ships no `brand` scale to collide
|
|
110
|
+
with. --color-brand stays the 900, so bg-brand and bg-brand-200 coexist.
|
|
111
|
+
|
|
112
|
+
Cyan and lime take SUFFIXED names rather than their Figma rung numbers.
|
|
113
|
+
--color-cyan-200 and --color-lime-700 would be legal here and would silently
|
|
114
|
+
repaint every bg-cyan-200 and bg-lime-700 in a consumer's own markup, since
|
|
115
|
+
Tailwind ships both of those scales. That is rule 4's failure pointed at
|
|
116
|
+
Tailwind instead of shadcn, and it is worse: shadcn's names arrive with this
|
|
117
|
+
package, Tailwind's were already there and the consumer never opted in.
|
|
118
|
+
|
|
119
|
+
The cool neutral family takes `steel` for the same reason twice over: Figma
|
|
120
|
+
calls it color/neutral/*, this package's neutral ramp is a different hue
|
|
121
|
+
family at those numbers, and Tailwind ships `slate`. */
|
|
122
|
+
--color-brand-100: var(--cg-violet-100);
|
|
123
|
+
--color-brand-150: var(--cg-violet-150);
|
|
124
|
+
--color-brand-200: var(--cg-violet-200);
|
|
125
|
+
--color-brand-300: var(--cg-violet-300);
|
|
126
|
+
--color-brand-400: var(--cg-violet-400);
|
|
127
|
+
--color-brand-500: var(--cg-violet-500);
|
|
128
|
+
--color-brand-600: var(--cg-violet-600);
|
|
129
|
+
--color-brand-700: var(--cg-violet-700);
|
|
130
|
+
--color-brand-900: var(--cg-violet-900);
|
|
131
|
+
--color-cyan-tint: var(--cg-cyan-200);
|
|
132
|
+
--color-cyan-wash: var(--cg-cyan-300);
|
|
133
|
+
--color-cyan-fill: var(--cg-cyan-400);
|
|
134
|
+
--color-lime-tint: var(--cg-lime-200);
|
|
135
|
+
--color-lime-wash: var(--cg-lime-600);
|
|
136
|
+
--color-lime-edge: var(--cg-lime-700);
|
|
137
|
+
/* The design's cool neutrals. `steel` is the quiet-text tone the frames put on
|
|
138
|
+
every footer link; `steel-strong` is the rung that actually clears 4.5:1 on a
|
|
139
|
+
light ground, and the one to reach for when the text is content. */
|
|
140
|
+
--color-steel: var(--cg-slate-500);
|
|
141
|
+
--color-steel-strong: var(--cg-slate-600);
|
|
142
|
+
--color-steel-quiet: var(--cg-slate-300);
|
|
143
|
+
/* Figma's "stone". A warm near-black beside --color-ink's flat #222222. Its
|
|
144
|
+
role in the design is not yet known; see the token's own note. */
|
|
145
|
+
--color-stone: var(--cg-stone-800);
|
|
98
146
|
/* The fourth brand hue (#197). NOT `--color-accent`: rule 4 again — shadcn
|
|
99
147
|
owns `accent` and it is a background there, which is the collision that
|
|
100
148
|
once rendered a badge invisible. `azure` is the hue name, alongside brand /
|
|
@@ -205,6 +253,9 @@
|
|
|
205
253
|
--font-sans: var(--cg-font-body);
|
|
206
254
|
--font-body: var(--cg-font-body);
|
|
207
255
|
--font-display: var(--cg-font-display);
|
|
256
|
+
/* The eyebrow-and-button face (#240). Not a fallback: the frames use Manrope
|
|
257
|
+
for exactly those two jobs while the body face is Space Grotesk. */
|
|
258
|
+
--font-ui: var(--cg-font-ui);
|
|
208
259
|
--font-mono: var(--cg-font-mono);
|
|
209
260
|
|
|
210
261
|
/* ---- type scale ----
|
|
@@ -229,6 +280,12 @@
|
|
|
229
280
|
tracking or weight, so they get none: a companion that invents a value is
|
|
230
281
|
worse than an absent one, since it forces a weight where a component expected
|
|
231
282
|
to inherit. Closes the gap noted in notes.md after #30. */
|
|
283
|
+
--text-display-3xl: var(--cg-display-3xl);
|
|
284
|
+
--text-display-3xl--line-height: var(--cg-display-line-tight);
|
|
285
|
+
--text-display-3xl--letter-spacing: var(--cg-title-tracking);
|
|
286
|
+
--text-display-2xl: var(--cg-display-2xl);
|
|
287
|
+
--text-display-2xl--line-height: var(--cg-display-line-tight);
|
|
288
|
+
--text-display-2xl--letter-spacing: var(--cg-title-tracking);
|
|
232
289
|
--text-display-xl: var(--cg-display-xl);
|
|
233
290
|
--text-display-xl--line-height: var(--cg-display-line);
|
|
234
291
|
--text-display-xl--letter-spacing: var(--cg-display-tracking);
|
|
@@ -241,12 +298,30 @@
|
|
|
241
298
|
--text-display-sm: var(--cg-display-sm);
|
|
242
299
|
--text-display-sm--line-height: var(--cg-display-line);
|
|
243
300
|
--text-display-sm--letter-spacing: var(--cg-display-tracking);
|
|
301
|
+
/* The display face at card scale (#239). A separate ramp from display-*
|
|
302
|
+
because the two disagree everywhere they overlap; tokens.css's
|
|
303
|
+
`tanker-title-ramp` note has the table. --text-title-sm and
|
|
304
|
+
--text-heading-md are both 20px and differ in face and leading, which is
|
|
305
|
+
the whole reason the ramp is separate. */
|
|
306
|
+
--text-title-lg: var(--cg-title-lg);
|
|
307
|
+
--text-title-lg--line-height: var(--cg-title-line);
|
|
308
|
+
--text-title-lg--letter-spacing: var(--cg-title-tracking);
|
|
309
|
+
--text-title-md: var(--cg-title-md);
|
|
310
|
+
--text-title-md--line-height: var(--cg-title-line);
|
|
311
|
+
--text-title-md--letter-spacing: var(--cg-title-tracking);
|
|
312
|
+
--text-title-sm: var(--cg-title-sm);
|
|
313
|
+
--text-title-sm--line-height: var(--cg-title-line);
|
|
314
|
+
--text-title-sm--letter-spacing: var(--cg-title-tracking);
|
|
244
315
|
--text-heading-lg: var(--cg-heading-lg);
|
|
245
316
|
--text-heading-lg--line-height: var(--cg-heading-line);
|
|
246
317
|
--text-heading-md: var(--cg-heading-md);
|
|
247
318
|
--text-heading-md--line-height: var(--cg-heading-line);
|
|
248
319
|
--text-heading-sm: var(--cg-heading-sm);
|
|
249
320
|
--text-heading-sm--line-height: var(--cg-heading-line);
|
|
321
|
+
/* The lede size on all six canonical frames, and the size this ramp could not
|
|
322
|
+
spell: body-lg is 19 and heading-md is 20 with the wrong leading. */
|
|
323
|
+
--text-body-xl: var(--cg-body-xl);
|
|
324
|
+
--text-body-xl--line-height: var(--cg-body-line);
|
|
250
325
|
--text-body-lg: var(--cg-body-lg);
|
|
251
326
|
--text-body-lg--line-height: var(--cg-body-line);
|
|
252
327
|
--text-body-md: var(--cg-body-md);
|
|
@@ -260,6 +335,15 @@
|
|
|
260
335
|
--text-label: var(--cg-label-size);
|
|
261
336
|
--text-label--line-height: var(--cg-body-line);
|
|
262
337
|
--text-label--font-weight: var(--cg-label-weight);
|
|
338
|
+
/* The eyebrow, as Figma's own bound text variable declares it: 14px, 600,
|
|
339
|
+
1.2, 0.1em. `uppercase` stays the caller's, the way Eyebrow's docblock
|
|
340
|
+
already says. Note --cg-eyebrow-weight is 600 and --cg-label-weight is 500;
|
|
341
|
+
they are different rungs and the one-pixel size difference is not the
|
|
342
|
+
point. */
|
|
343
|
+
--text-eyebrow: var(--cg-eyebrow-size);
|
|
344
|
+
--text-eyebrow--line-height: var(--cg-eyebrow-line);
|
|
345
|
+
--text-eyebrow--letter-spacing: var(--cg-eyebrow-tracking);
|
|
346
|
+
--text-eyebrow--font-weight: var(--cg-eyebrow-weight);
|
|
263
347
|
|
|
264
348
|
/* ---- weights ----
|
|
265
349
|
`--font-weight-display` is unreachable and kept only for completeness. Both
|
|
@@ -284,11 +368,18 @@
|
|
|
284
368
|
|
|
285
369
|
/* ---- leading and tracking ---- */
|
|
286
370
|
--leading-display: var(--cg-display-line);
|
|
371
|
+
/* leading-none, which is what every Tanker node in every frame actually uses.
|
|
372
|
+
--leading-display stays 1.06; it was tuned for a condensed face nothing
|
|
373
|
+
ships any more and retuning it moves text that exists today (#240). */
|
|
374
|
+
--leading-display-tight: var(--cg-display-line-tight);
|
|
375
|
+
--leading-title: var(--cg-title-line);
|
|
287
376
|
--leading-heading: var(--cg-heading-line);
|
|
288
377
|
--leading-body: var(--cg-body-line);
|
|
289
378
|
--leading-mono: var(--cg-mono-line);
|
|
290
379
|
--tracking-display: var(--cg-display-tracking);
|
|
291
380
|
--tracking-body: var(--cg-body-tracking);
|
|
381
|
+
--tracking-title: var(--cg-title-tracking);
|
|
382
|
+
--tracking-eyebrow: var(--cg-eyebrow-tracking);
|
|
292
383
|
|
|
293
384
|
/* ---- corners ---- */
|
|
294
385
|
/* The smallest corner in the system, added for the entity card's 20px kind
|
|
@@ -299,7 +390,11 @@
|
|
|
299
390
|
--radius-md: var(--cg-radius-md);
|
|
300
391
|
--radius-lg: var(--cg-radius-lg);
|
|
301
392
|
--radius-xl: var(--cg-radius-xl);
|
|
393
|
+
/* The container corner. In these frames 16 is what a CONTROL is rounded to and
|
|
394
|
+
20 is what a CONTAINER is rounded to, consistently, on all six. */
|
|
395
|
+
--radius-container: var(--cg-radius-container);
|
|
302
396
|
--radius-2xl: var(--cg-radius-2xl);
|
|
397
|
+
--radius-3xl: var(--cg-radius-3xl);
|
|
303
398
|
--radius-pill: var(--cg-radius-pill);
|
|
304
399
|
|
|
305
400
|
/* ---- elevation ----
|