@moderneinc/neo-design 1.2.2 → 1.2.4

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 (17) hide show
  1. package/README.md +32 -13
  2. package/dist/breakpoints.js +21 -0
  3. package/dist/colors.css +2 -0
  4. package/dist/colors.js +12 -10
  5. package/dist/index.esm.js +8 -6
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js +30 -24
  8. package/dist/index.js.map +1 -1
  9. package/dist/package.json +1 -3
  10. package/dist/semantic-colors.css +38 -7
  11. package/dist/semantic-colors.js +333 -112
  12. package/dist/typography.css +13 -12
  13. package/dist/typography.js +46 -81
  14. package/package.json +2 -4
  15. package/dist/colors.json +0 -104
  16. package/dist/semantic-colors.json +0 -98
  17. package/dist/typography.json +0 -30
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @moderne/neo-design
2
2
 
3
- **Internal Moderne package** - Design system build tools for processing color tokens into multiple output formats (CSS, JavaScript, JSON).
3
+ **Internal Moderne package** - Design system build tools for processing design tokens into multiple output formats (CSS, JavaScript, JSON).
4
4
 
5
5
  ## 🚀 Quick Start
6
6
 
@@ -10,10 +10,14 @@ npm install @moderneinc/neo-design
10
10
 
11
11
  ## 📦 What's Included
12
12
 
13
- - **Color Tokens**: Processing of color primitives from `src/tokens/raw/color-primitives.json`
13
+ - **Design Tokens**: Multiple token types processed from `src/tokens/raw/`
14
+ - Primitive colors (`color-primitives.json`)
15
+ - Semantic colors (`color.json`)
16
+ - Typography primitives (`type-primitives.json`)
17
+ - Breakpoints (`breakpoints.json`)
14
18
  - **Internal Plugin System**: CSS Variables, JS Export, and JSON Export plugins (build-time only)
15
19
  - **Pure JavaScript**: Simplified architecture, no TypeScript complexity
16
- - **Multiple Output Formats**: CSS, JavaScript, and JSON exports for color tokens
20
+ - **Multiple Output Formats**: CSS, JavaScript, and JSON exports for design tokens
17
21
 
18
22
  ## 🎨 Generated Outputs
19
23
 
@@ -22,11 +26,18 @@ The build process generates design token files:
22
26
  ```bash
23
27
  # After running npm run build, generated files include:
24
28
  dist/
25
- ├── colors.json # JSON format color tokens
26
- ├── colors.js # JavaScript module export
27
- ├── color.css # CSS custom properties
28
- ├── index.js # Main CommonJS bundle
29
- └── index.esm.js # Main ESM bundle
29
+ ├── colors.css # Primitive color CSS custom properties
30
+ ├── colors.json # Primitive color tokens (JSON)
31
+ ├── colors.js # Primitive color tokens (JS)
32
+ ├── semantic-colors.css # Semantic/theme color CSS custom properties
33
+ ├── semantic-colors.json # Semantic color tokens (JSON)
34
+ ├── semantic-colors.js # Semantic color tokens (JS)
35
+ ├── typography.css # Typography CSS custom properties
36
+ ├── typography.json # Typography tokens (JSON)
37
+ ├── typography.js # Typography tokens (JS)
38
+ ├── breakpoints.js # Breakpoint tokens (JS)
39
+ ├── index.js # Main CommonJS bundle
40
+ └── index.esm.js # Main ESM bundle
30
41
  ```
31
42
 
32
43
  ## 🔧 Internal Build System
@@ -45,21 +56,29 @@ These plugins are configured in `neo.config.js` and executed by `scripts/build-p
45
56
 
46
57
  ```mermaid
47
58
  graph TB
