mirror of
https://github.com/zen-browser/www.git
synced 2025-07-13 11:45:31 +02:00
f752156d68
This commit updates the color variables in the `globals.css` and `tailwind.config.ts` files. The new color variables are `color-1`, `color-2`, `color-3`, `color-4`, and `color-5`. These variables are used to define the colors for the Zen Browser UI. The changes were made to improve the consistency and readability of the code.
166 lines
4.5 KiB
TypeScript
166 lines
4.5 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
import { fontFamily } from "tailwindcss/defaultTheme";
|
|
|
|
const config = {
|
|
darkMode: ["class"],
|
|
content: [
|
|
"./pages/**/*.{ts,tsx}",
|
|
"./components/**/*.{ts,tsx}",
|
|
"./app/**/*.{ts,tsx}",
|
|
"./src/**/*.{ts,tsx}",
|
|
],
|
|
prefix: "",
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: "2rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["var(--font-sans)", ...fontFamily.sans],
|
|
},
|
|
colors: {
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
surface: "var(--surface)",
|
|
"color-1": "hsl(var(--color-1))",
|
|
"color-2": "hsl(var(--color-2))",
|
|
"color-3": "hsl(var(--color-3))",
|
|
"color-4": "hsl(var(--color-4))",
|
|
"color-5": "hsl(var(--color-5))",
|
|
primary: {
|
|
DEFAULT: "hsl(var(--primary))",
|
|
foreground: "hsl(var(--primary-foreground))",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "hsl(var(--secondary))",
|
|
foreground: "hsl(var(--secondary-foreground))",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--destructive))",
|
|
foreground: "hsl(var(--destructive-foreground))",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(var(--muted))",
|
|
foreground: "hsl(var(--muted-foreground))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
foreground: "hsl(var(--accent-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
keyframes: {
|
|
rainbow: {
|
|
"0%": { "background-position": "0%" },
|
|
"100%": { "background-position": "200%" },
|
|
},
|
|
orbit: {
|
|
"0%": {
|
|
transform:
|
|
"rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
|
|
},
|
|
"100%": {
|
|
transform:
|
|
"rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
|
|
},
|
|
},
|
|
"shine-pulse": {
|
|
"0%": {
|
|
"background-position": "0% 0%",
|
|
},
|
|
"50%": {
|
|
"background-position": "100% 100%",
|
|
},
|
|
to: {
|
|
"background-position": "0% 0%",
|
|
},
|
|
},
|
|
"accordion-down": {
|
|
from: { height: "0" },
|
|
to: { height: "var(--radix-accordion-content-height)" },
|
|
},
|
|
"accordion-up": {
|
|
from: { height: "var(--radix-accordion-content-height)" },
|
|
to: { height: "0" },
|
|
},
|
|
"border-beam": {
|
|
"100%": {
|
|
"offset-distance": "100%",
|
|
},
|
|
},
|
|
"image-glow": {
|
|
"0%": {
|
|
opacity: "0",
|
|
"animation-timing-function": "cubic-bezier(0.74, 0.25, 0.76, 1)",
|
|
},
|
|
"10%": {
|
|
opacity: "0.7",
|
|
"animation-timing-function": "cubic-bezier(0.12, 0.01, 0.08, 0.99)",
|
|
},
|
|
"100%": {
|
|
opacity: "0.4",
|
|
},
|
|
},
|
|
"fade-in": {
|
|
from: { opacity: "0", transform: "translateY(-10px)" },
|
|
to: { opacity: "1", transform: "none" },
|
|
},
|
|
"fade-up": {
|
|
from: { opacity: "0", transform: "translateY(20px)" },
|
|
to: { opacity: "1", transform: "none" },
|
|
},
|
|
shimmer: {
|
|
"0%, 90%, 100%": {
|
|
"background-position": "calc(-100% - var(--shimmer-width)) 0",
|
|
},
|
|
"30%, 60%": {
|
|
"background-position": "calc(100% + var(--shimmer-width)) 0",
|
|
},
|
|
},
|
|
marquee: {
|
|
from: { transform: "translateX(0)" },
|
|
to: { transform: "translateX(calc(-100% - var(--gap)))" },
|
|
},
|
|
"marquee-vertical": {
|
|
from: { transform: "translateY(0)" },
|
|
to: { transform: "translateY(calc(-100% - var(--gap)))" },
|
|
},
|
|
},
|
|
animation: {
|
|
rainbow: "rainbow var(--speed, 2s) infinite linear",
|
|
orbit: "orbit calc(var(--duration)*1s) linear infinite",
|
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
"border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
|
|
"image-glow": "image-glow 4100ms 600ms ease-out forwards",
|
|
"fade-in": "fade-in 1000ms var(--animation-delay, 0ms) ease forwards",
|
|
"fade-up": "fade-up 1000ms var(--animation-delay, 0ms) ease forwards",
|
|
shimmer: "shimmer 8s infinite",
|
|
marquee: "marquee var(--duration) infinite linear",
|
|
"marquee-vertical": "marquee-vertical var(--duration) linear infinite",
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("tailwindcss-animate")],
|
|
} satisfies Config;
|
|
|
|
export default config;
|