@neo-design/foundations 1.0.0-rc.4

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@neo-design/foundations",
+  "version": "1.0.0-rc.4",
+  "description": "Neo — the system foundations: semantic tokens in JS and CSS, icons and the plain CSS layer. It does not depend on React or Material UI.",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./tokens.css": "./tokens/neo-color.css",
+    "./foundations.css": "./tokens/neo-foundations.css",
+    "./icons.css": "./icons/icons.css",
+    "./sprite": "./icons/sprite.mjs",
+    "./icons.json": "./icons/index.json",
+    "./css/*": "./css/*",
+    "./tokens/api-js.mjs": "./tokens/api-js.mjs",
+    "./tokens/breakpoints.mjs": "./tokens/breakpoints.mjs",
+    "./tokens/color-semantic.mjs": "./tokens/color-semantic.mjs",
+    "./tokens/color.mjs": "./tokens/color.mjs",
+    "./tokens/component-tokens.mjs": "./tokens/component-tokens.mjs",
+    "./tokens/container.mjs": "./tokens/container.mjs",
+    "./tokens/iconSize.mjs": "./tokens/iconSize.mjs",
+    "./tokens/radius.mjs": "./tokens/radius.mjs",
+    "./tokens/shadows.mjs": "./tokens/shadows.mjs",
+    "./tokens/spacing.mjs": "./tokens/spacing.mjs",
+    "./tokens/stroke.mjs": "./tokens/stroke.mjs",
+    "./tokens/typography.mjs": "./tokens/typography.mjs",
+    "./icon-aliases.mjs": "./icon-aliases.mjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "tokens",
+    "icons",
+    "css",
+    "icon-aliases.mjs",
+    "!icons/svg",
+    "!icons/icons.svg",
+    "!icons/_demo.html"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

package/tokens/_brand.mjs

@@ -0,0 +1,3 @@
+// packages/foundations/tokens/_brand.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+export const P = 'neo';
+export const FILE = 'neo';

package/tokens/_primitives.mjs

@@ -0,0 +1,44 @@
+// packages/foundations/tokens/_primitives.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+
+
+export const ramp = {
+  slate:  { 50: '#F4F7F9', 100: '#E2E9EE', 200: '#BECDD8', 300: '#9BB3C3', 400: '#7A99AD', 500: '#5B7F95', 600: '#45667A', 700: '#304D5F', 800: '#1F3644', 900: '#0F202B' },
+  brand:  { 50: '#FFF4F3', 100: '#FFE5E3', 200: '#FFC7C3', 300: '#FFA7A3', 400: '#FF8481', 500: '#FF585C', 600: '#D2353F', 700: '#9B1020', 800: '#720012', 900: '#410006' },
+  red:    { 50: '#FEF2F2', 100: '#FDE0E1', 200: '#F6B4B8', 300: '#EF848B', 400: '#E4515E', 500: '#D62839', 600: '#B71C2C', 700: '#8F1421', 800: '#660D17', 900: '#40060D' },
+  green:  { 50: '#F3F9F3', 100: '#DBECDC', 200: '#AED2B2', 300: '#7EB986', 400: '#519E5F', 500: '#1E833A', 600: '#006B27', 700: '#00531D', 800: '#003C12', 900: '#002608' },
+  yellow: { 50: '#FCF6EF', 100: '#FEECD8', 200: '#FED9AF', 300: '#FFC580', 400: '#FCB150', 500: '#F59E0B', 600: '#BF7900', 700: '#8B5700', 800: '#5A3600', 900: '#2E1900' },
+  blue:   { 50: '#F3F7FF', 100: '#D6E4FF', 200: '#9EBEFB', 300: '#6797F5', 400: '#366FE5', 500: '#0043CE', 600: '#0036AF', 700: '#002A90', 800: '#001E73', 900: '#001358' },
+  gray:   { 50: '#F7F7F7', 100: '#E7E7E7', 200: '#C9C9C9', 300: '#ABABAB', 400: '#8F8F8F', 500: '#737373', 600: '#5C5C5C', 700: '#464646', 800: '#313131', 900: '#1E1E1E' },
+  aqua:   { 50: '#F1F9F7', 100: '#DBF0ED', 200: '#B0DED8', 300: '#81CCC3', 400: '#50B8AE', 500: '#00A499', 600: '#008178', 700: '#006059', 800: '#00413C', 900: '#002421' },
+  pink:   { 50: '#FCEEF7', 100: '#F8D3EB', 200: '#EFAED8', 300: '#E189C2', 400: '#D265AC', 500: '#C44197', 600: '#A02C77', 700: '#781C58', 800: '#51103A', 900: '#2C071F' },
+  purple: { 50: '#F8F5FF', 100: '#ECE4FF', 200: '#D6C1FF', 300: '#C19DFF', 400: '#AD78FB', 500: '#9753ED', 600: '#7B38C9', 700: '#5F20A1', 800: '#430D77', 900: '#2A0050' },
+  sky:    { 50: '#EDF4FD', 100: '#D1E3FA', 200: '#A5C8F3', 300: '#79AAE7', 400: '#5692DC', 500: '#3077CF', 600: '#235DA4', 700: '#18457C', 800: '#0E2D53', 900: '#06182D' },
+};
+
+export const global = { white: '#FFFFFF', black: '#000000', transparent: '#FFFFFF00', overlay: '#00000099', whiteAlpha8: '#FFFFFF14', whiteAlpha16: '#FFFFFF29' };
+
+export const type = {
+  family: `'Noto Sans', system-ui, sans-serif`,
+  weight: { regular: 400, medium: 500, bold: 700 },
+  size:   { 50: 12, 100: 14, 200: 16, 300: 18, 400: 20, 500: 24, 600: 32, 700: 40, 800: 48, 900: 64 },
+  line:   { 50: 16, 100: 20, 200: 24, 300: 26, 400: 28, 500: 32, 600: 40, 700: 48, 800: 64, 900: 72 },
+  letterSpacing: 0,
+  paragraph: { lg: 28, md: 24, sm: 20 },
+};
+
+export const space    = { none: 0, 50: 4, 100: 8, 150: 12, 200: 16, 250: 20, 300: 24, 400: 32, 500: 40, 600: 48, 700: 56, 800: 64, 900: 72, 1000: 80 };
+export const radius   = { 0: 0, 50: 4, 100: 8, 150: 12, 200: 16, 300: 24, 400: 32, 500: 40, full: 999 };
+export const stroke   = { 0: 0, 25: 1, 50: 2, 75: 4 };
+export const iconSize = { 200: 16, 250: 20, 300: 24, 400: 32, 500: 40, 600: 48, 700: 56, 800: 64 };
+
+export const shadow = {
+  0: '0px 0px 0px 0px transparent',
+  1: '0px 2px 4px 0px rgba(49,49,49,0.08)',
+  2: '0px 4px 12px 0px rgba(49,49,49,0.10)',
+  3: '0px 8px 24px 0px rgba(49,49,49,0.12)',
+  4: '0px -4px 8px 0px rgba(49,49,49,0.10)',
+};
+
+export const compat = {
+  space: { 6: 6, 18: 18, 28: 28 },
+};