48
- A[Design Tokens<br/>src/tokens/raw/color-primitives.json] --> B[npm run build<br/>scripts/build-production.js]
59
+ A[Design Tokens<br/>src/tokens/raw/*.json] --> B[npm run build<br/>scripts/build-production.js]
49
60
 
50
61
  B --> C[Rollup Bundle Build<br/>rollup -c]
51
62
  C --> D[Generated Bundles<br/>dist/]
52
63
  D --> E[index.js<br/>CommonJS Bundle]
53
64
  D --> F[index.esm.js<br/>ES Module Bundle]
54
65
 
55
- B --> G[Plugin System Execution<br/>neo.config.js]
56
- G --> H[CSS Variables Plugin<br/>Generate color.css]
57
- G --> I[JS Export Plugin<br/>Generate colors.js]
58
- G --> J[JSON Export Plugin<br/>Generate colors.json]
66
+ B --> G[Token Contract Processing<br/>neo.config.js]
67
+ G --> G1[Colors Contract<br/>preprocessor + plugins]
68
+ G --> G2[Semantic Colors Contract<br/>preprocessor + plugins]
69
+ G --> G3[Typography Contract<br/>plugins]
70
+ G --> G4[Breakpoints Contract<br/>preprocessor + plugins]
71
+
72
+ G1 --> H[CSS Variables Plugin]
73
+ G1 --> I[JS Export Plugin]
74
+ G1 --> J[JSON Export Plugin]
59
75
 
60
76
  H --> K[Generated Artifacts<br/>dist/]
61
77
  I --> K
62
78
  J --> K
79
+ G2 --> K
80
+ G3 --> K
81
+ G4 --> K
63
82
 
64
83
  K --> L[✅ Ready for npm publish]
65
84
 
package/dist/breakpoints.js ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Neo Design System
3
+ * Generated from Figma design tokens
4
+ * @generated
5
+ */
6
+
7
+ export const xl = 1920;
8
+
9
+ export const lg = 1280;
10
+
11
+ export const md = 960;
12
+
13
+ export const sm = 600;
14
+
15
+ // Default export with all color groups
16
+ export default {
17
+ xl,
18
+ lg,
19
+ md,
20
+ sm
21
+ };
package/dist/colors.css CHANGED
@@ -4,11 +4,13 @@
4
4
  --neo-digital-blue-200: #b6bfff;
5
5
  --neo-digital-blue-300: #8d99ff;
6
6
  --neo-digital-blue-400: #626eff;
7
+ /* primary color */
7
8
  --neo-digital-blue-500: #2f42ff;
8
9
  --neo-digital-blue-600: #2637e6;
9
10
  --neo-digital-blue-700: #1e2ec2;
10
11
  --neo-digital-blue-800: #131e7a;
11
12
  --neo-digital-blue-900: #000855;
13
+ /* primary color */
12
14
  --neo-digital-blue-main: #2f42ff;
13
15
  --neo-digital-green-50: #f3fff5;
14
16
  --neo-digital-green-100: #cfffd7;
package/dist/colors.js CHANGED
@@ -10,11 +10,13 @@ export const digitalBlue = {
10
10
  "200": "#b6bfff",
11
11
  "300": "#8d99ff",
12
12
  "400": "#626eff",
13
+ /** primary color */
13
14
  "500": "#2f42ff",
14
15
  "600": "#2637e6",
15
16
  "700": "#1e2ec2",
16
17
  "800": "#131e7a",
17
18
  "900": "#000855",
19
+ /** primary color */
18
20
  "main": "#2f42ff"
19
21
  };
20
22
 
@@ -114,14 +116,14 @@ export const violet = {
114
116
  "main": "#992fb9"
115
117
  };
116
118
 
117
- // Default export with all tokens
119
+ // Default export with all color groups
118
120
  export default {
119
- 'digitalBlue': digitalBlue,
120
- 'digitalGreen': digitalGreen,
121
- 'gold': gold,
122
- 'grey': grey,
123
- 'orange': orange,
124
- 'red': red,
125
- 'tealGreen': tealGreen,
126
- 'violet': violet
127
- };
121
+ digitalBlue,
122
+ digitalGreen,
123
+ gold,
124
+ grey,
125
+ orange,
126
+ red,
127
+ tealGreen,
128
+ violet
129
+ };
package/dist/index.esm.js CHANGED
@@ -1,7 +1,9 @@
1
- export * from '.../../dist/colors.js';
2
- export { default as colors } from '.../../dist/colors.js';
3
- export * from '.../../dist/semantic-colors.js';
4
- export { default as semanticColors } from '.../../dist/semantic-colors.js';
5
- export * from '.../../dist/typography.js';
6
- export { default as typography } from '.../../dist/typography.js';
1
+ import * as breakpoints_js from './breakpoints.js';
2
+ export { breakpoints_js as breakpoints };
3
+ import * as colors_js from './colors.js';
4
+ export { colors_js as colors };
5
+ import * as semanticColors_js from './semantic-colors.js';
6
+ export { semanticColors_js as semanticColors };
7
+ import * as typography_js from './typography.js';
8
+ export { typography_js as typography };
7
9
  //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
package/dist/index.js CHANGED
@@ -1,30 +1,36 @@
1
1
  'use strict';
2
2
 
3
- var colors_js = require('.../../dist/colors.js');
4
- var semanticColors_js = require('.../../dist/semantic-colors.js');
5
- var typography_js = require('.../../dist/typography.js');
3
+ var breakpoints_js = require('./breakpoints.js');
4
+ var colors_js = require('./colors.js');
5
+ var semanticColors_js = require('./semantic-colors.js');
6
+ var typography_js = require('./typography.js');
6
7
 
8
+ function _interopNamespaceDefault(e) {
9
+ var n = Object.create(null);
10
+ if (e) {
11
+ Object.keys(e).forEach(function (k) {
12
+ if (k !== 'default') {
13
+ var d = Object.getOwnPropertyDescriptor(e, k);
14
+ Object.defineProperty(n, k, d.get ? d : {
15
+ enumerable: true,
16
+ get: function () { return e[k]; }
17
+ });
18
+ }
19
+ });
20
+ }
21
+ n.default = e;
22
+ return Object.freeze(n);
23
+ }
7
24
 
25
+ var breakpoints_js__namespace = /*#__PURE__*/_interopNamespaceDefault(breakpoints_js);
26
+ var colors_js__namespace = /*#__PURE__*/_interopNamespaceDefault(colors_js);
27
+ var semanticColors_js__namespace = /*#__PURE__*/_interopNamespaceDefault(semanticColors_js);
28
+ var typography_js__namespace = /*#__PURE__*/_interopNamespaceDefault(typography_js);
8
29
 
9
- exports.colors = colors_js;
10
- exports.semanticColors = semanticColors_js;
11
- exports.typography = typography_js;
12
- Object.keys(colors_js).forEach(function (k) {
13
- if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
14
- enumerable: true,
15
- get: function () { return colors_js[k]; }
16
- });
17
- });
18
- Object.keys(semanticColors_js).forEach(function (k) {
19
- if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
20
- enumerable: true,
21
- get: function () { return semanticColors_js[k]; }
22
- });
23
- });
24
- Object.keys(typography_js).forEach(function (k) {
25
- if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
26
- enumerable: true,
27
- get: function () { return typography_js[k]; }
28
- });
29
- });
30
+
31
+
32
+ exports.breakpoints = breakpoints_js__namespace;
33
+ exports.colors = colors_js__namespace;
34
+ exports.semanticColors = semanticColors_js__namespace;
35
+ exports.typography = typography_js__namespace;
30
36
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/package.json CHANGED
@@ -27,7 +27,7 @@
27
27
  "format": "biome format --write src",
28
28
  "knip": "knip",
29
29
  "knip:production": "knip --production",
30
- "check:all": "npm run format && npm run lint:fix && npm run knip",
30
+ "check:all": "npm run format && npm run lint:fix && npm run knip && npm run test:run",
31
31
  "build-storybook": "storybook build",
32
32
  "dev-storybook": "storybook dev -p 6006",
33
33
  "storybook": "npm run dev-storybook"
@@ -50,9 +50,7 @@
50
50
  "@biomejs/biome": "2.2.4",
51
51
  "@rollup/plugin-json": "6.1.0",
52
52
  "@rollup/plugin-node-resolve": "16.0.1",
53
- "@semantic-release/changelog": "6.0.3",
54
53
  "@semantic-release/commit-analyzer": "13.0.1",
55
- "@semantic-release/git": "10.0.1",
56
54
  "@semantic-release/github": "11.0.6",
57
55
  "@semantic-release/npm": "12.0.2",
