From 8bcb5878243a2c4f595e295700cea11e986ded4a Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 8 Nov 2024 13:47:04 +0000 Subject: [PATCH 1/2] chore: uses hsl for tailwind and shadcn theming --- site/src/index.css | 72 ++++++++++++++++++++++++----------------- site/tailwind.config.js | 36 ++++++++++++--------- 2 files changed, 62 insertions(+), 46 deletions(-) diff --git a/site/src/index.css b/site/src/index.css index 07b0819fe4a3d..aeca658d11995 100644 --- a/site/src/index.css +++ b/site/src/index.css @@ -4,38 +4,50 @@ @layer base { :root { - --content-primary: #27272a; - --content-secondary: #52525b; - --content-link: #2563eb; - --content-invert: #fafafa; - --content-disabled: #a1a1aa; - --content-success: #15803d; - --content-danger: #ef4444; - --surface-primary: #fafafa; - --surface-secondary: #f4f4f5; - --surface-tertiary: #e4e4e7; - --surface-invert-primary: #27272a; - --surface-invert-secondary: #3f3f46; - --surface-error: #450a0a; - --border-default: #e4e4e7; - --border-error: #ef4444; + --content-primary: 240, 3%, 15%; + --content-secondary: 240, 4%, 32%; + --content-link: 217, 84%, 54%; + --content-invert: 0, 0%, 98%; + --content-disabled: 240, 4%, 66%; + --content-success: 144, 83%, 32%; + --content-danger: 0, 82%, 63%; + --surface-primary: 0, 0%, 98%; + --surface-secondary: 240, 4%, 96%; + --surface-tertiary: 240, 4%, 89%; + --surface-invert-primary: 240, 3%, 15%; + --surface-invert-secondary: 240, 4%, 25%; + --surface-error: 0, 100%, 14%; + --border-default: 240, 4%, 89%; + --border-error: 0, 82%, 63%; --radius: 0.5rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --background: 0, 0%, 98%; } .dark { - --content-primary: #fafafa; - --content-secondary: #a1a1aa; - --content-link: #60a5fa; - --content-invert: #09090b; - --content-disabled: #3f3f46; - --content-success: #16a34a; - --content-danger: #f87171; - --surface-primary: #09090b; - --surface-secondary: #18181b; - --surface-tertiary: #27272a; - --surface-invert-primary: #e4e4e7; - --surface-invert-secondary: #a1a1aa; - --surface-error: #450a0a; - --border-default: #27272a; - --border-error: #f87171; + --content-primary: 0, 0%, 98%; + --content-secondary: 240, 4%, 66%; + --content-link: 217, 92%, 67%; + --content-invert: 240, 5%, 4%; + --content-disabled: 240, 4%, 25%; + --content-success: 144, 83%, 35%; + --content-danger: 0, 82%, 71%; + --surface-primary: 240, 5%, 4%; + --surface-secondary: 240, 5%, 9%; + --surface-tertiary: 240, 3%, 15%; + --surface-invert-primary: 240, 4%, 89%; + --surface-invert-secondary: 240, 4%, 66%; + --surface-error: 0, 100%, 14%; + --border-default: 240, 3%, 15%; + --border-error: 0, 82%, 71%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --background: 240, 5%, 4%; } } diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 7b1c8ad4c1e13..71c4ce049cf74 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -8,7 +8,8 @@ module.exports = { important: ["#root", "#storybook-root"], theme: { fontSize: { - "2xs": ["0.626rem","0.875rem"], + "2xs": ["0.626rem", "0.875rem"], + xs: ["0.75rem", "1rem"], sm: ["0.875rem", "1.5rem"], "3xl": ["2rem", "2.5rem"], }, @@ -20,27 +21,30 @@ module.exports = { }, colors: { content: { - primary: "var(--content-primary)", - secondary: "var(--content-secondary)", - disabled: "var(--content-disabled)", - invert: "var(--content-invert)", - success: "var(--content-success)", - danger: "var(--content-danger)", - link: "var(--content-link)", + primary: "hsl(var(--content-primary))", + secondary: "hsl(var(--content-secondary))", + disabled: "hsl(var(--content-disabled))", + invert: "hsl(var(--content-invert))", + success: "hsl(var(--content-success))", + danger: "hsl(var(--content-danger))", + link: "hsl(var(--content-link))", }, surface: { - primary: "var(--surface-primary)", - secondary: "var(--surface-secondary)", - tertiary: "var(--surface-tertiary)", + primary: "hsl(var(--surface-primary))", + secondary: "hsl(var(--surface-secondary))", + tertiary: "hsl(var(--surface-tertiary))", invert: { - primary: "var(--surface-invert-primary)", - secondary: "var(--surface-invert-secondary)", + primary: "hsl(var(--surface-invert-primary))", + secondary: "hsl(var(--surface-invert-secondary))", }, - error: "var(--surface-error)", + error: "hsl(var(--surface-error))", }, border: { - default: "var(--border-default)", - error: "var(--border-error)", + DEFAULT: "hsl(var(--border-default))", + error: "hsl(var(--border-error))", + }, + background: { + DEFAULT: "hsl(var(--background))", }, }, }, From f869139b6ef76464c07c452b604e9ddf052979a0 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 8 Nov 2024 16:55:29 +0000 Subject: [PATCH 2/2] fix: move fontSize to theme extend --- site/tailwind.config.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 71c4ce049cf74..e375cec1c59ac 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -7,13 +7,12 @@ module.exports = { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], important: ["#root", "#storybook-root"], theme: { - fontSize: { - "2xs": ["0.626rem", "0.875rem"], - xs: ["0.75rem", "1rem"], - sm: ["0.875rem", "1.5rem"], - "3xl": ["2rem", "2.5rem"], - }, extend: { + fontSize: { + "2xs": ["0.626rem", "0.875rem"], + sm: ["0.875rem", "1.5rem"], + "3xl": ["2rem", "2.5rem"], + }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)",