@optiaxiom/globals 0.2.0-next.0 → 0.2.0-next.2

package/dist/index.js

@@ -1,2 +1,4 @@
 export { AxiomVersionContext } from './context.js';
+export { theme } from './theme-css.js';
 export { createToaster, toaster } from './toaster.js';
+export { tokens, tokensDark } from './tokens/index.js';

package/dist/theme-css.js

@@ -0,0 +1,3 @@
+var theme = {borderRadius:{xs:'var(--ax-borderRadius-xs)',sm:'var(--ax-borderRadius-sm)',md:'var(--ax-borderRadius-md)',lg:'var(--ax-borderRadius-lg)',xl:'var(--ax-borderRadius-xl)',full:'var(--ax-borderRadius-full)',none:'var(--ax-borderRadius-none)'},borderWidth:{'0':'var(--ax-borderWidth-0)','1':'var(--ax-borderWidth-1)','2':'var(--ax-borderWidth-2)','4':'var(--ax-borderWidth-4)'},boxShadow:{xs:'var(--ax-boxShadow-xs)',sm:'var(--ax-boxShadow-sm)',md:'var(--ax-boxShadow-md)',lg:'var(--ax-boxShadow-lg)',xl:'var(--ax-boxShadow-xl)',inner:'var(--ax-boxShadow-inner)',none:'var(--ax-boxShadow-none)'},colors:{current:'var(--ax-colors-current)',transparent:'var(--ax-colors-transparent)',black:'var(--ax-colors-black)',white:'var(--ax-colors-white)','aqua.50':'var(--ax-colors-aqua-50)','aqua.200':'var(--ax-colors-aqua-200)','aqua.500':'var(--ax-colors-aqua-500)','aqua.600':'var(--ax-colors-aqua-600)','blue.50':'var(--ax-colors-blue-50)','blue.200':'var(--ax-colors-blue-200)','blue.500':'var(--ax-colors-blue-500)','blue.600':'var(--ax-colors-blue-600)','blue.900':'var(--ax-colors-blue-900)','brand.50':'var(--ax-colors-brand-50)','brand.100':'var(--ax-colors-brand-100)','brand.200':'var(--ax-colors-brand-200)','brand.300':'var(--ax-colors-brand-300)','brand.400':'var(--ax-colors-brand-400)','brand.500':'var(--ax-colors-brand-500)','brand.600':'var(--ax-colors-brand-600)','brand.700':'var(--ax-colors-brand-700)','brand.800':'var(--ax-colors-brand-800)','brand.900':'var(--ax-colors-brand-900)','dark.50':'var(--ax-colors-dark-50)','dark.200':'var(--ax-colors-dark-200)','dark.500':'var(--ax-colors-dark-500)','dark.600':'var(--ax-colors-dark-600)','gray.50':'var(--ax-colors-gray-50)','gray.100':'var(--ax-colors-gray-100)','gray.200':'var(--ax-colors-gray-200)','gray.300':'var(--ax-colors-gray-300)','gray.400':'var(--ax-colors-gray-400)','gray.500':'var(--ax-colors-gray-500)','gray.600':'var(--ax-colors-gray-600)','gray.700':'var(--ax-colors-gray-700)','gray.800':'var(--ax-colors-gray-800)','gray.900':'var(--ax-colors-gray-900)','green.50':'var(--ax-colors-green-50)','green.100':'var(--ax-colors-green-100)','green.200':'var(--ax-colors-green-200)','green.300':'var(--ax-colors-green-300)','green.400':'var(--ax-colors-green-400)','green.500':'var(--ax-colors-green-500)','green.600':'var(--ax-colors-green-600)','green.700':'var(--ax-colors-green-700)','green.800':'var(--ax-colors-green-800)','green.900':'var(--ax-colors-green-900)','magenta.50':'var(--ax-colors-magenta-50)','magenta.200':'var(--ax-colors-magenta-200)','magenta.500':'var(--ax-colors-magenta-500)','magenta.600':'var(--ax-colors-magenta-600)','neutral.50':'var(--ax-colors-neutral-50)','neutral.75':'var(--ax-colors-neutral-75)','neutral.100':'var(--ax-colors-neutral-100)','neutral.150':'var(--ax-colors-neutral-150)','neutral.200':'var(--ax-colors-neutral-200)','neutral.300':'var(--ax-colors-neutral-300)','neutral.500':'var(--ax-colors-neutral-500)','neutral.600':'var(--ax-colors-neutral-600)','neutral.700':'var(--ax-colors-neutral-700)','neutral.800':'var(--ax-colors-neutral-800)','neutral.900':'var(--ax-colors-neutral-900)','neutral.1000':'var(--ax-colors-neutral-1000)','neutral.1100':'var(--ax-colors-neutral-1100)','neutral.1200':'var(--ax-colors-neutral-1200)','neutral.50/6':'var(--ax-colors-neutral-50-6)','neutral.50/32':'var(--ax-colors-neutral-50-32)','neutral.1200/4':'var(--ax-colors-neutral-1200-4)','neutral.1200/12':'var(--ax-colors-neutral-1200-12)','neutral.1200/18':'var(--ax-colors-neutral-1200-18)','neutral.1200/22':'var(--ax-colors-neutral-1200-22)','neutral.1200/32':'var(--ax-colors-neutral-1200-32)','orange.50':'var(--ax-colors-orange-50)','orange.200':'var(--ax-colors-orange-200)','orange.500':'var(--ax-colors-orange-500)','orange.600':'var(--ax-colors-orange-600)','purple.50':'var(--ax-colors-purple-50)','purple.200':'var(--ax-colors-purple-200)','purple.500':'var(--ax-colors-purple-500)','purple.600':'var(--ax-colors-purple-600)','purple.900':'var(--ax-colors-purple-900)','red.50':'var(--ax-colors-red-50)','red.100':'var(--ax-colors-red-100)','red.200':'var(--ax-colors-red-200)','red.300':'var(--ax-colors-red-300)','red.400':'var(--ax-colors-red-400)','red.500':'var(--ax-colors-red-500)','red.600':'var(--ax-colors-red-600)','red.700':'var(--ax-colors-red-700)','red.800':'var(--ax-colors-red-800)','red.900':'var(--ax-colors-red-900)','slate.50':'var(--ax-colors-slate-50)','slate.100':'var(--ax-colors-slate-100)','slate.200':'var(--ax-colors-slate-200)','slate.300':'var(--ax-colors-slate-300)','slate.400':'var(--ax-colors-slate-400)','slate.500':'var(--ax-colors-slate-500)','slate.600':'var(--ax-colors-slate-600)','slate.700':'var(--ax-colors-slate-700)','slate.800':'var(--ax-colors-slate-800)','slate.900':'var(--ax-colors-slate-900)','slate.950':'var(--ax-colors-slate-950)','yellow.50':'var(--ax-colors-yellow-50)','yellow.100':'var(--ax-colors-yellow-100)','yellow.200':'var(--ax-colors-yellow-200)','yellow.300':'var(--ax-colors-yellow-300)','yellow.400':'var(--ax-colors-yellow-400)','yellow.500':'var(--ax-colors-yellow-500)','yellow.600':'var(--ax-colors-yellow-600)','yellow.700':'var(--ax-colors-yellow-700)','yellow.800':'var(--ax-colors-yellow-800)','yellow.900':'var(--ax-colors-yellow-900)','bg.brand':'var(--ax-colors-bg-brand)','bg.brand.solid':'var(--ax-colors-bg-brand-solid)','bg.brand.solid.hover':'var(--ax-colors-bg-brand-solid-hover)','bg.disabled':'var(--ax-colors-bg-disabled)','bg.discovery':'var(--ax-colors-bg-discovery)','bg.error':'var(--ax-colors-bg-error)','bg.error.solid':'var(--ax-colors-bg-error-solid)','bg.error.solid.hover':'var(--ax-colors-bg-error-solid-hover)','bg.information':'var(--ax-colors-bg-information)','bg.information.solid':'var(--ax-colors-bg-information-solid)','bg.input.disabled':'var(--ax-colors-bg-input-disabled)','bg.neutral':'var(--ax-colors-bg-neutral)','bg.neutral.inverse':'var(--ax-colors-bg-neutral-inverse)','bg.neutral.inverse.hover':'var(--ax-colors-bg-neutral-inverse-hover)','bg.neutral.solid':'var(--ax-colors-bg-neutral-solid)','bg.neutral.solid.hover':'var(--ax-colors-bg-neutral-solid-hover)','bg.success':'var(--ax-colors-bg-success)','bg.success.solid':'var(--ax-colors-bg-success-solid)','bg.success.solid.hover':'var(--ax-colors-bg-success-solid-hover)','bg.warning':'var(--ax-colors-bg-warning)','bg.warning.solid':'var(--ax-colors-bg-warning-solid)','bg.warning.solid.hover':'var(--ax-colors-bg-warning-solid-hover)','border.active':'var(--ax-colors-border-active)','border.active.hover':'var(--ax-colors-border-active-hover)','border.brand':'var(--ax-colors-border-brand)','border.default':'var(--ax-colors-border-default)','border.disabled':'var(--ax-colors-border-disabled)','border.error':'var(--ax-colors-border-error)','border.secondary':'var(--ax-colors-border-secondary)','border.success':'var(--ax-colors-border-success)','border.tertiary':'var(--ax-colors-border-tertiary)','border.warning':'var(--ax-colors-border-warning)','fg.accent.blue':'var(--ax-colors-fg-accent-blue)','fg.accent.magenta':'var(--ax-colors-fg-accent-magenta)','fg.accent.purple':'var(--ax-colors-fg-accent-purple)','fg.accent.red':'var(--ax-colors-fg-accent-red)','fg.brand':'var(--ax-colors-fg-brand)','fg.default':'var(--ax-colors-fg-default)','fg.default.inverse':'var(--ax-colors-fg-default-inverse)','fg.disabled':'var(--ax-colors-fg-disabled)','fg.error':'var(--ax-colors-fg-error)','fg.information':'var(--ax-colors-fg-information)','fg.link':'var(--ax-colors-fg-link)','fg.link.hover':'var(--ax-colors-fg-link-hover)','fg.link.visited':'var(--ax-colors-fg-link-visited)','fg.secondary':'var(--ax-colors-fg-secondary)','fg.success':'var(--ax-colors-fg-success)','fg.tertiary':'var(--ax-colors-fg-tertiary)','fg.warning':'var(--ax-colors-fg-warning)','outline.brand':'var(--ax-colors-outline-brand)',overlay:'var(--ax-colors-overlay)',surface:'var(--ax-colors-surface)'},fontFamily:{mono:'var(--ax-fontFamily-mono)',sans:'var(--ax-fontFamily-sans)'},fontSize:{xs:{fontSize:'var(--ax-fontSize-xs-fontSize)',lineHeight:'var(--ax-fontSize-xs-lineHeight)'},sm:{fontSize:'var(--ax-fontSize-sm-fontSize)',lineHeight:'var(--ax-fontSize-sm-lineHeight)'},md:{fontSize:'var(--ax-fontSize-md-fontSize)',lineHeight:'var(--ax-fontSize-md-lineHeight)'},lg:{fontSize:'var(--ax-fontSize-lg-fontSize)',lineHeight:'var(--ax-fontSize-lg-lineHeight)'},xl:{fontSize:'var(--ax-fontSize-xl-fontSize)',lineHeight:'var(--ax-fontSize-xl-lineHeight)'},'2xl':{fontSize:'var(--ax-fontSize-2xl-fontSize)',lineHeight:'var(--ax-fontSize-2xl-lineHeight)'},'3xl':{fontSize:'var(--ax-fontSize-3xl-fontSize)',lineHeight:'var(--ax-fontSize-3xl-lineHeight)'},'4xl':{fontSize:'var(--ax-fontSize-4xl-fontSize)',lineHeight:'var(--ax-fontSize-4xl-lineHeight)'},'5xl':{fontSize:'var(--ax-fontSize-5xl-fontSize)',lineHeight:'var(--ax-fontSize-5xl-lineHeight)'},'6xl':{fontSize:'var(--ax-fontSize-6xl-fontSize)',lineHeight:'var(--ax-fontSize-6xl-lineHeight)'},'7xl':{fontSize:'var(--ax-fontSize-7xl-fontSize)',lineHeight:'var(--ax-fontSize-7xl-lineHeight)'}},letterSpacing:{tighter:'var(--ax-letterSpacing-tighter)',tight:'var(--ax-letterSpacing-tight)',normal:'var(--ax-letterSpacing-normal)',wide:'var(--ax-letterSpacing-wide)',wider:'var(--ax-letterSpacing-wider)',widest:'var(--ax-letterSpacing-widest)'},lineHeight:{none:'var(--ax-lineHeight-none)',tight:'var(--ax-lineHeight-tight)',normal:'var(--ax-lineHeight-normal)',loose:'var(--ax-lineHeight-loose)'},margins:{'0':'var(--ax-margins-0)','2':'var(--ax-margins-2)','4':'var(--ax-margins-4)','6':'var(--ax-margins-6)','8':'var(--ax-margins-8)','10':'var(--ax-margins-10)','12':'var(--ax-margins-12)','16':'var(--ax-margins-16)','20':'var(--ax-margins-20)','24':'var(--ax-margins-24)','32':'var(--ax-margins-32)','48':'var(--ax-margins-48)','64':'var(--ax-margins-64)','80':'var(--ax-margins-80)',xs:'var(--ax-margins-xs)',sm:'var(--ax-margins-sm)',md:'var(--ax-margins-md)',lg:'var(--ax-margins-lg)',xl:'var(--ax-margins-xl)','-xs':'var(--ax-margins--xs)','-sm':'var(--ax-margins--sm)','-md':'var(--ax-margins--md)','-lg':'var(--ax-margins--lg)','-xl':'var(--ax-margins--xl)','-2':'var(--ax-margins--2)','-4':'var(--ax-margins--4)','-6':'var(--ax-margins--6)','-8':'var(--ax-margins--8)','-10':'var(--ax-margins--10)','-12':'var(--ax-margins--12)','-16':'var(--ax-margins--16)','-24':'var(--ax-margins--24)','-32':'var(--ax-margins--32)','-48':'var(--ax-margins--48)','-64':'var(--ax-margins--64)','-80':'var(--ax-margins--80)'},maxSize:{xs:'var(--ax-maxSize-xs)',sm:'var(--ax-maxSize-sm)',md:'var(--ax-maxSize-md)',lg:'var(--ax-maxSize-lg)',xl:'var(--ax-maxSize-xl)','2xl':'var(--ax-maxSize-2xl)',full:'var(--ax-maxSize-full)'},screens:{sm:'var(--ax-screens-sm)',md:'var(--ax-screens-md)',lg:'var(--ax-screens-lg)'},size:{'0':'var(--ax-size-0)','1':'var(--ax-size-1)','2':'var(--ax-size-2)','4':'var(--ax-size-4)','6':'var(--ax-size-6)','8':'var(--ax-size-8)','12':'var(--ax-size-12)','16':'var(--ax-size-16)','20':'var(--ax-size-20)','24':'var(--ax-size-24)','32':'var(--ax-size-32)','40':'var(--ax-size-40)','48':'var(--ax-size-48)','56':'var(--ax-size-56)','64':'var(--ax-size-64)','80':'var(--ax-size-80)','96':'var(--ax-size-96)','112':'var(--ax-size-112)','128':'var(--ax-size-128)','144':'var(--ax-size-144)','160':'var(--ax-size-160)','176':'var(--ax-size-176)','192':'var(--ax-size-192)','208':'var(--ax-size-208)','224':'var(--ax-size-224)','240':'var(--ax-size-240)','256':'var(--ax-size-256)','288':'var(--ax-size-288)','320':'var(--ax-size-320)','384':'var(--ax-size-384)',xs:'var(--ax-size-xs)',sm:'var(--ax-size-sm)',md:'var(--ax-size-md)',lg:'var(--ax-size-lg)',xl:'var(--ax-size-xl)','5xl':'var(--ax-size-5xl)','1/2':'var(--ax-size-1-2)','1/3':'var(--ax-size-1-3)','2/3':'var(--ax-size-2-3)','1/4':'var(--ax-size-1-4)','2/4':'var(--ax-size-2-4)','3/4':'var(--ax-size-3-4)',auto:'var(--ax-size-auto)',fit:'var(--ax-size-fit)',full:'var(--ax-size-full)',max:'var(--ax-size-max)',min:'var(--ax-size-min)'},spacing:{'0':'var(--ax-spacing-0)','2':'var(--ax-spacing-2)','4':'var(--ax-spacing-4)','6':'var(--ax-spacing-6)','8':'var(--ax-spacing-8)','10':'var(--ax-spacing-10)','12':'var(--ax-spacing-12)','16':'var(--ax-spacing-16)','20':'var(--ax-spacing-20)','24':'var(--ax-spacing-24)','32':'var(--ax-spacing-32)','48':'var(--ax-spacing-48)','64':'var(--ax-spacing-64)','80':'var(--ax-spacing-80)',xs:'var(--ax-spacing-xs)',sm:'var(--ax-spacing-sm)',md:'var(--ax-spacing-md)',lg:'var(--ax-spacing-lg)',xl:'var(--ax-spacing-xl)'},zIndex:{'0':'var(--ax-zIndex-0)','10':'var(--ax-zIndex-10)','20':'var(--ax-zIndex-20)','30':'var(--ax-zIndex-30)','40':'var(--ax-zIndex-40)','50':'var(--ax-zIndex-50)',auto:'var(--ax-zIndex-auto)',popover:'var(--ax-zIndex-popover)',toast:'var(--ax-zIndex-toast)'}};
+
+export { theme };

