@tokenami/ds 0.0.62 → 0.0.63

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/index.cjs CHANGED
@@ -853,6 +853,7 @@ var BP_XL = 1280;
853
853
  var BP_2XL = 1536;
854
854
  var rem = (value) => `${value / BASE_FONT_SIZE}rem`;
855
855
  var remBreakpoint = (bp) => `@media (min-width: ${rem(bp)})`;
856
+ var font = (fontSize, lineHeight) => `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${fontSize}/${lineHeight} var(--font-family)`;
856
857
  var optionalViaGradient = (direction) => `linear-gradient(${direction}, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));
857
858
  ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)`;
858
859
  var fluid = (params) => {
@@ -919,6 +920,14 @@ var src_default = config.createConfig({
919
920
  },
920
921
  // tweaked version of preflight from Tailwind https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/preflight.css
921
922
  globalStyles: {
923
+ ":root": {
924
+ /* set up default vars for var(text_*) tokens */
925
+ ["--font-family"]: `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
926
+ ["--font-stretch"]: "normal",
927
+ ["--font-style"]: "normal",
928
+ ["--font-variant"]: "normal",
929
+ ["--font-weight"]: "normal"
930
+ },
922
931
  "*, *::before, *::after": {
923
932
  boxSizing: "border-box",
924
933
  margin: 0,
@@ -929,7 +938,7 @@ var src_default = config.createConfig({
929
938
  lineHeight: 1.5,
930
939
  WebkitTextSizeAdjust: "100%",
931
940
  tabSize: 4,
932
- fontFamily: `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
941
+ fontFamily: "var(--font-family)",
933
942
  fontFeatureSettings: "normal",
934
943
  fontVariationSettings: "normal",
935
944
  WebkitTapHighlightColor: "transparent"
@@ -957,7 +966,8 @@ var src_default = config.createConfig({
957
966
  fontWeight: "bolder"
958
967
  },
959
968
  "code, kbd, samp, pre": {
960
- fontFamily: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
969
+ ["--font-family"]: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
970
+ fontFamily: "var(--font-family)",
961
971
  fontFeatureSettings: "normal",
962
972
  fontVariationSettings: "normal",
963
973
  fontSize: "1em"
@@ -1920,19 +1930,19 @@ var src_default = config.createConfig({
1920
1930
  "1000": "1000ms"
1921
1931
  },
1922
1932
  text: {
1923
- xs: `${rem(12)}/1rem var(--font-family)`,
1924
- sm: `${rem(14)}/1.25rem var(--font-family)`,
1925
- base: `${rem(16)}/1.5rem var(--font-family)`,
1926
- lg: `${rem(18)}/1.75rem var(--font-family)`,
1927
- xl: `${rem(20)}/1.75rem var(--font-family)`,
1928
- "2xl": `${rem(24)}/2rem var(--font-family)`,
1929
- "3xl": `${rem(30)}/2.25rem var(--font-family)`,
1930
- "4xl": `${rem(36)}/2.5rem var(--font-family)`,
1931
- "5xl": `${rem(48)}/1 var(--font-family)`,
1932
- "6xl": `${rem(60)}/1 var(--font-family)`,
1933
- "7xl": `${rem(72)}/1 var(--font-family)`,
1934
- "8xl": `${rem(96)}/1 var(--font-family)`,
1935
- "9xl": `${rem(128)}/1 var(--font-family)`
1933
+ xs: font(rem(12), rem(16)),
1934
+ sm: font(rem(14), rem(20)),
1935
+ base: font(rem(16), rem(24)),
1936
+ lg: font(rem(18), rem(28)),
1937
+ xl: font(rem(20), rem(28)),
1938
+ "2xl": font(rem(24), rem(32)),
1939
+ "3xl": font(rem(30), rem(36)),
1940
+ "4xl": font(rem(36), rem(40)),
1941
+ "5xl": font(rem(48), "1"),
1942
+ "6xl": font(rem(60), "1"),
1943
+ "7xl": font(rem(72), "1"),
1944
+ "8xl": font(rem(96), "1"),
1945
+ "9xl": font(rem(128), "1")
1936
1946
  },
1937
1947
  "text-size": {
1938
1948
  xs: rem(12),
package/dist/index.d.cts CHANGED
@@ -52,6 +52,9 @@ declare const _default: {
52
52
  };
53
53
  };
54
54
  readonly globalStyles: {
55
+ readonly ':root': {
56
+ readonly [x: string]: string;
57
+ };
55
58
  readonly '*, *::before, *::after': {
56
59
  readonly boxSizing: "border-box";
57
60
  readonly margin: 0;
@@ -62,7 +65,7 @@ declare const _default: {
62
65
  readonly lineHeight: 1.5;
63
66
  readonly WebkitTextSizeAdjust: "100%";
64
67
  readonly tabSize: 4;
65
- readonly fontFamily: "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
68
+ readonly fontFamily: "var(--font-family)";
66
69
  readonly fontFeatureSettings: "normal";
67
70
  readonly fontVariationSettings: "normal";
68
71
  readonly WebkitTapHighlightColor: "transparent";
@@ -90,7 +93,8 @@ declare const _default: {
90
93
  readonly fontWeight: "bolder";
91
94
  };
92
95
  readonly 'code, kbd, samp, pre': {
93
- readonly fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
96
+ readonly [x: string]: string;
97
+ readonly fontFamily: "var(--font-family)";
94
98
  readonly fontFeatureSettings: "normal";
95
99
  readonly fontVariationSettings: "normal";
96
100
  readonly fontSize: "1em";
@@ -3357,19 +3361,19 @@ declare const _default: {
3357
3361
  readonly '1000': string;
3358
3362
  };
3359
3363
  readonly text: {
3360
- readonly xs: string;
3361
- readonly sm: string;
3362
- readonly base: string;
3363
- readonly lg: string;
3364
- readonly xl: string;
3365
- readonly '2xl': string;
3366
- readonly '3xl': string;
3367
- readonly '4xl': string;
3368
- readonly '5xl': string;
3369
- readonly '6xl': string;
3370
- readonly '7xl': string;
3371
- readonly '8xl': string;
3372
- readonly '9xl': string;
3364
+ readonly xs: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3365
+ readonly sm: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3366
+ readonly base: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3367
+ readonly lg: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3368
+ readonly xl: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3369
+ readonly '2xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3370
+ readonly '3xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3371
+ readonly '4xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3372
+ readonly '5xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3373
+ readonly '6xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3374
+ readonly '7xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3375
+ readonly '8xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3376
+ readonly '9xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3373
3377
  };
3374
3378
  readonly 'text-size': {
3375
3379
  readonly xs: `${number}rem`;
package/dist/index.d.ts CHANGED
@@ -52,6 +52,9 @@ declare const _default: {
52
52
  };
53
53
  };
54
54
  readonly globalStyles: {
55
+ readonly ':root': {
56
+ readonly [x: string]: string;
57
+ };
55
58
  readonly '*, *::before, *::after': {
56
59
  readonly boxSizing: "border-box";
57
60
  readonly margin: 0;
@@ -62,7 +65,7 @@ declare const _default: {
62
65
  readonly lineHeight: 1.5;
63
66
  readonly WebkitTextSizeAdjust: "100%";
64
67
  readonly tabSize: 4;
65
- readonly fontFamily: "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
68
+ readonly fontFamily: "var(--font-family)";
66
69
  readonly fontFeatureSettings: "normal";
67
70
  readonly fontVariationSettings: "normal";
68
71
  readonly WebkitTapHighlightColor: "transparent";
@@ -90,7 +93,8 @@ declare const _default: {
90
93
  readonly fontWeight: "bolder";
91
94
  };
92
95
  readonly 'code, kbd, samp, pre': {
93
- readonly fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
96
+ readonly [x: string]: string;
97
+ readonly fontFamily: "var(--font-family)";
94
98
  readonly fontFeatureSettings: "normal";
95
99
  readonly fontVariationSettings: "normal";
96
100
  readonly fontSize: "1em";
@@ -3357,19 +3361,19 @@ declare const _default: {
3357
3361
  readonly '1000': string;
3358
3362
  };
3359
3363
  readonly text: {
3360
- readonly xs: string;
3361
- readonly sm: string;
3362
- readonly base: string;
3363
- readonly lg: string;
3364
- readonly xl: string;
3365
- readonly '2xl': string;
3366
- readonly '3xl': string;
3367
- readonly '4xl': string;
3368
- readonly '5xl': string;
3369
- readonly '6xl': string;
3370
- readonly '7xl': string;
3371
- readonly '8xl': string;
3372
- readonly '9xl': string;
3364
+ readonly xs: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3365
+ readonly sm: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3366
+ readonly base: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3367
+ readonly lg: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3368
+ readonly xl: `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3369
+ readonly '2xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3370
+ readonly '3xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3371
+ readonly '4xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/${number}rem var(--font-family)`;
3372
+ readonly '5xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3373
+ readonly '6xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3374
+ readonly '7xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3375
+ readonly '8xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3376
+ readonly '9xl': `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${number}rem/1 var(--font-family)`;
3373
3377
  };
3374
3378
  readonly 'text-size': {
3375
3379
  readonly xs: `${number}rem`;
package/dist/index.js CHANGED
@@ -851,6 +851,7 @@ var BP_XL = 1280;
851
851
  var BP_2XL = 1536;
852
852
  var rem = (value) => `${value / BASE_FONT_SIZE}rem`;
853
853
  var remBreakpoint = (bp) => `@media (min-width: ${rem(bp)})`;
854
+ var font = (fontSize, lineHeight) => `var(--font-stretch) var(--font-style) var(--font-variant) var(--font-weight) ${fontSize}/${lineHeight} var(--font-family)`;
854
855
  var optionalViaGradient = (direction) => `linear-gradient(${direction}, var(--gradient-from) var(--gradient-from-stop,/**/), var(---via, var(--gradient-to) var(--gradient-to-stop,/**/)));
855
856
  ---via: var(--gradient-via) var(--gradient-via-stop,/**/), var(--gradient-to)`;
856
857
  var fluid = (params) => {
@@ -917,6 +918,14 @@ var src_default = createConfig({
917
918
  },
918
919
  // tweaked version of preflight from Tailwind https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/preflight.css
919
920
  globalStyles: {
921
+ ":root": {
922
+ /* set up default vars for var(text_*) tokens */
923
+ ["--font-family"]: `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
924
+ ["--font-stretch"]: "normal",
925
+ ["--font-style"]: "normal",
926
+ ["--font-variant"]: "normal",
927
+ ["--font-weight"]: "normal"
928
+ },
920
929
  "*, *::before, *::after": {
921
930
  boxSizing: "border-box",
922
931
  margin: 0,
@@ -927,7 +936,7 @@ var src_default = createConfig({
927
936
  lineHeight: 1.5,
928
937
  WebkitTextSizeAdjust: "100%",
929
938
  tabSize: 4,
930
- fontFamily: `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
939
+ fontFamily: "var(--font-family)",
931
940
  fontFeatureSettings: "normal",
932
941
  fontVariationSettings: "normal",
933
942
  WebkitTapHighlightColor: "transparent"
@@ -955,7 +964,8 @@ var src_default = createConfig({
955
964
  fontWeight: "bolder"
956
965
  },
957
966
  "code, kbd, samp, pre": {
958
- fontFamily: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
967
+ ["--font-family"]: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
968
+ fontFamily: "var(--font-family)",
959
969
  fontFeatureSettings: "normal",
960
970
  fontVariationSettings: "normal",
961
971
  fontSize: "1em"
@@ -1918,19 +1928,19 @@ var src_default = createConfig({
1918
1928
  "1000": "1000ms"
1919
1929
  },
1920
1930
  text: {
1921
- xs: `${rem(12)}/1rem var(--font-family)`,
1922
- sm: `${rem(14)}/1.25rem var(--font-family)`,
1923
- base: `${rem(16)}/1.5rem var(--font-family)`,
1924
- lg: `${rem(18)}/1.75rem var(--font-family)`,
1925
- xl: `${rem(20)}/1.75rem var(--font-family)`,
1926
- "2xl": `${rem(24)}/2rem var(--font-family)`,
1927
- "3xl": `${rem(30)}/2.25rem var(--font-family)`,
1928
- "4xl": `${rem(36)}/2.5rem var(--font-family)`,
1929
- "5xl": `${rem(48)}/1 var(--font-family)`,
1930
- "6xl": `${rem(60)}/1 var(--font-family)`,
1931
- "7xl": `${rem(72)}/1 var(--font-family)`,
1932
- "8xl": `${rem(96)}/1 var(--font-family)`,
1933
- "9xl": `${rem(128)}/1 var(--font-family)`
1931
+ xs: font(rem(12), rem(16)),
1932
+ sm: font(rem(14), rem(20)),
1933
+ base: font(rem(16), rem(24)),
1934
+ lg: font(rem(18), rem(28)),
1935
+ xl: font(rem(20), rem(28)),
1936
+ "2xl": font(rem(24), rem(32)),
1937
+ "3xl": font(rem(30), rem(36)),
1938
+ "4xl": font(rem(36), rem(40)),
1939
+ "5xl": font(rem(48), "1"),
1940
+ "6xl": font(rem(60), "1"),
1941
+ "7xl": font(rem(72), "1"),
1942
+ "8xl": font(rem(96), "1"),
1943
+ "9xl": font(rem(128), "1")
1934
1944
  },
1935
1945
  "text-size": {
1936
1946
  xs: rem(12),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tokenami/ds",
3
- "version": "0.0.62",
3
+ "version": "0.0.63",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -34,11 +34,11 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@radix-ui/colors": "^3.0.0",
37
- "@tokenami/config": "0.0.62"
37
+ "@tokenami/config": "0.0.63"
38
38
  },
39
39
  "devDependencies": {
40
40
  "tsup": "^7.0.0",
41
41
  "typescript": "^5.1.3"
42
42
  },
43
- "gitHead": "37d807eab7137223f4667f293d20e0e8094b77d7"
43
+ "gitHead": "bf0b7201ad3ec165d5813061ae08a9f4c39061d6"
44
44
  }