package/tokens/_util.mjs

@@ -0,0 +1,12 @@
+// packages/foundations/tokens/_util.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { P } from './_brand.mjs';
+
+export const REM_BASE = 16;
+
+export const rem = (px) => `${+(px / REM_BASE).toFixed(4)}rem`;
+
+export const dualPxVars = (group, scale) =>
+  Object.fromEntries(Object.entries(scale).flatMap(([k, v]) => [
+    [`--${P}-${group}-${k}`, `${v}px`],
+    [`--${P}-${group}-${k}-rem`, rem(v)],
+  ]));

package/tokens/api-js.mjs

@@ -0,0 +1,11 @@
+// packages/foundations/tokens/api-js.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+export { tokens as color, cssVar } from './color-semantic.mjs';
+
+import { tokens as _tokens, cssVar as _cssVar } from './color-semantic.mjs';
+import { space } from './spacing.mjs';
+import { radius } from './radius.mjs';
+import { stroke } from './stroke.mjs';
+import { iconSize } from './iconSize.mjs';
+
+export const colorVars = Object.fromEntries(Object.keys(_tokens).map((k) => [k, `var(${_cssVar(k)})`]));
+export const scale = { space, radius, stroke, iconSize };

package/tokens/breakpoints.mjs

@@ -0,0 +1,8 @@
+// packages/foundations/tokens/breakpoints.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { dualPxVars } from './_util.mjs';
+
+export const breakpoints = { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1536 };
+
+export const themeSlice = { breakpoints: { values: { ...breakpoints } } };
+
+export const cssVars = dualPxVars('breakpoint', breakpoints);

package/tokens/color-semantic.mjs

