mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-07 18:23:04 +00:00
ayu colour scheme
This commit is contained in:
Oliver Bryan
@@ -1 +1,115 @@
|
||||
@import "tailwindcss";
|
||||
@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);
|
||||
}
|
||||
|
||||
130
tailwind.config.js
Normal file
130
tailwind.config.js
Normal file
@@ -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: [],
|
||||
};
|
||||
Reference in New Issue
Block a user