@bookklik/senangstart-css 0.2.0 → 0.2.3

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.
Files changed (131) hide show
  1. package/dist/senangstart-css.js +84 -7
  2. package/dist/senangstart-css.min.js +25 -23
  3. package/docs/.vitepress/config.js +7 -4
  4. package/docs/SYNTAX-REFERENCE.md +1590 -1555
  5. package/docs/index.md +6 -0
  6. package/docs/ms/index.md +6 -0
  7. package/docs/ms/reference/visual/accent-color.md +6 -6
  8. package/docs/ms/reference/visual/animation-builtin.md +6 -6
  9. package/docs/ms/reference/visual/animation-delay.md +4 -2
  10. package/docs/ms/reference/visual/animation-direction.md +6 -6
  11. package/docs/ms/reference/visual/animation-duration.md +4 -4
  12. package/docs/ms/reference/visual/animation-fill.md +33 -9
  13. package/docs/ms/reference/visual/animation-iteration.md +5 -5
  14. package/docs/ms/reference/visual/animation-play.md +4 -4
  15. package/docs/ms/reference/visual/appearance.md +4 -4
  16. package/docs/ms/reference/visual/blend-modes.md +6 -6
  17. package/docs/ms/reference/visual/border-radius.md +8 -8
  18. package/docs/ms/reference/visual/box-shadow.md +6 -6
  19. package/docs/ms/reference/visual/caret-color.md +2 -2
  20. package/docs/ms/reference/visual/cursor.md +6 -6
  21. package/docs/ms/reference/visual/filter-blur.md +7 -7
  22. package/docs/ms/reference/visual/font-family.md +8 -8
  23. package/docs/ms/reference/visual/font-smoothing.md +4 -4
  24. package/docs/ms/reference/visual/font-style.md +4 -4
  25. package/docs/ms/reference/visual/font-variant-numeric.md +6 -4
  26. package/docs/ms/reference/visual/font-weight.md +6 -6
  27. package/docs/ms/reference/visual/hyphens.md +6 -6
  28. package/docs/ms/reference/visual/letter-spacing.md +8 -8
  29. package/docs/ms/reference/visual/line-clamp.md +9 -9
  30. package/docs/ms/reference/visual/line-height.md +8 -8
  31. package/docs/ms/reference/visual/list-style.md +7 -7
  32. package/docs/ms/reference/visual/mask.md +6 -2
  33. package/docs/ms/reference/visual/opacity.md +8 -8
  34. package/docs/ms/reference/visual/pointer-events.md +4 -4
  35. package/docs/ms/reference/visual/state-prefixes.md +5 -3
  36. package/docs/ms/reference/visual/text-decoration.md +6 -4
  37. package/docs/ms/reference/visual/text-indent.md +8 -4
  38. package/docs/ms/reference/visual/text-overflow.md +6 -4
  39. package/docs/ms/reference/visual/text-shadow.md +8 -2
  40. package/docs/ms/reference/visual/text-size.md +84 -66
  41. package/docs/ms/reference/visual/text-transform.md +6 -6
  42. package/docs/ms/reference/visual/text-wrap.md +8 -8
  43. package/docs/ms/reference/visual/transform-backface.md +29 -9
  44. package/docs/ms/reference/visual/transform-origin.md +4 -4
  45. package/docs/ms/reference/visual/transform-perspective-origin.md +41 -7
  46. package/docs/ms/reference/visual/transform-perspective.md +41 -7
  47. package/docs/ms/reference/visual/transform-rotate-3d.md +93 -0
  48. package/docs/ms/reference/visual/transform-rotate.md +6 -6
  49. package/docs/ms/reference/visual/transform-scale.md +7 -7
  50. package/docs/ms/reference/visual/transform-skew.md +6 -6
  51. package/docs/ms/reference/visual/transform-style.md +31 -11
  52. package/docs/ms/reference/visual/transform-translate-z.md +90 -0
  53. package/docs/ms/reference/visual/transform-translate.md +40 -14
  54. package/docs/ms/reference/visual/transition-delay.md +4 -2
  55. package/docs/ms/reference/visual/transition-duration.md +4 -4
  56. package/docs/ms/reference/visual/transition-timing.md +6 -6
  57. package/docs/ms/reference/visual/typography-keywords.md +8 -8
  58. package/docs/ms/reference/visual/user-select.md +4 -4
  59. package/docs/ms/reference/visual/vertical-align.md +10 -8
  60. package/docs/ms/reference/visual/whitespace.md +8 -8
  61. package/docs/ms/reference/visual/word-break.md +8 -8
  62. package/docs/public/assets/ss-logo.svg +83 -0
  63. package/docs/reference/visual/accent-color.md +6 -6
  64. package/docs/reference/visual/animation-builtin.md +6 -6
  65. package/docs/reference/visual/animation-delay.md +4 -2
  66. package/docs/reference/visual/animation-direction.md +6 -6
  67. package/docs/reference/visual/animation-duration.md +4 -4
  68. package/docs/reference/visual/animation-fill.md +33 -9
  69. package/docs/reference/visual/animation-iteration.md +5 -5
  70. package/docs/reference/visual/animation-play.md +4 -4
  71. package/docs/reference/visual/appearance.md +4 -4
  72. package/docs/reference/visual/blend-modes.md +6 -6
  73. package/docs/reference/visual/border-radius.md +8 -8
  74. package/docs/reference/visual/box-shadow.md +6 -6
  75. package/docs/reference/visual/caret-color.md +2 -2
  76. package/docs/reference/visual/cursor.md +6 -6
  77. package/docs/reference/visual/filter-blur.md +7 -7
  78. package/docs/reference/visual/font-family.md +8 -8
  79. package/docs/reference/visual/font-smoothing.md +4 -4
  80. package/docs/reference/visual/font-style.md +4 -4
  81. package/docs/reference/visual/font-variant-numeric.md +6 -4
  82. package/docs/reference/visual/font-weight.md +6 -6
  83. package/docs/reference/visual/hyphens.md +6 -6
  84. package/docs/reference/visual/letter-spacing.md +8 -8
  85. package/docs/reference/visual/line-clamp.md +9 -9
  86. package/docs/reference/visual/line-height.md +8 -8
  87. package/docs/reference/visual/list-style.md +7 -7
  88. package/docs/reference/visual/mask.md +6 -2
  89. package/docs/reference/visual/opacity.md +8 -8
  90. package/docs/reference/visual/pointer-events.md +4 -4
  91. package/docs/reference/visual/state-prefixes.md +5 -3
  92. package/docs/reference/visual/text-decoration.md +6 -4
  93. package/docs/reference/visual/text-indent.md +8 -4
  94. package/docs/reference/visual/text-overflow.md +6 -4
  95. package/docs/reference/visual/text-shadow.md +8 -2
  96. package/docs/reference/visual/text-size.md +84 -66
  97. package/docs/reference/visual/text-transform.md +6 -6
  98. package/docs/reference/visual/text-wrap.md +8 -8
  99. package/docs/reference/visual/transform-backface.md +29 -9
  100. package/docs/reference/visual/transform-origin.md +4 -4
  101. package/docs/reference/visual/transform-perspective-origin.md +41 -7
  102. package/docs/reference/visual/transform-perspective.md +41 -7
  103. package/docs/reference/visual/transform-rotate-3d.md +93 -0
  104. package/docs/reference/visual/transform-rotate.md +6 -6
  105. package/docs/reference/visual/transform-scale.md +7 -7
  106. package/docs/reference/visual/transform-skew.md +6 -6
  107. package/docs/reference/visual/transform-style.md +31 -11
  108. package/docs/reference/visual/transform-translate-z.md +90 -0
  109. package/docs/reference/visual/transform-translate.md +40 -14
  110. package/docs/reference/visual/transition-delay.md +4 -2
  111. package/docs/reference/visual/transition-duration.md +4 -4
  112. package/docs/reference/visual/transition-timing.md +6 -6
  113. package/docs/reference/visual/typography-keywords.md +8 -8
  114. package/docs/reference/visual/user-select.md +4 -4
  115. package/docs/reference/visual/vertical-align.md +10 -8
  116. package/docs/reference/visual/whitespace.md +8 -8
  117. package/docs/reference/visual/word-break.md +8 -8
  118. package/docs/syntax-reference.json +2009 -1972
  119. package/package.json +2 -2
  120. package/playground/index.html +37 -38
  121. package/playground/sample_code.txt +23 -0
  122. package/playground/tw-convertor.html +13 -13
  123. package/scripts/generate-docs.js +9 -7
  124. package/src/cdn/jit.js +51 -7
  125. package/src/compiler/generators/css.js +24 -2
  126. package/src/config/defaults.js +31 -7
  127. package/src/definitions/visual-transform3d.js +202 -36
  128. package/src/definitions/visual-transforms.js +42 -25
  129. package/src/definitions/visual-transitions.js +40 -26
  130. package/src/definitions/visual-typography.js +53 -44
  131. package/src/definitions/visual.js +73 -58
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bookklik/senangstart-css",
3
- "version": "0.2.0",
3
+ "version": "0.2.3",
4
4
  "description": "Fluent Style Utilities for Humans and AI",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