@@ -0,0 +1,47 @@
+// packages/foundations/tokens/color-semantic.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { ramp, global } from './_primitives.mjs';
+
+const W = global.white, TR = global.transparent, WA8 = global.whiteAlpha8, WA16 = global.whiteAlpha16, OV = global.overlay;
+const s = ramp.slate, g = ramp.gray, co = ramp.brand, cr = ramp.red, gr = ramp.green, y = ramp.yellow, b = ramp.blue;
+
+export const tokens = {
+  'surface/base/default': W, 'surface/base/secondary': s[50], 'surface/base/inverse': s[900], 'surface/base/overlay': OV,
+
+  'fill/base/default': W, 'fill/base/light': g[50], 'fill/base/medium': g[100], 'fill/base/strong': g[500], 'fill/base/disabled': g[50], 'fill/base/transparent': TR, 'fill/base/inverse': s[900],
+  'fill/primary/default': s[800], 'fill/primary/hover': s[700], 'fill/primary/active': s[900],
+  'fill/primary/inverse/default': W, 'fill/primary/inverse/hover': s[50], 'fill/primary/inverse/active': s[100],
+  'fill/secondary/default': s[100], 'fill/secondary/hover': s[200], 'fill/secondary/active': s[300],
+  'fill/secondary/inverse/default': TR, 'fill/secondary/inverse/hover': WA8, 'fill/secondary/inverse/active': WA16,
+  'fill/tertiary/default': TR, 'fill/tertiary/hover': s[50], 'fill/tertiary/active': s[100],
+  'fill/tertiary/inverse/default': TR, 'fill/tertiary/inverse/hover': WA8, 'fill/tertiary/inverse/active': WA16,
+  'fill/brand/primary/default': co[500], 'fill/brand/primary/hover': co[600], 'fill/brand/primary/active': co[700],
+  'fill/brand/secondary/default': co[100], 'fill/brand/secondary/hover': co[200], 'fill/brand/secondary/active': co[300],
+  'fill/brand/tertiary/default': TR, 'fill/brand/tertiary/hover': co[50], 'fill/brand/tertiary/active': co[100],
+  'fill/semantic/info/soft': b[50], 'fill/semantic/info/solid': b[500],
+  'fill/semantic/success/soft': gr[50], 'fill/semantic/success/solid': gr[500],
+  'fill/semantic/warning/soft': y[50], 'fill/semantic/warning/solid': y[600],
+  'fill/semantic/error/soft': cr[50], 'fill/semantic/error/solid': cr[500],
+  'fill/deco/1/soft': ramp.aqua[100],   'fill/deco/1/solid': ramp.aqua[600],
+  'fill/deco/2/soft': ramp.purple[100], 'fill/deco/2/solid': ramp.purple[600],
+  'fill/deco/3/soft': s[100],           'fill/deco/3/solid': s[600],
+  'fill/deco/4/soft': ramp.pink[100],   'fill/deco/4/solid': ramp.pink[500],
+  'fill/deco/5/soft': ramp.sky[100],    'fill/deco/5/solid': ramp.sky[500],
+  'fill/deco/6/soft': co[100],          'fill/deco/6/solid': co[500],
+
+  'text/base/default': s[900], 'text/base/secondary': g[600], 'text/base/disabled': g[300], 'text/base/contrast': W,
+  'text/base/brand': co[500], 'text/base/brand-strong': co[700],
+  'text/semantic/info': b[700], 'text/semantic/success': gr[700], 'text/semantic/warning': y[700], 'text/semantic/error': cr[700],
+
+  'icon/base/default': s[900], 'icon/base/secondary': g[500], 'icon/base/disabled': g[200], 'icon/base/contrast': W,
+  'icon/base/brand-solid': co[500], 'icon/base/brand-soft': co[200], 'icon/base/brand-strong': co[700],
+  'icon/semantic/info': b[600], 'icon/semantic/success': gr[600], 'icon/semantic/warning': y[600], 'icon/semantic/error': cr[600],
+
+  'border/base/default': g[400], 'border/base/secondary': g[100], 'border/base/disabled': g[100], 'border/base/contrast': W, 'border/base/focus': s[900],
+  'border/base/brand': co[500],
+  'border/semantic/info': b[200], 'border/semantic/success': gr[200], 'border/semantic/warning': y[200], 'border/semantic/error-soft': cr[200], 'border/semantic/error-solid': cr[700],
+
+  'focus/ring/default': b[500], 'focus/ring/inverse': W, 'focus/gap/default': b[50], 'focus/gap/inverse': s[800],
+};
+
+export const cssVar = (name) => '--' + name.split('/').join('--');
+export const cssVars = Object.fromEntries(Object.entries(tokens).map(([n, v]) => [cssVar(n), v]));

package/tokens/color.mjs

