Tailwind zinc 11 shades, 50 to 950

:root {
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
}

// tailwind.config.js — zinc is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        zinc: {
          50: '#fafafa',
          100: '#f4f4f5',
          200: '#e4e4e7',
          300: '#d4d4d8',
          400: '#a1a1aa',
          500: '#71717a',
          600: '#52525b',
          700: '#3f3f46',
          800: '#27272a',
          900: '#18181b',
          950: '#09090b',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own zinc; these pin the v3 values. */
  --color-zinc-50: oklch(0.985 0.000 0);
  --color-zinc-100: oklch(0.967 0.001 286.4);
  --color-zinc-200: oklch(0.920 0.004 286.3);
  --color-zinc-300: oklch(0.871 0.005 286.3);
  --color-zinc-400: oklch(0.712 0.013 286.1);
  --color-zinc-500: oklch(0.552 0.014 285.9);
  --color-zinc-600: oklch(0.442 0.015 285.8);
  --color-zinc-700: oklch(0.370 0.012 285.8);
  --color-zinc-800: oklch(0.274 0.005 286.0);
  --color-zinc-900: oklch(0.210 0.006 285.9);
  --color-zinc-950: oklch(0.141 0.004 285.8);
}

{
  "color": {
    "zinc": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9804, 0.9804, 0.9804],
          "hex": "#fafafa"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9569, 0.9569, 0.9608],
          "hex": "#f4f4f5"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8941, 0.8941, 0.9059],
          "hex": "#e4e4e7"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8314, 0.8314, 0.8471],
          "hex": "#d4d4d8"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6314, 0.6314, 0.6667],
          "hex": "#a1a1aa"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4431, 0.4431, 0.4784],
          "hex": "#71717a"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3216, 0.3216, 0.3569],
          "hex": "#52525b"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2471, 0.2471, 0.2745],
          "hex": "#3f3f46"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1529, 0.1529, 0.1647],
          "hex": "#27272a"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0941, 0.0941, 0.1059],
          "hex": "#18181b"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0353, 0.0353, 0.0431],
          "hex": "#09090b"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let zinc50 = Color(.sRGB, red: 0.980, green: 0.980, blue: 0.980, opacity: 1)
    static let zinc100 = Color(.sRGB, red: 0.957, green: 0.957, blue: 0.961, opacity: 1)
    static let zinc200 = Color(.sRGB, red: 0.894, green: 0.894, blue: 0.906, opacity: 1)
    static let zinc300 = Color(.sRGB, red: 0.831, green: 0.831, blue: 0.847, opacity: 1)
    static let zinc400 = Color(.sRGB, red: 0.631, green: 0.631, blue: 0.667, opacity: 1)
    static let zinc500 = Color(.sRGB, red: 0.443, green: 0.443, blue: 0.478, opacity: 1)
    static let zinc600 = Color(.sRGB, red: 0.322, green: 0.322, blue: 0.357, opacity: 1)
    static let zinc700 = Color(.sRGB, red: 0.247, green: 0.247, blue: 0.275, opacity: 1)
    static let zinc800 = Color(.sRGB, red: 0.153, green: 0.153, blue: 0.165, opacity: 1)
    static let zinc900 = Color(.sRGB, red: 0.094, green: 0.094, blue: 0.106, opacity: 1)
    static let zinc950 = Color(.sRGB, red: 0.035, green: 0.035, blue: 0.043, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Zinc50 = Color(0xFFFAFAFA)
    val Zinc100 = Color(0xFFF4F4F5)
    val Zinc200 = Color(0xFFE4E4E7)
    val Zinc300 = Color(0xFFD4D4D8)
    val Zinc400 = Color(0xFFA1A1AA)
    val Zinc500 = Color(0xFF71717A)
    val Zinc600 = Color(0xFF52525B)
    val Zinc700 = Color(0xFF3F3F46)
    val Zinc800 = Color(0xFF27272A)
    val Zinc900 = Color(0xFF18181B)
    val Zinc950 = Color(0xFF09090B)
}