ayu colour scheme

src/styles/global.css

@@ -1 +1,115 @@
 @import "tailwindcss";
+
+:root {
+    color-scheme: dark;
+
+    /* core ayu colors */
+    --ayu-bg: #10141c;
+    --ayu-fg: #bfbdb6;
+    --ayu-accent: #e6b450;
+    --ayu-highlight: #161a24;
+    --ayu-popup: #141821;
+    --ayu-link: #59c2ff;
+    --ayu-selection: #3388ff;
+    --ayu-inactive: #80b5ff;
+    --ayu-gutter: #6c7380;
+    --ayu-guide: #6c7380;
+    --ayu-shadow: #10141c;
+
+    /* diff colors */
+    --ayu-added: #7fd962;
+    --ayu-modified: #73b8ff;
+    --ayu-deleted: #f26d78;
+
+    /* semantic colors */
+    --ayu-primary: #e6b450;
+    --ayu-secondary: #59c2ff;
+    --ayu-success: #7fd962;
+    --ayu-warning: #e6b450;
+    --ayu-error: #f26d78;
+    --ayu-info: #73b8ff;
+}
+
+body {
+    background-color: var(--ayu-bg);
+    color: var(--ayu-fg);
+}
+
+.bg-ayu-bg {
+    background-color: var(--ayu-bg);
+}
+.bg-ayu-highlight {
+    background-color: var(--ayu-highlight);
+}
+.bg-ayu-popup {
+    background-color: var(--ayu-popup);
+}
+.bg-ayu-accent {
+    background-color: var(--ayu-accent);
+}
+.bg-ayu-selection {
+    background-color: var(--ayu-selection);
+}
+
+.text-ayu-fg {
+    color: var(--ayu-fg);
+}
+.text-ayu-accent {
+    color: var(--ayu-accent);
+}
+.text-ayu-link {
+    color: var(--ayu-link);
+}
+.text-ayu-gutter {
+    color: var(--ayu-gutter);
+}
+.text-ayu-success {
+    color: var(--ayu-success);
+}
+.text-ayu-warning {
+    color: var(--ayu-warning);
+}
+.text-ayu-error {
+    color: var(--ayu-error);
+}
+.text-ayu-info {
+    color: var(--ayu-info);
+}
+
+.border-ayu-accent {
+    border-color: var(--ayu-accent);
+}
+.border-ayu-gutter {
+    border-color: var(--ayu-gutter);
+}
+.border-ayu-selection {
+    border-color: var(--ayu-selection);
+}
+
+::selection {
+    background-color: rgba(
+        51,
+        136,
+        255,
+        0.25
+    ); /* --ayu-selection with opacity */
+    color: var(--ayu-fg);
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--ayu-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--ayu-gutter);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--ayu-accent);
+}

tailwind.config.js

@@ -0,0 +1,130 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+    theme: {
+        extend: {
+            colors: {
+                ayu: {
+                    // background colors
+                    bg: "#10141c",
+                    highlight: "#161a24",
+                    popup: "#141821",
+
+                    // foreground colors
+                    fg: "#bfbdb6",
+                    gutter: "#6c7380",
+                    guide: "#6c7380",
+
+                    // accent colors
+                    accent: "#e6b450",
+                    link: "#59c2ff",
+                    selection: "#3388ff",
+                    inactive: "#80b5ff",
+
+                    // state colors
+                    added: "#7fd962",
+                    modified: "#73b8ff",
+                    deleted: "#f26d78",
+
+                    // semantic colors
+                    primary: "#e6b450",
+                    secondary: "#59c2ff",
+                    success: "#7fd962",
+                    warning: "#e6b450",
+                    error: "#f26d78",
+                    info: "#73b8ff",
+
+                    // extended palette based on accent color
+                    50: "#fefbf0",
+                    100: "#fdf5da",
+                    200: "#fae9b5",
+                    300: "#f6d885",
+                    400: "#f0c053",
+                    500: "#e6b450", // primary accent
+                    600: "#d49d3a",
+                    700: "#b18432",
+                    800: "#906b2e",
+                    900: "#785628",
+                    950: "#422e14",
+                },
+
+                "ayu-blue": {
+                    50: "#eff8ff",
+                    100: "#daeffe",
+                    200: "#bee4fd",
+                    300: "#91d3fc",
+                    400: "#5db8f8",
+                    500: "#59c2ff", // link color
+                    600: "#2483e2",
+                    700: "#1b6bcf",
+                    800: "#1c58a8",
+                    900: "#1d4d85",
+                    950: "#162f51",
+                },
+
+                "ayu-green": {
+                    50: "#f0fdf1",
+                    100: "#dcfce0",
+                    200: "#bbf7c3",
+                    300: "#86efac",
+                    400: "#4ade80",
+                    500: "#7fd962", // success color
+                    600: "#16a34a",
+                    700: "#15803d",
+                    800: "#166534",
+                    900: "#14532d",
+                    950: "#052e16",
+                },
+
+                "ayu-red": {
+                    50: "#fef2f2",
+                    100: "#fee2e2",
+                    200: "#fecaca",
+                    300: "#fca5a5",
+                    400: "#f87171",
+                    500: "#f26d78", // error color
+                    600: "#dc2626",
+                    700: "#b91c1c",
+                    800: "#991b1b",
+                    900: "#7f1d1d",
+                    950: "#450a0a",
+                },
+
+                "ayu-gray": {
+                    50: "#f9fafb",
+                    100: "#f3f4f6",
+                    200: "#e5e7eb",
+                    300: "#d1d5db",
+                    400: "#9ca3af",
+                    500: "#6c7380", // gutter color
+                    600: "#4b5563",
+                    700: "#374151",
+                    800: "#1f2937",
+                    900: "#161a24", // highlight
+                    950: "#10141c", // background
+                },
+            },
+
+            fontFamily: {
+                mono: [
+                    "PragmataPro Mono Liga",
+                    "SF Mono",
+                    "Consolas",
+                    "Liberation Mono",
+                    "Menlo",
+                    "Courier",
+                    "monospace",
+                ],
+            },
+
+            borderRadius: {
+                ayu: "4px", // selection corner radius from theme
+            },
+
+            spacing: {
+                "ayu-shadow": "3px", // shadow width from theme
+            },
+        },
+    },
+    plugins: [],
+};