@neo-design/foundations 1.0.0-rc.4

package/tokens/radius.mjs

@@ -0,0 +1,18 @@
+// packages/foundations/tokens/radius.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { radius as P } from './_primitives.mjs';
+import { dualPxVars } from './_util.mjs';
+
+export const radius = {
+  none:  P[0],
+  xs:    P[50],
+  sm:    P[100],
+  md:    P[150],
+  lg:    P[200],
+  xl:    P[300],
+  '2xl': P[400],
+  pill:  P.full,
+};
+
+export const themeSlice = { shape: { borderRadius: radius.sm }, neo: { radius } };
+
+export const cssVars = dualPxVars('radius', radius);

package/tokens/shadows.mjs

@@ -0,0 +1,14 @@
+// packages/foundations/tokens/shadows.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { shadow as P } from './_primitives.mjs';
+import { P as PFX } from './_brand.mjs';
+
+export const elevation = { none: P[0], sm: P[1], md: P[2], lg: P[3], 'top-md': P[4] };
+
+const fill = (n, v) => Array(n).fill(v);
+export const shadows = ['none', ...fill(4, P[1]), ...fill(8, P[2]), ...fill(12, P[3])];
+
+export const themeSlice = { shadows, neo: { elevation } };
+
+export const cssVars = Object.fromEntries(
+  Object.entries(elevation).map(([k, v]) => [`--${PFX}-elevation-${k}`, v]),
+);

package/tokens/spacing.mjs

@@ -0,0 +1,21 @@
+// packages/foundations/tokens/spacing.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { space as P } from './_primitives.mjs';
+import { dualPxVars } from './_util.mjs';
+
+export const space = {
+  none:  P.none,
+  xs:    P[50],
+  sm:    P[100],
+  md:    P[150],
+  lg:    P[200],
+  xl:    P[300],
+  '2xl': P[400],
+  '3xl': P[600],
+  '4xl': P[800],
+  '5xl': P[900],
+  '6xl': P[1000],
+};
+
+export const themeSlice = { spacing: 8, neo: { space } };
+
+export const cssVars = dualPxVars('space', space);

package/tokens/stroke.mjs

@@ -0,0 +1,15 @@
+// packages/foundations/tokens/stroke.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { stroke as P } from './_primitives.mjs';
+import { dualPxVars } from './_util.mjs';
+
+export const stroke = {
+  none:               P[0],
+  xs:                 P[25],
+  sm:                 P[50],
+  md:                 P[75],
+  'focus-ring-width': P[50],
+};
+
+export const themeSlice = { neo: { stroke } };
+
+export const cssVars = dualPxVars('stroke', stroke);

package/tokens/typography.mjs

@@ -0,0 +1,59 @@
+// packages/foundations/tokens/typography.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { type as T } from './_primitives.mjs';
+import { rem } from './_util.mjs';
+import { P } from './_brand.mjs';
+
+const V = [
+  ['displayXlBold',   'display-xl-bold',   64, 700, 72],
+  ['headlineLgBold',  'headline-lg-bold',  48, 700, 64],
+  ['headlineMdBold',  'headline-md-bold',  40, 700, 48],
+  ['headlineSmBold',  'headline-sm-bold',  32, 700, 40],
+  ['titleLgBold',     'title-lg-bold',     24, 700, 32],
+  ['titleLgMedium',   'title-lg-medium',   24, 500, 32],
+  ['titleMdBold',     'title-md-bold',     20, 700, 28],
+  ['titleMdMedium',   'title-md-medium',   20, 500, 28],
+  ['titleSmBold',     'title-sm-bold',     18, 700, 26],
+  ['titleSmMedium',   'title-sm-medium',   18, 500, 26],
+  ['titleXsBold',     'title-xs-bold',     14, 700, 20],
+  ['bodyXlBold',      'body-xl-bold',      20, 700, 28],
+  ['bodyXlMedium',    'body-xl-medium',    20, 500, 28],
+  ['bodyXlRegular',   'body-xl-regular',   20, 400, 28],
+  ['bodyLgBold',      'body-lg-bold',      16, 700, 24],
+  ['bodyLgMedium',    'body-lg-medium',    16, 500, 24],
+  ['bodyLgRegular',   'body-lg-regular',   16, 400, 24],
+  ['bodyMdBold',      'body-md-bold',      14, 700, 20],
+  ['bodyMdMedium',    'body-md-medium',    14, 500, 20],
+  ['bodyMdRegular',   'body-md-regular',   14, 400, 20],
+  ['captionSmMedium', 'caption-sm-medium', 12, 500, 16],
+  ['captionSmRegular','caption-sm-regular',12, 400, 16],
+];
+export const _V = V;
+
+const variant = (s, w, l) => ({ fontFamily: T.family, fontWeight: w, fontSize: rem(s), lineHeight: rem(l), letterSpacing: 0 });
+
+export const variants = Object.fromEntries(V.map(([name, , s, w, l]) => [name, variant(s, w, l)]));
+
+const std = {
+  h1: variant(64, 700, 72), h2: variant(48, 700, 64), h3: variant(40, 700, 48), h4: variant(32, 700, 40),
+  h5: variant(24, 500, 32), h6: variant(20, 500, 28),
+  subtitle1: variant(18, 500, 26), subtitle2: variant(14, 500, 20),
+  body1: variant(16, 400, 24), body2: variant(14, 400, 20),
+  button: { ...variant(14, 500, 20), textTransform: 'none' },
+  caption: variant(12, 400, 16),
+  overline: { ...variant(12, 500, 16), textTransform: 'uppercase' },
+};
+
+export const typography = { fontFamily: T.family, ...std, ...variants };
+
+export const byFigmaName = Object.fromEntries(V.map(([camel, kebab]) => [kebab, variants[camel]]));
+
+export const themeSlice = { typography, neo: { type: byFigmaName } };
+
+export const cssVars = Object.fromEntries(V.flatMap(([, d, s, w, l]) => [
+  [`--${P}-type-${d}-size`, `${s}px`],
+  [`--${P}-type-${d}-size-rem`, rem(s)],
+  [`--${P}-type-${d}-weight`, `${w}`],
+  [`--${P}-type-${d}-line-height`, `${l}px`],
+  [`--${P}-type-${d}-line-height-rem`, rem(l)],
+  [`--${P}-type-${d}-letter-spacing`, `0`],
+]));