Tailwind teal 11 shades, 50 to 950

:root {
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-teal-950: #042f2e;
}

// tailwind.config.js — teal is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        teal: {
          50: '#f0fdfa',
          100: '#ccfbf1',
          200: '#99f6e4',
          300: '#5eead4',
          400: '#2dd4bf',
          500: '#14b8a6',
          600: '#0d9488',
          700: '#0f766e',
          800: '#115e59',
          900: '#134e4a',
          950: '#042f2e',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own teal; these pin the v3 values. */
  --color-teal-50: oklch(0.984 0.014 180.7);
  --color-teal-100: oklch(0.953 0.050 180.8);
  --color-teal-200: oklch(0.910 0.093 180.4);
  --color-teal-300: oklch(0.855 0.125 181.1);
  --color-teal-400: oklch(0.785 0.133 181.9);
  --color-teal-500: oklch(0.704 0.123 182.5);
  --color-teal-600: oklch(0.600 0.104 184.7);
  --color-teal-700: oklch(0.511 0.086 186.4);
  --color-teal-800: oklch(0.437 0.071 188.2);
  --color-teal-900: oklch(0.386 0.059 188.4);
  --color-teal-950: oklch(0.277 0.045 192.5);
}

{
  "color": {
    "teal": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9412, 0.9922, 0.9804],
          "hex": "#f0fdfa"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8, 0.9843, 0.9451],
          "hex": "#ccfbf1"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6, 0.9647, 0.8941],
          "hex": "#99f6e4"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3686, 0.9176, 0.8314],
          "hex": "#5eead4"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1765, 0.8314, 0.749],
          "hex": "#2dd4bf"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0784, 0.7216, 0.651],
          "hex": "#14b8a6"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.051, 0.5804, 0.5333],
          "hex": "#0d9488"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0588, 0.4627, 0.4314],
          "hex": "#0f766e"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0667, 0.3686, 0.349],
          "hex": "#115e59"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0745, 0.3059, 0.2902],
          "hex": "#134e4a"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0157, 0.1843, 0.1804],
          "hex": "#042f2e"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let teal50 = Color(.sRGB, red: 0.941, green: 0.992, blue: 0.980, opacity: 1)
    static let teal100 = Color(.sRGB, red: 0.800, green: 0.984, blue: 0.945, opacity: 1)
    static let teal200 = Color(.sRGB, red: 0.600, green: 0.965, blue: 0.894, opacity: 1)
    static let teal300 = Color(.sRGB, red: 0.369, green: 0.918, blue: 0.831, opacity: 1)
    static let teal400 = Color(.sRGB, red: 0.176, green: 0.831, blue: 0.749, opacity: 1)
    static let teal500 = Color(.sRGB, red: 0.078, green: 0.722, blue: 0.651, opacity: 1)
    static let teal600 = Color(.sRGB, red: 0.051, green: 0.580, blue: 0.533, opacity: 1)
    static let teal700 = Color(.sRGB, red: 0.059, green: 0.463, blue: 0.431, opacity: 1)
    static let teal800 = Color(.sRGB, red: 0.067, green: 0.369, blue: 0.349, opacity: 1)
    static let teal900 = Color(.sRGB, red: 0.075, green: 0.306, blue: 0.290, opacity: 1)
    static let teal950 = Color(.sRGB, red: 0.016, green: 0.184, blue: 0.180, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Teal50 = Color(0xFFF0FDFA)
    val Teal100 = Color(0xFFCCFBF1)
    val Teal200 = Color(0xFF99F6E4)
    val Teal300 = Color(0xFF5EEAD4)
    val Teal400 = Color(0xFF2DD4BF)
    val Teal500 = Color(0xFF14B8A6)
    val Teal600 = Color(0xFF0D9488)
    val Teal700 = Color(0xFF0F766E)
    val Teal800 = Color(0xFF115E59)
    val Teal900 = Color(0xFF134E4A)
    val Teal950 = Color(0xFF042F2E)
}