SCSS Variables

npx nightfall-css generate --format scss --output nightfall-theme.scss

// Generated by Nightfall CSS v0.1.0
// Direction: light → dark | Preset: neutral

// Individual variables
$nf-bg-page: #0f1012;
$nf-bg-surface: #181a1e;
$nf-bg-elevated: #22242a;
$nf-bg-overlay: #2c2e36;

$nf-text-heading: #f0f1f3;
$nf-text-body: #c8cad0;
$nf-text-muted: #8b8f9a;

$nf-border-default: rgba(255, 255, 255, 0.08);
$nf-border-strong: rgba(255, 255, 255, 0.14);

$nf-brand-primary: #3b82f6;
$nf-brand-text: #f8faff;

// Color map for iteration
$nightfall-colors: (
  'bg-page': $nf-bg-page,
  'bg-surface': $nf-bg-surface,
  'bg-elevated': $nf-bg-elevated,
  'bg-overlay': $nf-bg-overlay,
  'text-heading': $nf-text-heading,
  'text-body': $nf-text-body,
  'text-muted': $nf-text-muted,
  'border-default': $nf-border-default,
  'border-strong': $nf-border-strong,
  'brand-primary': $nf-brand-primary,
  'brand-text': $nf-brand-text,
);

// Shadow map
$nightfall-shadows: (
  'sm': (0 1px 2px rgba(0, 0, 0, 0.30)),
  'md': (0 4px 8px rgba(0, 0, 0, 0.40)),
  'lg': (0 10px 20px rgba(0, 0, 0, 0.50)),
);

@import './nightfall-theme';

.card {
  background: $nf-bg-surface;
  border: 1px solid $nf-border-default;
  color: $nf-text-body;

  h2 { color: $nf-text-heading; }
  .meta { color: $nf-text-muted; }
}

@import './nightfall-theme';

// Generate CSS custom properties from the map
:root[data-theme="dark"] {
  @each $name, $value in $nightfall-colors {
  --nf-#{$name}:  #{$value};
  }
}

// Generate utility classes
@each $name, $value in $nightfall-colors {
  .nf-bg-#{$name} { background-color: $value; }
  .nf-text-#{$name} { color: $value; }
}

@import './nightfall-theme';

@mixin dark-card {
  background: $nf-bg-surface;
  border: 1px solid $nf-border-default;
  border-radius: 8px;
  box-shadow: map-get($nightfall-shadows, 'md');
}

@mixin dark-text($level: 'body') {
  color: map-get($nightfall-colors, 'text-#{$level}');
}

// Usage
.pricing-card {
  @include dark-card;
  @include dark-text('heading');
}