58
56
  "@semantic-release/release-notes-generator": "14.1.0",
package/dist/semantic-colors.css CHANGED
@@ -1,4 +1,5 @@
1
1
  :root {
2
+ --neo-base-primatives-blue: #2f42ff;
2
3
  --neo-activity-recipe-run: #992fb9;
3
4
  --neo-activity-commit-job: #2f42ff;
4
5
  --neo-activity-visualization: #27aa88;
@@ -9,8 +10,8 @@
9
10
  --neo-border-card: #d1d5db;
10
11
  --neo-border-card-header: #d1d5db;
11
12
  --neo-buttons-destructive: #cb3446;
12
- --neo-buttons-primary-pressed: #131e7a;
13
13
  --neo-buttons-navigation-active: #ffffff;
14
+ --neo-buttons-primary-pressed: #131e7a;
14
15
  --neo-buttons-primary-default: #2f42ff;
15
16
  --neo-buttons-primary-hover: #1e2ec2;
16
17
  --neo-buttons-primary-disabled: #b6bfff;
@@ -32,6 +33,36 @@
32
33
  --neo-icons-disabled: #9ca3af;
33
34
  --neo-icons-placeholder: #4b5563;
34
35
  --neo-icons-checkbox: #4b5563;
36
+ --neo-base-digital-blue-900: #000855;
37
+ --neo-base-digital-blue-800: #131e7a;
38
+ --neo-base-digital-blue-700: #1e2ec2;
39
+ --neo-base-digital-blue-600: #2637e6;
40
+ --neo-base-digital-blue-500: #2f42ff;
41
+ --neo-base-digital-blue-400: #626eff;
42
+ --neo-base-digital-blue-300: #8d99ff;
43
+ --neo-base-digital-blue-200: #b6bfff;
44
+ --neo-base-digital-blue-100: #dce0ff;
45
+ --neo-base-digital-blue-50: #f2f3ff;
46
+ --neo-base-grey-grey-900: #111827;
47
+ --neo-base-grey-grey-800: #1f2937;
48
+ --neo-base-grey-grey-700: #374151;
49
+ --neo-base-grey-grey-600: #4b5563;
50
+ --neo-base-grey-grey-500: #6b7280;
51
+ --neo-base-grey-grey-400: #9ca3af;
52
+ --neo-base-grey-grey-300: #d1d5db;
53
+ --neo-base-grey-grey-200: #e5e7eb;
54
+ --neo-base-grey-grey-100: #f3f4f6;
55
+ --neo-base-grey-grey-50: #f9fafb;
56
+ --neo-base-digital-green-digital-green-50: #f3fff5;
57
+ --neo-base-digital-green-digital-green-100: #cfffd7;
58
+ --neo-base-digital-green-digital-green-600: #4ca75a;
59
+ --neo-base-digital-green-digital-green-700: #3b8948;
60
+ --neo-base-red-red-50: #ffedef;
61
+ --neo-base-red-red-100: #ffc6cd;
62
+ --neo-base-red-red-400: #ed4a5d;
63
+ --neo-base-red-red-500: #cb3446;
64
+ --neo-base-teal-green-teal-green-500: #3bcca6;
65
+ --neo-base-teal-green-teal-green-600: #27aa88;
35
66
  --neo-status-success-dark: #4ca75a;
36
67
  --neo-status-warning-dark: #ffb800;
37
68
  --neo-status-error-dark: #cb3446;
@@ -73,10 +104,10 @@
73
104
  --neo-typography-tooltip: #ffffff;
74
105
  --neo-data-green: #4ca75a;
75
106
  --neo-data-yellow: #fdda04;
76
- --neo-data-orange1: #ffc008;
77
- --neo-data-orange2: #ff9800;
78
- --neo-data-orange3: #f9a91b;
79
- --neo-data-red1: #ff5c24;
80
- --neo-data-red2: #ed4134;
81
- --neo-data-red3: #cb3446;
107
+ --neo-data-orange-1: #ffc008;
108
+ --neo-data-orange-2: #ff9800;
109
+ --neo-data-orange-3: #f9a91b;
110
+ --neo-data-red-1: #ff5c24;
111
+ --neo-data-red-2: #ed4134;
112
+ --neo-data-red-3: #cb3446;
82
113
  }
package/dist/semantic-colors.js CHANGED
@@ -4,118 +4,339 @@
4
4
  * @generated
5
5
  */
6
6
 
