From 5864cb3466d61d1ff9d6477f0bd952d8aea0e1c6 Mon Sep 17 00:00:00 2001 From: Stephen Haberman Date: Mon, 17 Jun 2024 19:46:48 -0500 Subject: [PATCH 1/2] feat: Add fs/fsPx for fontSize. This slightly overlaps with fs0/fs1 for flexShrink, but seems fine. --- packages/template-tachyons/src/Css.ts | 8 ++++++++ packages/testing-tachyons/src/Css.ts | 8 ++++++++ packages/truss/src/sections/tachyons/typeScale.ts | 13 +++++++++---- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/template-tachyons/src/Css.ts b/packages/template-tachyons/src/Css.ts index bb0d5ce..f6e4d92 100644 --- a/packages/template-tachyons/src/Css.ts +++ b/packages/template-tachyons/src/Css.ts @@ -2200,6 +2200,14 @@ class CssBuilder { get tiny() { return this.add("fontWeight", 400).add("fontSize", "10px").add("lineHeight", "14px"); } + /** Sets `fontSize: value`. */ + fs(value: Properties["fontSize"]) { + return this.add("fontSize", value); + } + /** Sets `fontSize: px`. */ + fsPx(px: number) { + return this.fs(`${px}px`); + } // typography /** Sets `maxWidth: "30em"`. */ diff --git a/packages/testing-tachyons/src/Css.ts b/packages/testing-tachyons/src/Css.ts index 8ab2fc1..f997766 100644 --- a/packages/testing-tachyons/src/Css.ts +++ b/packages/testing-tachyons/src/Css.ts @@ -1906,6 +1906,14 @@ class CssBuilder { get f10() { return this.add("fontSize", "10px").add("fontWeight", 500); } + /** Sets `fontSize: value`. */ + fs(value: Properties["fontSize"]) { + return this.add("fontSize", value); + } + /** Sets `fontSize: px`. */ + fsPx(px: number) { + return this.fs(`${px}px`); + } // typography /** Sets `maxWidth: "30em"`. */ diff --git a/packages/truss/src/sections/tachyons/typeScale.ts b/packages/truss/src/sections/tachyons/typeScale.ts index d3dbf07..48faf46 100644 --- a/packages/truss/src/sections/tachyons/typeScale.ts +++ b/packages/truss/src/sections/tachyons/typeScale.ts @@ -1,10 +1,15 @@ -import { newMethod } from "src/methods"; +import { newMethod, newMethodsForProp, newParamMethod } from "src/methods"; import { CreateMethodsFn } from "src/config"; -export const typeScale: CreateMethodsFn = ({ fonts }) => - Object.entries(fonts).map(([abbr, defs]) => { +/** Adds abbreviations like `tiny` -> `12px` or `tiny` -> `{ fontSize: 12px, fontWeight: ... }`. */ +export const typeScale: CreateMethodsFn = ({ fonts }) => [ + ...Object.entries(fonts).map(([abbr, defs]) => { if (typeof defs === "string") { return newMethod(abbr, { fontSize: defs }); } return newMethod(abbr, defs); - }); + }), + // Include `fs(...)` & `fsPx(...)` for one-off font-sizes. We technically also have + // `fs0` and `fs1` for `flexShrink`, but this seems fine. + ...newMethodsForProp("fontSize", {}, "fs", true), +]; From a5618c49a504d6c63e14609901f9a68ae4a3ffe8 Mon Sep 17 00:00:00 2001 From: Stephen Haberman Date: Tue, 18 Jun 2024 13:17:56 -0500 Subject: [PATCH 2/2] Add lh/lhPx as well. --- packages/template-tachyons/src/Css.ts | 20 +++++++++++-------- packages/testing-tachyons/src/Css.ts | 20 +++++++++++-------- .../truss/src/sections/tachyons/typeScale.ts | 3 --- .../truss/src/sections/tachyons/typography.ts | 7 +++++-- 4 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/template-tachyons/src/Css.ts b/packages/template-tachyons/src/Css.ts index f6e4d92..0203392 100644 --- a/packages/template-tachyons/src/Css.ts +++ b/packages/template-tachyons/src/Css.ts @@ -2200,14 +2200,6 @@ class CssBuilder { get tiny() { return this.add("fontWeight", 400).add("fontSize", "10px").add("lineHeight", "14px"); } - /** Sets `fontSize: value`. */ - fs(value: Properties["fontSize"]) { - return this.add("fontSize", value); - } - /** Sets `fontSize: px`. */ - fsPx(px: number) { - return this.fs(`${px}px`); - } // typography /** Sets `maxWidth: "30em"`. */ @@ -2234,10 +2226,22 @@ class CssBuilder { get truncate() { return this.add("whiteSpace", "nowrap").add("overflow", "hidden").add("textOverflow", "ellipsis"); } + /** Sets `fontSize: value`. */ + fs(value: Properties["fontSize"]) { + return this.add("fontSize", value); + } + /** Sets `fontSize: px`. */ + fsPx(px: number) { + return this.fs(`${px}px`); + } /** Sets `lineHeight: value`. */ lh(value: Properties["lineHeight"]) { return this.add("lineHeight", value); } + /** Sets `lineHeight: px`. */ + lhPx(px: number) { + return this.lh(`${px}px`); + } // userSelect /** Sets `userSelect: "none"`. */ diff --git a/packages/testing-tachyons/src/Css.ts b/packages/testing-tachyons/src/Css.ts index f997766..59b20dc 100644 --- a/packages/testing-tachyons/src/Css.ts +++ b/packages/testing-tachyons/src/Css.ts @@ -1906,14 +1906,6 @@ class CssBuilder { get f10() { return this.add("fontSize", "10px").add("fontWeight", 500); } - /** Sets `fontSize: value`. */ - fs(value: Properties["fontSize"]) { - return this.add("fontSize", value); - } - /** Sets `fontSize: px`. */ - fsPx(px: number) { - return this.fs(`${px}px`); - } // typography /** Sets `maxWidth: "30em"`. */ @@ -1940,10 +1932,22 @@ class CssBuilder { get truncate() { return this.add("whiteSpace", "nowrap").add("overflow", "hidden").add("textOverflow", "ellipsis"); } + /** Sets `fontSize: value`. */ + fs(value: Properties["fontSize"]) { + return this.add("fontSize", value); + } + /** Sets `fontSize: px`. */ + fsPx(px: number) { + return this.fs(`${px}px`); + } /** Sets `lineHeight: value`. */ lh(value: Properties["lineHeight"]) { return this.add("lineHeight", value); } + /** Sets `lineHeight: px`. */ + lhPx(px: number) { + return this.lh(`${px}px`); + } // userSelect /** Sets `userSelect: "none"`. */ diff --git a/packages/truss/src/sections/tachyons/typeScale.ts b/packages/truss/src/sections/tachyons/typeScale.ts index 48faf46..f3bb08c 100644 --- a/packages/truss/src/sections/tachyons/typeScale.ts +++ b/packages/truss/src/sections/tachyons/typeScale.ts @@ -9,7 +9,4 @@ export const typeScale: CreateMethodsFn = ({ fonts }) => [ } return newMethod(abbr, defs); }), - // Include `fs(...)` & `fsPx(...)` for one-off font-sizes. We technically also have - // `fs0` and `fs1` for `flexShrink`, but this seems fine. - ...newMethodsForProp("fontSize", {}, "fs", true), ]; diff --git a/packages/truss/src/sections/tachyons/typography.ts b/packages/truss/src/sections/tachyons/typography.ts index 34faf2b..c44eb71 100644 --- a/packages/truss/src/sections/tachyons/typography.ts +++ b/packages/truss/src/sections/tachyons/typography.ts @@ -1,4 +1,4 @@ -import { newMethod, newParamMethod } from "src/methods"; +import { newMethod, newMethodsForProp, newParamMethod } from "src/methods"; import { CreateMethodsFn } from "src/config"; // See typeScale for the FontConfig.fonts handling @@ -18,5 +18,8 @@ export const typography: CreateMethodsFn = () => [ overflow: "hidden", textOverflow: "ellipsis", }), - newParamMethod("lh", "lineHeight"), + // Include `fs(...)` & `fsPx(...)` for one-off font-sizes. We technically also have + // `fs0` and `fs1` for `flexShrink`, but this seems fine. + ...newMethodsForProp("fontSize", {}, "fs", true), + ...newMethodsForProp("lineHeight", {}, "lh", true), ];