convert colors back to hex

This commit is contained in:
Troy 2025-01-23 11:59:09 +00:00
parent 9a9f9926e8
commit 497de100b2
Signed by: troy
GPG key ID: DFC06C02ED3B4711
2 changed files with 80 additions and 87 deletions

View file

@ -4,6 +4,7 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@config "../../tailwind.config.ts";
@theme inline {
--color-primary: var(--primary);
@ -13,23 +14,23 @@
}
@theme {
--font-sans: "Outfit Variable", "sans-serif";
--font-mono: "Red Hat Mono Variable", "monospace";
}
:root {
--primary: 0deg 0% 99%;
--secondary: 0deg 0% 13%;
--tertiary: 0deg 0% 45%;
--accent: 0deg 0% 39%;
}
[data-theme="dark"] {
--primary: 0deg 0% 0%;
--secondary: 0deg 0% 93%;
--tertiary: 0deg 0% 50%;
--accent: 0deg 0% 71%;
--primary: #fcfcfc;
--secondary: #212121;
--tertiary: #737373;
--accent: #636363;
}
@media (prefers-color-scheme: dark) {
--primary: #000000;
--secondary: #ededed;
--tertiary: #737373;
--accent: #636363;
.astro-code,
.astro-code span {
color: var(--shiki-dark) !important;
@ -56,79 +57,3 @@
display: none;
}
}
/*
export default {
theme: {
extend: {
fontFamily: {
sans: ["'Outfit Variable'", ...defaultTheme.fontFamily.sans],
serif: [...defaultTheme.fontFamily.serif],
mono: ["'Red Hat Mono Variable'", ...defaultTheme.fontFamily.mono],
},
},
animation: {
reveal: "reveal 0.3s forwards ease-in-out",
logo: "logo 0.5s forwards ease-out",
"gradient-x": "gradient-x 6s ease infinite",
"gradient-y": "gradient-y 6s ease infinite",
"gradient-xy": "gradient-xy 6s ease infinite",
},
keyframes: {
reveal: {
"0%": {
transform: "translateY(20px)",
opacity: "0",
filter: "blur(4px)",
},
"100%": {
transform: "translateY(0px)",
opacity: "1",
filter: "blur(0px)",
},
},
logo: {
"0%": {
transform: "translateY(100%)",
color: "hsl(var(--primary))",
},
"100%": {
transform: "translateY(0%)",
color: "hsl(var(--secondary))",
},
},
"gradient-y": {
"0%, 100%": {
"background-size": "400% 400%",
"background-position": "center top",
},
"50%": {
"background-size": "200% 200%",
"background-position": "center center",
},
},
"gradient-x": {
"0%, 100%": {
"background-size": "200% 200%",
"background-position": "left center",
},
"50%": {
"background-size": "200% 200%",
"background-position": "right center",
},
},
"gradient-xy": {
"0%, 100%": {
"background-size": "400% 400%",
"background-position": "left center",
},
"50%": {
"background-size": "200% 200%",
"background-position": "right center",
},
},
},
},
plugins: [require("@tailwindcss/typography")],
} satisfies Config;
*/

68
tailwind.config.ts Normal file
View file

@ -0,0 +1,68 @@
import type { Config } from "tailwindcss";
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
animation: {
reveal: "reveal 0.3s forwards ease-in-out",
logo: "logo 0.5s forwards ease-out",
"gradient-x": "gradient-x 6s ease infinite",
"gradient-y": "gradient-y 6s ease infinite",
"gradient-xy": "gradient-xy 6s ease infinite",
},
keyframes: {
reveal: {
"0%": {
transform: "translateY(20px)",
opacity: "0",
filter: "blur(4px)",
},
"100%": {
transform: "translateY(0px)",
opacity: "1",
filter: "blur(0px)",
},
},
logo: {
"0%": {
transform: "translateY(100%)",
color: "hsl(var(--primary))",
},
"100%": {
transform: "translateY(0%)",
color: "hsl(var(--secondary))",
},
},
"gradient-y": {
"0%, 100%": {
"background-size": "400% 400%",
"background-position": "center top",
},
"50%": {
"background-size": "200% 200%",
"background-position": "center center",
},
},
"gradient-x": {
"0%, 100%": {
"background-size": "200% 200%",
"background-position": "left center",
},
"50%": {
"background-size": "200% 200%",
"background-position": "right center",
},
},
"gradient-xy": {
"0%, 100%": {
"background-size": "400% 400%",
"background-position": "left center",
},
"50%": {
"background-size": "200% 200%",
"background-position": "right center",
},
},
},
},
} satisfies Config;