alouette/src/core.css

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

/* Generated by scripts/build-css.ts. DO NOT EDIT. */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "nativewind/theme";

@theme {
  /* unified alouette type scale — standard Tailwind names, exact pixel values preserved.
     The paired --text-*--line-height modifier is what makes the text-* utility carry a
     default line-height (Tailwind v4 convention). Without it, line-height stays unset.
     Ratios are unitless: web treats them as font-size-relative; on native NativeWind
     multiplies any unitless lineHeight by fontSize, so they behave identically on both platforms.
     Body default is 1.4 (matches the old Tamagui body font); the heading-only display
     sizes (32/40/64px) use the old heading ratios. For headings at shared sizes
     (text-lg/text-xl), add an explicit leading-* class to tighten. */
  --text-xs: 0.75rem; /* 12px */
  --text-xs--line-height: 1.4;
  --text-sm: 0.875rem; /* 14px */
  --text-sm--line-height: 1.4;
  --text-base: 1rem; /* 16px */
  --text-base--line-height: 1.4;
  --text-lg: 1.125rem; /* 18px */
  --text-lg--line-height: 1.4;
  --text-xl: 1.5rem; /* 24px */
  --text-xl--line-height: 1.4;
  --text-2xl: 2rem; /* 32px */
  --text-2xl--line-height: 1.2;
  --text-3xl: 2.5rem; /* 40px */
  --text-3xl--line-height: 1.1;
  --text-4xl: 3rem; /* 48px */
  --text-4xl--line-height: 1.1;
  --text-5xl: 4rem; /* 64px */
  --text-5xl--line-height: 1.1;
  --text-6xl: 5rem; /* 80px */
  --text-6xl--line-height: 1.1;

  /* radius — alouette scale (16px base) */
  --radius-xs: 0.5rem;
  --radius-sm: 1rem;
  --radius-md: 2rem;
  --radius-lg: 3rem;

  /* box-shadows — multi-layer with inset highlight, matches original
     containers/variants.ts. Names map to Tailwind's shadow-{name} utilities. */
  --shadow-s:
    inset 0 1px 2px #ffffff40, 0 1px 2px #00000040, 0 2px 4px #00000025;
  --shadow-m:
    inset 0 1px 2px #ffffff40, 0 2px 4px #00000040, 0 4px 8px #00000025;
  --shadow-l:
    inset 0 1px 2px #ffffff40, 0 4px 6px #00000040, 0 6px 10px #00000025;
  --shadow-lowered: inset 0 1px 2px #00000040, inset 0 -2px 2px #ffffff15;

  /* spacing — named scale matching the old $N.N token names */
  --spacing-xxs: 4px;
  --spacing-xs: 8px; /* previous $0.5 */
  --spacing-sm: 12px;
  --spacing-m: 16px; /* previous $1.0 */
  --spacing-md: 16px;
  --spacing-l: 24px;
  --spacing-lg: 24px;
  --spacing-xl: 32px; /* previous $2.0 */
  --spacing-xxl: 48px;
  --spacing-3xl: 64px; /* previous $3.0 */
  --spacing-4xl: 128px;

  /* breakpoints — match Breakpoints.ts */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* animations — Tailwind v4 names the utility after the --animate-* key
     (animate-slide-in) and NativeWind runs the @keyframes on native via
     Reanimated. Names are generic motions, not component-specific. CSS
     animations are enter-only on their own; pair the exit animation with
     <Presence> (keeps the outgoing child mounted) for an AnimatePresence-style
     swap without an animation library. */
  --animate-slide-in: slide-in 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slide-out: slide-out 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-collapse-in: collapse-in 800ms ease-out;
  --animate-collapse-out: collapse-out 800ms ease-out;
}

