@kalink-ui/seedly 0.34.3 → 0.35.0

package/src/styles/responsive.ts

@@ -8,12 +8,34 @@ export type BreakpointWithBase = 'xs' | BreakpointKey;
 export type ResponsiveObject<T, B extends string> = Partial<
   Record<Exclude<B, 'xs'>, T>
 > & { xs?: T };
+
 export type ResponsiveArray<T> = (T | null | undefined)[];
+
 export type Responsive<T, B extends string = BreakpointWithBase> =
   | T
   | ResponsiveObject<T, B>
   | ResponsiveArray<T>;
 
+function entriesOf<K extends string | number, V>(
+  record: Partial<Record<K, V>>,
+): [K, V][] {
+  return Object.entries(record) as [K, V][];
+}
+
+function recordFromEntries<K extends string | number, V>(
+  entries: [K, V][],
+): Record<K, V> {
+  return Object.fromEntries(entries) as Record<K, V>;
+}
+
+function styleVariantsWithArrays<
+  Variants extends Record<string | number, StyleRule | StyleRule[]>,
+>(variants: Variants): { [K in keyof Variants]: string } {
+  return styleVariants(variants as Record<string, StyleRule>) as {
+    [K in keyof Variants]: string;
+  };
+}
+
 export function resolveResponsive<T, B extends string = BreakpointWithBase>(
   value: Responsive<T, B> | undefined,
   order: readonly B[],
@@ -26,10 +48,10 @@ export function resolveResponsive<T, B extends string = BreakpointWithBase>(
     const out: Partial<Record<B, T>> = {};
 
     value.forEach((val, i) => {
-      const breakpoint = order[i] as B | undefined;
+      const breakpoint = order[i];
 
-      if (val != null && breakpoint) {
-        out[breakpoint] = val as T;
+      if (val != null && breakpoint != null) {
+        out[breakpoint] = val;
       }
     });
 
@@ -40,7 +62,16 @@ export function resolveResponsive<T, B extends string = BreakpointWithBase>(
     return value as Partial<Record<B, T>>;
   }
 
-  return { xs: value as T } as Partial<Record<B, T>>;
+  return { xs: value } as Partial<Record<B, T>>;
+}
+
+export function getResponsiveBase<T>(
+  value: Responsive<T> | undefined,
+  order: readonly BreakpointWithBase[] = defaultOrder,
+): T | undefined {
+  const map = resolveResponsive(value, order);
+
+  return map.xs;
 }
 
 export interface CreateResponsiveVariantsArgs<
@@ -57,23 +88,17 @@ export function createResponsiveVariants<
 >(args: CreateResponsiveVariantsArgs<VariantValues, Bps>) {
   const { styles, media } = args;
 
-  const at = Object.fromEntries(
-    Object.entries(media).map(([bp, query]) => {
-      const styleEntries = Object.entries(styles) as [
-        VariantValues,
-        StyleRule | StyleRule[],
-      ][];
-
-      const styleMap = Object.fromEntries(
-        styleEntries.map(([val, rule]) => [
-          val,
-          applyMedia(query as string, rule),
-        ]),
-      ) as Record<VariantValues, StyleRule | StyleRule[]>;
-
-      return [bp, styleVariants(styleMap)];
+  const at = recordFromEntries(
+    entriesOf(media).map(([bp, query]) => {
+      const styleMap = recordFromEntries(
+        entriesOf<VariantValues, StyleRule | StyleRule[]>(styles).map(
+          ([val, rule]) => [val, applyMedia(query, rule)],
+        ),
+      );
+
+      return [bp, styleVariantsWithArrays(styleMap)];
     }),
-  ) as Record<Exclude<Bps, 'xs'>, Record<VariantValues, string>>;
+  );
 
   return at;
 }
@@ -83,10 +108,10 @@ function applyMedia(
   rule: StyleRule | StyleRule[],
 ): StyleRule | StyleRule[] {
   if (Array.isArray(rule)) {
-    return rule.map((r) => ({ '@media': { [query]: r } })) as StyleRule[];
+    return rule.map((r) => ({ '@media': { [query]: r } }));
   }
 
-  return { '@media': { [query]: rule } } as StyleRule;
+  return { '@media': { [query]: rule } };
 }
 
 type MakeResponsive<V, B extends string> = {
@@ -95,9 +120,7 @@ type MakeResponsive<V, B extends string> = {
 
 export interface ResponsiveRecipeArgs<V, Bps extends string> {
   recipe: (props: V) => string;
-  at: Partial<
-    Record<keyof V, Record<Exclude<Bps, 'xs'>, Record<string, string>>>
-  >;
+  at: Partial<Record<keyof V, Partial<Record<Bps, Record<string, string>>>>>;
   order: readonly Bps[];
 }
 
@@ -106,31 +129,37 @@ export function responsiveRecipe<
   const Bps extends string,
 >(args: ResponsiveRecipeArgs<V, Bps>) {
   const { recipe, at, order } = args;
+  type ClassValue = Parameters<typeof clsx>[number];
 
-  return (props: MakeResponsive<V, Bps> & { className?: string }) => {
-    const { className, ...rest } = props as Record<string, unknown> & {
-      className?: string;
-    };
+  return (props: MakeResponsive<V, Bps>, ...classNames: ClassValue[]) => {
+    const responsiveRest = props as MakeResponsive<V, Bps>;
+    const keys = Object.keys(responsiveRest) as (keyof V)[];
 
     const baseProps: Partial<V> = {};
 
-    for (const key in rest) {
-      const value = (rest as Record<string, unknown>)[key];
-      const map = resolveResponsive(value, order);
+    for (const key of keys) {
+      const value = responsiveRest[key];
+      const map = resolveResponsive<unknown, Bps>(
+        value as Responsive<unknown, Bps> | undefined,
+        order,
+      );
+
+      const baseValue =
+        (map as Partial<Record<BreakpointWithBase, unknown>>).xs ?? value;
 
-      (baseProps as Record<string, unknown>)[key] =
-        (map as Record<string, unknown>)['xs'] ?? value;
+      baseProps[key] = baseValue as V[typeof key];
     }
 
     const base = recipe(baseProps as V);
     const overrides: string[] = [];
 
-    for (const key in rest) {
-      const value = (rest as Record<string, unknown>)[key];
-      const map = resolveResponsive(value, order);
-      const variantAt = (at as Record<string, unknown>)[key] as
-        | Record<string, Record<string, string>>
-        | undefined;
+    for (const key of keys) {
+      const value = responsiveRest[key];
+      const variantAt = at[key];
+      const map = resolveResponsive<unknown, Bps>(
+        value as Responsive<unknown, Bps> | undefined,
+        order,
+      );
 
       if (!variantAt) {
         continue;
@@ -141,13 +170,13 @@ export function responsiveRecipe<
           continue;
         }
 
-        const val = (map as Partial<Record<Bps, unknown>>)[bp];
+        const val = map[bp];
 
         if (val == null) {
           continue;
         }
 
-        const cls = variantAt[bp as string]?.[String(val)];
+        const cls = variantAt[bp]?.[String(val)];
 
         if (cls) {
           overrides.push(cls);
@@ -155,7 +184,7 @@ export function responsiveRecipe<
       }
     }
 
-    return clsx(base, ...overrides, className);
+    return clsx(base, ...overrides, ...classNames);
   };
 }
 

package/src/styles/system-contract.css.ts

@@ -19,17 +19,31 @@ const typographyVariants = [
 
 const typographySizes = ['large', 'medium', 'small'] as const;
 
+const toneNames = ['neutral', 'primary', 'destructive', 'success'] as const;
+
+export type Tone = ArrayValues<typeof toneNames>;
+type ToneOnName = `on${Capitalize<Tone>}`;
+
 export const sys = createThemeContract({
   layout: {
     direction: null,
     measure: null,
   },
 
-  color: {
+  surface: {
     background: null,
     foreground: null,
   },
 
+  tone: toneNames.reduce(
+    (acc, tone) => ({
+      ...acc,
+      [tone]: null,
+      [`on${tone[0]?.toUpperCase()}${tone.slice(1)}`]: null,
+    }),
+    {} as Record<Tone | ToneOnName, null>,
+  ),
+
   state: {
     hovered: {
       opacity: null,
@@ -41,8 +55,13 @@ export const sys = createThemeContract({
       opacity: null,
     },
     muted: {
-      light: null,
-      dark: null,
+      text: null,
+      surface: null,
+    },
+    disabled: {
+      text: null,
+      border: null,
+      background: null,
     },
   },
 

package/src/styles/theme/sprout-ref.css.ts

@@ -0,0 +1,107 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+
+import { base } from '../layers.css';
+import { toFluidClampFor } from '../scale';
+
+const spacingClamp = (value: number) =>
+  toFluidClampFor(value, {
+    lowMin: 4,
+    lowMax: 72,
+    highMin: 6,
+    highMax: 176,
+    exponent: 2,
+    rounding: 'none',
+  });
+
+const typeScaleClamp = (value: number) =>
+  toFluidClampFor(value, {
+    lowMin: 12,
+    lowMax: 40,
+    highMin: 14,
+    highMax: 85,
+    exponent: 2,
+    rounding: 'none',
+  });
+
+export const refs = createGlobalTheme(':root', {
+  '@layer': base,
+
+  colors: {
+    neutral: {
+      0: '#000000',
+      10: '#161c1d',
+      20: '#2c383a',
+      30: '#435456',
+      40: '#597173',
+      50: '#6f8d90',
+      60: '#8ca4a6',
+      70: '#a9bbbc',
+      80: '#c5d1d3',
+      90: '#e2e8e9',
+      100: '#ffffff',
+    },
+    primary: {
+      0: '#000000',
+      10: '#1a1110',
+      20: '#401d10',
+      30: '#7f3a1a',
+      40: '#bf5b21',
+      50: '#f27f1b',
+      60: '#f2a950',
+      70: '#e6bd8a',
+      80: '#e4cebc',
+      90: '#ece8e2',
+      100: '#ffffff',
+    },
+  },
+
+  typeface: {
+    brand: 'serif',
+    plain: 'sans-serif',
+  },
+
+  lineHeight: {
+    md: '1',
+    lg: '1.2',
+    xl: '1.4',
+  },
+
+  spacing: {
+    1: spacingClamp(4),
+    2: spacingClamp(8),
+    3: spacingClamp(12),
+    4: spacingClamp(16),
+    5: spacingClamp(20),
+    6: spacingClamp(24),
+    7: spacingClamp(28),
+    8: spacingClamp(32),
+    9: spacingClamp(36),
+    10: spacingClamp(40),
+    11: spacingClamp(44),
+    12: spacingClamp(48),
+    13: spacingClamp(52),
+    14: spacingClamp(56),
+    15: spacingClamp(60),
+    16: spacingClamp(64),
+    17: spacingClamp(68),
+    18: spacingClamp(72),
+  },
+
+  typeScale: {
+    displayLarge: typeScaleClamp(40),
+    displayMedium: typeScaleClamp(34),
+    displaySmall: typeScaleClamp(28),
+    headlineLarge: typeScaleClamp(32),
+    headlineMedium: typeScaleClamp(28),
+    headlineSmall: typeScaleClamp(24),
+    titleLarge: typeScaleClamp(24),
+    titleMedium: typeScaleClamp(18),
+    titleSmall: typeScaleClamp(17),
+    bodyLarge: typeScaleClamp(19),
+    bodyMedium: typeScaleClamp(14),
+    bodySmall: typeScaleClamp(12),
+    labelLarge: typeScaleClamp(16),
+    labelMedium: typeScaleClamp(14),
+    labelSmall: typeScaleClamp(12),
+  },
+});

package/src/styles/theme/sprout.css.ts

@@ -0,0 +1,259 @@
+import { createTheme } from '@vanilla-extract/css';
+
+import { sys } from '../system-contract.css';
+
+import { refs } from './sprout-ref.css';
+
+export const sprout = createTheme(sys, {
+  layout: {
+    measure: '75ch',
+    direction: '1',
+  },
+
+  surface: {
+    background: refs.colors.neutral[100],
+    foreground: refs.colors.neutral[10],
+  },
+
+  tone: {
+    neutral: refs.colors.neutral[10],
+    onNeutral: refs.colors.neutral[90],
+    primary: refs.colors.primary[50],
+    onPrimary: refs.colors.primary[10],
+    destructive: '#d80000',
+    onDestructive: refs.colors.neutral[100],
+    success: '#2e7d32',
+    onSuccess: refs.colors.neutral[100],
+  },
+
+  state: {
+    hovered: {
+      opacity: '0.1',
+    },
+    focused: {
+      opacity: '0.12',
+    },
+    pressed: {
+      opacity: '0.2',
+    },
+    muted: {
+      text: '0.6',
+      surface: '0.12',
+    },
+    disabled: {
+      text: '0.5',
+      border: '0.12',
+      background: '0.08',
+    },
+  },
+
+  shape: {
+    corner: {
+      none: '0',
+      sharp: '0.125rem',
+      small: '0.25rem',
+      medium: '0.5rem',
+      rounded: '0.75rem',
+      circle: '50%',
+    },
+  },
+
+  elevation: {
+    none: 'none',
+    minimal:
+      '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+    low: '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+    moderate:
+      '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+    high: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+    peak: '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
+  },
+
+  motion: {
+    duration: {
+      short: {
+        1: '50ms',
+        2: '100ms',
+        3: '150ms',
+        4: '200ms',
+      },
+      medium: {
+        1: '250ms',
+        2: '300ms',
+        3: '350ms',
+        4: '400ms',
+      },
+      long: {
+        1: '450ms',
+        2: '500ms',
+        3: '550ms',
+        4: '600ms',
+      },
+    },
+    easing: {
+      standard: 'cubic-bezier(0.2, 0, 0, 1)',
+      decelerate: {
+        standard: 'cubic-bezier(0.4, 0, 1, 1)',
+        emphasized: 'cubic-bezier(0.05, 0.7, 0.1, 1)',
+      },
+      accelerate: {
+        standard: 'cubic-bezier(0.4, 0, 1, 1)',
+        emphasized: 'cubic-bezier(0.3, 0, 0.8, 0.15)',
+      },
+    },
+  },
+
+  typography: {
+    display: {
+      large: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.displayLarge,
+      },
+
+      medium: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.displayMedium,
+      },
+
+      small: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.displaySmall,
+      },
+    },
+
+    headline: {
+      large: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.headlineLarge,
+      },
+
+      medium: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.headlineMedium,
+      },
+
+      small: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.headlineSmall,
+      },
+    },
+
+    title: {
+      large: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.titleLarge,
+      },
+
+      medium: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.titleMedium,
+      },
+
+      small: {
+        font: refs.typeface.brand,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.titleSmall,
+      },
+    },
+
+    body: {
+      large: {
+        font: refs.typeface.plain,
+        weight: '400',
+        lineHeight: refs.lineHeight.lg,
+        tracking: 'normal',
+        size: refs.typeScale.bodyLarge,
+      },
+
+      medium: {
+        font: refs.typeface.plain,
+        weight: '400',
+        lineHeight: refs.lineHeight.xl,
+        tracking: 'normal',
+        size: refs.typeScale.bodyMedium,
+      },
+
+      small: {
+        font: refs.typeface.plain,
+        weight: '400',
+        lineHeight: refs.lineHeight.lg,
+        tracking: 'normal',
+        size: refs.typeScale.bodySmall,
+      },
+    },
+
+    label: {
+      large: {
+        font: refs.typeface.plain,
+        weight: '700',
+        lineHeight: refs.lineHeight.xl,
+        tracking: '0.1',
+        size: refs.typeScale.labelLarge,
+      },
+
+      medium: {
+        font: refs.typeface.plain,
+        weight: '700',
+        lineHeight: refs.lineHeight.lg,
+        tracking: '0.1',
+        size: refs.typeScale.labelMedium,
+      },
+
+      small: {
+        font: refs.typeface.plain,
+        weight: '700',
+        lineHeight: refs.lineHeight.md,
+        tracking: '0.1',
+        size: refs.typeScale.labelSmall,
+      },
+    },
+  },
+
+  spacing: {
+    0: '0px',
+    1: refs.spacing[1],
+    2: refs.spacing[2],
+    3: refs.spacing[3],
+    4: refs.spacing[4],
+    5: refs.spacing[5],
+    6: refs.spacing[6],
+    7: refs.spacing[7],
+    8: refs.spacing[8],
+    9: refs.spacing[9],
+    10: refs.spacing[10],
+    11: refs.spacing[11],
+    12: refs.spacing[12],
+    13: refs.spacing[13],
+    14: refs.spacing[14],
+    15: refs.spacing[15],
+    16: refs.spacing[16],
+    17: refs.spacing[17],
+    18: refs.spacing[18],
+  },
+});

package/src/styles/tone.ts

@@ -0,0 +1,69 @@
+import { assignVars, type StyleRule } from '@vanilla-extract/css';
+
+import { components } from './layers.css';
+import { sys } from './system-contract.css';
+
+export type ToneKey = 'neutral' | 'primary' | 'destructive' | 'success';
+export interface ToneTokens {
+  base: string;
+  onBase: string;
+}
+
+export const toneTokens: Record<ToneKey, ToneTokens> = {
+  neutral: {
+    base: sys.tone.neutral,
+    onBase: sys.tone.onNeutral,
+  },
+  primary: {
+    base: sys.tone.primary,
+    onBase: sys.tone.onPrimary,
+  },
+  destructive: {
+    base: sys.tone.destructive,
+    onBase: sys.tone.onDestructive,
+  },
+  success: {
+    base: sys.tone.success,
+    onBase: sys.tone.onSuccess,
+  },
+};
+
+type ToneVarContract = Parameters<typeof assignVars>[0];
+
+/**
+ * assignVars requires the contract and tokens to be the same inferred shape;
+ * we centralize the escape-hatch cast here so callers don't repeat it.
+ */
+const assignTone = (toneVars: ToneVarContract, tokens: ToneTokens) =>
+  assignVars(toneVars as never, tokens as never);
+
+export const createToneAssignments = (toneVars: ToneVarContract) =>
+  ({
+    neutral: assignTone(toneVars, toneTokens.neutral),
+    primary: assignTone(toneVars, toneTokens.primary),
+    destructive: assignTone(toneVars, toneTokens.destructive),
+    success: assignTone(toneVars, toneTokens.success),
+  }) as const;
+
+export const createToneStyles = (
+  toneVars: ToneVarContract,
+  getVars?: (tokens: ToneTokens, tone: ToneKey) => Record<string, string>,
+) => {
+  const toneAssignments = createToneAssignments(toneVars);
+  const styles = {} as Record<ToneKey, StyleRule>;
+
+  (Object.keys(toneAssignments) as ToneKey[]).forEach((tone) => {
+    styles[tone] = {
+      '@layer': {
+        [components]: {
+          vars: {
+            ...toneAssignments[tone],
+            ...(getVars ? getVars(toneTokens[tone], tone) : {}),
+          },
+        },
+      },
+    };
+  });
+
+  return styles;
+};