package/dist/tokens/borderRadius.js

@@ -0,0 +1,13 @@
+import { rem } from './rem.js';
+
+const borderRadius = {
+  xs: rem("2px"),
+  sm: rem("4px"),
+  md: rem("6px"),
+  lg: rem("8px"),
+  xl: rem("12px"),
+  full: "9999px",
+  none: "0"
+};
+
+export { borderRadius };

package/dist/tokens/borderWidth.js

@@ -0,0 +1,8 @@
+const borderWidth = {
+  "0": "0",
+  "1": "1px",
+  "2": "2px",
+  "4": "4px"
+};
+
+export { borderWidth };

package/dist/tokens/boxShadow.js

@@ -0,0 +1,11 @@
+const boxShadow = {
+  xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  inner: "inset 0 0 6px 0 rgb(0 0 0 / 0.1);",
+  none: "0 0 #0000"
+};
+
+export { boxShadow };

package/dist/tokens/colors.js

@@ -0,0 +1,253 @@
+const colorPalette = {
+  current: "currentColor",
+  transparent: "transparent",
+  black: "#000000",
+  white: "#FFFFFF",
+  "aqua.50": "#E5F7FB",
+  "aqua.200": "#9AE5EF",
+  "aqua.500": "#00BDD6",
+  "aqua.600": "#007A8A",
+  "blue.50": "#E7F3FE",
+  "blue.200": "#A8D5FA",
+  "blue.500": "#2094F3",
+  "blue.600": "#1668AC",
+  "blue.900": "#1C2B41",
+  "brand.50": "#F0F3FF",
+  "brand.100": "#CDD8FC",
+  "brand.200": "#B3C3FF",
+  "brand.300": "#6A8FFC",
+  "brand.400": "#2E66F7",
+  "brand.500": "#0037FF",
+  "brand.600": "#002CCC",
+  "brand.700": "#002894",
+  "brand.800": "#001666",
+  "brand.900": "#000B33",
+  "dark.50": "#d9d9d9",
+  "dark.200": "#9e9e9e",
+  "dark.500": "#707070",
+  "dark.600": "#080736",
+  "gray.50": "#f9fafb",
+  "gray.100": "#f3f4f6",
+  "gray.200": "#e5e7eb",
+  "gray.300": "#d1d5db",
+  "gray.400": "#9ca3af",
+  "gray.500": "#6b7280",
+  "gray.600": "#4b5563",
+  "gray.700": "#374151",
+  "gray.800": "#1f2937",
+  "gray.900": "#111827",
+  "green.50": "#E9F7F1",
+  "green.100": "#D1F0E1",
+  "green.200": "#A5E1C3",
+  "green.300": "#7CD2A7",
+  "green.400": "#5AC58A",
+  "green.500": "#03A65D",
+  "green.600": "#038047",
+  "green.700": "#24663E",
+  "green.800": "#17492B",
+  "green.900": "#082415",
+  "magenta.50": "#F8E7F5",
+  "magenta.200": "#E39CD6",
+  "magenta.500": "#B80597",
+  "magenta.600": "#81046A",
+  "neutral.50": "#F9FAFC",
+  "neutral.75": "#F5F6FA",
+  "neutral.100": "#E9EDF5",
+  "neutral.150": "#DADFEB",
+  "neutral.200": "#CACFDC",
+  "neutral.300": "#b8becb",
+  "neutral.500": "#868FA4",
+  "neutral.600": "#626A81",
+  "neutral.700": "#4F576E",
+  "neutral.800": "#2E3442",
+  "neutral.900": "#262B37",
+  "neutral.1000": "#1C2029",
+  "neutral.1100": "#171A23",
+  "neutral.1200": "#091E42",
+  "neutral.50/6": "#F9FAFC0F",
+  "neutral.50/32": "#F9FAFC52",
+  "neutral.1200/4": "#091E420A",
+  "neutral.1200/12": "#091E421F",
+  "neutral.1200/18": "#091E422E",
+  "neutral.1200/22": "#091E4238",
+  "neutral.1200/32": "#091E4252",
+  "orange.50": "#fff5e5",
+  "orange.200": "#ffd699",
+  "orange.500": "#ff9900",
+  "orange.600": "#a36200",
+  "purple.50": "#F1ECF8",
+  "purple.200": "#C4B1E2",
+  "purple.500": "#693AB6",
+  "purple.600": "#4A297F",
+  "purple.900": "#2B273F",
+  "red.50": "#FFF7F7",
+  "red.100": "#FCD6D6",
+  "red.200": "#F9ACAC",
+  "red.300": "#FC8B8B",
+  "red.400": "#E31818",
+  "red.500": "#CC1616",
+  "red.600": "#B21313",
+  "red.700": "#911D1D",
+  "red.800": "#601313",
+  "red.900": "#300A0A",
+  "slate.50": "#f8fafc",
+  "slate.100": "#f1f5f9",
+  "slate.200": "#e2e8f0",
+  "slate.300": "#cbd5e1",
+  "slate.400": "#94a3b8",
+  "slate.500": "#64748b",
+  "slate.600": "#475569",
+  "slate.700": "#334155",
+  "slate.800": "#1e293b",
+  "slate.900": "#0f172a",
+  "slate.950": "#020617",
+  "yellow.50": "#FFFAEA",
+  "yellow.100": "#FEF1C6",
+  "yellow.200": "#FEDF88",
+  "yellow.300": "#FFC84B",
+  "yellow.400": "#FDB022",
+  "yellow.500": "#F79008",
+  "yellow.600": "#DC6903",
+  "yellow.700": "#B54707",
+  "yellow.800": "#7A2E0D",
+  "yellow.900": "#4E1D09"
+};
+const colors = {
+  ...colorPalette,
+  "bg.brand": colorPalette["brand.50"],
+  "bg.brand.solid": colorPalette["brand.500"],
+  "bg.brand.solid.hover": colorPalette["brand.600"],
+  "bg.disabled": colorPalette["neutral.1200/18"],
+  "bg.discovery": colorPalette["purple.50"],
+  "bg.error": colorPalette["red.50"],
+  "bg.error.solid": colorPalette["red.500"],
+  "bg.error.solid.hover": colorPalette["red.600"],
+  "bg.information": colorPalette["blue.50"],
+  "bg.information.solid": colorPalette["blue.600"],
+  "bg.input.disabled": colorPalette["neutral.1200/4"],
+  "bg.neutral": colorPalette["neutral.75"],
+  "bg.neutral.inverse": colorPalette["neutral.800"],
+  "bg.neutral.inverse.hover": colorPalette["neutral.900"],
+  "bg.neutral.solid": colorPalette["neutral.200"],
+  "bg.neutral.solid.hover": colorPalette["neutral.300"],
+  "bg.success": colorPalette["green.50"],
+  "bg.success.solid": colorPalette["green.500"],
+  "bg.success.solid.hover": colorPalette["green.600"],
+  "bg.warning": colorPalette["yellow.50"],
+  "bg.warning.solid": colorPalette["yellow.500"],
+  "bg.warning.solid.hover": colorPalette["yellow.600"],
+  "border.active": colorPalette["neutral.500"],
+  "border.active.hover": colorPalette["neutral.600"],
+  "border.brand": colorPalette["brand.500"],
+  "border.default": colorPalette["neutral.200"],
+  "border.disabled": colorPalette["neutral.75"],
+  "border.error": colorPalette["red.500"],
+  "border.secondary": colorPalette["neutral.150"],
+  "border.success": colorPalette["green.500"],
+  "border.tertiary": colorPalette["neutral.100"],
+  "border.warning": colorPalette["yellow.500"],
+  "fg.accent.blue": colorPalette["blue.500"],
+  "fg.accent.magenta": colorPalette["magenta.600"],
+  "fg.accent.purple": colorPalette["purple.600"],
+  "fg.accent.red": colorPalette["red.500"],
+  /**
+   * Primary brand color useful for accented text, highlights, and subheadings
+   */
+  "fg.brand": colorPalette["brand.700"],
+  /**
+   * Primary text color for page headings
+   */
+  "fg.default": colorPalette["neutral.800"],
+  /**
+   * Primary text color when used on solid color bg
+   */
+  "fg.default.inverse": colorPalette["white"],
+  /**
+   * Disabled text color for more subtle, lower-contrast, and non-interactive text
+   */
+  "fg.disabled": colorPalette["neutral.1200/32"],
+  /**
+   * Error text color for danger and error states
+   */
+  "fg.error": colorPalette["red.700"],
+  "fg.information": colorPalette["blue.600"],
+  "fg.link": colorPalette["brand.500"],
+  "fg.link.hover": colorPalette["brand.600"],
+  "fg.link.visited": colorPalette["purple.500"],
+  /**
+   * Secondary text color for labels and section headings
+   */
+  "fg.secondary": colorPalette["neutral.700"],
+  /**
+   * Success text color
+   */
+  "fg.success": colorPalette["green.700"],
+  /**
+   * Tertiary text color for supporting, paragraph, and placeholder text
+   */
+  "fg.tertiary": colorPalette["neutral.600"],
+  /**
+   * Warning text color
+   */
+  "fg.warning": colorPalette["yellow.700"],
+  "outline.brand": colorPalette["brand.300"],
+  overlay: colorPalette["neutral.1200/32"],
+  surface: colorPalette["white"]
+};
+const colorsDark = {
+  ...colorPalette,
+  "bg.brand": colorPalette["brand.50"],
+  "bg.brand.solid": colorPalette["brand.500"],
+  "bg.brand.solid.hover": colorPalette["brand.600"],
+  "bg.disabled": colorPalette["neutral.1000"],
+  "bg.discovery": colorPalette["purple.900"],
+  "bg.error": colorPalette["red.50"],
+  "bg.error.solid": colorPalette["red.500"],
+  "bg.error.solid.hover": colorPalette["red.600"],
+  "bg.information": colorPalette["blue.900"],
+  "bg.information.solid": colorPalette["blue.600"],
+  "bg.input.disabled": colorPalette["neutral.1200/4"],
+  "bg.neutral": colorPalette["slate.800"],
+  "bg.neutral.inverse": colorPalette["neutral.100"],
+  "bg.neutral.inverse.hover": colorPalette["neutral.200"],
+  "bg.neutral.solid": colorPalette["neutral.100"],
+  "bg.neutral.solid.hover": colorPalette["neutral.800"],
+  "bg.success": colorPalette["green.900"],
+  "bg.success.solid": colorPalette["green.500"],
+  "bg.success.solid.hover": colorPalette["green.600"],
+  "bg.warning": colorPalette["yellow.50"],
+  "bg.warning.solid": colorPalette["yellow.500"],
+  "bg.warning.solid.hover": colorPalette["yellow.600"],
+  "border.active": colorPalette["neutral.500"],
+  "border.active.hover": colorPalette["neutral.600"],
+  "border.brand": colorPalette["brand.500"],
+  "border.default": colorPalette["gray.800"],
+  "border.disabled": colorPalette["neutral.75"],
+  "border.error": colorPalette["red.500"],
+  "border.secondary": colorPalette["neutral.150"],
+  "border.success": colorPalette["green.500"],
+  "border.tertiary": colorPalette["neutral.900"],
+  "border.warning": colorPalette["yellow.500"],
+  "fg.accent.blue": colorPalette["blue.200"],
+  "fg.accent.magenta": colorPalette["magenta.200"],
+  "fg.accent.purple": colorPalette["purple.200"],
+  "fg.accent.red": colorPalette["red.200"],
+  "fg.brand": colorPalette["brand.500"],
+  "fg.default": colorPalette["gray.100"],
+  "fg.default.inverse": colorPalette["neutral.900"],
+  "fg.disabled": colorPalette["neutral.500"],
+  "fg.error": colorPalette["red.500"],
+  "fg.information": colorPalette["blue.600"],
+  "fg.link": colorPalette["white"],
+  "fg.link.hover": colorPalette["white"],
+  "fg.link.visited": colorPalette["purple.200"],
+  "fg.secondary": colorPalette["slate.400"],
+  "fg.success": colorPalette["green.200"],
+  "fg.tertiary": colorPalette["neutral.600"],
+  "fg.warning": colorPalette["yellow.500"],
+  "outline.brand": colorPalette["brand.300"],
+  overlay: colorPalette["neutral.50/32"],
+  surface: colorPalette["gray.900"]
+};
+
+export { colors, colorsDark };

