@rojaostudio/ds-core 1.1.0-next.13 → 1.1.0-next.15
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/{chunk-DVJ4TGPZ.js → chunk-N2Y3UCKN.js} +116 -13
- package/dist/generate.d.ts +34 -2
- package/dist/generate.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/themes.js +1 -1
- package/package.json +1 -1
|
@@ -995,8 +995,26 @@ var ROLES = [
|
|
|
995
995
|
["border/error", "d", "d"],
|
|
996
996
|
["surface/attention/low", "p", "p"],
|
|
997
997
|
["surface/attention/medium", "p", "p"],
|
|
998
|
-
["surface/attention/high", "p", "p"]
|
|
998
|
+
["surface/attention/high", "p", "p"],
|
|
999
|
+
["surface/inverse", "d", "d"],
|
|
1000
|
+
["text/on-inverse", "d", "d"],
|
|
1001
|
+
["text/on-inverse-subtle", "d", "d"],
|
|
1002
|
+
["text/on/success-strong", "d", "d"],
|
|
1003
|
+
["text/selected", "d", "b"]
|
|
999
1004
|
];
|
|
1005
|
+
var SUCCESS_STRONG_ON = { light: WHITE, dark: BLACK };
|
|
1006
|
+
var coal = palettes.coal;
|
|
1007
|
+
var selectedOn = (primary, scale, tints, fallback) => readableFrom(primary, scale, tints, awayFrom(tints[0]), fallback);
|
|
1008
|
+
var inverseOf = (primary) => contrastRatio(WHITE, primary) >= AA ? primary : coal[900];
|
|
1009
|
+
function inverseSubtle(fill) {
|
|
1010
|
+
for (let p = 70; p < 100; p += 5) if (contrastRatio(over(white(p), fill), fill) >= AA) return white(p);
|
|
1011
|
+
return WHITE;
|
|
1012
|
+
}
|
|
1013
|
+
var INVERSE_DARK = {
|
|
1014
|
+
"surface/inverse": WHITE,
|
|
1015
|
+
"text/on-inverse": coal[900],
|
|
1016
|
+
"text/on-inverse-subtle": coal[600]
|
|
1017
|
+
};
|
|
1000
1018
|
var amber = palettes.amber;
|
|
1001
1019
|
var ATTENTION = {
|
|
1002
1020
|
"surface/attention/low": amber[100],
|
|
@@ -1118,7 +1136,11 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1118
1136
|
"logo/mono": BLACK,
|
|
1119
1137
|
"logo/inverse": WHITE,
|
|
1120
1138
|
"logo/inverse-signature": WHITE,
|
|
1121
|
-
"social/ink": BLACK
|
|
1139
|
+
"social/ink": BLACK,
|
|
1140
|
+
"surface/inverse": inverseOf(P.base),
|
|
1141
|
+
"text/on-inverse": WHITE,
|
|
1142
|
+
"text/on-inverse-subtle": inverseSubtle(inverseOf(P.base)),
|
|
1143
|
+
"text/on/success-strong": SUCCESS_STRONG_ON.light
|
|
1122
1144
|
}, ATTENTION);
|
|
1123
1145
|
const single = !b.secondary;
|
|
1124
1146
|
const K = single ? N : P.scale;
|
|
@@ -1162,7 +1184,8 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1162
1184
|
l["logo/accent"] = l["colors/accent/logo"];
|
|
1163
1185
|
l["logo/accent-2"] = l["colors/secondary/default"];
|
|
1164
1186
|
l["logo/accent-3"] = l["colors/accent/default"];
|
|
1165
|
-
|
|
1187
|
+
l["text/selected"] = selectedOn(l["colors/primary/default"], K, [l["surface/tint/default"], l["surface/tint/subtle"]], BLACK);
|
|
1188
|
+
const d = __spreadProps(__spreadValues({
|
|
1166
1189
|
"surface/page": N[900],
|
|
1167
1190
|
"surface/panel": N[900],
|
|
1168
1191
|
"surface/card": N[900],
|
|
@@ -1232,7 +1255,9 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1232
1255
|
"colors/state/info-strong": L[300],
|
|
1233
1256
|
"colors/state/neutral-strong": N[400],
|
|
1234
1257
|
"text/on/primary-subtle": black(30)
|
|
1235
|
-
}
|
|
1258
|
+
}, INVERSE_DARK), {
|
|
1259
|
+
"text/on/success-strong": SUCCESS_STRONG_ON.dark
|
|
1260
|
+
});
|
|
1236
1261
|
if (single) {
|
|
1237
1262
|
const steps = [200, 300, 100, 400];
|
|
1238
1263
|
const s = (_b = steps.find((st) => distinct(N[st], d["colors/secondary/default"]))) != null ? _b : 200;
|
|
@@ -1265,6 +1290,7 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1265
1290
|
[d["colors/accent/hover"]] = stateFills(A.scale, d["colors/accent/default"], d["text/on/accent"], [d["colors/accent/hover"]]);
|
|
1266
1291
|
d["border/error"] = readableFrom(red[400], red, [d["surface/card"]], awayFrom(d["surface/card"]), WHITE, NON_TEXT);
|
|
1267
1292
|
d["chart/series/1"] = readableFrom(P.scale[400], P.scale, [d["surface/card"]], awayFrom(d["surface/card"]), WHITE, NON_TEXT);
|
|
1293
|
+
d["text/selected"] = selectedOn(d["colors/primary/default"], K, [d["surface/tint/default"], d["surface/tint/subtle"]], WHITE);
|
|
1268
1294
|
const ink0 = on(P.base);
|
|
1269
1295
|
const plate = contrastRatio(ink0, P.base) >= PLATE_MIN ? P.base : readableFrom(P.base, P.scale, [ink0], ink0 === WHITE ? "darker" : "lighter", ink0 === WHITE ? BLACK : WHITE, PLATE_MIN);
|
|
1270
1296
|
const ink = on(plate);
|
|
@@ -1324,7 +1350,9 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1324
1350
|
"surface/muted-strong": ov(20),
|
|
1325
1351
|
"border/strong": fieldBorder,
|
|
1326
1352
|
"border/strong-hover": fieldAlpha + 20 < 100 ? inkA(fieldAlpha + 20) : ink,
|
|
1327
|
-
"text/on/primary-subtle": inkA(30)
|
|
1353
|
+
"text/on/primary-subtle": inkA(30),
|
|
1354
|
+
// The selected item on the plate: the ink, which the plate's overlays (ov) are drawn to carry at AA.
|
|
1355
|
+
"text/selected": ink
|
|
1328
1356
|
};
|
|
1329
1357
|
for (const role of ["colors/primary/dark", "colors/primary/light"])
|
|
1330
1358
|
br[role] = carry(P.scale, br["colors/primary/default"], br["text/on/primary-strong"], br[role]);
|
|
@@ -1378,6 +1406,51 @@ var RDS_SCOPE_SELECTORS = [
|
|
|
1378
1406
|
"[data-rds-plate]"
|
|
1379
1407
|
];
|
|
1380
1408
|
var RDS_TOKEN_SCOPE = RDS_SCOPE_SELECTORS.join(", ");
|
|
1409
|
+
var RDS_PRINT_WHITE = [
|
|
1410
|
+
"surface/page",
|
|
1411
|
+
"surface/card",
|
|
1412
|
+
"surface/panel",
|
|
1413
|
+
"surface/cover",
|
|
1414
|
+
"surface/muted",
|
|
1415
|
+
"surface/muted-strong",
|
|
1416
|
+
"surface/tint/default",
|
|
1417
|
+
"surface/tint/strong",
|
|
1418
|
+
"surface/tint/subtle",
|
|
1419
|
+
"surface/band/base",
|
|
1420
|
+
"surface/neutral",
|
|
1421
|
+
"surface/info",
|
|
1422
|
+
"surface/success",
|
|
1423
|
+
"surface/warning",
|
|
1424
|
+
"surface/error",
|
|
1425
|
+
"surface/error-strong",
|
|
1426
|
+
"surface/attention/low",
|
|
1427
|
+
"surface/attention/medium",
|
|
1428
|
+
"surface/attention/high"
|
|
1429
|
+
];
|
|
1430
|
+
var RDS_PRINT_TRANSPARENT = ["shadow/ambient", "shadow/key", "shadow/strong"];
|
|
1431
|
+
var RDS_PRINT_ON_WHITE = ["text/on/cover", "text/on/tint", "text/on/band-base"];
|
|
1432
|
+
function rdsPrintMode(theme) {
|
|
1433
|
+
const out = __spreadValues({}, theme.light);
|
|
1434
|
+
for (const role of RDS_PRINT_WHITE) out[roleVar(role)] = WHITE;
|
|
1435
|
+
for (const role of RDS_PRINT_ON_WHITE) out[roleVar(role)] = theme.light[roleVar("text/body")];
|
|
1436
|
+
for (const role of RDS_PRINT_TRANSPARENT) out[roleVar(role)] = black(0);
|
|
1437
|
+
return out;
|
|
1438
|
+
}
|
|
1439
|
+
var RDS_MEDIA_TYPE = [
|
|
1440
|
+
{ role: "caption", screen: "caption", size: 12, line: 16, print: [8, 10] },
|
|
1441
|
+
{ role: "small", screen: "small", size: 14, line: 20, print: [9, 12] },
|
|
1442
|
+
{ role: "body", screen: "body", size: 16, line: 24, print: [10, 14] },
|
|
1443
|
+
{ role: "label", screen: "label", size: 16, line: 24, print: [12, 16] },
|
|
1444
|
+
{ role: "title", screen: "heading", size: 24, line: 30, print: [18, 24] }
|
|
1445
|
+
];
|
|
1446
|
+
function mediaTypeLines(print) {
|
|
1447
|
+
return RDS_MEDIA_TYPE.flatMap(
|
|
1448
|
+
({ role, screen, size, line, print: [ps, pl] }) => print ? [` --media-type-${role}-size: ${ps}pt;`, ` --media-type-${role}-line: ${pl}pt;`] : [
|
|
1449
|
+
` --media-type-${role}-size: var(--type-${screen}-size, ${size}px);`,
|
|
1450
|
+
` --media-type-${role}-line: var(--type-${screen}-line, ${line}px);`
|
|
1451
|
+
]
|
|
1452
|
+
);
|
|
1453
|
+
}
|
|
1381
1454
|
var split = (list) => list.split(",").map((s) => s.trim()).filter(Boolean);
|
|
1382
1455
|
var rootAnchored = (sel) => /^(:root|html)(?![\w-])/i.test(sel);
|
|
1383
1456
|
var subject = (sel) => {
|
|
@@ -1400,10 +1473,10 @@ function emitRdsCss(theme, opts = {}) {
|
|
|
1400
1473
|
const scopes = split((_a = opts.scope) != null ? _a : ":root, .ds-scope, [data-rds-scope]");
|
|
1401
1474
|
const darks = split((_b = opts.dark) != null ? _b : '.dark, [data-rds-mode="dark"]');
|
|
1402
1475
|
const plates = split((_c = opts.plate) != null ? _c : ".ds-plate, [data-rds-plate]");
|
|
1403
|
-
const block2 = (sels, map, only) => {
|
|
1476
|
+
const block2 = (sels, map, only, extra = []) => {
|
|
1404
1477
|
const lines = Object.entries(map).filter(([k, v]) => !only || only[k] !== v).map(([k, v]) => ` ${k}: ${k === "--type-font-mono" ? `"${v}", monospace` : v};`);
|
|
1405
1478
|
return `${sels.join(", ")} {
|
|
1406
|
-
${lines.join("\n")}
|
|
1479
|
+
${[...lines, ...extra].join("\n")}
|
|
1407
1480
|
}`;
|
|
1408
1481
|
};
|
|
1409
1482
|
const darkSels = scopes.flatMap(
|
|
@@ -1419,10 +1492,14 @@ ${lines.join("\n")}
|
|
|
1419
1492
|
`emitRdsCss: ${bad.map((b) => `"${b}"`).join(", ")} ${bad.length > 1 ? "are" : "is"} not covered by the component tokens of @rojaostudio/ds, redeclared only on ${RDS_TOKEN_SCOPE}. The components inside would keep the colours resolved at :root. Anchor the selector at the root (':root[data-theme="dark"]', as next-themes sets it on <html>), or add the attribute the tokens cover: data-rds-scope on a scope ('.my-scope[data-rds-scope]'), data-rds-mode on a dark element ('[data-rds-mode="dark"]'), data-rds-plate on a plate. Pass allowUncovered: true only for a theme without the components.`
|
|
1420
1493
|
);
|
|
1421
1494
|
}
|
|
1495
|
+
const print = block2([.../* @__PURE__ */ new Set([...scopes, ...darkSels, ...plates])], rdsPrintMode(theme), void 0, mediaTypeLines(true));
|
|
1422
1496
|
return [
|
|
1423
|
-
block2(scopes, __spreadValues(__spreadValues({}, theme.light), theme.vars)),
|
|
1497
|
+
block2(scopes, __spreadValues(__spreadValues({}, theme.light), theme.vars), void 0, mediaTypeLines(false)),
|
|
1424
1498
|
block2(darkSels, theme.dark, theme.light),
|
|
1425
|
-
block2(plates, theme.brand, theme.light)
|
|
1499
|
+
block2(plates, theme.brand, theme.light),
|
|
1500
|
+
`@media print {
|
|
1501
|
+
${print}
|
|
1502
|
+
}`
|
|
1426
1503
|
].join("\n\n") + "\n";
|
|
1427
1504
|
}
|
|
1428
1505
|
function rdsContrast(theme, mode, fg, bg) {
|
|
@@ -1470,6 +1547,8 @@ var RDS_CONTRAST_PAIRS = [
|
|
|
1470
1547
|
["text/muted", "surface/tint/default"],
|
|
1471
1548
|
["text/on/tint", "surface/tint/subtle"],
|
|
1472
1549
|
["text/action", "surface/action/strong"],
|
|
1550
|
+
["text/selected", "surface/tint/default"],
|
|
1551
|
+
["text/selected", "surface/tint/subtle"],
|
|
1473
1552
|
["text/muted", "surface/page"],
|
|
1474
1553
|
["text/muted", "surface/panel"],
|
|
1475
1554
|
["text/subtle", "surface/card"],
|
|
@@ -1482,6 +1561,8 @@ var RDS_CONTRAST_PAIRS = [
|
|
|
1482
1561
|
["text/info", "surface/info"],
|
|
1483
1562
|
["text/warning", "surface/warning"],
|
|
1484
1563
|
["text/neutral", "surface/neutral"],
|
|
1564
|
+
// The inverse Card: its text on its fill.
|
|
1565
|
+
["text/on-inverse", "surface/inverse"],
|
|
1485
1566
|
// The attention Banner: text/on/warning on its three levels.
|
|
1486
1567
|
["text/on/warning", "surface/attention/low"],
|
|
1487
1568
|
["text/on/warning", "surface/attention/medium"],
|
|
@@ -1499,7 +1580,9 @@ var RDS_NON_TEXT_PAIRS = [
|
|
|
1499
1580
|
["chart/series/1", "surface/card"],
|
|
1500
1581
|
["chart/series/1", "surface/page"],
|
|
1501
1582
|
["colors/state/neutral-strong", "surface/panel"],
|
|
1502
|
-
["colors/state/neutral-strong", "surface/card"]
|
|
1583
|
+
["colors/state/neutral-strong", "surface/card"],
|
|
1584
|
+
// The icon of the success fill Tile on its fill.
|
|
1585
|
+
["text/on/success-strong", "colors/state/success-strong"]
|
|
1503
1586
|
];
|
|
1504
1587
|
function rdsContrastReport(theme) {
|
|
1505
1588
|
const out = [];
|
|
@@ -1511,10 +1594,20 @@ function rdsContrastReport(theme) {
|
|
|
1511
1594
|
}
|
|
1512
1595
|
return out;
|
|
1513
1596
|
}
|
|
1597
|
+
function laterFallback(role, mode, primary) {
|
|
1598
|
+
if (role === "text/on/success-strong") return mode === "light" ? SUCCESS_STRONG_ON.light : SUCCESS_STRONG_ON.dark;
|
|
1599
|
+
if (!(role in INVERSE_DARK)) return void 0;
|
|
1600
|
+
if (mode !== "light") return INVERSE_DARK[role];
|
|
1601
|
+
const fill = primary && /^#[0-9a-f]{6}$/i.test(primary) ? inverseOf(primary) : coal[900];
|
|
1602
|
+
if (role === "surface/inverse") return fill;
|
|
1603
|
+
return role === "text/on-inverse" ? WHITE : inverseSubtle(fill);
|
|
1604
|
+
}
|
|
1514
1605
|
var isColourRef = (v) => /^[a-z][a-z0-9-]*\/[a-z]?\d+$/i.test(v);
|
|
1515
1606
|
var ADDED_ROLES = {
|
|
1516
1607
|
// Figma: light → base colors/state/error, dark → base dark/colors/state/error-strong, brand → base dark/text/error.
|
|
1517
|
-
"border/error": { light: "colors/state/error", dark: "colors/state/error-strong", brand: "text/error" }
|
|
1608
|
+
"border/error": { light: "colors/state/error", dark: "colors/state/error-strong", brand: "text/error" },
|
|
1609
|
+
// Figma: colors/primary/default of each mode (base colors/primary/default, dark/…, brand/…).
|
|
1610
|
+
"text/selected": { light: "colors/primary/default", dark: "colors/primary/default", brand: "colors/primary/default" }
|
|
1518
1611
|
};
|
|
1519
1612
|
function rdsThemeFromTable(table, opts = {}) {
|
|
1520
1613
|
var _a, _b, _c;
|
|
@@ -1558,6 +1651,12 @@ function rdsThemeFromTable(table, opts = {}) {
|
|
|
1558
1651
|
derived.add(role);
|
|
1559
1652
|
continue;
|
|
1560
1653
|
}
|
|
1654
|
+
const later = ref2 === void 0 ? laterFallback(role, mode, out[mode][roleVar("colors/primary/default")]) : void 0;
|
|
1655
|
+
if (later !== void 0) {
|
|
1656
|
+
out[mode][roleVar(role)] = later;
|
|
1657
|
+
derived.add(role);
|
|
1658
|
+
continue;
|
|
1659
|
+
}
|
|
1561
1660
|
if (ref2 === void 0) problems.push(`${mode}: role "${role}" is missing`);
|
|
1562
1661
|
else if (isColourRef(ref2)) {
|
|
1563
1662
|
const value = table.primitives[ref2];
|
|
@@ -1586,7 +1685,7 @@ function rdsThemeFromTable(table, opts = {}) {
|
|
|
1586
1685
|
if (derived.size)
|
|
1587
1686
|
warn(
|
|
1588
1687
|
`${where}: the table was exported before ${[...derived].map((r) => `"${r}"`).join(", ")} existed in the [RDS] theme. Taken from the tokens Figma aliases it to (` + [...derived].map(
|
|
1589
|
-
(r) => ADDED_ROLES[r] ? Object.entries(ADDED_ROLES[r]).map(([m, src]) => `${m}: ${src}`).join(", ") : `${r}: ${ATTENTION[r]} in every mode`
|
|
1688
|
+
(r) => ADDED_ROLES[r] ? Object.entries(ADDED_ROLES[r]).map(([m, src]) => `${m}: ${src}`).join(", ") : ATTENTION[r] ? `${r}: ${ATTENTION[r]} in every mode` : `${r}: ${out.light[roleVar(r)]} in light, ${out.dark[roleVar(r)]} in dark and on the plate`
|
|
1590
1689
|
).join("; ") + `). Export the table again with figma/export-brand.js.`
|
|
1591
1690
|
);
|
|
1592
1691
|
const fails = rdsContrastReport(out);
|
|
@@ -1789,6 +1888,10 @@ ${themeImport}
|
|
|
1789
1888
|
- Dark mode: \`class="dark"\` on \`<html>\` (or any element). Light AND dark are first-class.
|
|
1790
1889
|
- Brand plate: \`class="ds-plate"\` on a section paints it with the brand color; the roles inside
|
|
1791
1890
|
flip so text and components stay legible.
|
|
1891
|
+
- Print: the theme already carries \`@media print\` (light forced, white backgrounds, no shadows, even
|
|
1892
|
+
under \`.dark\` or \`.ds-plate\`). Components keep their type; for your printed sheet use
|
|
1893
|
+
\`--media-type-<role>-size\` / \`--media-type-<role>-line\` (${RDS_MEDIA_TYPE.map((m) => `\`${m.role}\``).join(" \xB7 ")}):
|
|
1894
|
+
the screen type on screen, points on paper.
|
|
1792
1895
|
|
|
1793
1896
|
## Components first
|
|
1794
1897
|
Use the design system components before writing your own markup. Import each from its own path:
|
|
@@ -1840,4 +1943,4 @@ Brand's own variables (same value in every mode): ${own.map((v) => `\`${v}\``).j
|
|
|
1840
1943
|
return text;
|
|
1841
1944
|
}
|
|
1842
1945
|
|
|
1843
|
-
export { RDS_CONTRAST_PAIRS, RDS_NON_TEXT_PAIRS, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, ROLES, RdsValidationError, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar };
|
|
1946
|
+
export { RDS_CONTRAST_PAIRS, RDS_MEDIA_TYPE, RDS_NON_TEXT_PAIRS, RDS_PRINT_ON_WHITE, RDS_PRINT_TRANSPARENT, RDS_PRINT_WHITE, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, ROLES, RdsValidationError, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsPrintMode, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar };
|
package/dist/generate.d.ts
CHANGED
|
@@ -31,6 +31,36 @@ declare function generateRdsTheme(def: BrandDef, opts?: RdsThemeOptions): RdsThe
|
|
|
31
31
|
declare const RDS_SCOPE_SELECTORS: readonly [":root", ".ds-scope", "[data-rds-scope]", ".dark", "[data-rds-mode]", ".ds-plate", "[data-rds-plate]"];
|
|
32
32
|
/** RDS_SCOPE_SELECTORS as one selector list, as the component token layer is emitted. */
|
|
33
33
|
declare const RDS_TOKEN_SCOPE: string;
|
|
34
|
+
/**
|
|
35
|
+
* The print mode of the [RDS] theme (issue #42): the light mode with two swaps, as Figma draws it. Every background
|
|
36
|
+
* turns white (paper, and no ink spent on fills; the borders and texts of light stay, so a box keeps its outline) and
|
|
37
|
+
* every shadow turns transparent. emitRdsCss writes it in an `@media print` block over every scope, dark and plate.
|
|
38
|
+
*/
|
|
39
|
+
declare const RDS_PRINT_WHITE: readonly ["surface/page", "surface/card", "surface/panel", "surface/cover", "surface/muted", "surface/muted-strong", "surface/tint/default", "surface/tint/strong", "surface/tint/subtle", "surface/band/base", "surface/neutral", "surface/info", "surface/success", "surface/warning", "surface/error", "surface/error-strong", "surface/attention/low", "surface/attention/medium", "surface/attention/high"];
|
|
40
|
+
/** The shadows the print mode clears. */
|
|
41
|
+
declare const RDS_PRINT_TRANSPARENT: readonly ["shadow/ambient", "shadow/key", "shadow/strong"];
|
|
42
|
+
/**
|
|
43
|
+
* The text that sits on a background the print mode turns white: picked for the coloured fill (white on a dark
|
|
44
|
+
* cover), it would vanish on paper. In print it is the light body text, the text of the page.
|
|
45
|
+
*/
|
|
46
|
+
declare const RDS_PRINT_ON_WHITE: readonly ["text/on/cover", "text/on/tint", "text/on/band-base"];
|
|
47
|
+
/**
|
|
48
|
+
* The theme roles in print: light, the backgrounds of RDS_PRINT_WHITE white, the text on them (RDS_PRINT_ON_WHITE)
|
|
49
|
+
* the light text/body, the shadows of RDS_PRINT_TRANSPARENT clear.
|
|
50
|
+
*/
|
|
51
|
+
declare function rdsPrintMode(theme: RdsTheme): Record<string, string>;
|
|
52
|
+
/**
|
|
53
|
+
* The media type variables of the [RDS] Base Tokens (Figma `media/type/<role>/{size,line}`, issue #42): on screen an
|
|
54
|
+
* alias of a type style (title → type/heading), on paper a closed scale in points. Only the variables exist: the
|
|
55
|
+
* components keep the type tokens, and the consumer's printed sheet reads `--media-type-<role>-size` / `-line`.
|
|
56
|
+
*/
|
|
57
|
+
declare const RDS_MEDIA_TYPE: ReadonlyArray<{
|
|
58
|
+
role: string;
|
|
59
|
+
screen: string;
|
|
60
|
+
size: number;
|
|
61
|
+
line: number;
|
|
62
|
+
print: readonly [size: number, line: number];
|
|
63
|
+
}>;
|
|
34
64
|
type RdsCssOptions = {
|
|
35
65
|
/** Scope of the light mode. Default `:root, .ds-scope, [data-rds-scope]`. */
|
|
36
66
|
scope?: string;
|
|
@@ -50,7 +80,9 @@ type RdsCssOptions = {
|
|
|
50
80
|
};
|
|
51
81
|
/**
|
|
52
82
|
* The theme as CSS. Dark and plate only carry what differs from light: they inherit the rest
|
|
53
|
-
* through the cascade, like the [RDS] modes that point back to the plain token.
|
|
83
|
+
* through the cascade, like the [RDS] modes that point back to the plain token. An `@media print` block closes the
|
|
84
|
+
* sheet with the print mode (rdsPrintMode) over every one of those selectors. The light scope also declares the media
|
|
85
|
+
* type variables (RDS_MEDIA_TYPE), which the print block turns into points.
|
|
54
86
|
*
|
|
55
87
|
* Throws when a selector would leave the components of @rojaostudio/ds on the root colours (see
|
|
56
88
|
* RDS_SCOPE_SELECTORS), unless `allowUncovered`.
|
|
@@ -229,4 +261,4 @@ declare function isNeutralBrand(def: {
|
|
|
229
261
|
palettes?: PaletteDefs;
|
|
230
262
|
}): boolean;
|
|
231
263
|
|
|
232
|
-
export { BrandDef, type ClaudeMdOptions, type ClaudeMdTarget, RDS_CONTRAST_PAIRS, RDS_NON_TEXT_PAIRS, ROLES as RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, type RdsBrandTable, type RdsContrastFailure, type RdsCssOptions, type RdsMode, type RdsTheme, type RdsThemeOptions, RdsValidationError, SCALE_STEPS, type Scale, type ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsThemeFromTable, refToHex, relativeLuminance, roleVar };
|
|
264
|
+
export { BrandDef, type ClaudeMdOptions, type ClaudeMdTarget, RDS_CONTRAST_PAIRS, RDS_MEDIA_TYPE, RDS_NON_TEXT_PAIRS, RDS_PRINT_ON_WHITE, RDS_PRINT_TRANSPARENT, RDS_PRINT_WHITE, ROLES as RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, type RdsBrandTable, type RdsContrastFailure, type RdsCssOptions, type RdsMode, type RdsTheme, type RdsThemeOptions, RdsValidationError, SCALE_STEPS, type Scale, type ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsPrintMode, rdsThemeFromTable, refToHex, relativeLuminance, roleVar };
|
package/dist/generate.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { RDS_CONTRAST_PAIRS, RDS_NON_TEXT_PAIRS, ROLES as RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, RdsValidationError, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-
|
|
1
|
+
export { RDS_CONTRAST_PAIRS, RDS_MEDIA_TYPE, RDS_NON_TEXT_PAIRS, RDS_PRINT_ON_WHITE, RDS_PRINT_TRANSPARENT, RDS_PRINT_WHITE, ROLES as RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, RdsValidationError, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsPrintMode, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-N2Y3UCKN.js';
|
|
2
2
|
import './chunk-FRWRLCYM.js';
|
|
3
3
|
import './chunk-ORMEWXMH.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { G as GenResult, R as ResolvedTheme, T as TokenMap, g as generateTheme, r as resolveTheme } from './generateTheme-CUfNpsKs.js';
|
|
2
|
-
export { ClaudeMdOptions, ClaudeMdTarget, RDS_CONTRAST_PAIRS, RDS_NON_TEXT_PAIRS, RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, RdsBrandTable, RdsContrastFailure, RdsCssOptions, RdsMode, RdsTheme, RdsThemeOptions, RdsValidationError, SCALE_STEPS, Scale, ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsThemeFromTable, refToHex, relativeLuminance, roleVar } from './generate.js';
|
|
2
|
+
export { ClaudeMdOptions, ClaudeMdTarget, RDS_CONTRAST_PAIRS, RDS_MEDIA_TYPE, RDS_NON_TEXT_PAIRS, RDS_PRINT_ON_WHITE, RDS_PRINT_TRANSPARENT, RDS_PRINT_WHITE, RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, RdsBrandTable, RdsContrastFailure, RdsCssOptions, RdsMode, RdsTheme, RdsThemeOptions, RdsValidationError, SCALE_STEPS, Scale, ScaleStep, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsPrintMode, rdsThemeFromTable, refToHex, relativeLuminance, roleVar } from './generate.js';
|
|
3
3
|
export { A as Archetype, B as BrandColors, a as BrandDef, C as ColorRef, D as DarkStrategy, F as FontDef, P as PaletteRef, S as ScaleToken, T as TextStyle, b as TextStyleName, c as TypeScale } from './recipe.schema-Cq7e82nx.js';
|
|
4
4
|
export { primitives, tokens } from './tokens.js';
|
|
5
5
|
export { RecipeName, recipes } from './recipes.js';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { recipes } from './chunk-PV6GFEAM.js';
|
|
2
|
-
export { RDS_CONTRAST_PAIRS, RDS_NON_TEXT_PAIRS, ROLES as RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, RdsValidationError, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-
|
|
2
|
+
export { RDS_CONTRAST_PAIRS, RDS_MEDIA_TYPE, RDS_NON_TEXT_PAIRS, RDS_PRINT_ON_WHITE, RDS_PRINT_TRANSPARENT, RDS_PRINT_WHITE, ROLES as RDS_ROLES, RDS_SCOPE_SELECTORS, RDS_TOKEN_SCOPE, RdsValidationError, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, isSafeColor, isSafeFont, isSafeVarName, onColor, rdsContrast, rdsContrastReport, rdsPrintMode, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-N2Y3UCKN.js';
|
|
3
3
|
export { primitives, tokens } from './chunk-FRWRLCYM.js';
|
|
4
4
|
import './chunk-ORMEWXMH.js';
|
package/dist/themes.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rojaostudio/ds-core",
|
|
3
|
-
"version": "1.1.0-next.
|
|
3
|
+
"version": "1.1.0-next.15",
|
|
4
4
|
"description": "O motor do Rojão DS — tokens, derivação de tema e emissores. Sem React, sem Tailwind, sem CSS.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Rojão Studio (https://rojao.studio)",
|