Nightfall CSS

Generate

npx nightfall-css generate --format style-dict --output nightfall-style-dict.json

Output Example

The output follows the Style Dictionary property format, ready to feed into a Style Dictionary build pipeline:

nightfall-style-dict.json

{
  "color": {
    "background": {
      "page": { "value": "#0f1012" },
      "surface": { "value": "#181a1e" },
      "elevated": { "value": "#22242a" },
      "overlay": { "value": "#2c2e36" }
    },
    "text": {
      "heading": { "value": "#f0f1f3" },
      "body": { "value": "#c8cad0" },
      "muted": { "value": "#8b8f9a" }
    },
    "border": {
      "default": { "value": "rgba(255, 255, 255, 0.08)" },
      "strong": { "value": "rgba(255, 255, 255, 0.14)" }
    },
    "brand": {
      "primary": { "value": "#3b82f6" },
      "text": { "value": "#f8faff" }
    }
  },
  "shadow": {
    "sm": { "value": "0 1px 2px rgba(0,0,0,0.30)" },
    "md": { "value": "0 4px 8px rgba(0,0,0,0.40)" },
    "lg": { "value": "0 10px 20px rgba(0,0,0,0.50)" }
  }
}

Style Dictionary Config

Create a Style Dictionary configuration that consumes the Nightfall output and transforms it for your target platforms:

style-dictionary.config.js

module.exports = {
  source: ['nightfall-style-dict.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{
        destination: 'dark-theme.css',
        format: 'css/variables',
        options: {
          selector: '[data-theme="dark"]'
        }
      }]
    },
    ios: {
      transformGroup: 'ios-swift',
      buildPath: 'build/ios/',
      files: [{
        destination: 'DarkTheme.swift',
        format: 'ios-swift/class.swift',
        className: 'DarkTheme'
      }]
    },
    android: {
      transformGroup: 'android',
      buildPath: 'build/android/',
      files: [{
        destination: 'dark_theme.xml',
        format: 'android/resources'
      }]
    }
  }
};

Building

Run Style Dictionary to build the tokens for each platform:

# Install Style Dictionary
npm install style-dictionary

# Build all platforms
npx style-dictionary build

# Output:
# build/css/dark-theme.css
# build/ios/DarkTheme.swift
# build/android/dark_theme.xml

Cross-Platform Output

Style Dictionary transforms the same Nightfall tokens into native formats for each platform:

build/css/dark-theme.css

[data-theme="dark"] {
  --color-background-page:  #0f1012;
  --color-background-surface:  #181a1e;
  --color-text-heading:  #f0f1f3;
  --color-brand-primary:  #3b82f6;
}

build/ios/DarkTheme.swift

// DarkTheme.swift — Generated by Style Dictionary
public class DarkTheme {
  public static let colorBackgroundPage = UIColor(red: 0.059, green: 0.063, blue: 0.071, alpha: 1.0)
  public static let colorBackgroundSurface = UIColor(red: 0.094, green: 0.102, blue: 0.118, alpha: 1.0)
  public static let colorTextHeading = UIColor(red: 0.941, green: 0.945, blue: 0.953, alpha: 1.0)
  public static let colorBrandPrimary = UIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1.0)
}