@neuravision/construct 2.0.3 → 2.1.1

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 (115) hide show
  1. package/CHANGELOG.md +272 -0
  2. package/README.md +148 -152
  3. package/behaviors/combobox.js +447 -0
  4. package/behaviors/drawer.js +18 -0
  5. package/behaviors/dropdown.js +296 -0
  6. package/behaviors/index.d.ts +333 -0
  7. package/behaviors/index.js +9 -0
  8. package/behaviors/internal/dialog-controller.js +351 -0
  9. package/behaviors/internal/dom.js +377 -0
  10. package/behaviors/internal/overlay.js +241 -0
  11. package/behaviors/internal/popup-layer.js +188 -0
  12. package/behaviors/modal.js +17 -0
  13. package/behaviors/popover.js +269 -0
  14. package/behaviors/select-menu.js +326 -0
  15. package/behaviors/tabs.js +230 -0
  16. package/behaviors/toggle-group.js +234 -0
  17. package/behaviors/tooltip.js +233 -0
  18. package/components/README.md +279 -83
  19. package/components/_shared.css +11 -10
  20. package/components/_shell-shared.css +20 -4
  21. package/components/app-shell-v2.css +21 -14
  22. package/components/app-shell.css +23 -14
  23. package/components/badge.css +15 -0
  24. package/components/button.css +103 -15
  25. package/components/card.css +53 -8
  26. package/components/checkbox.css +3 -2
  27. package/components/chip.css +1 -1
  28. package/components/datepicker.css +3 -1
  29. package/components/datum.css +204 -0
  30. package/components/index.css +5 -0
  31. package/components/meter.css +182 -0
  32. package/components/navbar.css +88 -3
  33. package/components/slider.css +2 -1
  34. package/components/status.css +107 -0
  35. package/components/switch.css +4 -3
  36. package/components/tooltip.css +4 -0
  37. package/docs/architecture.md +79 -0
  38. package/docs/behaviors.md +101 -0
  39. package/docs/fonts.md +70 -0
  40. package/docs/governance.md +85 -0
  41. package/docs/guidelines.md +42 -23
  42. package/examples/react/README.md +20 -0
  43. package/examples/react/SettingsModal.jsx +66 -0
  44. package/examples/react/construct.css +5 -0
  45. package/fonts.css +10 -0
  46. package/foundations.css +8 -1
  47. package/package.json +72 -21
  48. package/schemas/components.schema.json +107 -0
  49. package/schemas/examples/theme.example.json +27 -0
  50. package/schemas/primitives.schema.json +135 -0
  51. package/schemas/semantic.schema.json +223 -0
  52. package/schemas/theme.schema.json +63 -0
  53. package/scripts/build-tokens.mjs +1417 -0
  54. package/scripts/construct-theme.mjs +43 -0
  55. package/scripts/validate-tokens.mjs +25 -0
  56. package/standalone/accordion.css +3 -0
  57. package/standalone/alert.css +3 -0
  58. package/standalone/app-shell-v2.css +4 -0
  59. package/standalone/app-shell.css +4 -0
  60. package/standalone/avatar.css +3 -0
  61. package/standalone/badge.css +3 -0
  62. package/standalone/banner.css +3 -0
  63. package/standalone/breadcrumbs.css +3 -0
  64. package/standalone/button.css +3 -0
  65. package/standalone/card.css +3 -0
  66. package/standalone/chart.css +3 -0
  67. package/standalone/checkbox.css +3 -0
  68. package/standalone/chip.css +3 -0
  69. package/standalone/combobox.css +3 -0
  70. package/standalone/core.css +4 -0
  71. package/standalone/data-table.css +3 -0
  72. package/standalone/datepicker.css +3 -0
  73. package/standalone/datum.css +3 -0
  74. package/standalone/divider.css +3 -0
  75. package/standalone/drawer.css +3 -0
  76. package/standalone/dropdown.css +3 -0
  77. package/standalone/empty-state.css +3 -0
  78. package/standalone/field.css +3 -0
  79. package/standalone/file-upload.css +3 -0
  80. package/standalone/icon.css +3 -0
  81. package/standalone/input.css +3 -0
  82. package/standalone/list.css +3 -0
  83. package/standalone/meter.css +3 -0
  84. package/standalone/modal.css +3 -0
  85. package/standalone/navbar.css +3 -0
  86. package/standalone/pagination.css +3 -0
  87. package/standalone/popover.css +3 -0
  88. package/standalone/progress-bar.css +3 -0
  89. package/standalone/select-menu.css +3 -0
  90. package/standalone/select.css +3 -0
  91. package/standalone/sidebar.css +3 -0
  92. package/standalone/skeleton.css +3 -0
  93. package/standalone/skip-link.css +3 -0
  94. package/standalone/slider.css +3 -0
  95. package/standalone/spinner.css +3 -0
  96. package/standalone/status.css +3 -0
  97. package/standalone/switch.css +3 -0
  98. package/standalone/table.css +3 -0
  99. package/standalone/tabs.css +3 -0
  100. package/standalone/textarea.css +3 -0
  101. package/standalone/toast.css +3 -0
  102. package/standalone/toggle-group.css +3 -0
  103. package/standalone/toolbar.css +3 -0
  104. package/standalone/tooltip.css +3 -0
  105. package/standalone/tree.css +3 -0
  106. package/tokens/README.md +130 -126
  107. package/tokens/components.json +54 -0
  108. package/tokens/primitives.json +268 -0
  109. package/tokens/semantic.dark.json +93 -0
  110. package/tokens/semantic.high-contrast.json +93 -0
  111. package/tokens/semantic.light.json +178 -0
  112. package/tokens/tokens.css +532 -28
  113. package/tokens/tokens.js +335 -25
  114. package/tokens/tokens.json +764 -21
  115. package/tokens/tokens.ts +335 -25
@@ -0,0 +1,93 @@
1
+ {
2
+ "color": {
3
+ "brand": {
4
+ "primary": "{color.stone.100}",
5
+ "primaryHover": "{color.stone.0}",
6
+ "primaryActive": "{color.stone.200}",
7
+ "accent": "{color.orange.400}",
8
+ "accentHover": "{color.orange.300}",
9
+ "accentActive": "{color.orange.500}",
10
+ "onAccent": "{color.stone.950}"
11
+ },
12
+ "text": {
13
+ "primary": "{color.stone.0}",
14
+ "secondary": "{color.stone.200}",
15
+ "muted": "{color.stone.300}",
16
+ "inverse": "{color.stone.0}",
17
+ "onPrimary": "{color.stone.950}"
18
+ },
19
+ "background": {
20
+ "canvas": "{color.stone.950}",
21
+ "surface": "{color.stone.800}",
22
+ "elevated": "{color.stone.700}",
23
+ "muted": "{color.stone.900}"
24
+ },
25
+ "border": {
26
+ "subtle": "{color.stone.700}",
27
+ "default": "{color.stone.400}",
28
+ "strong": "{color.stone.500}"
29
+ },
30
+ "state": {
31
+ "info": "{color.ocean.300}",
32
+ "success": "{color.green.300}",
33
+ "warning": "{color.amber.300}",
34
+ "danger": "{color.red.300}",
35
+ "onSolid": "{color.stone.950}"
36
+ },
37
+ "stateSurface": {
38
+ "info": "{color.ocean.900}",
39
+ "success": "{color.green.900}",
40
+ "warning": "{color.amber.900}",
41
+ "danger": "{color.red.900}"
42
+ },
43
+ "stateBorder": {
44
+ "info": "{color.ocean.700}",
45
+ "success": "{color.green.700}",
46
+ "warning": "{color.amber.700}",
47
+ "danger": "{color.red.700}"
48
+ },
49
+ "stateText": {
50
+ "info": "{color.ocean.200}",
51
+ "success": "{color.green.200}",
52
+ "warning": "{color.amber.200}",
53
+ "danger": "{color.red.200}"
54
+ },
55
+ "overlay": {
56
+ "scrim": "rgba(8, 6, 4, 0.72)"
57
+ },
58
+ "focus": {
59
+ "ring": "{color.orange.400}"
60
+ },
61
+ "avatarSeed": {
62
+ "1Bg": "{color.ocean.800}",
63
+ "1Fg": "{color.ocean.200}",
64
+ "2Bg": "{color.teal.800}",
65
+ "2Fg": "{color.teal.200}",
66
+ "3Bg": "{color.amber.800}",
67
+ "3Fg": "{color.amber.200}",
68
+ "4Bg": "{color.red.800}",
69
+ "4Fg": "{color.red.200}",
70
+ "5Bg": "{color.green.800}",
71
+ "5Fg": "{color.green.200}",
72
+ "6Bg": "{color.purple.800}",
73
+ "6Fg": "{color.purple.200}",
74
+ "7Bg": "{color.pink.800}",
75
+ "7Fg": "{color.pink.200}",
76
+ "8Bg": "{color.stone.700}",
77
+ "8Fg": "{color.stone.200}"
78
+ },
79
+ "chartSeries": {
80
+ "1": "{color.ocean.300}",
81
+ "2": "{color.amber.300}",
82
+ "3": "{color.green.300}",
83
+ "4": "{color.purple.300}",
84
+ "5": "{color.pink.300}",
85
+ "6": "{color.teal.300}",
86
+ "7": "{color.red.300}",
87
+ "8": "{color.stone.300}"
88
+ }
89
+ },
90
+ "theme": {
91
+ "colorScheme": "dark"
92
+ }
93
+ }
@@ -0,0 +1,93 @@
1
+ {
2
+ "color": {
3
+ "brand": {
4
+ "primary": "{color.stone.950}",
5
+ "primaryHover": "{color.stone.900}",
6
+ "primaryActive": "{color.stone.800}",
7
+ "accent": "{color.orange.700}",
8
+ "accentHover": "{color.orange.800}",
9
+ "accentActive": "{color.orange.900}",
10
+ "onAccent": "{color.stone.0}"
11
+ },
12
+ "text": {
13
+ "primary": "{color.stone.950}",
14
+ "secondary": "{color.stone.800}",
15
+ "muted": "{color.stone.700}",
16
+ "inverse": "{color.stone.0}",
17
+ "onPrimary": "{color.stone.0}"
18
+ },
19
+ "background": {
20
+ "canvas": "{color.stone.0}",
21
+ "surface": "{color.stone.0}",
22
+ "elevated": "{color.stone.0}",
23
+ "muted": "{color.stone.50}"
24
+ },
25
+ "border": {
26
+ "subtle": "{color.stone.400}",
27
+ "default": "{color.stone.700}",
28
+ "strong": "{color.stone.950}"
29
+ },
30
+ "state": {
31
+ "info": "{color.ocean.800}",
32
+ "success": "{color.green.700}",
33
+ "warning": "{color.amber.700}",
34
+ "danger": "{color.red.700}",
35
+ "onSolid": "{color.stone.0}"
36
+ },
37
+ "stateSurface": {
38
+ "info": "{color.ocean.100}",
39
+ "success": "{color.green.100}",
40
+ "warning": "{color.amber.100}",
41
+ "danger": "{color.red.100}"
42
+ },
43
+ "stateBorder": {
44
+ "info": "{color.ocean.700}",
45
+ "success": "{color.green.700}",
46
+ "warning": "{color.amber.700}",
47
+ "danger": "{color.red.700}"
48
+ },
49
+ "stateText": {
50
+ "info": "{color.ocean.800}",
51
+ "success": "{color.green.800}",
52
+ "warning": "{color.amber.800}",
53
+ "danger": "{color.red.800}"
54
+ },
55
+ "overlay": {
56
+ "scrim": "rgba(14, 23, 32, 0.7)"
57
+ },
58
+ "focus": {
59
+ "ring": "{color.orange.700}"
60
+ },
61
+ "avatarSeed": {
62
+ "1Bg": "{color.ocean.50}",
63
+ "1Fg": "{color.ocean.900}",
64
+ "2Bg": "{color.teal.50}",
65
+ "2Fg": "{color.teal.900}",
66
+ "3Bg": "{color.amber.50}",
67
+ "3Fg": "{color.amber.900}",
68
+ "4Bg": "{color.red.50}",
69
+ "4Fg": "{color.red.900}",
70
+ "5Bg": "{color.green.50}",
71
+ "5Fg": "{color.green.900}",
72
+ "6Bg": "{color.purple.50}",
73
+ "6Fg": "{color.purple.900}",
74
+ "7Bg": "{color.pink.50}",
75
+ "7Fg": "{color.pink.900}",
76
+ "8Bg": "{color.stone.50}",
77
+ "8Fg": "{color.stone.950}"
78
+ },
79
+ "chartSeries": {
80
+ "1": "{color.ocean.800}",
81
+ "2": "{color.amber.700}",
82
+ "3": "{color.green.700}",
83
+ "4": "{color.purple.700}",
84
+ "5": "{color.pink.700}",
85
+ "6": "{color.teal.700}",
86
+ "7": "{color.red.700}",
87
+ "8": "{color.stone.800}"
88
+ }
89
+ },
90
+ "theme": {
91
+ "colorScheme": "light"
92
+ }
93
+ }
@@ -0,0 +1,178 @@
1
+ {
2
+ "color": {
3
+ "brand": {
4
+ "primary": "{color.stone.950}",
5
+ "primaryHover": "{color.stone.800}",
6
+ "primaryActive": "{color.stone.900}",
7
+ "accent": "{color.orange.500}",
8
+ "accentHover": "{color.orange.400}",
9
+ "accentActive": "{color.orange.300}",
10
+ "onAccent": "{color.stone.950}"
11
+ },
12
+ "text": {
13
+ "primary": "{color.stone.950}",
14
+ "secondary": "{color.stone.700}",
15
+ "muted": "{color.stone.600}",
16
+ "inverse": "{color.stone.0}",
17
+ "onPrimary": "{color.stone.0}"
18
+ },
19
+ "background": {
20
+ "canvas": "{color.stone.50}",
21
+ "surface": "{color.stone.100}",
22
+ "elevated": "{color.stone.0}",
23
+ "muted": "{color.stone.200}",
24
+ "subtle": "{color.background.surface}"
25
+ },
26
+ "border": {
27
+ "subtle": "{color.stone.200}",
28
+ "default": "{color.stone.500}",
29
+ "strong": "{color.stone.500}",
30
+ "muted": "{color.border.subtle}"
31
+ },
32
+ "state": {
33
+ "info": "{color.ocean.600}",
34
+ "success": "{color.green.700}",
35
+ "warning": "{color.amber.700}",
36
+ "danger": "{color.red.500}",
37
+ "onSolid": "{color.stone.0}"
38
+ },
39
+ "stateSurface": {
40
+ "info": "{color.ocean.50}",
41
+ "success": "{color.green.50}",
42
+ "warning": "{color.amber.50}",
43
+ "danger": "{color.red.50}"
44
+ },
45
+ "stateBorder": {
46
+ "info": "{color.ocean.200}",
47
+ "success": "{color.green.200}",
48
+ "warning": "{color.amber.200}",
49
+ "danger": "{color.red.200}"
50
+ },
51
+ "stateText": {
52
+ "info": "{color.ocean.700}",
53
+ "success": "{color.green.700}",
54
+ "warning": "{color.amber.700}",
55
+ "danger": "{color.red.700}"
56
+ },
57
+ "overlay": {
58
+ "scrim": "rgba(22, 19, 15, 0.58)"
59
+ },
60
+ "focus": {
61
+ "ring": "{color.orange.600}"
62
+ },
63
+ "avatarSeed": {
64
+ "1Bg": "{color.ocean.100}",
65
+ "1Fg": "{color.ocean.800}",
66
+ "2Bg": "{color.teal.100}",
67
+ "2Fg": "{color.teal.800}",
68
+ "3Bg": "{color.amber.100}",
69
+ "3Fg": "{color.amber.800}",
70
+ "4Bg": "{color.red.100}",
71
+ "4Fg": "{color.red.800}",
72
+ "5Bg": "{color.green.100}",
73
+ "5Fg": "{color.green.800}",
74
+ "6Bg": "{color.purple.100}",
75
+ "6Fg": "{color.purple.800}",
76
+ "7Bg": "{color.pink.100}",
77
+ "7Fg": "{color.pink.800}",
78
+ "8Bg": "{color.stone.200}",
79
+ "8Fg": "{color.stone.800}"
80
+ },
81
+ "chartSeries": {
82
+ "1": "{color.ocean.600}",
83
+ "2": "{color.amber.600}",
84
+ "3": "{color.green.600}",
85
+ "4": "{color.purple.500}",
86
+ "5": "{color.pink.500}",
87
+ "6": "{color.teal.600}",
88
+ "7": "{color.red.500}",
89
+ "8": "{color.stone.600}"
90
+ }
91
+ },
92
+ "theme": {
93
+ "colorScheme": "light"
94
+ },
95
+ "font": {
96
+ "family": {
97
+ "heading": "{font.family.brand}",
98
+ "body": "{font.family.text}",
99
+ "code": "{font.family.mono}"
100
+ }
101
+ },
102
+ "typography": {
103
+ "display": {
104
+ "fontFamily": "{font.family.heading}",
105
+ "fontSize": "{font.size.6xl}",
106
+ "lineHeight": "{font.lineHeight.6xl}",
107
+ "fontWeight": "{font.weight.extrabold}",
108
+ "letterSpacing": "{font.letterSpacing.tight}"
109
+ },
110
+ "h1": {
111
+ "fontFamily": "{font.family.heading}",
112
+ "fontSize": "{font.size.5xl}",
113
+ "lineHeight": "{font.lineHeight.5xl}",
114
+ "fontWeight": "{font.weight.bold}",
115
+ "letterSpacing": "{font.letterSpacing.tight}"
116
+ },
117
+ "h2": {
118
+ "fontFamily": "{font.family.heading}",
119
+ "fontSize": "{font.size.4xl}",
120
+ "lineHeight": "{font.lineHeight.4xl}",
121
+ "fontWeight": "{font.weight.semibold}",
122
+ "letterSpacing": "{font.letterSpacing.normal}"
123
+ },
124
+ "h3": {
125
+ "fontFamily": "{font.family.heading}",
126
+ "fontSize": "{font.size.3xl}",
127
+ "lineHeight": "{font.lineHeight.3xl}",
128
+ "fontWeight": "{font.weight.semibold}",
129
+ "letterSpacing": "{font.letterSpacing.normal}"
130
+ },
131
+ "h4": {
132
+ "fontFamily": "{font.family.heading}",
133
+ "fontSize": "{font.size.2xl}",
134
+ "lineHeight": "{font.lineHeight.2xl}",
135
+ "fontWeight": "{font.weight.semibold}",
136
+ "letterSpacing": "{font.letterSpacing.normal}"
137
+ },
138
+ "body": {
139
+ "fontFamily": "{font.family.body}",
140
+ "fontSize": "{font.size.md}",
141
+ "lineHeight": "{font.lineHeight.md}",
142
+ "fontWeight": "{font.weight.regular}",
143
+ "letterSpacing": "{font.letterSpacing.normal}"
144
+ },
145
+ "bodySm": {
146
+ "fontFamily": "{font.family.body}",
147
+ "fontSize": "{font.size.sm}",
148
+ "lineHeight": "{font.lineHeight.sm}",
149
+ "fontWeight": "{font.weight.regular}",
150
+ "letterSpacing": "{font.letterSpacing.normal}"
151
+ },
152
+ "label": {
153
+ "fontFamily": "{font.family.body}",
154
+ "fontSize": "{font.size.sm}",
155
+ "lineHeight": "{font.lineHeight.sm}",
156
+ "fontWeight": "{font.weight.semibold}",
157
+ "letterSpacing": "{font.letterSpacing.wide}"
158
+ },
159
+ "caption": {
160
+ "fontFamily": "{font.family.body}",
161
+ "fontSize": "{font.size.xs}",
162
+ "lineHeight": "{font.lineHeight.xs}",
163
+ "fontWeight": "{font.weight.regular}",
164
+ "letterSpacing": "{font.letterSpacing.normal}"
165
+ }
166
+ },
167
+ "radius": {
168
+ "control": "{radius.md}",
169
+ "card": "{radius.lg}",
170
+ "modal": "{radius.xl}",
171
+ "pill": "{radius.round}"
172
+ },
173
+ "shadow": {
174
+ "card": "{shadow.sm}",
175
+ "dropdown": "{shadow.md}",
176
+ "modal": "{shadow.lg}"
177
+ }
178
+ }