@@ -13,7 +13,7 @@
13
13
  "build": "npm run build:dist && vitepress build docs",
14
14
  "build:dist": "node scripts/build-dist.js",
15
15
  "prepublishOnly": "npm run build:dist",
16
- "docs": "vitepress dev docs",
16
+ "docs:dev": "vitepress dev docs",
17
17
  "docs:generate": "node scripts/generate-docs.js",
18
18
  "docs:sync-check": "node scripts/generate-docs.js --compare",
19
19
  "docs:syntax": "node scripts/extract-syntax.js",
package/playground/index.html CHANGED
@@ -6,10 +6,21 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <meta name="description" content="SenangStart CSS Playground" />
8
8
  <meta name="author" content="Bookklik Technologies" />
9
- <meta name="keywords" content="SenangStart CSS, CSS, SenangStart" />
9
+ <meta
10
+ name="keywords"
11
+ content="SenangStart CSS, CSS, SenangStart, Playground"
12
+ />
10
13
 
11
- <link rel="apple-touch-icon" sizes="180x180" href="https://senangstart.com/img/ss_icon_accent.svg">
12
- <link rel="shortcut icon" href="https://senangstart.com/img/ss_icon_accent.svg" type="image/x-icon">
14
+ <link
15
+ rel="apple-touch-icon"
16
+ sizes="180x180"
17
+ href="https://senangstart.com/img/ss_icon_accent.svg"
18
+ />
19
+ <link
20
+ rel="shortcut icon"
21
+ href="https://senangstart.com/img/ss_icon_accent.svg"
22
+ type="image/x-icon"
23
+ />
13
24
  <link
