@neuravision/construct 2.2.1 → 2.3.2

package/tokens/tokens.json

@@ -15,6 +15,19 @@
   },
   "primitives": {
     "color": {
+      "cobalt": {
+        "200": "#A5B4FF",
+        "500": "#2448FF",
+        "700": "#1834CE"
+      },
+      "graphite": {
+        "50": "#F5F5F0",
+        "100": "#E7E8E2",
+        "400": "#95978F",
+        "600": "#585B55",
+        "800": "#282B28",
+        "950": "#111411"
+      },
       "stone": {
         "0": "#FFFFFF",
         "50": "#FAFAF8",
@@ -128,6 +141,7 @@
     },
     "font": {
       "family": {
+        "grotesk": "Arial, Helvetica, sans-serif",
         "brand": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "text": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "mono": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -283,6 +297,15 @@
   },
   "semantic": {
     "color": {
+      "aperture": {
+        "paper": "#F5F5F0",
+        "surface": "#E7E8E2",
+        "ink": "#111411",
+        "muted": "#585B55",
+        "accent": "#2448FF",
+        "onAccent": "#FFFFFF",
+        "border": "#95978F"
+      },
       "brand": {
         "primary": "#16130F",
         "primaryHover": "#353128",
@@ -378,6 +401,7 @@
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -461,6 +485,19 @@
     }
   },
   "components": {
+    "aperture": {
+      "paper": "#F5F5F0",
+      "surface": "#E7E8E2",
+      "ink": "#111411",
+      "muted": "#585B55",
+      "accent": "#2448FF",
+      "onAccent": "#FFFFFF",
+      "border": "#95978F",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#16130F",
       "backgroundHover": "#353128",
@@ -533,6 +570,15 @@
   "semanticThemes": {
     "light": {
       "color": {
+        "aperture": {
+          "paper": "#F5F5F0",
+          "surface": "#E7E8E2",
+          "ink": "#111411",
+          "muted": "#585B55",
+          "accent": "#2448FF",
+          "onAccent": "#FFFFFF",
+          "border": "#95978F"
+        },
         "brand": {
           "primary": "#16130F",
           "primaryHover": "#353128",
@@ -628,6 +674,7 @@
       },
       "font": {
         "family": {
+          "aperture": "Arial, Helvetica, sans-serif",
           "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -712,6 +759,15 @@
     },
     "dark": {
       "color": {
+        "aperture": {
+          "paper": "#111411",
+          "surface": "#282B28",
+          "ink": "#F5F5F0",
+          "muted": "#95978F",
+          "accent": "#A5B4FF",
+          "onAccent": "#111411",
+          "border": "#585B55"
+        },
         "brand": {
           "primary": "#F1F0EB",
           "primaryHover": "#FFFFFF",
@@ -807,6 +863,7 @@
       },
       "font": {
         "family": {
+          "aperture": "Arial, Helvetica, sans-serif",
           "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -891,6 +948,15 @@
     },
     "highContrast": {
       "color": {
+        "aperture": {
+          "paper": "#FFFFFF",
+          "surface": "#FFFFFF",
+          "ink": "#111411",
+          "muted": "#111411",
+          "accent": "#1834CE",
+          "onAccent": "#FFFFFF",
+          "border": "#111411"
+        },
         "brand": {
           "primary": "#16130F",
           "primaryHover": "#211E18",
@@ -986,6 +1052,7 @@
       },
       "font": {
         "family": {
+          "aperture": "Arial, Helvetica, sans-serif",
           "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -1070,6 +1137,15 @@
     },
     "highContrastDark": {
       "color": {
+        "aperture": {
+          "paper": "#111411",
+          "surface": "#111411",
+          "ink": "#FFFFFF",
+          "muted": "#FFFFFF",
+          "accent": "#A5B4FF",
+          "onAccent": "#111411",
+          "border": "#FFFFFF"
+        },
         "brand": {
           "primary": "#FFFFFF",
           "primaryHover": "#F1F0EB",
@@ -1165,6 +1241,7 @@
       },
       "font": {
         "family": {
+          "aperture": "Arial, Helvetica, sans-serif",
           "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
           "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -1250,6 +1327,19 @@
   },
   "componentThemes": {
     "light": {
+      "aperture": {
+        "paper": "#F5F5F0",
+        "surface": "#E7E8E2",
+        "ink": "#111411",
+        "muted": "#585B55",
+        "accent": "#2448FF",
+        "onAccent": "#FFFFFF",
+        "border": "#95978F",
+        "fontFamily": "Arial, Helvetica, sans-serif",
+        "markSize": "32px",
+        "actionHeight": "48px",
+        "panelRadius": "4px"
+      },
       "button": {
         "background": "#16130F",
         "backgroundHover": "#353128",
@@ -1320,6 +1410,19 @@
       }
     },
     "dark": {
+      "aperture": {
+        "paper": "#111411",
+        "surface": "#282B28",
+        "ink": "#F5F5F0",
+        "muted": "#95978F",
+        "accent": "#A5B4FF",
+        "onAccent": "#111411",
+        "border": "#585B55",
+        "fontFamily": "Arial, Helvetica, sans-serif",
+        "markSize": "32px",
+        "actionHeight": "48px",
+        "panelRadius": "4px"
+      },
       "button": {
         "background": "#F1F0EB",
         "backgroundHover": "#FFFFFF",
@@ -1390,6 +1493,19 @@
       }
     },
     "highContrast": {
+      "aperture": {
+        "paper": "#FFFFFF",
+        "surface": "#FFFFFF",
+        "ink": "#111411",
+        "muted": "#111411",
+        "accent": "#1834CE",
+        "onAccent": "#FFFFFF",
+        "border": "#111411",
+        "fontFamily": "Arial, Helvetica, sans-serif",
+        "markSize": "32px",
+        "actionHeight": "48px",
+        "panelRadius": "4px"
+      },
       "button": {
         "background": "#16130F",
         "backgroundHover": "#211E18",
@@ -1460,6 +1576,19 @@
       }
     },
     "highContrastDark": {
+      "aperture": {
+        "paper": "#111411",
+        "surface": "#111411",
+        "ink": "#FFFFFF",
+        "muted": "#FFFFFF",
+        "accent": "#A5B4FF",
+        "onAccent": "#111411",
+        "border": "#FFFFFF",
+        "fontFamily": "Arial, Helvetica, sans-serif",
+        "markSize": "32px",
+        "actionHeight": "48px",
+        "panelRadius": "4px"
+      },
       "button": {
         "background": "#FFFFFF",
         "backgroundHover": "#F1F0EB",
@@ -1533,6 +1662,19 @@
   "cssVars": {
     "primitives": {
       "color": {
+        "cobalt": {
+          "200": "var(--color-cobalt-200)",
+          "500": "var(--color-cobalt-500)",
+          "700": "var(--color-cobalt-700)"
+        },
+        "graphite": {
+          "50": "var(--color-graphite-50)",
+          "100": "var(--color-graphite-100)",
+          "400": "var(--color-graphite-400)",
+          "600": "var(--color-graphite-600)",
+          "800": "var(--color-graphite-800)",
+          "950": "var(--color-graphite-950)"
+        },
         "stone": {
           "0": "var(--color-stone-0)",
           "50": "var(--color-stone-50)",
@@ -1646,6 +1788,7 @@
       },
       "font": {
         "family": {
+          "grotesk": "var(--font-family-grotesk)",
           "brand": "var(--font-family-brand)",
           "text": "var(--font-family-text)",
           "mono": "var(--font-family-mono)"
@@ -1801,6 +1944,15 @@
     },
     "semantic": {
       "color": {
+        "aperture": {
+          "paper": "var(--color-aperture-paper)",
+          "surface": "var(--color-aperture-surface)",
+          "ink": "var(--color-aperture-ink)",
+          "muted": "var(--color-aperture-muted)",
+          "accent": "var(--color-aperture-accent)",
+          "onAccent": "var(--color-aperture-on-accent)",
+          "border": "var(--color-aperture-border)"
+        },
         "brand": {
           "primary": "var(--color-brand-primary)",
           "primaryHover": "var(--color-brand-primary-hover)",
@@ -1896,6 +2048,7 @@
       },
       "font": {
         "family": {
+          "aperture": "var(--font-family-aperture)",
           "heading": "var(--font-family-heading)",
           "body": "var(--font-family-body)",
           "code": "var(--font-family-code)"
@@ -1979,6 +2132,19 @@
       }
     },
     "components": {
+      "aperture": {
+        "paper": "var(--component-aperture-paper)",
+        "surface": "var(--component-aperture-surface)",
+        "ink": "var(--component-aperture-ink)",
+        "muted": "var(--component-aperture-muted)",
+        "accent": "var(--component-aperture-accent)",
+        "onAccent": "var(--component-aperture-on-accent)",
+        "border": "var(--component-aperture-border)",
+        "fontFamily": "var(--component-aperture-font-family)",
+        "markSize": "var(--component-aperture-mark-size)",
+        "actionHeight": "var(--component-aperture-action-height)",
+        "panelRadius": "var(--component-aperture-panel-radius)"
+      },
       "button": {
         "background": "var(--component-button-background)",
         "backgroundHover": "var(--component-button-background-hover)",

package/tokens/tokens.ts

@@ -17,6 +17,19 @@ export const tokenMetadata = {
 
 export const primitives = {
   "color": {
+    "cobalt": {
+      "200": "#A5B4FF",
+      "500": "#2448FF",
+      "700": "#1834CE"
+    },
+    "graphite": {
+      "50": "#F5F5F0",
+      "100": "#E7E8E2",
+      "400": "#95978F",
+      "600": "#585B55",
+      "800": "#282B28",
+      "950": "#111411"
+    },
     "stone": {
       "0": "#FFFFFF",
       "50": "#FAFAF8",
@@ -130,6 +143,7 @@ export const primitives = {
   },
   "font": {
     "family": {
+      "grotesk": "Arial, Helvetica, sans-serif",
       "brand": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "text": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "mono": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -286,6 +300,15 @@ export const primitives = {
 
 export const semantic = {
   "color": {
+    "aperture": {
+      "paper": "#F5F5F0",
+      "surface": "#E7E8E2",
+      "ink": "#111411",
+      "muted": "#585B55",
+      "accent": "#2448FF",
+      "onAccent": "#FFFFFF",
+      "border": "#95978F"
+    },
     "brand": {
       "primary": "#16130F",
       "primaryHover": "#353128",
@@ -381,6 +404,7 @@ export const semantic = {
   },
   "font": {
     "family": {
+      "aperture": "Arial, Helvetica, sans-serif",
       "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
       "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -465,6 +489,19 @@ export const semantic = {
 } as const;
 
 export const components = {
+  "aperture": {
+    "paper": "#F5F5F0",
+    "surface": "#E7E8E2",
+    "ink": "#111411",
+    "muted": "#585B55",
+    "accent": "#2448FF",
+    "onAccent": "#FFFFFF",
+    "border": "#95978F",
+    "fontFamily": "Arial, Helvetica, sans-serif",
+    "markSize": "32px",
+    "actionHeight": "48px",
+    "panelRadius": "4px"
+  },
   "button": {
     "background": "#16130F",
     "backgroundHover": "#353128",
@@ -538,6 +575,15 @@ export const components = {
 export const semanticThemes = {
   "light": {
     "color": {
+      "aperture": {
+        "paper": "#F5F5F0",
+        "surface": "#E7E8E2",
+        "ink": "#111411",
+        "muted": "#585B55",
+        "accent": "#2448FF",
+        "onAccent": "#FFFFFF",
+        "border": "#95978F"
+      },
       "brand": {
         "primary": "#16130F",
         "primaryHover": "#353128",
@@ -633,6 +679,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -717,6 +764,15 @@ export const semanticThemes = {
   },
   "dark": {
     "color": {
+      "aperture": {
+        "paper": "#111411",
+        "surface": "#282B28",
+        "ink": "#F5F5F0",
+        "muted": "#95978F",
+        "accent": "#A5B4FF",
+        "onAccent": "#111411",
+        "border": "#585B55"
+      },
       "brand": {
         "primary": "#F1F0EB",
         "primaryHover": "#FFFFFF",
@@ -812,6 +868,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -896,6 +953,15 @@ export const semanticThemes = {
   },
   "highContrast": {
     "color": {
+      "aperture": {
+        "paper": "#FFFFFF",
+        "surface": "#FFFFFF",
+        "ink": "#111411",
+        "muted": "#111411",
+        "accent": "#1834CE",
+        "onAccent": "#FFFFFF",
+        "border": "#111411"
+      },
       "brand": {
         "primary": "#16130F",
         "primaryHover": "#211E18",
@@ -991,6 +1057,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -1075,6 +1142,15 @@ export const semanticThemes = {
   },
   "highContrastDark": {
     "color": {
+      "aperture": {
+        "paper": "#111411",
+        "surface": "#111411",
+        "ink": "#FFFFFF",
+        "muted": "#FFFFFF",
+        "accent": "#A5B4FF",
+        "onAccent": "#111411",
+        "border": "#FFFFFF"
+      },
       "brand": {
         "primary": "#FFFFFF",
         "primaryHover": "#F1F0EB",
@@ -1170,6 +1246,7 @@ export const semanticThemes = {
     },
     "font": {
       "family": {
+        "aperture": "Arial, Helvetica, sans-serif",
         "heading": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "body": "\"Lato\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
         "code": "\"JetBrains Mono\", \"SFMono-Regular\", Menlo, monospace"
@@ -1256,6 +1333,19 @@ export const semanticThemes = {
 
 export const componentThemes = {
   "light": {
+    "aperture": {
+      "paper": "#F5F5F0",
+      "surface": "#E7E8E2",
+      "ink": "#111411",
+      "muted": "#585B55",
+      "accent": "#2448FF",
+      "onAccent": "#FFFFFF",
+      "border": "#95978F",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#16130F",
       "backgroundHover": "#353128",
@@ -1326,6 +1416,19 @@ export const componentThemes = {
     }
   },
   "dark": {
+    "aperture": {
+      "paper": "#111411",
+      "surface": "#282B28",
+      "ink": "#F5F5F0",
+      "muted": "#95978F",
+      "accent": "#A5B4FF",
+      "onAccent": "#111411",
+      "border": "#585B55",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#F1F0EB",
       "backgroundHover": "#FFFFFF",
@@ -1396,6 +1499,19 @@ export const componentThemes = {
     }
   },
   "highContrast": {
+    "aperture": {
+      "paper": "#FFFFFF",
+      "surface": "#FFFFFF",
+      "ink": "#111411",
+      "muted": "#111411",
+      "accent": "#1834CE",
+      "onAccent": "#FFFFFF",
+      "border": "#111411",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#16130F",
       "backgroundHover": "#211E18",
@@ -1466,6 +1582,19 @@ export const componentThemes = {
     }
   },
   "highContrastDark": {
+    "aperture": {
+      "paper": "#111411",
+      "surface": "#111411",
+      "ink": "#FFFFFF",
+      "muted": "#FFFFFF",
+      "accent": "#A5B4FF",
+      "onAccent": "#111411",
+      "border": "#FFFFFF",
+      "fontFamily": "Arial, Helvetica, sans-serif",
+      "markSize": "32px",
+      "actionHeight": "48px",
+      "panelRadius": "4px"
+    },
     "button": {
       "background": "#FFFFFF",
       "backgroundHover": "#F1F0EB",
@@ -1540,6 +1669,19 @@ export const componentThemes = {
 export const cssVars = {
   "primitives": {
     "color": {
+      "cobalt": {
+        "200": "var(--color-cobalt-200)",
+        "500": "var(--color-cobalt-500)",
+        "700": "var(--color-cobalt-700)"
+      },
+      "graphite": {
+        "50": "var(--color-graphite-50)",
+        "100": "var(--color-graphite-100)",
+        "400": "var(--color-graphite-400)",
+        "600": "var(--color-graphite-600)",
+        "800": "var(--color-graphite-800)",
+        "950": "var(--color-graphite-950)"
+      },
       "stone": {
         "0": "var(--color-stone-0)",
         "50": "var(--color-stone-50)",
@@ -1653,6 +1795,7 @@ export const cssVars = {
     },
     "font": {
       "family": {
+        "grotesk": "var(--font-family-grotesk)",
         "brand": "var(--font-family-brand)",
         "text": "var(--font-family-text)",
         "mono": "var(--font-family-mono)"
@@ -1808,6 +1951,15 @@ export const cssVars = {
   },
   "semantic": {
     "color": {
+      "aperture": {
+        "paper": "var(--color-aperture-paper)",
+        "surface": "var(--color-aperture-surface)",
+        "ink": "var(--color-aperture-ink)",
+        "muted": "var(--color-aperture-muted)",
+        "accent": "var(--color-aperture-accent)",
+        "onAccent": "var(--color-aperture-on-accent)",
+        "border": "var(--color-aperture-border)"
+      },
       "brand": {
         "primary": "var(--color-brand-primary)",
         "primaryHover": "var(--color-brand-primary-hover)",
@@ -1903,6 +2055,7 @@ export const cssVars = {
     },
     "font": {
       "family": {
+        "aperture": "var(--font-family-aperture)",
         "heading": "var(--font-family-heading)",
         "body": "var(--font-family-body)",
         "code": "var(--font-family-code)"
@@ -1986,6 +2139,19 @@ export const cssVars = {
     }
   },
   "components": {
+    "aperture": {
+      "paper": "var(--component-aperture-paper)",
+      "surface": "var(--component-aperture-surface)",
+      "ink": "var(--component-aperture-ink)",
+      "muted": "var(--component-aperture-muted)",
+      "accent": "var(--component-aperture-accent)",
+      "onAccent": "var(--component-aperture-on-accent)",
+      "border": "var(--component-aperture-border)",
+      "fontFamily": "var(--component-aperture-font-family)",
+      "markSize": "var(--component-aperture-mark-size)",
+      "actionHeight": "var(--component-aperture-action-height)",
+      "panelRadius": "var(--component-aperture-panel-radius)"
+    },
     "button": {
       "background": "var(--component-button-background)",
       "backgroundHover": "var(--component-button-background-hover)",