@layer theme {
  /* font-family tokens — consumers can override these in their own @layer theme :root to swap fonts.
     The base holds WEB values as a fallback list, because the two web targets load different
     families:
       - Expo web (react-native-web): expo-font registers weight-specific families
         ('SoraRegular'/'SoraBold'/'SoraExtraBold', 'ChivoMono*') — 'Sora' is NOT available.
       - Vite Storybook: Google Fonts loads the single 'Sora'/'Chivo Mono' families, weight via
         font-weight.
     Leading with the weight-specific name (matched on Expo web) and falling back to 'Sora'/'ChivoMono'
     (matched on Vite) makes both work from one declaration. Native uses single names (RN has no
     fallbacks) under @variant native (NativeWind's native: variant, from nativewind/theme).

     NB: the base holds the web values and the @variant native block overrides them on native only —
     the native: variant is dropped on web and applied by NativeWind's runtime on native, so the
     platform font split lives there. */
  :root {
    --font-body: "SoraRegular", "Sora", ui-sans-serif, system-ui, sans-serif;
    --font-body-bold: "SoraBold", "Sora", ui-sans-serif, system-ui, sans-serif;
    --font-body-extrabold:
      "SoraExtraBold", "Sora", ui-sans-serif, system-ui, sans-serif;
    --font-heading: "SoraRegular", "Sora", ui-sans-serif, system-ui, sans-serif;
    --font-heading-bold:
      "SoraBold", "Sora", ui-sans-serif, system-ui, sans-serif;
    --font-heading-extrabold:
      "SoraExtraBold", "Sora", ui-sans-serif, system-ui, sans-serif;
    --font-mono:
      "ChivoMonoRegular", "ChivoMono", "Chivo Mono", ui-monospace,
      SFMono-Regular, Menlo, monospace;
    --font-mono-bold:
      "ChivoMonoBold", "ChivoMono", "Chivo Mono", ui-monospace, SFMono-Regular,
      Menlo, monospace;
    --font-mono-extrabold:
      "ChivoMonoExtraBold", "ChivoMono", "Chivo Mono", ui-monospace,
      SFMono-Regular, Menlo, monospace;

    @variant native {
      --font-body: "SoraRegular";
      --font-body-bold: "SoraBold";
      --font-body-extrabold: "SoraExtraBold";
      --font-heading: "SoraRegular";
      --font-heading-bold: "SoraBold";
      --font-heading-extrabold: "SoraExtraBold";
      --font-mono: "ChivoMonoRegular";
      --font-mono-bold: "ChivoMonoBold";
      --font-mono-extrabold: "ChivoMonoExtraBold";
    }
  }
}

@layer base {
  /* hotpink default catches any text missing Text component use */
  body {
    color: hotpink;
  }

  /* let height/width keyframes interpolate to/from auto (collapse-in/out) on web */
  :root {
    interpolate-size: allow-keywords;
  }

  body,
  #root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* scrollbar-width/-color have no native equivalent, so this sits behind the
     @supports guard the native compiler cannot evaluate and therefore drops.
     Global rather than a utility: ScrollView maps className to the style prop,
     so a raw CSS class would not reach the DOM node that scrolls. */
  @supports (display: contents) {
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--color-border-sharp) transparent;
    }
  }
}

/* keyframes referenced by the --animate-* theme tokens above. */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-100%) rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
  }
}

@keyframes slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes collapse-in {
  from {
    opacity: 0;
    height: 0;
  }
  to {
    opacity: 1;
    height: auto;
  }
}

@keyframes collapse-out {
  from {
    opacity: 1;
    height: auto;
  }
  to {
    opacity: 0;
    height: 0;
  }
}

/* named transition durations — one per animationDurationsMs entry so transition
   classNames reference the same source of truth as the JS export (native drives
   the same motion via Reanimated withTiming(animationDurationsMs.*)). */
@utility duration-slide {
  transition-duration: 600ms;
}
@utility duration-collapse {
  transition-duration: 800ms;
}
@utility duration-progress {
  transition-duration: 600ms;
}
@utility duration-fade {
  transition-duration: 300ms;
}
@utility duration-fast {
  transition-duration: 200ms;
}

/* font-family + weight utilities — family×weight combinations; use with standard text-* size utilities.
   font-synthesis: none — on Expo web the weight-specific family ('SoraBold') is a single registered
   face, so the font-weight below must NOT trigger algorithmic (faux) bolding of already-bold glyphs.
   On Vite web 'Sora' is a real variable font, so the font-weight selects the genuine weight. */
@utility font-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-synthesis: none;
}
@utility font-body-bold {
  font-family: var(--font-body-bold);
  font-weight: 700;
  font-synthesis: none;
}
@utility font-body-extrabold {
  font-family: var(--font-body-extrabold);
  font-weight: 800;
  font-synthesis: none;
}
@utility font-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-synthesis: none;
}
@utility font-heading-bold {
  font-family: var(--font-heading-bold);
  font-weight: 700;
  font-synthesis: none;
}
@utility font-heading-extrabold {
  font-family: var(--font-heading-extrabold);
  font-weight: 800;
  font-synthesis: none;
}
@utility font-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-synthesis: none;
}
@utility font-mono-bold {
  font-family: var(--font-mono-bold);
  font-weight: 700;
  font-synthesis: none;
}
@utility font-mono-extrabold {
  font-family: var(--font-mono-extrabold);
  font-weight: 800;
  font-synthesis: none;
}

/* tripwire — standalone Tailwind font-weight utilities are NOT valid here: weight
   must be baked into the font-* family utility (font-body-bold, etc.) so it works on
   native. Override them to weight 100 + crunched letter-spacing so any accidental use
   renders visibly thin and cramped on web and is easy to spot. (native ignores both
   font-weight and letterSpacing here, so this only affects web.) */
@utility font-thin {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-extralight {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-light {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-normal {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-medium {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-semibold {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-bold {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-extrabold {
  font-weight: 100;
  letter-spacing: -0.1em;
}
@utility font-black {
  font-weight: 100;
  letter-spacing: -0.1em;
}

/* flex-center — center children on both axes. Replaces the old Box `center`
   variant. Named flex-center (not `center`) to avoid clashing with any future
   text-align / place-* shorthand. */
@utility flex-center {
  align-items: center;
  justify-content: center;
}