mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-30 03:00:41 -04:00
a0a7129081
## Changes 🏗️ I had a catch-up yesterday with Olivia, we agreed to implement these fixes on our 👶🏽 component library ### 1. Update button loading states <img width="600" alt="Screenshot 2025-06-27 at 15 13 12" src="https://github.com/user-attachments/assets/a9ec8d0b-5f2c-4675-ae38-41ce81a3d699" /> When `loading`, all buttons will have a grey background and white text, except if it is the `ghost` variant. ### 2. Update new border radius tokens <img width="300" alt="Screenshot 2025-06-27 at 15 15 46" src="https://github.com/user-attachments/assets/9cc7ea52-420c-4d61-b682-0cffe1843ad8" /> Updated the `border-radius` scale to the one in Figma. [Reference](https://www.figma.com/design/nO9NFynNuicLtkiwvOxrbz/AutoGPT-Design-System?node-id=634-8255&t=hGgDUzLoLdSqpJIe-1). ### 3. Add `secondary` link variant <img width="319" alt="Screenshot 2025-06-27 at 15 13 02" src="https://github.com/user-attachments/assets/dc307d32-2f35-4110-bc7e-0ef6dd3d78e3" /> We have 2 types of links, `primary` ( _without underline but shows on hover_ ) and `secondary` ( _with underline_ ) ## Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Run Storybook locally, stories look good --------- Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
164 lines
4.4 KiB
TypeScript
164 lines
4.4 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
import tailwindcssAnimate from "tailwindcss-animate";
|
|
import { colors } from "./src/components/styles/colors";
|
|
|
|
const config = {
|
|
darkMode: ["class"],
|
|
content: ["./src/**/*.{ts,tsx}"],
|
|
prefix: "",
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: "2rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["var(--font-geist-sans)"],
|
|
mono: ["var(--font-geist-mono)"],
|
|
poppins: ["var(--font-poppins)"],
|
|
},
|
|
colors: {
|
|
// *** APPROVED DESIGN SYSTEM COLORS ***
|
|
// These are the ONLY colors that should be used in our app
|
|
...colors,
|
|
|
|
// Legacy colors - DO NOT USE THESE IN NEW CODE
|
|
// These are kept only to prevent breaking existing styles
|
|
// Use the approved design system colors above instead
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
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))",
|
|
},
|
|
customGray: {
|
|
100: "#d9d9d9",
|
|
200: "#a8a8a8",
|
|
300: "#878787",
|
|
400: "#646464",
|
|
500: "#474747",
|
|
600: "#282828",
|
|
700: "#272727",
|
|
},
|
|
},
|
|
spacing: {
|
|
// Tailwind spacing + custom sizes
|
|
0: "0rem",
|
|
0.5: "0.125rem",
|
|
1: "0.25rem",
|
|
1.5: "0.375rem",
|
|
2: "0.5rem",
|
|
2.5: "0.625rem",
|
|
3: "0.75rem",
|
|
3.5: "0.875rem",
|
|
4: "1rem",
|
|
5: "1.25rem",
|
|
6: "1.5rem",
|
|
7: "1.75rem",
|
|
7.5: "1.875rem",
|
|
8: "2rem",
|
|
8.5: "2.125rem",
|
|
9: "2.25rem",
|
|
10: "2.5rem",
|
|
11: "2.75rem",
|
|
12: "3rem",
|
|
14: "3.5rem",
|
|
16: "4rem",
|
|
18: "4.5rem",
|
|
20: "5rem",
|
|
24: "6rem",
|
|
28: "7rem",
|
|
32: "8rem",
|
|
36: "9rem",
|
|
40: "10rem",
|
|
44: "11rem",
|
|
48: "12rem",
|
|
52: "13rem",
|
|
56: "14rem",
|
|
60: "15rem",
|
|
64: "16rem",
|
|
68: "17rem",
|
|
70: "17.5rem",
|
|
71: "17.75rem",
|
|
72: "18rem",
|
|
76: "19rem",
|
|
80: "20rem",
|
|
96: "24rem",
|
|
},
|
|
borderRadius: {
|
|
// Design system border radius tokens from Figma
|
|
xs: "0.25rem", // 4px
|
|
s: "0.5rem", // 8px
|
|
m: "0.75rem", // 12px
|
|
l: "1rem", // 16px
|
|
xl: "1.25rem", // 20px
|
|
"2xl": "1.5rem", // 24px
|
|
full: "9999px", // For pill buttons
|
|
|
|
// Legacy values - kept for backward compatibility
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
boxShadow: {
|
|
subtle: "0px 1px 2px 0px rgba(0,0,0,0.05)",
|
|
},
|
|
keyframes: {
|
|
"accordion-down": {
|
|
from: { height: "0" },
|
|
to: { height: "var(--radix-accordion-content-height)" },
|
|
},
|
|
"accordion-up": {
|
|
from: { height: "var(--radix-accordion-content-height)" },
|
|
to: { height: "0" },
|
|
},
|
|
"fade-in": {
|
|
"0%": { opacity: "0" }, // Start with opacity 0
|
|
"100%": { opacity: "1" }, // End with opacity 1
|
|
},
|
|
},
|
|
animation: {
|
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
"fade-in": "fade-in 0.2s ease-out",
|
|
},
|
|
transitionDuration: {
|
|
"2000": "2000ms",
|
|
},
|
|
},
|
|
},
|
|
plugins: [tailwindcssAnimate],
|
|
} satisfies Config;
|
|
|
|
export default config;
|