package/dist/tokens/fontFamily.js

@@ -0,0 +1,6 @@
+const fontFamily = {
+  mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
+  sans: "InterVariable, system-ui, sans-serif"
+};
+
+export { fontFamily };

package/dist/tokens/fontSize.js

@@ -0,0 +1,50 @@
+import { rem } from './rem.js';
+
+const fontSize = {
+  xs: {
+    fontSize: rem("10px"),
+    lineHeight: rem("14px")
+  },
+  sm: {
+    fontSize: rem("12px"),
+    lineHeight: rem("16px")
+  },
+  md: {
+    fontSize: rem("14px"),
+    lineHeight: rem("20px")
+  },
+  lg: {
+    fontSize: rem("16px"),
+    lineHeight: rem("24px")
+  },
+  xl: {
+    fontSize: rem("18px"),
+    lineHeight: rem("28px")
+  },
+  "2xl": {
+    fontSize: rem("20px"),
+    lineHeight: rem("28px")
+  },
+  "3xl": {
+    fontSize: rem("24px"),
+    lineHeight: rem("32px")
+  },
+  "4xl": {
+    fontSize: rem("30px"),
+    lineHeight: rem("36px")
+  },
+  "5xl": {
+    fontSize: rem("36px"),
+    lineHeight: rem("40px")
+  },
+  "6xl": {
+    fontSize: rem("48px"),
+    lineHeight: "1"
+  },
+  "7xl": {
+    fontSize: rem("60px"),
+    lineHeight: "1"
+  }
+};
+
+export { fontSize };

