Tailwind slate 11 shades, 50 to 950

:root {
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
}

// tailwind.config.js — slate is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        slate: {
          50: '#f8fafc',
          100: '#f1f5f9',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b',
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          900: '#0f172a',
          950: '#020617',
        },
      },
    },
  },
};

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own slate; these pin the v3 values. */
  --color-slate-50: oklch(0.984 0.003 247.9);
  --color-slate-100: oklch(0.968 0.007 247.9);
  --color-slate-200: oklch(0.929 0.013 255.5);
  --color-slate-300: oklch(0.869 0.020 252.9);
  --color-slate-400: oklch(0.711 0.035 256.8);
  --color-slate-500: oklch(0.554 0.041 257.4);
  --color-slate-600: oklch(0.446 0.037 257.3);
  --color-slate-700: oklch(0.372 0.039 257.3);
  --color-slate-800: oklch(0.279 0.037 260.0);
  --color-slate-900: oklch(0.208 0.040 265.8);
  --color-slate-950: oklch(0.129 0.041 264.7);
}

{
  "color": {
    "slate": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9725, 0.9804, 0.9882],
          "hex": "#f8fafc"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9451, 0.9608, 0.9765],
          "hex": "#f1f5f9"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8863, 0.9098, 0.9412],
          "hex": "#e2e8f0"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7961, 0.8353, 0.8824],
          "hex": "#cbd5e1"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.5804, 0.6392, 0.7216],
          "hex": "#94a3b8"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3922, 0.4549, 0.5451],
          "hex": "#64748b"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2784, 0.3333, 0.4118],
          "hex": "#475569"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2, 0.2549, 0.3333],
          "hex": "#334155"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1176, 0.1608, 0.2314],
          "hex": "#1e293b"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0588, 0.0902, 0.1647],
          "hex": "#0f172a"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0078, 0.0235, 0.0902],
          "hex": "#020617"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let slate50 = Color(.sRGB, red: 0.973, green: 0.980, blue: 0.988, opacity: 1)
    static let slate100 = Color(.sRGB, red: 0.945, green: 0.961, blue: 0.976, opacity: 1)
    static let slate200 = Color(.sRGB, red: 0.886, green: 0.910, blue: 0.941, opacity: 1)
    static let slate300 = Color(.sRGB, red: 0.796, green: 0.835, blue: 0.882, opacity: 1)
    static let slate400 = Color(.sRGB, red: 0.580, green: 0.639, blue: 0.722, opacity: 1)
    static let slate500 = Color(.sRGB, red: 0.392, green: 0.455, blue: 0.545, opacity: 1)
    static let slate600 = Color(.sRGB, red: 0.278, green: 0.333, blue: 0.412, opacity: 1)
    static let slate700 = Color(.sRGB, red: 0.200, green: 0.255, blue: 0.333, opacity: 1)
    static let slate800 = Color(.sRGB, red: 0.118, green: 0.161, blue: 0.231, opacity: 1)
    static let slate900 = Color(.sRGB, red: 0.059, green: 0.090, blue: 0.165, opacity: 1)
    static let slate950 = Color(.sRGB, red: 0.008, green: 0.024, blue: 0.090, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Slate50 = Color(0xFFF8FAFC)
    val Slate100 = Color(0xFFF1F5F9)
    val Slate200 = Color(0xFFE2E8F0)
    val Slate300 = Color(0xFFCBD5E1)
    val Slate400 = Color(0xFF94A3B8)
    val Slate500 = Color(0xFF64748B)
    val Slate600 = Color(0xFF475569)
    val Slate700 = Color(0xFF334155)
    val Slate800 = Color(0xFF1E293B)
    val Slate900 = Color(0xFF0F172A)
    val Slate950 = Color(0xFF020617)
}