7
- export const activity = {
8
- "recipeRun": "#992fb9",
9
- "commitJob": "#2f42ff",
10
- "visualization": "#27aa88"
11
- };
12
-
13
- export const border = {
14
- "primary": "#d1d5db",
15
- "input": "#9ca3af",
16
- "tabActive": "#2f42ff",
17
- "codeDashed": "#9ca3af",
18
- "card": "#d1d5db",
19
- "cardHeader": "#d1d5db"
20
- };
21
-
22
- export const buttons = {
23
- "destructive": "#cb3446",
24
- "primaryPressed": "#131e7a",
25
- "navigationActive": "#ffffff",
26
- "primaryDefault": "#2f42ff",
27
- "primaryHover": "#1e2ec2",
28
- "primaryDisabled": "#b6bfff",
29
- "primaryFocus": "#2f42ff",
30
- "secondaryDefaultBorder": "#b6bfff",
31
- "secondaryHoverBackground": "#f2f3ff",
32
- "secondaryPressedBackground": "#dce0ff",
33
- "secondaryDisabled": "#626eff",
34
- "secondaryFocus": "#2f42ff",
35
- "tertiaryDefault": "#2f42ff",
36
- "tertiaryHover": "#1e2ec2",
37
- "tertiaryPressed": "#131e7a",
38
- "tertiaryFocus": "#2f42ff",
39
- "tertiaryDisabled": "#626eff"
40
- };
41
-
42
- export const icons = {
43
- "default": "#1f2937",
44
- "active": "#2f42ff",
45
- "hover": "#131e7a",
46
- "hoverBackground": "#e5e7eb",
47
- "disabled": "#9ca3af",
48
- "placeholder": "#4b5563",
49
- "checkbox": "#4b5563"
50
- };
51
-
52
- export const status = {
53
- "successDark": "#4ca75a",
54
- "warningDark": "#ffb800",
55
- "errorDark": "#cb3446",
56
- "successLight": "#f3fff5",
57
- "errorLight": "#ffedef",
58
- "warningLight": "#fff8e5"
59
- };
60
-
61
- export const surfaces = {
62
- "black": "#000000",
63
- "white": "#ffffff",
64
- "page": "#f9fafb",
65
- "card": "#ffffff",
66
- "cardHeader": "#f3f4f6",
67
- "tabActive": "#f3f4f6",
68
- "listHover": "#f9fafb",
69
- "inputHover": "#f3f4f6",
70
- "tableDisabledRow": "#f3f4f6",
71
- "tableBackground": "#ffffff",
72
- "shadowNeutral": "#1f2937",
73
- "scrim": "#1f2937",
74
- "shadowPrimary": "#2f42ff",
75
- "tooltip": "#4b5563"
76
- };
77
-
78
- export const typography = {
79
- "pageHeader": "#111827",
80
- "sectionHeader": "#374151",
81
- "body": "#1f2937",
82
- "buttonPrimary": "#f9fafb",
83
- "buttonSecondary": "#2f42ff",
84
- "buttonDisabled": "#9ca3af",
85
- "inputPlaceholder": "#6b7280",
86
- "inputDefault": "#1f2937",
87
- "codePrimary": "#1f2937",
88
- "codeSecondary": "#6b7280",
89
- "tabInactive": "#4b5563",
90
- "tabActive": "#626eff",
91
- "linkPrimary": "#2f42ff",
92
- "linkDisabled": "#b6bfff",
93
- "linkDefault": "#f9fafb",
94
- "error": "#cb3446",
95
- "success": "#4ca75a",
96
- "warning": "#1f2937",
97
- "tooltip": "#ffffff"
98
- };
99
-
100
- export const data = {
101
- "green": "#4ca75a",
102
- "yellow": "#fdda04",
103
- "orange1": "#ffc008",
104
- "orange2": "#ff9800",
105
- "orange3": "#f9a91b",
106
- "red1": "#ff5c24",
107
- "red2": "#ed4134",
108
- "red3": "#cb3446"
109
- };
7
+ export const base_primatives_blue = "#2f42ff";
8
+
9
+ export const activity_recipe_run = "#992fb9";
10
+
11
+ export const activity_commit_job = "#2f42ff";
12
+
13
+ export const activity_visualization = "#27aa88";
14
+
15
+ export const border_primary = "#d1d5db";
16
+
17
+ export const border_input = "#9ca3af";
18
+
19
+ export const border_tab_active = "#2f42ff";
20
+
21
+ export const border_code_dashed = "#9ca3af";
22
+
23
+ export const border_card = "#d1d5db";
24
+
25
+ export const border_card_header = "#d1d5db";
26
+
27
+ export const buttons_destructive = "#cb3446";
28
+
29
+ export const buttons_navigation_active = "#ffffff";
30
+
31
+ export const buttons_primary_pressed = "#131e7a";
32
+
33
+ export const buttons_primary_default = "#2f42ff";
34
+
35
+ export const buttons_primary_hover = "#1e2ec2";
36
+
37
+ export const buttons_primary_disabled = "#b6bfff";
38
+
39
+ export const buttons_primary_focus = "#2f42ff";
40
+
41
+ export const buttons_secondary_default_border = "#b6bfff";
42
+
43
+ export const buttons_secondary_hover_background = "#f2f3ff";
44
+
45
+ export const buttons_secondary_pressed_background = "#dce0ff";
46
+
47
+ export const buttons_secondary_disabled = "#626eff";
48
+
49
+ export const buttons_secondary_focus = "#2f42ff";
50
+
51
+ export const buttons_tertiary_default = "#2f42ff";
52
+
53
+ export const buttons_tertiary_hover = "#1e2ec2";
54
+
55
+ export const buttons_tertiary_pressed = "#131e7a";
56
+
57
+ export const buttons_tertiary_focus = "#2f42ff";
58
+
59
+ export const buttons_tertiary_disabled = "#626eff";
60
+
61
+ export const icons_default = "#1f2937";
62
+
63
+ export const icons_active = "#2f42ff";
64
+
65
+ export const icons_hover = "#131e7a";
66
+
67
+ export const icons_hover_background = "#e5e7eb";
68
+
69
+ export const icons_disabled = "#9ca3af";
70
+
71
+ export const icons_placeholder = "#4b5563";
72
+
73
+ export const icons_checkbox = "#4b5563";
74
+
75
+ export const base_digital_blue_900 = "#000855";
76
+
77
+ export const base_digital_blue_800 = "#131e7a";
78
+
79
+ export const base_digital_blue_700 = "#1e2ec2";
80
+
81
+ export const base_digital_blue_600 = "#2637e6";
82
+
83
+ export const base_digital_blue_500 = "#2f42ff";
84
+
85
+ export const base_digital_blue_400 = "#626eff";
86
+
87
+ export const base_digital_blue_300 = "#8d99ff";
88
+
89
+ export const base_digital_blue_200 = "#b6bfff";
90
+
91
+ export const base_digital_blue_100 = "#dce0ff";
92
+
93
+ export const base_digital_blue_50 = "#f2f3ff";
94
+
95
+ export const base_grey_grey_900 = "#111827";
96
+
97
+ export const base_grey_grey_800 = "#1f2937";
98
+
99
+ export const base_grey_grey_700 = "#374151";
100
+
101
+ export const base_grey_grey_600 = "#4b5563";
102
+
103
+ export const base_grey_grey_500 = "#6b7280";
104
+
105
+ export const base_grey_grey_400 = "#9ca3af";
106
+
107
+ export const base_grey_grey_300 = "#d1d5db";
108
+
109
+ export const base_grey_grey_200 = "#e5e7eb";
110
+
111
+ export const base_grey_grey_100 = "#f3f4f6";
112
+
113
+ export const base_grey_grey_50 = "#f9fafb";
114
+
115
+ export const base_digital_green_digital_green_50 = "#f3fff5";
116
+
117
+ export const base_digital_green_digital_green_100 = "#cfffd7";
118
+
119
+ export const base_digital_green_digital_green_600 = "#4ca75a";
120
+
121
+ export const base_digital_green_digital_green_700 = "#3b8948";
122
+
123
+ export const base_red_red_50 = "#ffedef";
124
+
125
+ export const base_red_red_100 = "#ffc6cd";
126
+
127
+ export const base_red_red_400 = "#ed4a5d";
128
+
129
+ export const base_red_red_500 = "#cb3446";
130
+
131
+ export const base_teal_green_teal_green_500 = "#3bcca6";
132
+
133
+ export const base_teal_green_teal_green_600 = "#27aa88";
134
+
135
+ export const status_success_dark = "#4ca75a";
136
+
137
+ export const status_warning_dark = "#ffb800";
138
+
139
+ export const status_error_dark = "#cb3446";
140
+
141
+ export const status_success_light = "#f3fff5";
142
+
143
+ export const status_error_light = "#ffedef";
144
+
145
+ export const status_warning_light = "#fff8e5";
146
+
147
+ export const surfaces_black = "#000000";
148
+
149
+ export const surfaces_white = "#ffffff";
150
+
151
+ export const surfaces_page = "#f9fafb";
152
+
153
+ export const surfaces_card = "#ffffff";
154
+
155
+ export const surfaces_card_header = "#f3f4f6";
156
+
157
+ export const surfaces_tab_active = "#f3f4f6";
158
+
159
+ export const surfaces_list_hover = "#f9fafb";
160
+
161
+ export const surfaces_input_hover = "#f3f4f6";
162
+
163
+ export const surfaces_table_disabled_row = "#f3f4f6";
164
+
165
+ export const surfaces_table_background = "#ffffff";
166
+
167
+ export const surfaces_shadow_neutral = "#1f2937";
168
+
169
+ export const surfaces_scrim = "#1f2937";
170
+
171
+ export const surfaces_shadow_primary = "#2f42ff";
172
+
173
+ export const surfaces_tooltip = "#4b5563";
174
+
175
+ export const typography_page_header = "#111827";
176
+
177
+ export const typography_section_header = "#374151";
178
+
179
+ export const typography_body = "#1f2937";
180
+
181
+ export const typography_button_primary = "#f9fafb";
182
+
183
+ export const typography_button_secondary = "#2f42ff";
184
+
185
+ export const typography_button_disabled = "#9ca3af";
186
+
187
+ export const typography_input_placeholder = "#6b7280";
188
+
189
+ export const typography_input_default = "#1f2937";
190
+
191
+ export const typography_code_primary = "#1f2937";
192
+
193
+ export const typography_code_secondary = "#6b7280";
194
+
195
+ export const typography_tab_inactive = "#4b5563";
196
+
197
+ export const typography_tab_active = "#626eff";
198
+
199
+ export const typography_link_primary = "#2f42ff";
200
+
201
+ export const typography_link_disabled = "#b6bfff";
202
+
203
+ export const typography_link_default = "#f9fafb";
204
+
205
+ export const typography_error = "#cb3446";
206
+
207
+ export const typography_success = "#4ca75a";
208
+
209
+ export const typography_warning = "#1f2937";
210
+
211
+ export const typography_tooltip = "#ffffff";
212
+
213
+ export const data_green = "#4ca75a";
214
+
215
+ export const data_yellow = "#fdda04";
216
+
217
+ export const data_orange_1 = "#ffc008";
218
+
219
+ export const data_orange_2 = "#ff9800";
220
+
221
+ export const data_orange_3 = "#f9a91b";
222
+
223
+ export const data_red_1 = "#ff5c24";
224
+
225
+ export const data_red_2 = "#ed4134";
226
+
227
+ export const data_red_3 = "#cb3446";
110
228
 