package/dist/tokens/index.js

@@ -0,0 +1,37 @@
+import { borderRadius } from './borderRadius.js';
+import { borderWidth } from './borderWidth.js';
+import { boxShadow } from './boxShadow.js';
+import { colors, colorsDark } from './colors.js';
+import { fontFamily } from './fontFamily.js';
+import { fontSize } from './fontSize.js';
+import { letterSpacing } from './letterSpacing.js';
+import { lineHeight } from './lineHeight.js';
+import { margins } from './margins.js';
+import { maxSize } from './maxSize.js';
+import { screens } from './screens.js';
+import { size } from './size.js';
+import { spacing } from './spacing.js';
+import { zIndex } from './zIndex.js';
+
+const tokens = {
+  borderRadius,
+  borderWidth,
+  boxShadow,
+  colors,
+  fontFamily,
+  fontSize,
+  letterSpacing,
+  lineHeight,
+  margins,
+  maxSize,
+  screens,
+  size,
+  spacing,
+  zIndex
+};
+const tokensDark = {
+  ...tokens,
+  colors: colorsDark
+};
+
+export { tokens, tokensDark };

package/dist/tokens/letterSpacing.js

@@ -0,0 +1,10 @@
+const letterSpacing = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+
+export { letterSpacing };

package/dist/tokens/lineHeight.js

