@optiaxiom/globals 0.2.0-next.1 → 0.2.0

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)','blue.50':'var(--ax-colors-blue-50)','blue.100':'var(--ax-colors-blue-100)','blue.200':'var(--ax-colors-blue-200)','blue.300':'var(--ax-colors-blue-300)','blue.400':'var(--ax-colors-blue-400)','blue.500':'var(--ax-colors-blue-500)','blue.600':'var(--ax-colors-blue-600)','blue.700':'var(--ax-colors-blue-700)','blue.800':'var(--ax-colors-blue-800)','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)','cyan.50':'var(--ax-colors-cyan-50)','cyan.100':'var(--ax-colors-cyan-100)','cyan.200':'var(--ax-colors-cyan-200)','cyan.300':'var(--ax-colors-cyan-300)','cyan.400':'var(--ax-colors-cyan-400)','cyan.500':'var(--ax-colors-cyan-500)','cyan.600':'var(--ax-colors-cyan-600)','cyan.700':'var(--ax-colors-cyan-700)','cyan.800':'var(--ax-colors-cyan-800)','cyan.900':'var(--ax-colors-cyan-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.100':'var(--ax-colors-magenta-100)','magenta.200':'var(--ax-colors-magenta-200)','magenta.300':'var(--ax-colors-magenta-300)','magenta.400':'var(--ax-colors-magenta-400)','magenta.500':'var(--ax-colors-magenta-500)','magenta.600':'var(--ax-colors-magenta-600)','magenta.700':'var(--ax-colors-magenta-700)','magenta.800':'var(--ax-colors-magenta-800)','magenta.900':'var(--ax-colors-magenta-900)','neutral.00':'var(--ax-colors-neutral-00)','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/12':'var(--ax-colors-neutral-50-12)','neutral.50/18':'var(--ax-colors-neutral-50-18)','neutral.50/22':'var(--ax-colors-neutral-50-22)','neutral.50/32':'var(--ax-colors-neutral-50-32)','neutral.1200/4':'var(--ax-colors-neutral-1200-4)','neutral.1200/8':'var(--ax-colors-neutral-1200-8)','neutral.1200/16':'var(--ax-colors-neutral-1200-16)','neutral.1200/22':'var(--ax-colors-neutral-1200-22)','neutral.1200/32':'var(--ax-colors-neutral-1200-32)','purple.50':'var(--ax-colors-purple-50)','purple.100':'var(--ax-colors-purple-100)','purple.200':'var(--ax-colors-purple-200)','purple.300':'var(--ax-colors-purple-300)','purple.400':'var(--ax-colors-purple-400)','purple.500':'var(--ax-colors-purple-500)','purple.600':'var(--ax-colors-purple-600)','purple.700':'var(--ax-colors-purple-700)','purple.800':'var(--ax-colors-purple-800)','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)','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.accent':'var(--ax-colors-bg-accent)','bg.accent.hovered':'var(--ax-colors-bg-accent-hovered)','bg.accent.light':'var(--ax-colors-bg-accent-light)','bg.accent.pressed':'var(--ax-colors-bg-accent-pressed)','bg.accent.subtle':'var(--ax-colors-bg-accent-subtle)','bg.default':'var(--ax-colors-bg-default)','bg.default.inverse':'var(--ax-colors-bg-default-inverse)','bg.default.inverse.hovered':'var(--ax-colors-bg-default-inverse-hovered)','bg.default.inverse.pressed':'var(--ax-colors-bg-default-inverse-pressed)','bg.error':'var(--ax-colors-bg-error)','bg.error.hovered':'var(--ax-colors-bg-error-hovered)','bg.error.light':'var(--ax-colors-bg-error-light)','bg.error.pressed':'var(--ax-colors-bg-error-pressed)','bg.error.subtle':'var(--ax-colors-bg-error-subtle)','bg.information':'var(--ax-colors-bg-information)','bg.information.light':'var(--ax-colors-bg-information-light)','bg.information.subtle':'var(--ax-colors-bg-information-subtle)','bg.overlay':'var(--ax-colors-bg-overlay)','bg.page':'var(--ax-colors-bg-page)','bg.secondary':'var(--ax-colors-bg-secondary)','bg.secondary.hovered':'var(--ax-colors-bg-secondary-hovered)','bg.success':'var(--ax-colors-bg-success)','bg.success.hovered':'var(--ax-colors-bg-success-hovered)','bg.success.light':'var(--ax-colors-bg-success-light)','bg.success.subtle':'var(--ax-colors-bg-success-subtle)','bg.tertiary':'var(--ax-colors-bg-tertiary)','bg.tertiary.hovered':'var(--ax-colors-bg-tertiary-hovered)','bg.warning':'var(--ax-colors-bg-warning)','bg.warning.hovered':'var(--ax-colors-bg-warning-hovered)','bg.warning.light':'var(--ax-colors-bg-warning-light)','bg.warning.subtle':'var(--ax-colors-bg-warning-subtle)','border.accent':'var(--ax-colors-border-accent)','border.active':'var(--ax-colors-border-active)','border.active.hovered':'var(--ax-colors-border-active-hovered)','border.default':'var(--ax-colors-border-default)','border.default.hovered':'var(--ax-colors-border-default-hovered)','border.disabled':'var(--ax-colors-border-disabled)','border.error':'var(--ax-colors-border-error)','border.focus':'var(--ax-colors-border-focus)','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':'var(--ax-colors-fg-accent)','fg.accent.hovered':'var(--ax-colors-fg-accent-hovered)','fg.accent.strong':'var(--ax-colors-fg-accent-strong)','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.error.hovered':'var(--ax-colors-fg-error-hovered)','fg.error.strong':'var(--ax-colors-fg-error-strong)','fg.information':'var(--ax-colors-fg-information)','fg.information.strong':'var(--ax-colors-fg-information-strong)','fg.link':'var(--ax-colors-fg-link)','fg.link.hovered':'var(--ax-colors-fg-link-hovered)','fg.link.visited':'var(--ax-colors-fg-link-visited)','fg.secondary':'var(--ax-colors-fg-secondary)','fg.success':'var(--ax-colors-fg-success)','fg.success.hovered':'var(--ax-colors-fg-success-hovered)','fg.success.strong':'var(--ax-colors-fg-success-strong)','fg.tertiary':'var(--ax-colors-fg-tertiary)','fg.warning':'var(--ax-colors-fg-warning)','fg.warning.hovered':'var(--ax-colors-fg-warning-hovered)','fg.warning.strong':'var(--ax-colors-fg-warning-strong)','fg.white':'var(--ax-colors-fg-white)'},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)',tooltip:'var(--ax-zIndex-tooltip)'}};
+
+export { theme };

