feat(frontend): Add frost to color palette (#1084)

This commit is contained in:
Ádám Kovács
2023-01-10 22:52:37 +01:00
committed by GitHub
parent 48d87ab12c
commit 8e72007368
2 changed files with 33 additions and 22 deletions
@@ -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:
+31 -20
View File
@@ -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',