14
25
  rel="stylesheet"
15
26
  href="https://unpkg.com/senangwebs-one@latest/dist/swo.css"
@@ -20,54 +31,42 @@
20
31
  href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
21
32
  rel="stylesheet"
22
33
  />
23
-
24
34
  <style>
25
- html,
26
35
  body {
27
- height: 100%;
28
- margin: 0;
29
- overflow: hidden;
30
- }
31
- #ss-css-playground {
32
- width: 100%;
33
- height: 100vh;
36
+ font-family: "Outfit", sans-serif;
34
37
  }
35
38
  </style>
36
-
37
- <!-- Monaco Editor ESM Loader -->
38
- <script type="module">
39
- import * as monaco from "https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/+esm";
40
- window.monaco = monaco;
41
- </script>
39
+ <script src="https://unpkg.com/senangwebs-loading@latest/dist/swl.js"></script>
40
+ <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js"></script>
41
+ <script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart.min.css"></script>
42
+ <script src="https://unpkg.com/@bookklik/senangstart-actions/dist/senangstart-actions.min.js"></script>
42
43
  </head>
43
44
  <body>
44
- <div id="ss-css-playground" style="height: 100vh"></div>
45
+ <div
46
+ data-swl
47
+ data-swl-type="spinner"
48
+ data-swl-color="#007bff"
49
+ data-swl-duration="2000"
50
+ data-swl-bg-color="#ffffff"
51
+ data-swl-bg-opacity="1"
52
+ data-swl-z-index="9999"
53
+ >
54
+ <div data-swl data-swl-color="#007bff" data-swl-duration="2000"></div>
55
+ </div>
56
+ <main layout="flex col" space="w:[100%] h:[100vh]">
57
+ <div id="ss-css-playground" layout="grow" space="h:[100%]"></div>
58
+ </main>
45
59
 
46
60
  <script src="https://unpkg.com/senangwebs-one@latest/dist/swo.js"></script>
47
61
 
48
62
  <script>
