@rojaostudio/ds-core 1.1.0-next.12 → 1.1.0-next.14
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-NVYJME6V.js → chunk-QJN6R2DB.js} +128 -15
- 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
|
@@ -992,8 +992,33 @@ var ROLES = [
|
|
|
992
992
|
["colors/state/neutral-strong", "d", "d"],
|
|
993
993
|
["text/on/primary-subtle", "d", "b"],
|
|
994
994
|
["surface/tint/subtle", "d", "b"],
|
|
995
|
-
["border/error", "d", "d"]
|
|
995
|
+
["border/error", "d", "d"],
|
|
996
|
+
["surface/attention/low", "p", "p"],
|
|
997
|
+
["surface/attention/medium", "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"]
|
|
996
1003
|
];
|
|
1004
|
+
var SUCCESS_STRONG_ON = { light: WHITE, dark: BLACK };
|
|
1005
|
+
var coal = palettes.coal;
|
|
1006
|
+
var inverseOf = (primary) => contrastRatio(WHITE, primary) >= AA ? primary : coal[900];
|
|
1007
|
+
function inverseSubtle(fill) {
|
|
1008
|
+
for (let p = 70; p < 100; p += 5) if (contrastRatio(over(white(p), fill), fill) >= AA) return white(p);
|
|
1009
|
+
return WHITE;
|
|
1010
|
+
}
|
|
1011
|
+
var INVERSE_DARK = {
|
|
1012
|
+
"surface/inverse": WHITE,
|
|
1013
|
+
"text/on-inverse": coal[900],
|
|
1014
|
+
"text/on-inverse-subtle": coal[600]
|
|
1015
|
+
};
|
|
1016
|
+
var amber = palettes.amber;
|
|
1017
|
+
var ATTENTION = {
|
|
1018
|
+
"surface/attention/low": amber[100],
|
|
1019
|
+
"surface/attention/medium": amber[200],
|
|
1020
|
+
"surface/attention/high": amber[400]
|
|
1021
|
+
};
|
|
997
1022
|
var awayFrom = (bg) => contrastRatio(bg, BLACK) >= contrastRatio(bg, WHITE) ? "darker" : "lighter";
|
|
998
1023
|
var TINT_DEFAULT = 200;
|
|
999
1024
|
var lighterStep = (s) => s - 100 ;
|
|
@@ -1023,7 +1048,7 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1023
1048
|
}
|
|
1024
1049
|
} else heading = readableFrom(P.base, P.scale, lightBgs, "darker", BLACK);
|
|
1025
1050
|
const invert = b.invert ? ramp(b.invert, own).base : WHITE;
|
|
1026
|
-
const l = {
|
|
1051
|
+
const l = __spreadValues({
|
|
1027
1052
|
"colors/primary/light": P.scale[500],
|
|
1028
1053
|
"colors/primary/default": P.base,
|
|
1029
1054
|
"colors/primary/dark": P.scale[900],
|
|
@@ -1109,8 +1134,12 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1109
1134
|
"logo/mono": BLACK,
|
|
1110
1135
|
"logo/inverse": WHITE,
|
|
1111
1136
|
"logo/inverse-signature": WHITE,
|
|
1112
|
-
"social/ink": BLACK
|
|
1113
|
-
|
|
1137
|
+
"social/ink": BLACK,
|
|
1138
|
+
"surface/inverse": inverseOf(P.base),
|
|
1139
|
+
"text/on-inverse": WHITE,
|
|
1140
|
+
"text/on-inverse-subtle": inverseSubtle(inverseOf(P.base)),
|
|
1141
|
+
"text/on/success-strong": SUCCESS_STRONG_ON.light
|
|
1142
|
+
}, ATTENTION);
|
|
1114
1143
|
const single = !b.secondary;
|
|
1115
1144
|
const K = single ? N : P.scale;
|
|
1116
1145
|
if (single) {
|
|
@@ -1153,7 +1182,7 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1153
1182
|
l["logo/accent"] = l["colors/accent/logo"];
|
|
1154
1183
|
l["logo/accent-2"] = l["colors/secondary/default"];
|
|
1155
1184
|
l["logo/accent-3"] = l["colors/accent/default"];
|
|
1156
|
-
const d = {
|
|
1185
|
+
const d = __spreadProps(__spreadValues({
|
|
1157
1186
|
"surface/page": N[900],
|
|
1158
1187
|
"surface/panel": N[900],
|
|
1159
1188
|
"surface/card": N[900],
|
|
@@ -1223,7 +1252,9 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1223
1252
|
"colors/state/info-strong": L[300],
|
|
1224
1253
|
"colors/state/neutral-strong": N[400],
|
|
1225
1254
|
"text/on/primary-subtle": black(30)
|
|
1226
|
-
}
|
|
1255
|
+
}, INVERSE_DARK), {
|
|
1256
|
+
"text/on/success-strong": SUCCESS_STRONG_ON.dark
|
|
1257
|
+
});
|
|
1227
1258
|
if (single) {
|
|
1228
1259
|
const steps = [200, 300, 100, 400];
|
|
1229
1260
|
const s = (_b = steps.find((st) => distinct(N[st], d["colors/secondary/default"]))) != null ? _b : 200;
|
|
@@ -1340,7 +1371,7 @@ function generateRdsTheme(def, opts = {}) {
|
|
|
1340
1371
|
plateOwn["chart/series/1"] = readableFrom(d["chart/series/1"], P.scale, plateBgs, awayFrom(plate), ink, NON_TEXT);
|
|
1341
1372
|
plateOwn["colors/state/neutral-strong"] = readableFrom(d["colors/state/neutral-strong"], N, plateBgs, awayFrom(plate), ink, NON_TEXT);
|
|
1342
1373
|
for (const logo of ["logo/primary", "logo/signature", "logo/accent", "logo/mono", "social/ink"]) plateOwn[logo] = ink;
|
|
1343
|
-
const fixed = { "colors/state/error-strong": red[700] };
|
|
1374
|
+
const fixed = __spreadValues({ "colors/state/error-strong": red[700] }, ATTENTION);
|
|
1344
1375
|
const out = { light: {}, dark: {}, brand: {} };
|
|
1345
1376
|
const pick = (src, role) => {
|
|
1346
1377
|
var _a2;
|
|
@@ -1369,6 +1400,51 @@ var RDS_SCOPE_SELECTORS = [
|
|
|
1369
1400
|
"[data-rds-plate]"
|
|
1370
1401
|
];
|
|
1371
1402
|
var RDS_TOKEN_SCOPE = RDS_SCOPE_SELECTORS.join(", ");
|
|
1403
|
+
var RDS_PRINT_WHITE = [
|
|
1404
|
+
"surface/page",
|
|
1405
|
+
"surface/card",
|
|
1406
|
+
"surface/panel",
|
|
1407
|
+
"surface/cover",
|
|
1408
|
+
"surface/muted",
|
|
1409
|
+
"surface/muted-strong",
|
|
1410
|
+
"surface/tint/default",
|
|
1411
|
+
"surface/tint/strong",
|
|
1412
|
+
"surface/tint/subtle",
|
|
1413
|
+
"surface/band/base",
|
|
1414
|
+
"surface/neutral",
|
|
1415
|
+
"surface/info",
|
|
1416
|
+
"surface/success",
|
|
1417
|
+
"surface/warning",
|
|
1418
|
+
"surface/error",
|
|
1419
|
+
"surface/error-strong",
|
|
1420
|
+
"surface/attention/low",
|
|
1421
|
+
"surface/attention/medium",
|
|
1422
|
+
"surface/attention/high"
|
|
1423
|
+
];
|
|
1424
|
+
var RDS_PRINT_TRANSPARENT = ["shadow/ambient", "shadow/key", "shadow/strong"];
|
|
1425
|
+
var RDS_PRINT_ON_WHITE = ["text/on/cover", "text/on/tint", "text/on/band-base"];
|
|
1426
|
+
function rdsPrintMode(theme) {
|
|
1427
|
+
const out = __spreadValues({}, theme.light);
|
|
1428
|
+
for (const role of RDS_PRINT_WHITE) out[roleVar(role)] = WHITE;
|
|
1429
|
+
for (const role of RDS_PRINT_ON_WHITE) out[roleVar(role)] = theme.light[roleVar("text/body")];
|
|
1430
|
+
for (const role of RDS_PRINT_TRANSPARENT) out[roleVar(role)] = black(0);
|
|
1431
|
+
return out;
|
|
1432
|
+
}
|
|
1433
|
+
var RDS_MEDIA_TYPE = [
|
|
1434
|
+
{ role: "caption", screen: "caption", size: 12, line: 16, print: [8, 10] },
|
|
1435
|
+
{ role: "small", screen: "small", size: 14, line: 20, print: [9, 12] },
|
|
1436
|
+
{ role: "body", screen: "body", size: 16, line: 24, print: [10, 14] },
|
|
1437
|
+
{ role: "label", screen: "label", size: 16, line: 24, print: [12, 16] },
|
|
1438
|
+
{ role: "title", screen: "heading", size: 24, line: 30, print: [18, 24] }
|
|
1439
|
+
];
|
|
1440
|
+
function mediaTypeLines(print) {
|
|
1441
|
+
return RDS_MEDIA_TYPE.flatMap(
|
|
1442
|
+
({ role, screen, size, line, print: [ps, pl] }) => print ? [` --media-type-${role}-size: ${ps}pt;`, ` --media-type-${role}-line: ${pl}pt;`] : [
|
|
1443
|
+
` --media-type-${role}-size: var(--type-${screen}-size, ${size}px);`,
|
|
1444
|
+
` --media-type-${role}-line: var(--type-${screen}-line, ${line}px);`
|
|
1445
|
+
]
|
|
1446
|
+
);
|
|
1447
|
+
}
|
|
1372
1448
|
var split = (list) => list.split(",").map((s) => s.trim()).filter(Boolean);
|
|
1373
1449
|
var rootAnchored = (sel) => /^(:root|html)(?![\w-])/i.test(sel);
|
|
1374
1450
|
var subject = (sel) => {
|
|
@@ -1391,10 +1467,10 @@ function emitRdsCss(theme, opts = {}) {
|
|
|
1391
1467
|
const scopes = split((_a = opts.scope) != null ? _a : ":root, .ds-scope, [data-rds-scope]");
|
|
1392
1468
|
const darks = split((_b = opts.dark) != null ? _b : '.dark, [data-rds-mode="dark"]');
|
|
1393
1469
|
const plates = split((_c = opts.plate) != null ? _c : ".ds-plate, [data-rds-plate]");
|
|
1394
|
-
const block2 = (sels, map, only) => {
|
|
1470
|
+
const block2 = (sels, map, only, extra = []) => {
|
|
1395
1471
|
const lines = Object.entries(map).filter(([k, v]) => !only || only[k] !== v).map(([k, v]) => ` ${k}: ${k === "--type-font-mono" ? `"${v}", monospace` : v};`);
|
|
1396
1472
|
return `${sels.join(", ")} {
|
|
1397
|
-
${lines.join("\n")}
|
|
1473
|
+
${[...lines, ...extra].join("\n")}
|
|
1398
1474
|
}`;
|
|
1399
1475
|
};
|
|
1400
1476
|
const darkSels = scopes.flatMap(
|
|
@@ -1410,10 +1486,14 @@ ${lines.join("\n")}
|
|
|
1410
1486
|
`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.`
|
|
1411
1487
|
);
|
|
1412
1488
|
}
|
|
1489
|
+
const print = block2([.../* @__PURE__ */ new Set([...scopes, ...darkSels, ...plates])], rdsPrintMode(theme), void 0, mediaTypeLines(true));
|
|
1413
1490
|
return [
|
|
1414
|
-
block2(scopes, __spreadValues(__spreadValues({}, theme.light), theme.vars)),
|
|
1491
|
+
block2(scopes, __spreadValues(__spreadValues({}, theme.light), theme.vars), void 0, mediaTypeLines(false)),
|
|
1415
1492
|
block2(darkSels, theme.dark, theme.light),
|
|
1416
|
-
block2(plates, theme.brand, theme.light)
|
|
1493
|
+
block2(plates, theme.brand, theme.light),
|
|
1494
|
+
`@media print {
|
|
1495
|
+
${print}
|
|
1496
|
+
}`
|
|
1417
1497
|
].join("\n\n") + "\n";
|
|
1418
1498
|
}
|
|
1419
1499
|
function rdsContrast(theme, mode, fg, bg) {
|
|
@@ -1472,7 +1552,13 @@ var RDS_CONTRAST_PAIRS = [
|
|
|
1472
1552
|
["text/success", "surface/card"],
|
|
1473
1553
|
["text/info", "surface/info"],
|
|
1474
1554
|
["text/warning", "surface/warning"],
|
|
1475
|
-
["text/neutral", "surface/neutral"]
|
|
1555
|
+
["text/neutral", "surface/neutral"],
|
|
1556
|
+
// The inverse Card: its text on its fill.
|
|
1557
|
+
["text/on-inverse", "surface/inverse"],
|
|
1558
|
+
// The attention Banner: text/on/warning on its three levels.
|
|
1559
|
+
["text/on/warning", "surface/attention/low"],
|
|
1560
|
+
["text/on/warning", "surface/attention/medium"],
|
|
1561
|
+
["text/on/warning", "surface/attention/high"]
|
|
1476
1562
|
];
|
|
1477
1563
|
var RDS_NON_TEXT_PAIRS = [
|
|
1478
1564
|
["border/strong", "surface/card"],
|
|
@@ -1486,7 +1572,9 @@ var RDS_NON_TEXT_PAIRS = [
|
|
|
1486
1572
|
["chart/series/1", "surface/card"],
|
|
1487
1573
|
["chart/series/1", "surface/page"],
|
|
1488
1574
|
["colors/state/neutral-strong", "surface/panel"],
|
|
1489
|
-
["colors/state/neutral-strong", "surface/card"]
|
|
1575
|
+
["colors/state/neutral-strong", "surface/card"],
|
|
1576
|
+
// The icon of the success fill Tile on its fill.
|
|
1577
|
+
["text/on/success-strong", "colors/state/success-strong"]
|
|
1490
1578
|
];
|
|
1491
1579
|
function rdsContrastReport(theme) {
|
|
1492
1580
|
const out = [];
|
|
@@ -1498,6 +1586,14 @@ function rdsContrastReport(theme) {
|
|
|
1498
1586
|
}
|
|
1499
1587
|
return out;
|
|
1500
1588
|
}
|
|
1589
|
+
function laterFallback(role, mode, primary) {
|
|
1590
|
+
if (role === "text/on/success-strong") return mode === "light" ? SUCCESS_STRONG_ON.light : SUCCESS_STRONG_ON.dark;
|
|
1591
|
+
if (!(role in INVERSE_DARK)) return void 0;
|
|
1592
|
+
if (mode !== "light") return INVERSE_DARK[role];
|
|
1593
|
+
const fill = primary && /^#[0-9a-f]{6}$/i.test(primary) ? inverseOf(primary) : coal[900];
|
|
1594
|
+
if (role === "surface/inverse") return fill;
|
|
1595
|
+
return role === "text/on-inverse" ? WHITE : inverseSubtle(fill);
|
|
1596
|
+
}
|
|
1501
1597
|
var isColourRef = (v) => /^[a-z][a-z0-9-]*\/[a-z]?\d+$/i.test(v);
|
|
1502
1598
|
var ADDED_ROLES = {
|
|
1503
1599
|
// Figma: light → base colors/state/error, dark → base dark/colors/state/error-strong, brand → base dark/text/error.
|
|
@@ -1540,6 +1636,17 @@ function rdsThemeFromTable(table, opts = {}) {
|
|
|
1540
1636
|
ref2 = roles[added];
|
|
1541
1637
|
derived.add(role);
|
|
1542
1638
|
}
|
|
1639
|
+
if (ref2 === void 0 && ATTENTION[role] !== void 0) {
|
|
1640
|
+
out[mode][roleVar(role)] = ATTENTION[role];
|
|
1641
|
+
derived.add(role);
|
|
1642
|
+
continue;
|
|
1643
|
+
}
|
|
1644
|
+
const later = ref2 === void 0 ? laterFallback(role, mode, out[mode][roleVar("colors/primary/default")]) : void 0;
|
|
1645
|
+
if (later !== void 0) {
|
|
1646
|
+
out[mode][roleVar(role)] = later;
|
|
1647
|
+
derived.add(role);
|
|
1648
|
+
continue;
|
|
1649
|
+
}
|
|
1543
1650
|
if (ref2 === void 0) problems.push(`${mode}: role "${role}" is missing`);
|
|
1544
1651
|
else if (isColourRef(ref2)) {
|
|
1545
1652
|
const value = table.primitives[ref2];
|
|
@@ -1567,7 +1674,9 @@ function rdsThemeFromTable(table, opts = {}) {
|
|
|
1567
1674
|
const warn = (_c = opts.warn) != null ? _c : defaultWarn;
|
|
1568
1675
|
if (derived.size)
|
|
1569
1676
|
warn(
|
|
1570
|
-
`${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(
|
|
1677
|
+
`${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(
|
|
1678
|
+
(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`
|
|
1679
|
+
).join("; ") + `). Export the table again with figma/export-brand.js.`
|
|
1571
1680
|
);
|
|
1572
1681
|
const fails = rdsContrastReport(out);
|
|
1573
1682
|
if (fails.length)
|
|
@@ -1769,6 +1878,10 @@ ${themeImport}
|
|
|
1769
1878
|
- Dark mode: \`class="dark"\` on \`<html>\` (or any element). Light AND dark are first-class.
|
|
1770
1879
|
- Brand plate: \`class="ds-plate"\` on a section paints it with the brand color; the roles inside
|
|
1771
1880
|
flip so text and components stay legible.
|
|
1881
|
+
- Print: the theme already carries \`@media print\` (light forced, white backgrounds, no shadows, even
|
|
1882
|
+
under \`.dark\` or \`.ds-plate\`). Components keep their type; for your printed sheet use
|
|
1883
|
+
\`--media-type-<role>-size\` / \`--media-type-<role>-line\` (${RDS_MEDIA_TYPE.map((m) => `\`${m.role}\``).join(" \xB7 ")}):
|
|
1884
|
+
the screen type on screen, points on paper.
|
|
1772
1885
|
|
|
1773
1886
|
## Components first
|
|
1774
1887
|
Use the design system components before writing your own markup. Import each from its own path:
|
|
@@ -1820,4 +1933,4 @@ Brand's own variables (same value in every mode): ${own.map((v) => `\`${v}\``).j
|
|
|
1820
1933
|
return text;
|
|
1821
1934
|
}
|
|
1822
1935
|
|
|
1823
|
-
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 };
|
|
1936
|
+
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-QJN6R2DB.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-QJN6R2DB.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.14",
|
|
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)",
|