@@ -0,0 +1,58 @@
+// packages/foundations/tokens/color.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { ramp, global } from './_primitives.mjs';
+import { tokens as T } from './color-semantic.mjs';
+
+const W = global.white;
+
+export const palette = {
+  primary:   { main: T['fill/primary/default'],   light: T['fill/primary/hover'],  dark: T['fill/primary/active'],   contrastText: T['text/base/contrast'] },
+  secondary: { main: T['fill/secondary/default'],  light: T['surface/base/secondary'],   dark: T['fill/secondary/active'], contrastText: T['text/base/default'] },
+  error:     { main: T['fill/semantic/error/solid'], light: T['fill/semantic/error/soft'], dark: T['text/semantic/error'], contrastText: T['text/base/contrast'] },
+  warning:   { main: T['fill/semantic/warning/solid'],  light: T['fill/semantic/warning/soft'],  dark: T['text/semantic/warning'],  contrastText: T['text/base/default'] },
+  info:      { main: T['fill/semantic/info/solid'],     light: T['fill/semantic/info/soft'],     dark: T['text/semantic/info'],     contrastText: T['text/base/contrast'] },
+  success:   { main: T['fill/semantic/success/solid'],  light: T['fill/semantic/success/soft'],  dark: T['text/semantic/success'],  contrastText: T['text/base/contrast'] },
+
+  text:       { primary: T['text/base/default'], secondary: T['text/base/secondary'], disabled: T['text/base/disabled'] },
+  background: { default: T['surface/base/default'], paper: T['fill/base/default'] },
+  divider:    T['border/base/secondary'],
+  common:     { black: global.black, white: W },
+  grey:       ramp.gray,
+
+  action: {
+    active:             T['icon/base/default'],
+    hover:              T['fill/tertiary/hover'],
+    selected:           T['fill/tertiary/active'],
+    disabled:           T['text/base/disabled'],
+    disabledBackground: T['fill/base/disabled'],
+  },
+};
+
+
+palette.brand = { main: T['fill/brand/primary/default'], light: T['fill/brand/secondary/default'], dark: T['fill/brand/primary/active'], contrastText: T['text/base/contrast'], hover: T['fill/brand/primary/hover'], active: T['fill/brand/primary/active'], subtle: T['fill/brand/secondary/default'] };
+
+palette.status = {
+  error:  { bg: T['fill/semantic/error/soft'], text: T['text/semantic/error'], icon: T['icon/semantic/error'], border: T['border/semantic/error-soft'], solid: T['fill/semantic/error/solid'] },
+  info:    { bg: T['fill/semantic/info/soft'],    text: T['text/semantic/info'],    icon: T['icon/semantic/info'],    border: T['border/semantic/info'],    solid: T['fill/semantic/info/solid'] },
+  success: { bg: T['fill/semantic/success/soft'], text: T['text/semantic/success'], icon: T['icon/semantic/success'], border: T['border/semantic/success'], solid: T['fill/semantic/success/solid'] },
+  warning: { bg: T['fill/semantic/warning/soft'], text: T['text/semantic/warning'], icon: T['icon/semantic/warning'], border: T['border/semantic/warning'], solid: T['fill/semantic/warning/solid'] },
+};
+
+palette.deco = {
+  1: { soft: T['fill/deco/1/soft'], solid: T['fill/deco/1/solid'] },
+  2: { soft: T['fill/deco/2/soft'], solid: T['fill/deco/2/solid'] },
+  3: { soft: T['fill/deco/3/soft'], solid: T['fill/deco/3/solid'] },
+  4: { soft: T['fill/deco/4/soft'], solid: T['fill/deco/4/solid'] },
+  5: { soft: T['fill/deco/5/soft'], solid: T['fill/deco/5/solid'] },
+};
+
+palette.focus = { ring: T['focus/ring/default'], gap: T['focus/gap/default'], inverse: T['focus/ring/inverse'], gapInverse: T['focus/gap/inverse'] };
+
+palette.border = { default: T['border/base/default'], focus: T['border/base/focus'], disabled: T['border/base/disabled'], secondary: T['border/base/secondary'], brand: T['border/base/brand'], inverse: T['border/base/contrast'], errorSolid: T['border/semantic/error-solid'] };
+
+palette.icon = { default: T['icon/base/default'], secondary: T['icon/base/secondary'], disabled: T['icon/base/disabled'], inverse: T['icon/base/contrast'], brand: T['icon/base/brand-solid'], brandSoft: T['icon/base/brand-soft'] };
+
+palette.text.inverse = T['text/base/contrast'];
+palette.text.brand = T['text/base/brand'];
+palette.background.inverse = T['surface/base/inverse'];
+
+export const themeSlice = { palette };

package/tokens/component-tokens.mjs

@@ -0,0 +1,24 @@
+// packages/foundations/tokens/component-tokens.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { rem } from './_util.mjs';
+import { P } from './_brand.mjs';
+
+export const component = {
+  button: { height: { sm: 32, md: 40, lg: 48 } },
+  switch: { width: 48, height: 44, trackHeight: 24, thumbTravel: 24 },
+  input: { height: 44 },
+  radio: { dot: 10 },
+  menu: { minWidth: 200 },
+  menuItem: { minHeight: 40 },
+};
+
+export const themeSlice = { neo: { component } };
+
+const kebab = (s) => s.replace(/([A-Z])/g, '-$1').toLowerCase();
+const flat = [];
+const walk = (obj, path) => { for (const [k, v] of Object.entries(obj)) { const p = [...path, kebab(k)]; typeof v === 'object' ? walk(v, p) : flat.push([p.join('-'), v]); } };
+walk(component, []);
+
+export const cssVars = Object.fromEntries(flat.flatMap(([name, v]) => [
+  [`--${P}-${name}`, `${v}px`],
+  [`--${P}-${name}-rem`, rem(v)],
+]));

package/tokens/container.mjs

@@ -0,0 +1,8 @@
+// packages/foundations/tokens/container.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { dualPxVars } from './_util.mjs';
+
+export const container = { content: 1180, wide: 1320 };
+
+export const themeSlice = { neo: { container: { ...container } } };
+
+export const cssVars = dualPxVars('container', container);

package/tokens/iconSize.mjs