111
229
  // Default export with all tokens
112
230
  export default {
113
- 'activity': activity,
114
- 'border': border,
115
- 'buttons': buttons,
116
- 'icons': icons,
117
- 'status': status,
118
- 'surfaces': surfaces,
119
- 'typography': typography,
120
- 'data': data
121
- };
231
+ base_primatives_blue,
232
+ activity_recipe_run,
233
+ activity_commit_job,
234
+ activity_visualization,
235
+ border_primary,
236
+ border_input,
237
+ border_tab_active,
238
+ border_code_dashed,
239
+ border_card,
240
+ border_card_header,
241
+ buttons_destructive,
242
+ buttons_navigation_active,
243
+ buttons_primary_pressed,
244
+ buttons_primary_default,
245
+ buttons_primary_hover,
246
+ buttons_primary_disabled,
247
+ buttons_primary_focus,
248
+ buttons_secondary_default_border,
249
+ buttons_secondary_hover_background,
250
+ buttons_secondary_pressed_background,
251
+ buttons_secondary_disabled,
252
+ buttons_secondary_focus,
253
+ buttons_tertiary_default,
254
+ buttons_tertiary_hover,
255
+ buttons_tertiary_pressed,
256
+ buttons_tertiary_focus,
257
+ buttons_tertiary_disabled,
258
+ icons_default,
259
+ icons_active,
260
+ icons_hover,
261
+ icons_hover_background,
262
+ icons_disabled,
263
+ icons_placeholder,
264
+ icons_checkbox,
265
+ base_digital_blue_900,
266
+ base_digital_blue_800,
267
+ base_digital_blue_700,
268
+ base_digital_blue_600,
269
+ base_digital_blue_500,
270
+ base_digital_blue_400,
271
+ base_digital_blue_300,
272
+ base_digital_blue_200,
273
+ base_digital_blue_100,
274
+ base_digital_blue_50,
275
+ base_grey_grey_900,
276
+ base_grey_grey_800,
277
+ base_grey_grey_700,
278
+ base_grey_grey_600,
279
+ base_grey_grey_500,
280
+ base_grey_grey_400,
281
+ base_grey_grey_300,
282
+ base_grey_grey_200,
283
+ base_grey_grey_100,
284
+ base_grey_grey_50,
285
+ base_digital_green_digital_green_50,
286
+ base_digital_green_digital_green_100,
287
+ base_digital_green_digital_green_600,
288
+ base_digital_green_digital_green_700,
289
+ base_red_red_50,
290
+ base_red_red_100,
291
+ base_red_red_400,
292
+ base_red_red_500,
293
+ base_teal_green_teal_green_500,
294
+ base_teal_green_teal_green_600,
295
+ status_success_dark,
296
+ status_warning_dark,
297
+ status_error_dark,
298
+ status_success_light,
299
+ status_error_light,
300
+ status_warning_light,
301
+ surfaces_black,
302
+ surfaces_white,
303
+ surfaces_page,
304
+ surfaces_card,
305
+ surfaces_card_header,
306
+ surfaces_tab_active,
307
+ surfaces_list_hover,
308
+ surfaces_input_hover,
309
+ surfaces_table_disabled_row,
310
+ surfaces_table_background,
311
+ surfaces_shadow_neutral,
312
+ surfaces_scrim,
313
+ surfaces_shadow_primary,
314
+ surfaces_tooltip,
315
+ typography_page_header,
316
+ typography_section_header,
317
+ typography_body,
318
+ typography_button_primary,
319
+ typography_button_secondary,
320
+ typography_button_disabled,
321
+ typography_input_placeholder,
322
+ typography_input_default,
323
+ typography_code_primary,
324
+ typography_code_secondary,
325
+ typography_tab_inactive,
326
+ typography_tab_active,
327
+ typography_link_primary,
328
+ typography_link_disabled,
329
+ typography_link_default,
330
+ typography_error,
331
+ typography_success,
332
+ typography_warning,
333
+ typography_tooltip,
334
+ data_green,
335
+ data_yellow,
336
+ data_orange_1,
337
+ data_orange_2,
338
+ data_orange_3,
339
+ data_red_1,
340
+ data_red_2,
341
+ data_red_3
342
+ };
package/dist/typography.css CHANGED
@@ -4,27 +4,28 @@
4
4
  --neo-font-family-code: Jetbrains Mono;
