From 8e7200736827e8f6e593f900124b1bd1bc0bd5f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Tue, 10 Jan 2023 22:52:37 +0100
Subject: [PATCH] feat(frontend): Add frost to color palette (#1084)

---
 .../components/common/button/Button.svelte    |  4 +-
 frontend/tailwind.config.cjs                  | 51 +++++++++++--------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 3c7076c2dd..6ca25f53ac 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -29,8 +29,8 @@
 	const colorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>> = {
 		blue: {
 			border:
-				'border-blue-500 hover:border-blue-700 focus:border-blue-700 bg-white hover:bg-blue-100 focus:bg-blue-100 text-blue-500 hover:text-blue-700 focus:text-blue-700 focus:ring-blue-300',
-			contained: 'bg-blue-800/90 hover:bg-blue-900 focus:bg-blue-900 text-white focus:ring-blue-300'
+				'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
+			contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
 		},
 		red: {
 			border:
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index bbdeb40b2f..98b6420424 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -86,6 +86,17 @@ const config = {
 				500: '#6366f1',
 				800: '#3730a3',
 				900: '#312e81'
+			},
+			frost: {
+				100: '#dfe6ee',
+				200: '#bfcdde',
+				300: '#9eb3cd',
+				400: '#7e9abd',
+				500: '#5e81ac',
+				600: '#4b678a',
+				700: '#384d67',
+				800: '#263445',
+				900: '#131a22'
 			}
 		},
 		fontFamily: {
@@ -226,27 +237,27 @@ const config = {
 					color: theme('colors.blue.500')
 				},
 				'input,input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="month"],input[type="search"],input[type="tel"],input[type="time"],input[type="week"],textarea:not(.monaco-mouse-cursor-text),select':
-					{
-						display: 'block',
-						fontSize: theme('fontSize.sm'),
-						width: '100%',
-						padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
-						border: `1px solid ${theme('colors.gray.300')}`,
-						borderRadius: theme('borderRadius.md'),
-						boxShadow: theme('boxShadow.sm'),
-						'&:focus': {
-							'--tw-ring-color': theme('colors.indigo.100'),
-							'--tw-ring-offset-shadow':
-								'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
-							'--tw-ring-shadow':
-								'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
-							boxShadow:
-								'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)'
-						},
-						'&:disabled,[disabled]': {
-							backgroundColor: theme('colors.gray.100') + ' !important'
-						}
+				{
+					display: 'block',
+					fontSize: theme('fontSize.sm'),
+					width: '100%',
+					padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
+					border: `1px solid ${theme('colors.gray.300')}`,
+					borderRadius: theme('borderRadius.md'),
+					boxShadow: theme('boxShadow.sm'),
+					'&:focus': {
+						'--tw-ring-color': theme('colors.indigo.100'),
+						'--tw-ring-offset-shadow':
+							'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+						'--tw-ring-shadow':
+							'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+						boxShadow:
+							'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)'
 					},
+					'&:disabled,[disabled]': {
+						backgroundColor: theme('colors.gray.100') + ' !important'
+					}
+				},
 				'button:disabled,button[disabled=true],a:disabled,a[disabled=true]': {
 					pointerEvents: 'none',
 					cursor: 'default',