@@ -0,0 +1,18 @@
+// packages/foundations/tokens/iconSize.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { iconSize as P } from './_primitives.mjs';
+import { dualPxVars } from './_util.mjs';
+
+export const iconSize = {
+  xs:    P[200],
+  sm:    P[250],
+  md:    P[300],
+  lg:    P[400],
+  xl:    P[500],
+  '2xl': P[600],
+  '3xl': P[700],
+  '4xl': P[800],
+};
+
+export const themeSlice = { neo: { iconSize } };
+
+export const cssVars = dualPxVars('icon-size', iconSize);

package/tokens/neo-color.css

@@ -0,0 +1,97 @@
+/* packages/foundations/tokens/neo-color.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+:root {
+  --surface--base--default: #FFFFFF;
+  --surface--base--secondary: #F4F7F9;
+  --surface--base--inverse: #0F202B;
+  --surface--base--overlay: #00000099;
+  --fill--base--default: #FFFFFF;
+  --fill--base--light: #F7F7F7;
+  --fill--base--medium: #E7E7E7;
+  --fill--base--strong: #737373;
+  --fill--base--disabled: #F7F7F7;
+  --fill--base--transparent: #FFFFFF00;
+  --fill--base--inverse: #0F202B;
+  --fill--primary--default: #1F3644;
+  --fill--primary--hover: #304D5F;
+  --fill--primary--active: #0F202B;
+  --fill--primary--inverse--default: #FFFFFF;
+  --fill--primary--inverse--hover: #F4F7F9;
+  --fill--primary--inverse--active: #E2E9EE;
+  --fill--secondary--default: #E2E9EE;
+  --fill--secondary--hover: #BECDD8;
+  --fill--secondary--active: #9BB3C3;
+  --fill--secondary--inverse--default: #FFFFFF00;
+  --fill--secondary--inverse--hover: #FFFFFF14;
+  --fill--secondary--inverse--active: #FFFFFF29;
+  --fill--tertiary--default: #FFFFFF00;
+  --fill--tertiary--hover: #F4F7F9;
+  --fill--tertiary--active: #E2E9EE;
+  --fill--tertiary--inverse--default: #FFFFFF00;
+  --fill--tertiary--inverse--hover: #FFFFFF14;
+  --fill--tertiary--inverse--active: #FFFFFF29;
+  --fill--brand--primary--default: #FF585C;
+  --fill--brand--primary--hover: #D2353F;
+  --fill--brand--primary--active: #9B1020;
+  --fill--brand--secondary--default: #FFE5E3;
+  --fill--brand--secondary--hover: #FFC7C3;
+  --fill--brand--secondary--active: #FFA7A3;
+  --fill--brand--tertiary--default: #FFFFFF00;
+  --fill--brand--tertiary--hover: #FFF4F3;
+  --fill--brand--tertiary--active: #FFE5E3;
+  --fill--semantic--info--soft: #F3F7FF;
+  --fill--semantic--info--solid: #0043CE;
+  --fill--semantic--success--soft: #F3F9F3;
+  --fill--semantic--success--solid: #1E833A;
+  --fill--semantic--warning--soft: #FCF6EF;
+  --fill--semantic--warning--solid: #BF7900;
+  --fill--semantic--error--soft: #FEF2F2;
+  --fill--semantic--error--solid: #D62839;
+  --fill--deco--1--soft: #DBF0ED;
+  --fill--deco--1--solid: #008178;
+  --fill--deco--2--soft: #ECE4FF;
+  --fill--deco--2--solid: #7B38C9;
+  --fill--deco--3--soft: #E2E9EE;
+  --fill--deco--3--solid: #45667A;
+  --fill--deco--4--soft: #F8D3EB;
+  --fill--deco--4--solid: #C44197;
+  --fill--deco--5--soft: #D1E3FA;
+  --fill--deco--5--solid: #3077CF;
+  --fill--deco--6--soft: #FFE5E3;
+  --fill--deco--6--solid: #FF585C;
+  --text--base--default: #0F202B;
+  --text--base--secondary: #5C5C5C;
+  --text--base--disabled: #ABABAB;
+  --text--base--contrast: #FFFFFF;
+  --text--base--brand: #FF585C;
+  --text--base--brand-strong: #9B1020;
+  --text--semantic--info: #002A90;
+  --text--semantic--success: #00531D;
+  --text--semantic--warning: #8B5700;
+  --text--semantic--error: #8F1421;
+  --icon--base--default: #0F202B;
+  --icon--base--secondary: #737373;
+  --icon--base--disabled: #C9C9C9;
+  --icon--base--contrast: #FFFFFF;
+  --icon--base--brand-solid: #FF585C;
+  --icon--base--brand-soft: #FFC7C3;
+  --icon--base--brand-strong: #9B1020;
+  --icon--semantic--info: #0036AF;
+  --icon--semantic--success: #006B27;
+  --icon--semantic--warning: #BF7900;
+  --icon--semantic--error: #B71C2C;
+  --border--base--default: #8F8F8F;
+  --border--base--secondary: #E7E7E7;
+  --border--base--disabled: #E7E7E7;
+  --border--base--contrast: #FFFFFF;
+  --border--base--focus: #0F202B;
+  --border--base--brand: #FF585C;
+  --border--semantic--info: #9EBEFB;
+  --border--semantic--success: #AED2B2;
+  --border--semantic--warning: #FED9AF;
+  --border--semantic--error-soft: #F6B4B8;
+  --border--semantic--error-solid: #8F1421;
+  --focus--ring--default: #0043CE;
+  --focus--ring--inverse: #FFFFFF;
+  --focus--gap--default: #F3F7FF;
+  --focus--gap--inverse: #1F3644;
+}

package/tokens/neo-foundations.css

@@ -0,0 +1,250 @@
+/* packages/foundations/tokens/neo-foundations.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+:root {
+  --neo-breakpoint-xs: 0px;
+  --neo-breakpoint-xs-rem: 0rem;
+  --neo-breakpoint-sm: 576px;
+  --neo-breakpoint-sm-rem: 36rem;
+  --neo-breakpoint-md: 768px;
+  --neo-breakpoint-md-rem: 48rem;
+  --neo-breakpoint-lg: 992px;
+  --neo-breakpoint-lg-rem: 62rem;
+  --neo-breakpoint-xl: 1200px;
+  --neo-breakpoint-xl-rem: 75rem;
+  --neo-breakpoint-xxl: 1536px;
+  --neo-breakpoint-xxl-rem: 96rem;
+
+  --neo-space-none: 0px;
+  --neo-space-none-rem: 0rem;
+  --neo-space-xs: 4px;
+  --neo-space-xs-rem: 0.25rem;
+  --neo-space-sm: 8px;
+  --neo-space-sm-rem: 0.5rem;
+  --neo-space-md: 12px;
+  --neo-space-md-rem: 0.75rem;
+  --neo-space-lg: 16px;
+  --neo-space-lg-rem: 1rem;
+  --neo-space-xl: 24px;
+  --neo-space-xl-rem: 1.5rem;
+  --neo-space-2xl: 32px;
+  --neo-space-2xl-rem: 2rem;
+  --neo-space-3xl: 48px;
+  --neo-space-3xl-rem: 3rem;
+  --neo-space-4xl: 64px;
+  --neo-space-4xl-rem: 4rem;
+  --neo-space-5xl: 72px;
+  --neo-space-5xl-rem: 4.5rem;
+  --neo-space-6xl: 80px;
+  --neo-space-6xl-rem: 5rem;
+
+  --neo-radius-none: 0px;
+  --neo-radius-none-rem: 0rem;
+  --neo-radius-xs: 4px;
+  --neo-radius-xs-rem: 0.25rem;
+  --neo-radius-sm: 8px;
+  --neo-radius-sm-rem: 0.5rem;
+  --neo-radius-md: 12px;
+  --neo-radius-md-rem: 0.75rem;
+  --neo-radius-lg: 16px;
+  --neo-radius-lg-rem: 1rem;
+  --neo-radius-xl: 24px;
+  --neo-radius-xl-rem: 1.5rem;
+  --neo-radius-2xl: 32px;
+  --neo-radius-2xl-rem: 2rem;
+  --neo-radius-pill: 999px;
+  --neo-radius-pill-rem: 62.4375rem;
+
+  --neo-stroke-none: 0px;
+  --neo-stroke-none-rem: 0rem;
+  --neo-stroke-xs: 1px;
+  --neo-stroke-xs-rem: 0.0625rem;
+  --neo-stroke-sm: 2px;
+  --neo-stroke-sm-rem: 0.125rem;
+  --neo-stroke-md: 4px;
+  --neo-stroke-md-rem: 0.25rem;
+  --neo-stroke-focus-ring-width: 2px;
+  --neo-stroke-focus-ring-width-rem: 0.125rem;
+
+  --neo-icon-size-xs: 16px;
+  --neo-icon-size-xs-rem: 1rem;
+  --neo-icon-size-sm: 20px;
+  --neo-icon-size-sm-rem: 1.25rem;
+  --neo-icon-size-md: 24px;
+  --neo-icon-size-md-rem: 1.5rem;
+  --neo-icon-size-lg: 32px;
+  --neo-icon-size-lg-rem: 2rem;
+  --neo-icon-size-xl: 40px;
+  --neo-icon-size-xl-rem: 2.5rem;
+  --neo-icon-size-2xl: 48px;
+  --neo-icon-size-2xl-rem: 3rem;
+  --neo-icon-size-3xl: 56px;
+  --neo-icon-size-3xl-rem: 3.5rem;
+  --neo-icon-size-4xl: 64px;
+  --neo-icon-size-4xl-rem: 4rem;
+
+  --neo-elevation-none: 0px 0px 0px 0px transparent;
+  --neo-elevation-sm: 0px 2px 4px 0px rgba(49,49,49,0.08);
+  --neo-elevation-md: 0px 4px 12px 0px rgba(49,49,49,0.10);
+  --neo-elevation-lg: 0px 8px 24px 0px rgba(49,49,49,0.12);
+  --neo-elevation-top-md: 0px -4px 8px 0px rgba(49,49,49,0.10);
+
+  --neo-type-display-xl-bold-size: 64px;
+  --neo-type-display-xl-bold-size-rem: 4rem;
+  --neo-type-display-xl-bold-weight: 700;
+  --neo-type-display-xl-bold-line-height: 72px;
+  --neo-type-display-xl-bold-line-height-rem: 4.5rem;
+  --neo-type-display-xl-bold-letter-spacing: 0;
+  --neo-type-headline-lg-bold-size: 48px;
+  --neo-type-headline-lg-bold-size-rem: 3rem;
+  --neo-type-headline-lg-bold-weight: 700;
+  --neo-type-headline-lg-bold-line-height: 64px;
+  --neo-type-headline-lg-bold-line-height-rem: 4rem;
+  --neo-type-headline-lg-bold-letter-spacing: 0;
+  --neo-type-headline-md-bold-size: 40px;
+  --neo-type-headline-md-bold-size-rem: 2.5rem;
+  --neo-type-headline-md-bold-weight: 700;
+  --neo-type-headline-md-bold-line-height: 48px;
+  --neo-type-headline-md-bold-line-height-rem: 3rem;
+  --neo-type-headline-md-bold-letter-spacing: 0;
+  --neo-type-headline-sm-bold-size: 32px;
+  --neo-type-headline-sm-bold-size-rem: 2rem;
+  --neo-type-headline-sm-bold-weight: 700;
+  --neo-type-headline-sm-bold-line-height: 40px;
+  --neo-type-headline-sm-bold-line-height-rem: 2.5rem;
+  --neo-type-headline-sm-bold-letter-spacing: 0;
+  --neo-type-title-lg-bold-size: 24px;
+  --neo-type-title-lg-bold-size-rem: 1.5rem;
+  --neo-type-title-lg-bold-weight: 700;
+  --neo-type-title-lg-bold-line-height: 32px;
+  --neo-type-title-lg-bold-line-height-rem: 2rem;
+  --neo-type-title-lg-bold-letter-spacing: 0;
+  --neo-type-title-lg-medium-size: 24px;
+  --neo-type-title-lg-medium-size-rem: 1.5rem;
+  --neo-type-title-lg-medium-weight: 500;
+  --neo-type-title-lg-medium-line-height: 32px;
+  --neo-type-title-lg-medium-line-height-rem: 2rem;
+  --neo-type-title-lg-medium-letter-spacing: 0;
+  --neo-type-title-md-bold-size: 20px;
+  --neo-type-title-md-bold-size-rem: 1.25rem;
+  --neo-type-title-md-bold-weight: 700;
+  --neo-type-title-md-bold-line-height: 28px;
+  --neo-type-title-md-bold-line-height-rem: 1.75rem;
+  --neo-type-title-md-bold-letter-spacing: 0;
+  --neo-type-title-md-medium-size: 20px;
+  --neo-type-title-md-medium-size-rem: 1.25rem;
+  --neo-type-title-md-medium-weight: 500;
+  --neo-type-title-md-medium-line-height: 28px;
+  --neo-type-title-md-medium-line-height-rem: 1.75rem;
+  --neo-type-title-md-medium-letter-spacing: 0;
+  --neo-type-title-sm-bold-size: 18px;
+  --neo-type-title-sm-bold-size-rem: 1.125rem;
+  --neo-type-title-sm-bold-weight: 700;
+  --neo-type-title-sm-bold-line-height: 26px;
+  --neo-type-title-sm-bold-line-height-rem: 1.625rem;
+  --neo-type-title-sm-bold-letter-spacing: 0;
+  --neo-type-title-sm-medium-size: 18px;
+  --neo-type-title-sm-medium-size-rem: 1.125rem;
+  --neo-type-title-sm-medium-weight: 500;
+  --neo-type-title-sm-medium-line-height: 26px;
+  --neo-type-title-sm-medium-line-height-rem: 1.625rem;
+  --neo-type-title-sm-medium-letter-spacing: 0;
+  --neo-type-title-xs-bold-size: 14px;
+  --neo-type-title-xs-bold-size-rem: 0.875rem;
+  --neo-type-title-xs-bold-weight: 700;
+  --neo-type-title-xs-bold-line-height: 20px;
+  --neo-type-title-xs-bold-line-height-rem: 1.25rem;
+  --neo-type-title-xs-bold-letter-spacing: 0;
+  --neo-type-body-xl-bold-size: 20px;
+  --neo-type-body-xl-bold-size-rem: 1.25rem;
+  --neo-type-body-xl-bold-weight: 700;
+  --neo-type-body-xl-bold-line-height: 28px;
+  --neo-type-body-xl-bold-line-height-rem: 1.75rem;
+  --neo-type-body-xl-bold-letter-spacing: 0;
+  --neo-type-body-xl-medium-size: 20px;
+  --neo-type-body-xl-medium-size-rem: 1.25rem;
+  --neo-type-body-xl-medium-weight: 500;
+  --neo-type-body-xl-medium-line-height: 28px;
+  --neo-type-body-xl-medium-line-height-rem: 1.75rem;
+  --neo-type-body-xl-medium-letter-spacing: 0;
+  --neo-type-body-xl-regular-size: 20px;
+  --neo-type-body-xl-regular-size-rem: 1.25rem;
+  --neo-type-body-xl-regular-weight: 400;
+  --neo-type-body-xl-regular-line-height: 28px;
+  --neo-type-body-xl-regular-line-height-rem: 1.75rem;
+  --neo-type-body-xl-regular-letter-spacing: 0;
+  --neo-type-body-lg-bold-size: 16px;
+  --neo-type-body-lg-bold-size-rem: 1rem;
+  --neo-type-body-lg-bold-weight: 700;
+  --neo-type-body-lg-bold-line-height: 24px;
+  --neo-type-body-lg-bold-line-height-rem: 1.5rem;
+  --neo-type-body-lg-bold-letter-spacing: 0;
+  --neo-type-body-lg-medium-size: 16px;
+  --neo-type-body-lg-medium-size-rem: 1rem;
+  --neo-type-body-lg-medium-weight: 500;
+  --neo-type-body-lg-medium-line-height: 24px;
+  --neo-type-body-lg-medium-line-height-rem: 1.5rem;
+  --neo-type-body-lg-medium-letter-spacing: 0;
+  --neo-type-body-lg-regular-size: 16px;
+  --neo-type-body-lg-regular-size-rem: 1rem;
+  --neo-type-body-lg-regular-weight: 400;
+  --neo-type-body-lg-regular-line-height: 24px;
+  --neo-type-body-lg-regular-line-height-rem: 1.5rem;
+  --neo-type-body-lg-regular-letter-spacing: 0;
+  --neo-type-body-md-bold-size: 14px;
+  --neo-type-body-md-bold-size-rem: 0.875rem;
+  --neo-type-body-md-bold-weight: 700;
+  --neo-type-body-md-bold-line-height: 20px;
+  --neo-type-body-md-bold-line-height-rem: 1.25rem;
+  --neo-type-body-md-bold-letter-spacing: 0;
+  --neo-type-body-md-medium-size: 14px;
+  --neo-type-body-md-medium-size-rem: 0.875rem;
+  --neo-type-body-md-medium-weight: 500;
+  --neo-type-body-md-medium-line-height: 20px;
+  --neo-type-body-md-medium-line-height-rem: 1.25rem;
+  --neo-type-body-md-medium-letter-spacing: 0;
+  --neo-type-body-md-regular-size: 14px;
+  --neo-type-body-md-regular-size-rem: 0.875rem;
+  --neo-type-body-md-regular-weight: 400;
+  --neo-type-body-md-regular-line-height: 20px;
+  --neo-type-body-md-regular-line-height-rem: 1.25rem;
+  --neo-type-body-md-regular-letter-spacing: 0;
+  --neo-type-caption-sm-medium-size: 12px;
+  --neo-type-caption-sm-medium-size-rem: 0.75rem;
+  --neo-type-caption-sm-medium-weight: 500;
+  --neo-type-caption-sm-medium-line-height: 16px;
+  --neo-type-caption-sm-medium-line-height-rem: 1rem;
+  --neo-type-caption-sm-medium-letter-spacing: 0;
+  --neo-type-caption-sm-regular-size: 12px;
+  --neo-type-caption-sm-regular-size-rem: 0.75rem;
+  --neo-type-caption-sm-regular-weight: 400;
+  --neo-type-caption-sm-regular-line-height: 16px;
+  --neo-type-caption-sm-regular-line-height-rem: 1rem;
+  --neo-type-caption-sm-regular-letter-spacing: 0;
+
+  --neo-container-content: 1180px;
+  --neo-container-content-rem: 73.75rem;
+  --neo-container-wide: 1320px;
+  --neo-container-wide-rem: 82.5rem;
+
+  --neo-button-height-sm: 32px;
+  --neo-button-height-sm-rem: 2rem;
+  --neo-button-height-md: 40px;
+  --neo-button-height-md-rem: 2.5rem;
+  --neo-button-height-lg: 48px;
+  --neo-button-height-lg-rem: 3rem;
+  --neo-switch-width: 48px;
+  --neo-switch-width-rem: 3rem;
+  --neo-switch-height: 44px;
+  --neo-switch-height-rem: 2.75rem;
+  --neo-switch-track-height: 24px;
+  --neo-switch-track-height-rem: 1.5rem;
+  --neo-switch-thumb-travel: 24px;
+  --neo-switch-thumb-travel-rem: 1.5rem;
+  --neo-input-height: 44px;
+  --neo-input-height-rem: 2.75rem;
+  --neo-radio-dot: 10px;
+  --neo-radio-dot-rem: 0.625rem;
+  --neo-menu-min-width: 200px;
+  --neo-menu-min-width-rem: 12.5rem;
+  --neo-menu-item-min-height: 40px;
+  --neo-menu-item-min-height-rem: 2.5rem;
+}