5
5
  --neo-font-size-xxs: 10;
6
6
  --neo-font-size-xs: 12;
7
- --neo-font-weight-thin100: 100;
8
7
  --neo-font-size-sm: 14;
9
8
  --neo-font-size-default: 16;
10
- --neo-font-weight-light300: 300;
11
9
  --neo-font-size-h6: 16;
12
10
  --neo-font-size-caption: 13;
13
11
  --neo-font-size-code: 14;
14
- --neo-font-weight-regular400: 400;
15
12
  --neo-font-size-h5: 18;
16
- --neo-font-weight-medium500: 500;
17
13
  --neo-font-size-h4: 20;
18
14
  --neo-font-size-h3: 24;
19
- --neo-font-weight-semi-bold600: 600;
20
- --neo-font-weight-bold700: 700;
21
15
  --neo-font-size-h2: 28;
22
16
  --neo-font-size-h1: 36;
23
- --neo-font-weight-extra-bold800: 800;
24
- --neo-line-height-xs16: 16;
25
- --neo-line-height-s20: 20;
26
- --neo-line-height-m24: 24;
27
- --neo-line-height-l28: 28;
28
- --neo-line-height-xl32: 32;
17
+ --neo-font-weight-thin: 100;
18
+ --neo-font-weight-light: 300;
19
+ --neo-font-weight-regular: 400;
20
+ --neo-font-weight-medium: 500;
21
+ --neo-font-weight-semi-bold: 600;
22
+ --neo-font-weight-bold: 700;
23
+ --neo-font-weight-extra-bold: 800;
24
+ /* value in pixels */
25
+ --neo-line-height-xs: 16;
26
+ --neo-line-height-s: 20;
27
+ --neo-line-height-m: 24;
28
+ --neo-line-height-l: 28;
29
+ --neo-line-height-xl: 32;
29
30
  --neo-text-decoration-underline: underline;
30
31
  }
package/dist/typography.js CHANGED
@@ -4,90 +4,55 @@
4
4
  * @generated
5
5
  */
6
6
 
7
- export const fontFamilyHeading = "Inter";
8
-
9
- export const fontFamilyBody = "Inter";
10
-
11
- export const fontFamilyCode = "Jetbrains Mono";
12
-
13
- export const fontSizeXxs = 10;
14
-
15
- export const fontSizeXs = 12;
16
-
17
- export const fontWeightThin100 = 100;
18
-
19
- export const fontSizeSm = 14;
20
-
21
- export const fontSizeDefault = 16;
22
-
23
- export const fontWeightLight300 = 300;
24
-
25
- export const fontSizeH6 = 16;
26
-
27
- export const fontSizeCaption = 13;
28
-
29
- export const fontSizeCode = 14;
30
-
31
- export const fontWeightRegular400 = 400;
32
-
33
- export const fontSizeH5 = 18;
34
-
35
- export const fontWeightMedium500 = 500;
36
-
37
- export const fontSizeH4 = 20;
38
-
39
- export const fontSizeH3 = 24;
40
-
41
- export const fontWeightSemiBold600 = 600;
42
-
43
- export const fontWeightBold700 = 700;
44
-
45
- export const fontSizeH2 = 28;
46
-
47
- export const fontSizeH1 = 36;
48
-
49
- export const fontWeightExtraBold800 = 800;
50
-
51
- export const lineHeightXs16 = 16;
52
-
53
- export const lineHeightS20 = 20;
7
+ export const fontFamily = {
8
+ "heading": "Inter",
9
+ "body": "Inter",
10
+ "code": "Jetbrains Mono"
11
+ };
54
12
 
55
- export const lineHeightM24 = 24;
13
+ export const fontSize = {
14
+ "xxs": 10,
15
+ "xs": 12,
16
+ "sm": 14,
17
+ "default": 16,
18
+ "h6": 16,
19
+ "caption": 13,
20
+ "code": 14,
21
+ "h5": 18,
22
+ "h4": 20,
23
+ "h3": 24,
24
+ "h2": 28,
25
+ "h1": 36
26
+ };
56
27
 
57
- export const lineHeightL28 = 28;
28
+ export const fontWeight = {
29
+ "thin": 100,
30
+ "light": 300,
31
+ "regular": 400,
32
+ "medium": 500,
33
+ "semiBold": 600,
34
+ "bold": 700,
35
+ "extraBold": 800
36
+ };
58
37
 