@@ -0,0 +1,8 @@
+const lineHeight = {
+  none: "1",
+  tight: "1.25",
+  normal: "1.5",
+  loose: "2"
+};
+
+export { lineHeight };

package/dist/tokens/margins.js

@@ -0,0 +1,25 @@
+import { rem } from './rem.js';
+import { spacing } from './spacing.js';
+
+const margins = {
+  ...spacing,
+  "-xs": rem("-8px"),
+  "-sm": rem("-12px"),
+  "-md": rem("-16px"),
+  "-lg": rem("-24px"),
+  "-xl": rem("-32px"),
+  "-2": rem("-2px"),
+  "-4": rem("-4px"),
+  "-6": rem("-6px"),
+  "-8": rem("-8px"),
+  "-10": rem("-10px"),
+  "-12": rem("-12px"),
+  "-16": rem("-16px"),
+  "-24": rem("-24px"),
+  "-32": rem("-32px"),
+  "-48": rem("-48px"),
+  "-64": rem("-64px"),
+  "-80": rem("-80px")
+};
+
+export { margins };

package/dist/tokens/maxSize.js

@@ -0,0 +1,13 @@
+import { rem } from './rem.js';
+
+const maxSize = {
+  xs: rem("320px"),
+  sm: rem("384px"),
+  md: rem("448px"),
+  lg: rem("512px"),
+  xl: rem("576px"),
+  "2xl": rem("672px"),
+  full: "100%"
+};
+
+export { maxSize };

