mirror/hatchet
1
0
Fork 0
mirror of https://github.com/hatchet-dev/hatchet.git synced 2026-01-31 05:08:51 -06:00
Code Issues Packages Projects Releases Wiki Activity

colors

Browse Source
This commit is contained in:
gabriel ruttner
2025-12-24 08:50:44 -05:00
parent 4644c9642d
commit 91fb26cb03
4 changed files with 87 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/src/components/v1/ui/button.tsx
View File

@@ -22,7 +22,7 @@ const buttonVariants = cva(
},
variant: {
default:
'bg-primary text-primary-foreground shadow hover:bg-primary/90',
'dark:bg-primary/50 bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
@@ -32,7 +32,7 @@ const buttonVariants = cva(
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
icon: 'hover:bg-accent hover:text-accent-foreground p-1',
cta: 'bg-primary text-primary-foreground shadow hover:bg-primary/90 h-8 border px-3',
cta: 'bg-primary/80 text-primary-foreground shadow hover:bg-primary/90 h-8 border px-3',
},
},
defaultVariants: {

22
frontend/app/src/index.css
View File

@@ -70,6 +70,15 @@
@layer base {
:root {
/* Hatchet brand colors (aligned with hatchet-marketing/src/styles/global.css) */
--navy: 228 61% 10%; /* #0A1029 */
--cyan: 212 100% 86%; /* #B8D9FF */
--navy-dark: 227 88% 6%; /* #02081D */
--cyan-dark: 212 60% 78%; /* #A5C5E9 */
--blue: 212 100% 60%; /* #3392FF */
--magenta: 287 69% 57%; /* #BC46DD */
--yellow: 69 77% 47%; /* #B8D41C */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
@@ -79,8 +88,9 @@
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
/* Brand defaults */
--primary: var(--blue);
--primary-foreground: 0 0% 100%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
@@ -96,7 +106,7 @@
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--ring: var(--blue);
--radius: 0.5rem;
@@ -117,8 +127,8 @@
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--primary: var(--blue);
--primary-foreground: 0 0% 100%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
@@ -134,7 +144,7 @@
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--ring: var(--blue);
--chart-1: 221.2 83.2% 53.3%;
--chart-2: 212 95% 68%;

3
frontend/app/src/pages/main/v1/index.tsx
View File

@@ -42,8 +42,7 @@ function Main() {
// mainClassName="overflow-auto"
mainContainerType="inline-size"
>
{/* TODO-DESIGN: replace the color with a tailwind color */}
<div className="border-l border-t md:rounded-tl-xl p-4 h-full dark:bg-[#050A23] bg-background overflow-y-auto">
<div className="h-full overflow-y-auto border-l border-t bg-muted/30 p-4 md:rounded-tl-xl dark:bg-brand-navy/50">
<OutletWithContext context={childCtx} />
</div>
</ThreeColumnLayout>

121
frontend/app/tailwind.config.js
View File

@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
darkMode: ['class'],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
@@ -10,9 +10,9 @@ module.exports = {
theme: {
container: {
center: true,
padding: "2rem",
padding: '2rem',
screens: {
"2xl": "1400px",
'2xl': '1400px',
},
},
fontFamily: {
@@ -78,91 +78,106 @@ module.exports = {
},
extend: {
colors: {
"purple": {
"50": "hsl(252, 82%, 95%)",
"100": "hsl(252, 82%, 90%)",
"200": "hsl(252, 82%, 80%)",
"300": "hsl(252, 82%, 70%)",
"400": "hsl(252, 82%, 60%)",
"500": "hsl(252, 82%, 49%)",
"600": "hsl(252, 82%, 40%)",
"700": "hsl(252, 82%, 30%)",
"800": "hsl(252, 82%, 20%)",
"900": "hsl(252, 82%, 10%)"
purple: {
50: 'hsl(252, 82%, 95%)',
100: 'hsl(252, 82%, 90%)',
200: 'hsl(252, 82%, 80%)',
300: 'hsl(252, 82%, 70%)',
400: 'hsl(252, 82%, 60%)',
500: 'hsl(252, 82%, 49%)',
600: 'hsl(252, 82%, 40%)',
700: 'hsl(252, 82%, 30%)',
800: 'hsl(252, 82%, 20%)',
900: 'hsl(252, 82%, 10%)',
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
brand: {
navy: 'hsl(var(--navy) / <alpha-value>)',
'navy-dark': 'hsl(var(--navy-dark) / <alpha-value>)',
cyan: 'hsl(var(--cyan) / <alpha-value>)',
'cyan-dark': 'hsl(var(--cyan-dark) / <alpha-value>)',
blue: 'hsl(var(--blue) / <alpha-value>)',
magenta: 'hsl(var(--magenta) / <alpha-value>)',
yellow: 'hsl(var(--yellow) / <alpha-value>)',
/**
* Marketing names these "accent", "accent-1", "accent-2".
* We keep them under brand as aliases for convenience.
*/
accent: 'hsl(var(--blue) / <alpha-value>)',
'accent-1': 'hsl(var(--magenta) / <alpha-value>)',
'accent-2': 'hsl(var(--yellow) / <alpha-value>)',
},
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))",
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
keyframes: {
"accordion-down": {
'accordion-down': {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
to: { height: 'var(--radix-accordion-content-height)' },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: 0 },
},
"flip": {
flip: {
to: {
transform: "rotate(360deg)",
transform: 'rotate(360deg)',
},
},
"rotate": {
rotate: {
to: {
transform: "rotate(90deg)",
transform: 'rotate(90deg)',
},
},
"jiggle": {
jiggle: {
'0%, 100%': { transform: 'rotate(0deg)' },
'25%': { transform: 'rotate(5deg)' },
'75%': { transform: 'rotate(-5deg)' },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"flip": "flip 6s infinite steps(2, end)",
"rotate": "rotate 3s linear infinite both",
"jiggle": 'jiggle 0.5s ease-in-out',
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
flip: 'flip 6s infinite steps(2, end)',
rotate: 'rotate 3s linear infinite both',
jiggle: 'jiggle 0.5s ease-in-out',
},
},
},
plugins: [require("tailwindcss-animate")],
}
plugins: [require('tailwindcss-animate')],
};