59
- export const lineHeightXl32 = 32;
38
+ export const lineHeight = {
39
+ /** value in pixels */
40
+ "xs": 16,
41
+ "s": 20,
42
+ "m": 24,
43
+ "l": 28,
44
+ "xl": 32
45
+ };
60
46
 
61
- export const textDecorationUnderline = "underline";
47
+ export const textDecoration = {
48
+ "underline": "underline"
49
+ };
62
50
 
63
- // Default export with all tokens
51
+ // Default export with all color groups
64
52
  export default {
65
- 'fontFamilyHeading': fontFamilyHeading,
66
- 'fontFamilyBody': fontFamilyBody,
67
- 'fontFamilyCode': fontFamilyCode,
68
- 'fontSizeXxs': fontSizeXxs,
69
- 'fontSizeXs': fontSizeXs,
70
- 'fontWeightThin100': fontWeightThin100,
71
- 'fontSizeSm': fontSizeSm,
72
- 'fontSizeDefault': fontSizeDefault,
73
- 'fontWeightLight300': fontWeightLight300,
74
- 'fontSizeH6': fontSizeH6,
75
- 'fontSizeCaption': fontSizeCaption,
76
- 'fontSizeCode': fontSizeCode,
77
- 'fontWeightRegular400': fontWeightRegular400,
78
- 'fontSizeH5': fontSizeH5,
79
- 'fontWeightMedium500': fontWeightMedium500,
80
- 'fontSizeH4': fontSizeH4,
81
- 'fontSizeH3': fontSizeH3,
82
- 'fontWeightSemiBold600': fontWeightSemiBold600,
83
- 'fontWeightBold700': fontWeightBold700,
84
- 'fontSizeH2': fontSizeH2,
85
- 'fontSizeH1': fontSizeH1,
86
- 'fontWeightExtraBold800': fontWeightExtraBold800,
87
- 'lineHeightXs16': lineHeightXs16,
88
- 'lineHeightS20': lineHeightS20,
89
- 'lineHeightM24': lineHeightM24,
90
- 'lineHeightL28': lineHeightL28,
91
- 'lineHeightXl32': lineHeightXl32,
92
- 'textDecorationUnderline': textDecorationUnderline
93
- };
53
+ fontFamily,
54
+ fontSize,
55
+ fontWeight,
56
+ lineHeight,
57
+ textDecoration
58
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moderneinc/neo-design",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "type": "module",
5
5
  "description": "Design primitives and tokens for Moderne applications",
6
6
  "main": "dist/index.js",
@@ -27,7 +27,7 @@
27
27
  "format": "biome format --write src",
28
28
  "knip": "knip",
29
29
  "knip:production": "knip --production",
30
- "check:all": "npm run format && npm run lint:fix && npm run knip",
30
+ "check:all": "npm run format && npm run lint:fix && npm run knip && npm run test:run",
31
31
  "build-storybook": "storybook build",
32
32
  "dev-storybook": "storybook dev -p 6006",
33
33
  "storybook": "npm run dev-storybook"
@@ -50,9 +50,7 @@
50
50
  "@biomejs/biome": "2.2.4",
51
51
  "@rollup/plugin-json": "6.1.0",
52
52
  "@rollup/plugin-node-resolve": "16.0.1",
53
- "@semantic-release/changelog": "6.0.3",
54
53
  "@semantic-release/commit-analyzer": "13.0.1",
55
- "@semantic-release/git": "10.0.1",
56
54
  "@semantic-release/github": "11.0.6",
57
55
  "@semantic-release/npm": "12.0.2",
58
56
  "@semantic-release/release-notes-generator": "14.1.0",