package/dist/tokens/rem.js

@@ -0,0 +1,3 @@
+const rem = (px) => `${parseFloat((parseFloat(px.slice(0, -2)) / 16).toFixed(3))}rem`;
+
+export { rem };

package/dist/tokens/screens.js

@@ -0,0 +1,9 @@
+import { rem } from './rem.js';
+
+const screens = {
+  sm: rem("600px"),
+  md: rem("900px"),
+  lg: rem("1200px")
+};
+
+export { screens };

package/dist/tokens/size.js

@@ -0,0 +1,53 @@
+import { rem } from './rem.js';
+
+const size = {
+  xs: rem("20px"),
+  sm: rem("24px"),
+  md: rem("32px"),
+  lg: rem("40px"),
+  xl: rem("48px"),
+  "5xl": rem("80px"),
+  "0": "0",
+  "1": rem("1px"),
+  "2": rem("2px"),
+  "4": rem("4px"),
+  "6": rem("6px"),
+  "8": rem("8px"),
+  "12": rem("12px"),
+  "16": rem("16px"),
+  "20": rem("20px"),
+  "24": rem("24px"),
+  "32": rem("32px"),
+  "40": rem("40px"),
+  "48": rem("48px"),
+  "56": rem("56px"),
+  "64": rem("64px"),
+  "80": rem("80px"),
+  "96": rem("96px"),
+  "112": rem("112px"),
+  "128": rem("128px"),
+  "144": rem("144px"),
+  "160": rem("160px"),
+  "176": rem("176px"),
+  "192": rem("192px"),
+  "208": rem("208px"),
+  "224": rem("224px"),
+  "240": rem("240px"),
+  "256": rem("256px"),
+  "288": rem("288px"),
+  "320": rem("320px"),
+  "384": rem("384px"),
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666666%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  auto: "auto",
+  fit: "fit-content",
+  full: "100%",
+  max: "max-content",
+  min: "min-content"
+};
+
+export { size };