package/dist/toaster.js

@@ -12,13 +12,17 @@ const createToaster = () => {
     }
   };
   return {
-    store: {
-      getServerSnapshot: () => EMPTY,
-      getSnapshot: () => snapshot,
-      subscribe: (callback) => {
+    store: [
+      (callback) => {
         listeners.add(callback);
         return () => listeners.delete(callback);
-      }
+      },
+      () => snapshot,
+      () => EMPTY
+    ],
+    clear: () => {
+      snapshot = [];
+      emit();
     },
     create: (toast) => {
       const id2 = genId();

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,249 @@
+const colorPalette = {
+  current: "currentColor",
+  transparent: "transparent",
+  "blue.50": "#EDF6FF",
+  "blue.100": "#D7ECFC",
+  "blue.200": "#AEDBFF",
+  "blue.300": "#85C4F7",
+  "blue.400": "#47A7F5",
+  "blue.500": "#2094F3",
+  "blue.600": "#0B77D0",
+  "blue.700": "#095EA4",
+  "blue.800": "#064274",
+  "blue.900": "#032541",
+  "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",
+  "cyan.50": "#ECFEFF",
+  "cyan.100": "#CFFAFE",
+  "cyan.200": "#99F0F9",
+  "cyan.300": "#67E8F9",
+  "cyan.400": "#22D3EE",
+  "cyan.500": "#06B6D4",
+  "cyan.600": "#0891B2",
+  "cyan.700": "#0E7490",
+  "cyan.800": "#155E75",
+  "cyan.900": "#083344",
+  "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": "#FDF4FF",
+  "magenta.100": "#FAE8FF",
+  "magenta.200": "#F5D0FE",
+  "magenta.300": "#F0ABFC",
+  "magenta.400": "#D765E9",
+  "magenta.500": "#C026D3",
+  "magenta.600": "#A21CAF",
+  "magenta.700": "#86198F",
+  "magenta.800": "#701A75",
+  "magenta.900": "#4A044E",
+  "neutral.00": "#FFFFFF",
+  "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": "#1C212B",
+  "neutral.1000": "#1C2029",
+  "neutral.1100": "#171A23",
+  "neutral.1200": "#091E42",
+  "neutral.50/6": "#F9FAFC0F",
+  "neutral.50/12": "#F9FAFC1F",
+  "neutral.50/18": "#F9FAFC2E",
+  "neutral.50/22": "#F9FAFC38",
+  "neutral.50/32": "#F9FAFC52",
+  "neutral.1200/4": "#091E420A",
+  "neutral.1200/8": "#091E4214",
+  "neutral.1200/16": "#091E4229",
+  "neutral.1200/22": "#091E4238",
+  "neutral.1200/32": "#091E4252",
+  "purple.50": "#F1ECF8",
+  "purple.100": "#E5DCF4",
+  "purple.200": "#C4B1E2",
+  "purple.300": "#9570D1",
+  "purple.400": "#7E51C8",
+  "purple.500": "#693AB6",
+  "purple.600": "#532E8F",
+  "purple.700": "#412470",
+  "purple.800": "#331C59",
+  "purple.900": "#261542",
+  "red.50": "#FFF7F7",
+  "red.100": "#FFD7D7",
+  "red.200": "#FFB4B4",
+  "red.300": "#FC8B8B",
+  "red.400": "#F64F4F",
+  "red.500": "#CC1616",
+  "red.600": "#B21313",
+  "red.700": "#911D1D",
+  "red.800": "#601313",
+  "red.900": "#300A0A",
+  "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.accent": colorPalette["brand.500"],
+  "bg.accent.hovered": colorPalette["brand.600"],
+  "bg.accent.light": colorPalette["brand.200"],
+  "bg.accent.pressed": colorPalette["brand.700"],
+  "bg.accent.subtle": colorPalette["brand.50"],
+  "bg.default": colorPalette["neutral.00"],
+  "bg.default.inverse": colorPalette["neutral.800"],
+  "bg.default.inverse.hovered": colorPalette["neutral.900"],
+  "bg.default.inverse.pressed": colorPalette["neutral.1000"],
+  "bg.error": colorPalette["red.500"],
+  "bg.error.hovered": colorPalette["red.600"],
+  "bg.error.light": colorPalette["red.200"],
+  "bg.error.pressed": colorPalette["red.700"],
+  "bg.error.subtle": colorPalette["red.100"],
+  "bg.information": colorPalette["blue.600"],
+  "bg.information.light": colorPalette["blue.200"],
+  "bg.information.subtle": colorPalette["blue.100"],
+  "bg.overlay": colorPalette["neutral.1200/32"],
+  "bg.page": colorPalette["neutral.50"],
+  "bg.secondary": colorPalette["neutral.75"],
+  "bg.secondary.hovered": colorPalette["neutral.1200/8"],
+  "bg.success": colorPalette["green.600"],
+  "bg.success.hovered": colorPalette["green.700"],
+  "bg.success.light": colorPalette["green.200"],
+  "bg.success.subtle": colorPalette["green.100"],
+  "bg.tertiary": colorPalette["neutral.150"],
+  "bg.tertiary.hovered": colorPalette["neutral.200"],
+  "bg.warning": colorPalette["yellow.500"],
+  "bg.warning.hovered": colorPalette["yellow.600"],
+  "bg.warning.light": colorPalette["yellow.200"],
+  "bg.warning.subtle": colorPalette["yellow.100"],
+  "border.accent": colorPalette["brand.500"],
+  "border.active": colorPalette["neutral.500"],
+  "border.active.hovered": colorPalette["neutral.600"],
+  "border.default": colorPalette["neutral.200"],
+  "border.default.hovered": colorPalette["neutral.500"],
+  "border.disabled": colorPalette["neutral.75"],
+  "border.error": colorPalette["red.500"],
+  "border.focus": colorPalette["brand.400"],
+  "border.secondary": colorPalette["neutral.150"],
+  "border.success": colorPalette["green.500"],
+  "border.tertiary": colorPalette["neutral.100"],
+  "border.warning": colorPalette["yellow.500"],
+  "fg.accent": colorPalette["brand.500"],
+  "fg.accent.hovered": colorPalette["brand.600"],
+  "fg.accent.strong": colorPalette["brand.700"],
+  "fg.default": colorPalette["neutral.800"],
+  "fg.default.inverse": colorPalette["neutral.00"],
+  "fg.disabled": colorPalette["neutral.1200/32"],
+  "fg.error": colorPalette["red.500"],
+  "fg.error.hovered": colorPalette["red.600"],
+  "fg.error.strong": colorPalette["red.700"],
+  "fg.information": colorPalette["blue.500"],
+  "fg.information.strong": colorPalette["blue.700"],
+  "fg.link": colorPalette["brand.500"],
+  "fg.link.hovered": colorPalette["brand.600"],
+  "fg.link.visited": colorPalette["purple.500"],
+  "fg.secondary": colorPalette["neutral.700"],
+  "fg.success": colorPalette["green.500"],
+  "fg.success.hovered": colorPalette["green.600"],
+  "fg.success.strong": colorPalette["green.700"],
+  "fg.tertiary": colorPalette["neutral.600"],
+  "fg.warning": colorPalette["yellow.500"],
+  "fg.warning.hovered": colorPalette["yellow.600"],
+  "fg.warning.strong": colorPalette["yellow.700"],
+  "fg.white": colorPalette["neutral.00"]
+};
+const colorsDark = {
+  ...colorPalette,
+  "bg.accent": colorPalette["brand.400"],
+  "bg.accent.hovered": colorPalette["brand.400"],
+  "bg.accent.light": colorPalette["brand.800"],
+  "bg.accent.pressed": colorPalette["brand.600"],
+  "bg.accent.subtle": colorPalette["brand.900"],
+  "bg.default": colorPalette["neutral.1000"],
+  "bg.default.inverse": colorPalette["neutral.100"],
+  "bg.default.inverse.hovered": colorPalette["neutral.200"],
+  "bg.default.inverse.pressed": colorPalette["neutral.300"],
+  "bg.error": colorPalette["red.500"],
+  "bg.error.hovered": colorPalette["red.400"],
+  "bg.error.light": colorPalette["red.700"],
+  "bg.error.pressed": colorPalette["red.600"],
+  "bg.error.subtle": colorPalette["red.800"],
+  "bg.information": colorPalette["blue.600"],
+  "bg.information.light": colorPalette["blue.800"],
+  "bg.information.subtle": colorPalette["blue.900"],
+  "bg.overlay": colorPalette["neutral.50/32"],
+  "bg.page": colorPalette["neutral.1100"],
+  "bg.secondary": colorPalette["neutral.900"],
+  "bg.secondary.hovered": colorPalette["neutral.50/12"],
+  "bg.success": colorPalette["green.600"],
+  "bg.success.hovered": colorPalette["green.400"],
+  "bg.success.light": colorPalette["green.800"],
+  "bg.success.subtle": colorPalette["green.900"],
+  "bg.tertiary": colorPalette["neutral.700"],
+  "bg.tertiary.hovered": colorPalette["neutral.50/18"],
+  "bg.warning": colorPalette["yellow.500"],
+  "bg.warning.hovered": colorPalette["yellow.400"],
+  "bg.warning.light": colorPalette["yellow.800"],
+  "bg.warning.subtle": colorPalette["yellow.900"],
+  "border.accent": colorPalette["brand.300"],
+  "border.active": colorPalette["neutral.700"],
+  "border.active.hovered": colorPalette["neutral.600"],
+  "border.default": colorPalette["neutral.600"],
+  "border.default.hovered": colorPalette["neutral.500"],
+  "border.disabled": colorPalette["neutral.800"],
+  "border.error": colorPalette["red.200"],
+  "border.focus": colorPalette["brand.300"],
+  "border.secondary": colorPalette["neutral.700"],
+  "border.success": colorPalette["green.500"],
+  "border.tertiary": colorPalette["neutral.800"],
+  "border.warning": colorPalette["yellow.500"],
+  "fg.accent": colorPalette["brand.300"],
+  "fg.accent.hovered": colorPalette["brand.500"],
+  "fg.accent.strong": colorPalette["brand.400"],
+  "fg.default": colorPalette["neutral.75"],
+  "fg.default.inverse": colorPalette["neutral.800"],
+  "fg.disabled": colorPalette["neutral.50/32"],
+  "fg.error": colorPalette["red.300"],
+  "fg.error.hovered": colorPalette["red.600"],
+  "fg.error.strong": colorPalette["red.200"],
+  "fg.information": colorPalette["blue.300"],
+  "fg.information.strong": colorPalette["blue.200"],
+  "fg.link": colorPalette["brand.300"],
+  "fg.link.hovered": colorPalette["brand.500"],
+  "fg.link.visited": colorPalette["brand.300"],
+  "fg.secondary": colorPalette["neutral.200"],
+  "fg.success": colorPalette["green.300"],
+  "fg.success.hovered": colorPalette["green.600"],
+  "fg.success.strong": colorPalette["green.200"],
+  "fg.tertiary": colorPalette["neutral.500"],
+  "fg.warning": colorPalette["yellow.300"],
+  "fg.warning.hovered": colorPalette["yellow.600"],
+  "fg.warning.strong": colorPalette["yellow.200"],
+  "fg.white": colorPalette["neutral.00"]
+};
+
+export { colorPalette, 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,14 @@
+const zIndex = {
+  "0": "0",
+  "10": "10",
+  "20": "20",
+  "30": "30",
+  "40": "40",
+  "50": "50",
+  auto: "auto",
+  popover: "3000",
+  toast: "3010",
+  tooltip: "10000"
+};
+
+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.1",
+  "version": "0.2.0",
   "files": [
     "dist/**",
     "LICENSE"
@@ -21,12 +22,16 @@
       "import": "./dist/fonts.js"
     }
   },
+  "sideEffects": [
+    "./dist/fonts.js"
+  ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@fontsource-variable/fira-code": "^5.0.20",
+    "@fontsource-variable/fira-code": "^5.1.0",
     "inter-ui": "^4.0.2"
   },
   "devDependencies": {
+    "@vanilla-extract/css": "^1.16.0",
     "@optiaxiom/shared": "^0.0.0"
   },
   "peerDependencies": {