49
- document.addEventListener("DOMContentLoaded", function () {
63
+ document.addEventListener("DOMContentLoaded", async function () {
50
64
  if (typeof SWO !== "undefined") {
51
- const customCode = `<!DOCTYPE html>
52
- <html>
53
- <head>
54
- <title>SenangStart CSS Playground\x3c/title>
55
- <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js">\x3c/script>
56
- \x3c/head>
57
-
58
- <body>
59
- <div
60
- layout="flex col center"
61
- space="p:small"
62
- visual="bg:primary text:white rounded:big"
63
- >
64
- Hello SenangStart!
65
- \x3c/div>
66
- \x3c/body>
67
- \x3c/html>`;
65
+ const response = await fetch("./sample_code.txt");
66
+ const customCode = await response.text();
68
67
  new SWO("#ss-css-playground", {
69
68
  code: customCode,
70
- storageKey: "custom-editor-project-xyz",
69
+ storageKey: "ss-css-playground",
71
70
  });
72
71
  } else {
73
72
  console.error("SWO library not loaded.");
package/playground/sample_code.txt ADDED
@@ -0,0 +1,23 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <title>SenangStart</title>
6
+ <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js"></script>
7
+ </head>
8
+
9
+ <body>
10
+ <div layout="flex col center" space="p:big" visual="bg:primary text:white">
11
+ <h1 visual="text-size:giant font:bold">Hello SenangStart!</h1>
12
+ <p space="m-y:small">Zero config, instant styling.</p>
13
+ <div layout="flex items:center" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium text:black">
14
+ <span visual="text-size:tiny">tiny</span>
15
+ <span visual="text-size:small">small</span>
16
+ <span visual="text-size:medium">medium</span>
17
+ <span visual="text-size:big">big</span>
18
+ <span visual="text-size:giant">giant</span>
19
+ </div>
20
+ </div>
21
+ </body>
22
+
23
+ </html>
package/playground/tw-convertor.html CHANGED
@@ -269,19 +269,19 @@
269
269
  none: "none",
270
270
  };
271
271
  const fontSizeScale = {
272
- xs: "tiny",
273
- sm: "small",
274
- base: "medium",
275
- lg: "big",
276
- xl: "big",
277
- "2xl": "giant",
278
- "3xl": "giant",
279
- "4xl": "vast",
280
- "5xl": "vast",
281
- "6xl": "vast",
282
- "7xl": "vast",
283
- "8xl": "vast",
284
- "9xl": "vast",
272
+ xs: "mini", // 0.75rem
273
+ sm: "small", // 0.875rem
274
+ base: "base", // 1rem
275
+ lg: "large", // 1.125rem
276
+ xl: "big", // 1.25rem
277
+ "2xl": "huge", // 1.5rem
278
+ "3xl": "grand", // 1.875rem
279
+ "4xl": "giant", // 2.25rem
280
+ "5xl": "mount", // 3rem
281
+ "6xl": "mega", // 3.75rem
282
+ "7xl": "giga", // 4.5rem
283
+ "8xl": "tera", // 6rem
284
+ "9xl": "hero", // 8rem
285
285
  };
286
286
 
287
287
  const layoutMappings = {
package/scripts/generate-docs.js CHANGED
@@ -362,15 +362,17 @@ function compareDocs(options = {}) {
362
362
  */
363
363
  function extractValuesFromTable(markdown) {
364
364
  const values = [];
365
- const tableRegex = /\|[^|]+\|[^|]+\|[^|]+\|/g;
366
- const matches = markdown.match(tableRegex) || [];
365
+ const lines = markdown.split('\n');
367
366
 
368
- for (const match of matches) {
369
- // Skip header rows
370
- if (match.includes('Value') || match.includes('Nilai') || match.includes('---')) continue;
367
+ for (let line of lines) {
368
+ line = line.trim();
369
+ // Skip non-table lines, header rows, and separator rows
370
+ if (!line.startsWith('|')) continue;
371
+ if (line.includes('Value') || line.includes('Nilai') || line.includes('Property') || line.includes('Properti')) continue;
372
+ if (line.includes('---')) continue;
371
373
 
372
- // Extract first cell (value name)
373
- const cellMatch = match.match(/\|\s*`([^`]+)`/);
374
+ // Extract first cell (value name) - look for backtick-quoted value
375
+ const cellMatch = line.match(/\|\s*`([^`]+)`/);
374
376
  if (cellMatch) {
375
377
  values.push(cellMatch[1]);
376
378
  }
package/src/cdn/jit.js CHANGED
@@ -47,12 +47,34 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
47
47
  'giant': '0 25px 50px rgba(0,0,0,0.25)'
48
48
  },
49
49
  fontSize: {
50
- 'tiny': '12px',
51
- 'small': '14px',
52
- 'medium': '16px',
53
- 'big': '20px',
54
- 'giant': '32px',
55
- 'vast': '48px'
50
+ 'mini': '0.75rem', // 12px
51
+ 'small': '0.875rem', // 14px
52
+ 'base': '1rem', // 16px
53
+ 'large': '1.125rem', // 18px
54
+ 'big': '1.25rem', // 20px
55
+ 'huge': '1.5rem', // 24px
56
+ 'grand': '1.875rem', // 30px
57
+ 'giant': '2.25rem', // 36px
58
+ 'mount': '3rem', // 48px
59
+ 'mega': '3.75rem', // 60px
60
+ 'giga': '4.5rem', // 72px
61
+ 'tera': '6rem', // 96px
62
+ 'hero': '8rem' // 128px
63
+ },
64
+ fontSizeLineHeight: {
65
+ 'mini': '1rem', // 16px
66
+ 'small': '1.25rem', // 20px
67
+ 'base': '1.5rem', // 24px
68
+ 'large': '1.75rem', // 28px
69
+ 'big': '1.75rem', // 28px
70
+ 'huge': '2rem', // 32px
71
+ 'grand': '2.25rem', // 36px
72
+ 'giant': '2.5rem', // 40px
73
+ 'mount': '1', // unitless 1
74
+ 'mega': '1', // unitless 1
75
+ 'giga': '1', // unitless 1
76
+ 'tera': '1', // unitless 1
77
+ 'hero': '1' // unitless 1
56
78
  },
57
79
  fontWeight: {
58
80
  'normal': '400',
@@ -311,6 +333,13 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
311
333
  css += ` --font-${key}: ${value};\n`;
312
334
  }
313
335
 
336
+ // Font size line-height (paired with font sizes)
337
+ if (theme.fontSizeLineHeight) {
338
+ for (const [key, value] of Object.entries(theme.fontSizeLineHeight)) {
339
+ css += ` --font-lh-${key}: ${value};\n`;
340
+ }
341
+ }
342
+
314
343
  // Font weight
315
344
  for (const [key, value] of Object.entries(theme.fontWeight)) {
316
345
  css += ` --fw-${key}: ${value};\n`;
@@ -383,6 +412,16 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
383
412
  css += ` --tw-text-${key}: ${value};\n`;
384
413
  }
385
414
 
415
+ // Tailwind Line Height Scale (paired with font sizes)
416
+ const twLeading = {
417
+ 'xs': '1rem', 'sm': '1.25rem', 'base': '1.5rem', 'lg': '1.75rem', 'xl': '1.75rem',
418
+ '2xl': '2rem', '3xl': '2.25rem', '4xl': '2.5rem', '5xl': '1',
419
+ '6xl': '1', '7xl': '1', '8xl': '1', '9xl': '1'
420
+ };
421
+ for (const [key, value] of Object.entries(twLeading)) {
422
+ css += ` --tw-leading-${key}: ${value};\n`;
423
+ }
424
+
386
425
  // Tailwind Font Weight Scale
387
426
  const twFontWeight = {
388
427
  'thin': '100',
@@ -1174,15 +1213,20 @@ img, video {
1174
1213
  },
1175
1214
  'text-size': () => {
1176
1215
  let cssValue;
1216
+ let lineHeightValue;
1177
1217
  if (isArbitrary) {
1178
1218
  cssValue = value;
1219
+ // No line-height for arbitrary values
1220
+ return `font-size: ${cssValue};`;
1179
1221
  } else if (value.startsWith('tw-')) {
1180
1222
  const twValue = value.slice(3);
1181
1223
  cssValue = `var(--tw-text-${twValue})`;
1224
+ lineHeightValue = `var(--tw-leading-${twValue})`;
1182
1225
  } else {
1183
1226
  cssValue = `var(--font-${value})`;
1227
+ lineHeightValue = `var(--font-lh-${value})`;
1184
1228
  }
1185
- return `font-size: ${cssValue};`;
1229
+ return `font-size: ${cssValue}; line-height: ${lineHeightValue};`;
1186
1230
  },
1187
1231
  'font': () => {
1188
1232
  // Check for font-family presets
package/src/compiler/generators/css.js CHANGED
@@ -51,6 +51,13 @@ export function generateCSSVariables(config) {
51
51
  css += ` --font-${key}: ${value};\n`;
52
52
  }
53
53
 
54
+ // Font size line-height variables (paired with font sizes)
55
+ if (theme.fontSizeLineHeight) {
56
+ for (const [key, value] of Object.entries(theme.fontSizeLineHeight)) {
57
+ css += ` --font-lh-${key}: ${value};\n`;
58
+ }
59
+ }
60
+
54
61
  // Font weight variables
55
62
  for (const [key, value] of Object.entries(theme.fontWeight)) {
56
63
  css += ` --fw-${key}: ${value};\n`;
@@ -118,6 +125,16 @@ export function generateCSSVariables(config) {
118
125
  css += ` --tw-text-${key}: ${value};\n`;
119
126
  }
120
127
 
128
+ // Tailwind Line Height Scale (paired with font sizes)
129
+ const twLeading = {
130
+ 'xs': '1rem', 'sm': '1.25rem', 'base': '1.5rem', 'lg': '1.75rem', 'xl': '1.75rem',
131
+ '2xl': '2rem', '3xl': '2.25rem', '4xl': '2.5rem', '5xl': '1',
132
+ '6xl': '1', '7xl': '1', '8xl': '1', '9xl': '1'
133
+ };
134
+ for (const [key, value] of Object.entries(twLeading)) {
135
+ css += ` --tw-leading-${key}: ${value};\n`;
136
+ }
137
+
121
138
  // Tailwind Font Weight Scale
122
139
  const twFontWeight = {
123
140
  'thin': '100',
@@ -817,18 +834,23 @@ function generateVisualRule(token, config) {
817
834
  return `text-shadow: ${cssValue};`;
818
835
  },
819
836
 
820
- // Font size
837
+ // Font size (with paired line-height)
821
838
  'text-size': () => {
822
839
  let cssValue;
840
+ let lineHeightValue;
823
841
  if (isArbitrary) {
824
842
  cssValue = value;
843
+ // No line-height for arbitrary values
844
+ return `font-size: ${cssValue};`;
825
845
  } else if (value.startsWith('tw-')) {
826
846
  const twValue = value.slice(3);
827
847
  cssValue = `var(--tw-text-${twValue})`;
848
+ lineHeightValue = `var(--tw-leading-${twValue})`;
828
849
  } else {
829
850
  cssValue = `var(--font-${value})`;
851
+ lineHeightValue = `var(--font-lh-${value})`;
830
852
  }
831
- return `font-size: ${cssValue};`;
853
+ return `font-size: ${cssValue}; line-height: ${lineHeightValue};`;
832
854
  },
833
855
 
834
856
  // Font weight / family
package/src/config/defaults.js CHANGED
@@ -65,14 +65,38 @@ export const defaultConfig = {
65
65
  'giant': '0 25px 50px rgba(0,0,0,0.25)'
66
66
  },
67
67
 
68
- // 4. FONT SIZES: Reading Scale
68
+ // 4. FONT SIZES: Reading Scale (with paired line-heights)
69
69
  fontSize: {
70
- 'tiny': '12px',
71
- 'small': '14px',
72
- 'medium': '16px',
73
- 'big': '20px',
74
- 'giant': '32px',
75
- 'vast': '48px'
70
+ 'mini': '0.75rem', // 12px
71
+ 'small': '0.875rem', // 14px
72
+ 'base': '1rem', // 16px
73
+ 'large': '1.125rem', // 18px
74
+ 'big': '1.25rem', // 20px (xl)
75
+ 'huge': '1.5rem', // 24px (2xl)
76
+ 'grand': '1.875rem', // 30px (3xl)
77
+ 'giant': '2.25rem', // 36px (4xl)
78
+ 'mount': '3rem', // 48px (5xl)
79
+ 'mega': '3.75rem', // 60px (6xl)
80
+ 'giga': '4.5rem', // 72px (7xl)
81
+ 'tera': '6rem', // 96px (8xl)
82
+ 'hero': '8rem' // 128px
83
+ },
84
+
85
+ // 4b. FONT SIZE LINE-HEIGHTS: Paired with font sizes
86
+ fontSizeLineHeight: {
87
+ 'mini': '1rem', // 16px
88
+ 'small': '1.25rem', // 20px
89
+ 'base': '1.5rem', // 24px
90
+ 'large': '1.75rem', // 28px
91
+ 'big': '1.75rem', // 28px
92
+ 'huge': '2rem', // 32px
93
+ 'grand': '2.25rem', // 36px
94
+ 'giant': '2.5rem', // 40px
95
+ 'mount': '1', // 48px (unitless 1)
96
+ 'mega': '1', // 60px (unitless 1)
97
+ 'giga': '1', // 72px (unitless 1)
98
+ 'tera': '1', // 96px (unitless 1)
99
+ 'hero': '1' // 128px (unitless 1)
76
100
  },
77
101
 
78
102
  // 5. FONT WEIGHTS