package/dist/tokens/spacing.js

@@ -0,0 +1,25 @@
+import { rem } from './rem.js';
+
+const spacing = {
+  xs: rem("8px"),
+  sm: rem("12px"),
+  md: rem("16px"),
+  lg: rem("24px"),
+  xl: rem("32px"),
+  "0": "0",
+  "2": rem("2px"),
+  "4": rem("4px"),
+  "6": rem("6px"),
+  "8": rem("8px"),
+  "10": rem("10px"),
+  "12": rem("12px"),
+  "16": rem("16px"),
+  "20": rem("20px"),
+  "24": rem("24px"),
+  "32": rem("32px"),
+  "48": rem("48px"),
+  "64": rem("64px"),
+  "80": rem("80px")
+};
+
+export { spacing };

package/dist/tokens/zIndex.js

@@ -0,0 +1,13 @@
+const zIndex = {
+  "0": "0",
+  "10": "10",
+  "20": "20",
+  "30": "30",
+  "40": "40",
+  "50": "50",
+  auto: "auto",
+  popover: "3000",
+  toast: "3010"
+};
+
+export { zIndex };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@optiaxiom/globals",
+  "homepage": "https://github.com/optimizely-axiom/optiaxiom/tree/master/packages/globals#readme",
   "repository": {
     "directory": "packages/globals",
     "type": "git",
     "url": "https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.2.0-next.0",
+  "version": "0.2.0-next.2",
   "files": [
     "dist/**",
     "LICENSE"
@@ -16,9 +17,23 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./fonts": {
+      "import": "./dist/fonts.js"
     }
   },
+  "sideEffects": [
+    "./dist/fonts.js"
+  ],
   "types": "dist/index.d.ts",
+  "dependencies": {
+    "@fontsource-variable/fira-code": "^5.0.20",
+    "inter-ui": "^4.0.2"
+  },
+  "devDependencies": {
+    "@vanilla-extract/css": "^1.15.5",
+    "@optiaxiom/shared": "^0.0.0"
+  },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"