@nordcom/nordstar
Version:
An opinionated component library for building human-centric user interfaces.
165 lines (144 loc) • 6.24 kB
CSS
/*
* Public CSS contract for `@nordcom/nordstar`.
*
* Tailwind v4 consumers: `@import "@nordcom/nordstar";` after `@import "tailwindcss";`.
* Tokens declared via @theme become utility classes (bg-primary, font-heading, etc.).
*
* Override values by setting --nordstar-* variables in :root from your own CSS,
* or pass a `theme` prop to <NordstarProvider/>.
*
* NOTE: @source directives are appended to the published version of this file
* by scripts/build-css.mjs. They are NOT present in the source.
*/
@theme {
/* Colors — HSL components for clean alpha modifiers (bg-primary/50). */
--color-foreground: hsl(var(--nordstar-color-foreground, 0 0% 100%));
--color-foreground-highlight: hsl(var(--nordstar-color-foreground-highlight, 0 0% 51%));
--color-background: hsl(var(--nordstar-color-background, 0 0% 0%));
--color-background-highlight: hsl(var(--nordstar-color-background-highlight, 0 0% 15%));
--color-primary: hsl(var(--nordstar-color-primary, 220 50% 50%));
--color-primary-foreground: hsl(var(--nordstar-color-primary-foreground, 0 0% 100%));
--color-secondary: hsl(var(--nordstar-color-secondary, 280 50% 50%));
--color-secondary-foreground: hsl(var(--nordstar-color-secondary-foreground, 0 0% 100%));
--color-error: hsl(var(--nordstar-color-error, 0 51% 49%));
/* Fonts. */
--font-heading: var(--nordstar-font-heading, var(--nordstar-font-sans, var(--nordstar-font-fallback)));
--font-body: var(--nordstar-font-body, var(--nordstar-font-sans, var(--nordstar-font-fallback)));
--font-sans: var(--nordstar-font-sans, var(--nordstar-font-fallback));
--font-mono: var(--nordstar-font-mono, monospace);
/* Borders — referenced as border-1/2/4 (custom Nordstar widths). */
--border-width-1: var(--nordstar-border-width-small, 1px);
--border-width-2: var(--nordstar-border-width, 2px);
--border-width-4: var(--nordstar-border-width-large, 4px);
/*
* Easing — characterful curves shared across the system.
* `ease-out-soft` decelerates hard (good for entrances); `ease-spring`
* overshoots a touch (good for toggles/presses that should feel physical).
*/
--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
/*
* Elevation — a three-step shadow scale tuned to read on the near-black
* default surface (a tight contact shadow layered under a soft ambient one).
* `shadow-raised` lifts resting surfaces (cards, buttons); `shadow-overlay`
* and `shadow-floating` sit under portalled surfaces (menus, tooltips).
*/
--shadow-raised: 0 1px 2px -1px hsl(0 0% 0% / 0.55), 0 6px 16px -8px hsl(0 0% 0% / 0.45);
--shadow-overlay: 0 8px 24px -6px hsl(0 0% 0% / 0.65), 0 4px 10px -4px hsl(0 0% 0% / 0.5);
--shadow-floating: 0 18px 48px -12px hsl(0 0% 0% / 0.72), 0 6px 16px -6px hsl(0 0% 0% / 0.55);
/*
* Overlay entrance choreography. Radix unmounts portalled surfaces on close,
* so only the enter is animated; the global prefers-reduced-motion reset
* neutralises it for users who opt out.
*/
--animate-overlay-in: overlay-in 0.16s var(--ease-out-soft);
/*
* Disclosure (accordion) height choreography, driven by the height Radix
* measures onto `--radix-accordion-content-height`. Both directions animate
* because the content stays mounted while collapsing.
*/
--animate-accordion-down: accordion-down 0.2s var(--ease-out-soft);
--animate-accordion-up: accordion-up 0.2s var(--ease-out-soft);
/* Inheritance helpers (preserves text-inherit / font-inherit semantics from v3 config). */
--text-inherit: inherit;
--font-weight-inherit: inherit;
@keyframes overlay-in {
from {
opacity: 0;
transform: translateY(-0.25rem) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
}
/* :root baseline — works without <NordstarProvider/>. */
:root {
--nordstar-font-fallback:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue",
sans-serif;
--nordstar-border-width-small: 0.138rem;
--nordstar-border-width: 0.2rem;
--nordstar-border-width-large: 0.29rem;
--nordstar-border-radius: 0.45rem;
--nordstar-layout-page-width: min(1200px, 100% - 2rem);
--nordstar-layout-page-spacing: 1rem;
--nordstar-layout-section-spacing: 1rem;
--nordstar-layout-section-padding: 1.75rem;
--nordstar-layout-block-padding: 1rem;
--nordstar-duration-short: 0.25s;
--nordstar-duration-medium: 0.5s;
font-family: var(--font-sans);
color: hsl(var(--nordstar-color-foreground, 0 0% 100%));
background: hsl(var(--nordstar-color-background, 0 0% 0%));
/* Engine/platform-specific tweaks */
-webkit-text-size-adjust: 100%;
}
@layer base {
a,
button,
[role="button"],
input,
select,
textarea,
img,
svg {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
}
/*
* Honor the user's reduced-motion preference. Only applies when the OS-level
* setting is enabled, so it never removes motion the user hasn't opted out of.
*/
@media (prefers-reduced-motion: reduce) {
/* biome-ignore-start lint/complexity/noImportantStyles: a universal reduced-motion reset must override Tailwind's transition/animation utilities, which a `*` selector can only do with !important */
*,
::before,
::after {
animation-duration: 0.01ms ;
animation-iteration-count: 1 ;
transition-duration: 0.01ms ;
scroll-behavior: auto ;
}
/* biome-ignore-end lint/complexity/noImportantStyles: see above */
}
/* @source directive appended at build time. */
@source "./";