diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css index b5c61c9..5f6197b 100644 --- a/packages/frontend/src/index.css +++ b/packages/frontend/src/index.css @@ -1,3 +1,9 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer utilities { + .focus-ring { + @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none; + } +} \ No newline at end of file diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index a1b6f77..8c63962 100644 --- a/packages/frontend/tailwind.config.js +++ b/packages/frontend/tailwind.config.js @@ -13,6 +13,67 @@ export default withMT({ }, extend: { colors: { + emerald: { + 100: '#d1fae5', + 200: '#a9f1d0', + 300: '#6ee7b7', + 400: '#34d399', + 50: '#ecfdf5', + 500: '#10b981', + 600: '#059669', + 700: '#047857', + 800: '#065f46', + 900: '#064e3b', + }, + gray: { + 0: '#ffffff', + 100: '#f1f5f9', + 200: '#e2e9f0', + 300: '#cbd6e1', + 400: '#94a7b8', + 50: '#f8fafc', + 500: '#60788f', + 600: '#475969', + 700: '#334555', + 800: '#1b2d3e', + 900: '#0b1d2e', + }, + orange: { + 100: '#ffedd5', + 200: '#fed7aa', + 300: '#fdba74', + 400: '#fb923c', + 50: '#fff7ed', + 500: '#f97316', + 600: '#ea580c', + 700: '#c2410c', + 800: '#9a3412', + 900: '#7c2d12', + }, + rose: { + 100: '#ffe4e6', + 200: '#fecdd3', + 300: '#fda4af', + 400: '#fb7185', + 50: '#fff1f2', + 500: '#f43f5e', + 600: '#e11d48', + 700: '#be123c', + 800: '#9f1239', + 900: '#881337', + }, + snowball: { + 100: '#e1f1fe', + 200: '#ddeefd', + 300: '#cfe6fc', + 400: '#74bafb', + 50: '#ecf6fe', + 500: '#47a4fa', + 600: '#0f86f5', + 700: '#0977dc', + 800: '#075185', + 900: '#0a3a5c', + }, base: { bg: '#ffffff', 'bg-alternate': '#f8fafc', @@ -79,67 +140,6 @@ export default withMT({ 'floating-hovered': '#f1f5f9', 'high-contrast': '#0b1d2e', }, - emerald: { - 50: '#ecfdf5', - 100: '#d1fae5', - 200: '#a9f1d0', - 300: '#6ee7b7', - 400: '#34d399', - 500: '#10b981', - 600: '#059669', - 700: '#047857', - 800: '#065f46', - 900: '#064e3b', - }, - gray: { - 0: '#ffffff', - 50: '#f8fafc', - 100: '#f1f5f9', - 200: '#e2e9f0', - 300: '#cbd6e1', - 400: '#94a7b8', - 500: '#60788f', - 600: '#475969', - 700: '#334555', - 800: '#1b2d3e', - 900: '#0b1d2e', - }, - orange: { - 50: '#fff7ed', - 100: '#ffedd5', - 200: '#fed7aa', - 300: '#fdba74', - 400: '#fb923c', - 500: '#f97316', - 600: '#ea580c', - 700: '#c2410c', - 800: '#9a3412', - 900: '#7c2d12', - }, - rose: { - 50: '#fff1f2', - 100: '#ffe4e6', - 200: '#fecdd3', - 300: '#fda4af', - 400: '#fb7185', - 500: '#f43f5e', - 600: '#e11d48', - 700: '#be123c', - 800: '#9f1239', - 900: '#881337', - }, - snowball: { - 50: '#ecf6fe', - 100: '#e1f1fe', - 200: '#ddeefd', - 300: '#cfe6fc', - 400: '#74bafb', - 500: '#47a4fa', - 600: '#0f86f5', - 700: '#0977dc', - 800: '#075185', - 900: '#0a3a5c', - }, }, boxShadow: { button: