@neuravision/construct 2.3.2 → 2.4.0

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 (27) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/components/README.md +38 -0
  3. package/components/_shared.css +5 -1
  4. package/components/aperture-app.css +120 -0
  5. package/components/bottom-nav.css +112 -0
  6. package/components/index.css +5 -0
  7. package/components/stepper.css +162 -0
  8. package/components/table.css +3 -0
  9. package/docs/aperture-app.md +55 -0
  10. package/docs/aperture.md +8 -0
  11. package/package.json +9 -9
  12. package/schemas/grammar.schema.json +16 -0
  13. package/schemas/semantic.schema.json +9 -2
  14. package/scripts/build-tokens.mjs +73 -0
  15. package/standalone/aperture-app.css +3 -0
  16. package/standalone/bottom-nav.css +3 -0
  17. package/standalone/stepper.css +3 -0
  18. package/tokens/grammar.aperture.json +53 -0
  19. package/tokens/primitives.json +10 -1
  20. package/tokens/semantic.dark.json +5 -1
  21. package/tokens/semantic.high-contrast-dark.json +5 -1
  22. package/tokens/semantic.high-contrast.json +5 -1
  23. package/tokens/semantic.light.json +5 -1
  24. package/tokens/tokens.css +75 -0
  25. package/tokens/tokens.js +56 -8
  26. package/tokens/tokens.json +56 -8
  27. package/tokens/tokens.ts +56 -8
package/tokens/tokens.json CHANGED
@@ -11,21 +11,36 @@
11
11
  "dark",
12
12
  "high-contrast",
13
13
  "high-contrast-dark"
14
+ ],
15
+ "grammars": [
16
+ {
17
+ "name": "aperture",
18
+ "selector": "[data-grammar=\"aperture\"]"
19
+ }
14
20
  ]
15
21
  },
16
22
  "primitives": {
17
23
  "color": {
18
24
  "cobalt": {
25
+ "100": "#DCE2FF",
19
26
  "200": "#A5B4FF",
27
+ "300": "#7D90FF",
20
28
  "500": "#2448FF",
21
- "700": "#1834CE"
29
+ "600": "#1E3EE6",
30
+ "700": "#1834CE",
31
+ "800": "#132AA6",
32
+ "900": "#0D1D6E"
22
33
  },
23
34
  "graphite": {
24
35
  "50": "#F5F5F0",
25
36
  "100": "#E7E8E2",
37
+ "200": "#D2D4CC",
38
+ "300": "#B4B6AE",
26
39
  "400": "#95978F",
27
40
  "600": "#585B55",
41
+ "700": "#3E413C",
28
42
  "800": "#282B28",
43
+ "900": "#1B1E1B",
29
44
  "950": "#111411"
30
45
  },
31
46
  "stone": {
@@ -304,7 +319,11 @@
304
319
  "muted": "#585B55",
305
320
  "accent": "#2448FF",
306
321
  "onAccent": "#FFFFFF",
307
- "border": "#95978F"
322
+ "border": "#95978F",
323
+ "elevated": "#FFFFFF",
324
+ "accentHover": "#1E3EE6",
325
+ "accentActive": "#1834CE",
326
+ "borderSubtle": "#D2D4CC"
308
327
  },
309
328
  "brand": {
310
329
  "primary": "#16130F",
@@ -577,7 +596,11 @@
577
596
  "muted": "#585B55",
578
597
  "accent": "#2448FF",
579
598
  "onAccent": "#FFFFFF",
580
- "border": "#95978F"
599
+ "border": "#95978F",
600
+ "elevated": "#FFFFFF",
601
+ "accentHover": "#1E3EE6",
602
+ "accentActive": "#1834CE",
603
+ "borderSubtle": "#D2D4CC"
581
604
  },
582
605
  "brand": {
583
606
  "primary": "#16130F",
@@ -766,7 +789,11 @@
766
789
  "muted": "#95978F",
767
790
  "accent": "#A5B4FF",
768
791
  "onAccent": "#111411",
769
- "border": "#585B55"
792
+ "border": "#585B55",
793
+ "elevated": "#1B1E1B",
794
+ "accentHover": "#DCE2FF",
795
+ "accentActive": "#7D90FF",
796
+ "borderSubtle": "#3E413C"
770
797
  },
771
798
  "brand": {
772
799
  "primary": "#F1F0EB",
@@ -955,7 +982,11 @@
955
982
  "muted": "#111411",
956
983
  "accent": "#1834CE",
957
984
  "onAccent": "#FFFFFF",
958
- "border": "#111411"
985
+ "border": "#111411",
986
+ "elevated": "#FFFFFF",
987
+ "accentHover": "#132AA6",
988
+ "accentActive": "#0D1D6E",
989
+ "borderSubtle": "#111411"
959
990
  },
960
991
  "brand": {
961
992
  "primary": "#16130F",
@@ -1144,7 +1175,11 @@
1144
1175
  "muted": "#FFFFFF",
1145
1176
  "accent": "#A5B4FF",
1146
1177
  "onAccent": "#111411",
1147
- "border": "#FFFFFF"
1178
+ "border": "#FFFFFF",
1179
+ "elevated": "#111411",
1180
+ "accentHover": "#DCE2FF",
1181
+ "accentActive": "#7D90FF",
1182
+ "borderSubtle": "#FFFFFF"
1148
1183
  },
1149
1184
  "brand": {
1150
1185
  "primary": "#FFFFFF",
@@ -1663,16 +1698,25 @@
1663
1698
  "primitives": {
1664
1699
  "color": {
1665
1700
  "cobalt": {
1701
+ "100": "var(--color-cobalt-100)",
1666
1702
  "200": "var(--color-cobalt-200)",
1703
+ "300": "var(--color-cobalt-300)",
1667
1704
  "500": "var(--color-cobalt-500)",
1668
- "700": "var(--color-cobalt-700)"
1705
+ "600": "var(--color-cobalt-600)",
1706
+ "700": "var(--color-cobalt-700)",
1707
+ "800": "var(--color-cobalt-800)",
1708
+ "900": "var(--color-cobalt-900)"
1669
1709
  },
1670
1710
  "graphite": {
1671
1711
  "50": "var(--color-graphite-50)",
1672
1712
  "100": "var(--color-graphite-100)",
1713
+ "200": "var(--color-graphite-200)",
1714
+ "300": "var(--color-graphite-300)",
1673
1715
  "400": "var(--color-graphite-400)",
1674
1716
  "600": "var(--color-graphite-600)",
1717
+ "700": "var(--color-graphite-700)",
1675
1718
  "800": "var(--color-graphite-800)",
1719
+ "900": "var(--color-graphite-900)",
1676
1720
  "950": "var(--color-graphite-950)"
1677
1721
  },
1678
1722
  "stone": {
@@ -1951,7 +1995,11 @@
1951
1995
  "muted": "var(--color-aperture-muted)",
1952
1996
  "accent": "var(--color-aperture-accent)",
1953
1997
  "onAccent": "var(--color-aperture-on-accent)",
1954
- "border": "var(--color-aperture-border)"
1998
+ "border": "var(--color-aperture-border)",
1999
+ "elevated": "var(--color-aperture-elevated)",
2000
+ "accentHover": "var(--color-aperture-accent-hover)",
2001
+ "accentActive": "var(--color-aperture-accent-active)",
2002
+ "borderSubtle": "var(--color-aperture-border-subtle)"
1955
2003
  },
1956
2004
  "brand": {
1957
2005
  "primary": "var(--color-brand-primary)",
package/tokens/tokens.ts CHANGED
@@ -12,22 +12,37 @@ export const tokenMetadata = {
12
12
  "dark",
13
13
  "high-contrast",
14
14
  "high-contrast-dark"
15
+ ],
16
+ "grammars": [
17
+ {
18
+ "name": "aperture",
19
+ "selector": "[data-grammar=\"aperture\"]"
20
+ }
15
21
  ]
16
22
  } as const;
17
23
 
18
24
  export const primitives = {
19
25
  "color": {
20
26
  "cobalt": {
27
+ "100": "#DCE2FF",
21
28
  "200": "#A5B4FF",
29
+ "300": "#7D90FF",
22
30
  "500": "#2448FF",
23
- "700": "#1834CE"
31
+ "600": "#1E3EE6",
32
+ "700": "#1834CE",
33
+ "800": "#132AA6",
34
+ "900": "#0D1D6E"
24
35
  },
25
36
  "graphite": {
26
37
  "50": "#F5F5F0",
27
38
  "100": "#E7E8E2",
39
+ "200": "#D2D4CC",
40
+ "300": "#B4B6AE",
28
41
  "400": "#95978F",
29
42
  "600": "#585B55",
43
+ "700": "#3E413C",
30
44
  "800": "#282B28",
45
+ "900": "#1B1E1B",
31
46
  "950": "#111411"
32
47
  },
33
48
  "stone": {
@@ -307,7 +322,11 @@ export const semantic = {
307
322
  "muted": "#585B55",
308
323
  "accent": "#2448FF",
309
324
  "onAccent": "#FFFFFF",
310
- "border": "#95978F"
325
+ "border": "#95978F",
326
+ "elevated": "#FFFFFF",
327
+ "accentHover": "#1E3EE6",
328
+ "accentActive": "#1834CE",
329
+ "borderSubtle": "#D2D4CC"
311
330
  },
312
331
  "brand": {
313
332
  "primary": "#16130F",
@@ -582,7 +601,11 @@ export const semanticThemes = {
582
601
  "muted": "#585B55",
583
602
  "accent": "#2448FF",
584
603
  "onAccent": "#FFFFFF",
585
- "border": "#95978F"
604
+ "border": "#95978F",
605
+ "elevated": "#FFFFFF",
606
+ "accentHover": "#1E3EE6",
607
+ "accentActive": "#1834CE",
608
+ "borderSubtle": "#D2D4CC"
586
609
  },
587
610
  "brand": {
588
611
  "primary": "#16130F",
@@ -771,7 +794,11 @@ export const semanticThemes = {
771
794
  "muted": "#95978F",
772
795
  "accent": "#A5B4FF",
773
796
  "onAccent": "#111411",
774
- "border": "#585B55"
797
+ "border": "#585B55",
798
+ "elevated": "#1B1E1B",
799
+ "accentHover": "#DCE2FF",
800
+ "accentActive": "#7D90FF",
801
+ "borderSubtle": "#3E413C"
775
802
  },
776
803
  "brand": {
777
804
  "primary": "#F1F0EB",
@@ -960,7 +987,11 @@ export const semanticThemes = {
960
987
  "muted": "#111411",
961
988
  "accent": "#1834CE",
962
989
  "onAccent": "#FFFFFF",
963
- "border": "#111411"
990
+ "border": "#111411",
991
+ "elevated": "#FFFFFF",
992
+ "accentHover": "#132AA6",
993
+ "accentActive": "#0D1D6E",
994
+ "borderSubtle": "#111411"
964
995
  },
965
996
  "brand": {
966
997
  "primary": "#16130F",
@@ -1149,7 +1180,11 @@ export const semanticThemes = {
1149
1180
  "muted": "#FFFFFF",
1150
1181
  "accent": "#A5B4FF",
1151
1182
  "onAccent": "#111411",
1152
- "border": "#FFFFFF"
1183
+ "border": "#FFFFFF",
1184
+ "elevated": "#111411",
1185
+ "accentHover": "#DCE2FF",
1186
+ "accentActive": "#7D90FF",
1187
+ "borderSubtle": "#FFFFFF"
1153
1188
  },
1154
1189
  "brand": {
1155
1190
  "primary": "#FFFFFF",
@@ -1670,16 +1705,25 @@ export const cssVars = {
1670
1705
  "primitives": {
1671
1706
  "color": {
1672
1707
  "cobalt": {
1708
+ "100": "var(--color-cobalt-100)",
1673
1709
  "200": "var(--color-cobalt-200)",
1710
+ "300": "var(--color-cobalt-300)",
1674
1711
  "500": "var(--color-cobalt-500)",
1675
- "700": "var(--color-cobalt-700)"
1712
+ "600": "var(--color-cobalt-600)",
1713
+ "700": "var(--color-cobalt-700)",
1714
+ "800": "var(--color-cobalt-800)",
1715
+ "900": "var(--color-cobalt-900)"
1676
1716
  },
1677
1717
  "graphite": {
1678
1718
  "50": "var(--color-graphite-50)",
1679
1719
  "100": "var(--color-graphite-100)",
1720
+ "200": "var(--color-graphite-200)",
1721
+ "300": "var(--color-graphite-300)",
1680
1722
  "400": "var(--color-graphite-400)",
1681
1723
  "600": "var(--color-graphite-600)",
1724
+ "700": "var(--color-graphite-700)",
1682
1725
  "800": "var(--color-graphite-800)",
1726
+ "900": "var(--color-graphite-900)",
1683
1727
  "950": "var(--color-graphite-950)"
1684
1728
  },
1685
1729
  "stone": {
@@ -1958,7 +2002,11 @@ export const cssVars = {
1958
2002
  "muted": "var(--color-aperture-muted)",
1959
2003
  "accent": "var(--color-aperture-accent)",
1960
2004
  "onAccent": "var(--color-aperture-on-accent)",
1961
- "border": "var(--color-aperture-border)"
2005
+ "border": "var(--color-aperture-border)",
2006
+ "elevated": "var(--color-aperture-elevated)",
2007
+ "accentHover": "var(--color-aperture-accent-hover)",
2008
+ "accentActive": "var(--color-aperture-accent-active)",
2009
+ "borderSubtle": "var(--color-aperture-border-subtle)"
1962
2010
  },
1963
2011
  "brand": {
1964
2012
  "primary": "var(--color-brand-primary)",