Tailwind gray 11 shades, 50 to 950

:root {
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
}

// tailwind.config.js — gray is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
          950: '#030712',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own gray; these pin the v3 values. */
  --color-gray-50: oklch(0.985 0.002 247.8);
  --color-gray-100: oklch(0.967 0.003 264.5);
  --color-gray-200: oklch(0.928 0.006 264.5);
  --color-gray-300: oklch(0.872 0.009 258.3);
  --color-gray-400: oklch(0.714 0.019 261.3);
  --color-gray-500: oklch(0.551 0.023 264.4);
  --color-gray-600: oklch(0.446 0.026 256.8);
  --color-gray-700: oklch(0.373 0.031 259.7);
  --color-gray-800: oklch(0.278 0.030 256.8);
  --color-gray-900: oklch(0.210 0.032 264.7);
  --color-gray-950: oklch(0.130 0.027 261.7);
}

{
  "color": {
    "gray": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9765, 0.9804, 0.9843],
          "hex": "#f9fafb"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9529, 0.9569, 0.9647],
          "hex": "#f3f4f6"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.898, 0.9059, 0.9216],
          "hex": "#e5e7eb"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8196, 0.8353, 0.8588],
          "hex": "#d1d5db"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6118, 0.6392, 0.6863],
          "hex": "#9ca3af"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4196, 0.4471, 0.502],
          "hex": "#6b7280"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2941, 0.3333, 0.3882],
          "hex": "#4b5563"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2157, 0.2549, 0.3176],
          "hex": "#374151"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1216, 0.1608, 0.2157],
          "hex": "#1f2937"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0667, 0.0941, 0.1529],
          "hex": "#111827"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0118, 0.0275, 0.0706],
          "hex": "#030712"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let gray50 = Color(.sRGB, red: 0.976, green: 0.980, blue: 0.984, opacity: 1)
    static let gray100 = Color(.sRGB, red: 0.953, green: 0.957, blue: 0.965, opacity: 1)
    static let gray200 = Color(.sRGB, red: 0.898, green: 0.906, blue: 0.922, opacity: 1)
    static let gray300 = Color(.sRGB, red: 0.820, green: 0.835, blue: 0.859, opacity: 1)
    static let gray400 = Color(.sRGB, red: 0.612, green: 0.639, blue: 0.686, opacity: 1)
    static let gray500 = Color(.sRGB, red: 0.420, green: 0.447, blue: 0.502, opacity: 1)
    static let gray600 = Color(.sRGB, red: 0.294, green: 0.333, blue: 0.388, opacity: 1)
    static let gray700 = Color(.sRGB, red: 0.216, green: 0.255, blue: 0.318, opacity: 1)
    static let gray800 = Color(.sRGB, red: 0.122, green: 0.161, blue: 0.216, opacity: 1)
    static let gray900 = Color(.sRGB, red: 0.067, green: 0.094, blue: 0.153, opacity: 1)
    static let gray950 = Color(.sRGB, red: 0.012, green: 0.027, blue: 0.071, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Gray50 = Color(0xFFF9FAFB)
    val Gray100 = Color(0xFFF3F4F6)
    val Gray200 = Color(0xFFE5E7EB)
    val Gray300 = Color(0xFFD1D5DB)
    val Gray400 = Color(0xFF9CA3AF)
    val Gray500 = Color(0xFF6B7280)
    val Gray600 = Color(0xFF4B5563)
    val Gray700 = Color(0xFF374151)
    val Gray800 = Color(0xFF1F2937)
    val Gray900 = Color(0xFF111827)
    val Gray950 = Color(0xFF030712)
}