package/dist/colors.json DELETED
@@ -1,104 +0,0 @@
1
- {
2
- "digitalBlue": {
3
- "50": "#f2f3ff",
4
- "100": "#dce0ff",
5
- "200": "#b6bfff",
6
- "300": "#8d99ff",
7
- "400": "#626eff",
8
- "500": "#2f42ff",
9
- "600": "#2637e6",
10
- "700": "#1e2ec2",
11
- "800": "#131e7a",
12
- "900": "#000855",
13
- "main": "#2f42ff"
14
- },
15
- "digitalGreen": {
16
- "50": "#f3fff5",
17
- "100": "#cfffd7",
18
- "200": "#acffb9",
19
- "300": "#88fe9b",
20
- "400": "#72e184",
21
- "500": "#5ec46f",
22
- "600": "#4ca75a",
23
- "700": "#3b8948",
24
- "800": "#2c6c36",
25
- "900": "#1e4f26",
26
- "main": "#5ec46f"
27
- },
28
- "gold": {
29
- "100": "#fbf1d2",
30
- "200": "#f7e3a5",
31
- "300": "#f4d479",
32
- "400": "#f0c64c",
33
- "500": "#ecb81f",
34
- "600": "#bd9319",
35
- "700": "#8e6e13",
36
- "800": "#5e4a0c",
37
- "900": "#2f2506",
38
- "main": "#ecb81f"
39
- },
40
- "grey": {
41
- "50": "#f9fafb",
42
- "100": "#f3f4f6",
43
- "200": "#e5e7eb",
44
- "300": "#d1d5db",
45
- "400": "#9ca3af",
46
- "500": "#6b7280",
47
- "600": "#4b5563",
48
- "700": "#374151",
49
- "800": "#1f2937",
50
- "900": "#111827",
51
- "main": "#6b7280"
52
- },
53
- "orange": {
54
- "50": "#fff8e5",
55
- "100": "#ffebb7",
56
- "200": "#ffde8a",
57
- "300": "#ffd15c",
58
- "400": "#ffc52e",
59
- "500": "#ffb800",
60
- "600": "#d69b00",
61
- "700": "#856000",
62
- "800": "#856000",
63
- "900": "#5c4200",
64
- "main": "#ffb800"
65
- },
66
- "red": {
67
- "50": "#ffedef",
68
- "100": "#ffc6cd",
69
- "200": "#ff9eaa",
70
- "300": "#fd7686",
71
- "400": "#ed4a5d",
72
- "500": "#cb3446",
73
- "600": "#a92232",
74
- "700": "#871421",
75
- "800": "#650914",
76
- "900": "#43020a",
77
- "main": "#cb3446"
78
- },
79
- "tealGreen": {
80
- "50": "#eefffa",
81
- "100": "#c9fff1",
82
- "200": "#a4ffe7",
83
- "300": "#7fffde",
84
- "400": "#54eec6",
85
- "500": "#3bcca6",
86
- "600": "#27aa88",
87
- "700": "#17886b",
88
- "800": "#0b664e",
89
- "900": "#034433",
90
- "main": "#3bcca6"
91
- },
92
- "violet": {
93
- "100": "#ebd5f1",
94
- "200": "#d6ace3",
95
- "300": "#c282d5",
96
- "400": "#ad59c7",
97
- "500": "#992fb9",
98
- "600": "#7a2694",
99
- "700": "#5c1c6f",
100
- "800": "#3d134a",
101
- "900": "#1f0925",
102
- "main": "#992fb9"
103
- }
104
- }
package/dist/semantic-colors.json DELETED
@@ -1,98 +0,0 @@
1
- {
2
- "activity": {
3
- "recipeRun": "#992fb9",
4
- "commitJob": "#2f42ff",
5
- "visualization": "#27aa88"
6
- },
7
- "border": {
8
- "primary": "#d1d5db",
9
- "input": "#9ca3af",
10
- "tabActive": "#2f42ff",
11
- "codeDashed": "#9ca3af",
12
- "card": "#d1d5db",
13
- "cardHeader": "#d1d5db"
14
- },
15
- "buttons": {
16
- "destructive": "#cb3446",
17
- "primaryPressed": "#131e7a",
18
- "navigationActive": "#ffffff",
19
- "primaryDefault": "#2f42ff",
20
- "primaryHover": "#1e2ec2",
21
- "primaryDisabled": "#b6bfff",
22
- "primaryFocus": "#2f42ff",
23
- "secondaryDefaultBorder": "#b6bfff",
24
- "secondaryHoverBackground": "#f2f3ff",
25
- "secondaryPressedBackground": "#dce0ff",
26
- "secondaryDisabled": "#626eff",
27
- "secondaryFocus": "#2f42ff",
28
- "tertiaryDefault": "#2f42ff",
29
- "tertiaryHover": "#1e2ec2",
30
- "tertiaryPressed": "#131e7a",
31
- "tertiaryFocus": "#2f42ff",
32
- "tertiaryDisabled": "#626eff"
33
- },
34
- "icons": {
35
- "default": "#1f2937",
36
- "active": "#2f42ff",
37
- "hover": "#131e7a",
38
- "hoverBackground": "#e5e7eb",
39
- "disabled": "#9ca3af",
40
- "placeholder": "#4b5563",
41
- "checkbox": "#4b5563"
42
- },
43
- "status": {
44
- "successDark": "#4ca75a",
45
- "warningDark": "#ffb800",
46
- "errorDark": "#cb3446",
47
- "successLight": "#f3fff5",
48
- "errorLight": "#ffedef",
49
- "warningLight": "#fff8e5"
50
- },
51
- "surfaces": {
52
- "black": "#000000",
53
- "white": "#ffffff",
54
- "page": "#f9fafb",
55
- "card": "#ffffff",
56
- "cardHeader": "#f3f4f6",
57
- "tabActive": "#f3f4f6",
58
- "listHover": "#f9fafb",
59
- "inputHover": "#f3f4f6",
60
- "tableDisabledRow": "#f3f4f6",
61
- "tableBackground": "#ffffff",
62
- "shadowNeutral": "#1f2937",
63
- "scrim": "#1f2937",
64
- "shadowPrimary": "#2f42ff",
65
- "tooltip": "#4b5563"
66
- },
67
- "typography": {
68
- "pageHeader": "#111827",
69
- "sectionHeader": "#374151",
70
- "body": "#1f2937",
71
- "buttonPrimary": "#f9fafb",
72
- "buttonSecondary": "#2f42ff",
73
- "buttonDisabled": "#9ca3af",
74
- "inputPlaceholder": "#6b7280",
75
- "inputDefault": "#1f2937",
76
- "codePrimary": "#1f2937",
77
- "codeSecondary": "#6b7280",
78
- "tabInactive": "#4b5563",
79
- "tabActive": "#626eff",
80
- "linkPrimary": "#2f42ff",
81
- "linkDisabled": "#b6bfff",
82
- "linkDefault": "#f9fafb",
83
- "error": "#cb3446",
84
- "success": "#4ca75a",
85
- "warning": "#1f2937",
86
- "tooltip": "#ffffff"
87
- },
88
- "data": {
89
- "green": "#4ca75a",
90
- "yellow": "#fdda04",
91
- "orange1": "#ffc008",
92
- "orange2": "#ff9800",
93
- "orange3": "#f9a91b",
94
- "red1": "#ff5c24",
95
- "red2": "#ed4134",
96
- "red3": "#cb3446"
97
- }
98
- }
package/dist/typography.json DELETED
@@ -1,30 +0,0 @@
1
- {
2
- "fontFamilyHeading": "Inter",
3
- "fontFamilyBody": "Inter",
4
- "fontFamilyCode": "Jetbrains Mono",
5
- "fontSizeXxs": 10,
6
- "fontSizeXs": 12,
7
- "fontWeightThin100": 100,
8
- "fontSizeSm": 14,
9
- "fontSizeDefault": 16,
10
- "fontWeightLight300": 300,
11
- "fontSizeH6": 16,
12
- "fontSizeCaption": 13,
13
- "fontSizeCode": 14,
14
- "fontWeightRegular400": 400,
15
- "fontSizeH5": 18,
16
- "fontWeightMedium500": 500,
17
- "fontSizeH4": 20,
18
- "fontSizeH3": 24,
19
- "fontWeightSemiBold600": 600,
20
- "fontWeightBold700": 700,
21
- "fontSizeH2": 28,
22
- "fontSizeH1": 36,
23
- "fontWeightExtraBold800": 800,
24
- "lineHeightXs16": 16,
25
- "lineHeightS20": 20,
26
- "lineHeightM24": 24,
27
- "lineHeightL28": 28,
28
- "lineHeightXl32": 32,
29
- "textDecorationUnderline": "underline"
30
- }