From e9cd01467d1b987214b4c5feced0826edb07ec15 Mon Sep 17 00:00:00 2001 From: Anton Date: Wed, 30 Aug 2023 13:20:27 +0200 Subject: [PATCH] Add custom colors to tailwind config [SCI-9124] --- .../shared_styles/constants/colors.scss | 14 ----- app/assets/stylesheets/tailwind/buttons.css | 54 +++++++------------ app/assets/stylesheets/tailwind/flyouts.css | 3 +- app/assets/stylesheets/tailwind/inputs.css | 25 ++++----- app/assets/stylesheets/tailwind/modals.css | 11 ++-- config/tailwind.config.js | 38 ++++++++++++- 6 files changed, 72 insertions(+), 73 deletions(-) diff --git a/app/assets/stylesheets/shared_styles/constants/colors.scss b/app/assets/stylesheets/shared_styles/constants/colors.scss index 96026b646..d2f8679b8 100644 --- a/app/assets/stylesheets/shared_styles/constants/colors.scss +++ b/app/assets/stylesheets/shared_styles/constants/colors.scss @@ -41,20 +41,6 @@ $colors: ("sn-white": "#FFFFFF", } } -@each $color, $value in $colors { - .bg-#{$color} { - background-color: var(--#{$color}); - } - - .text-#{$color} { - color: var(--#{$color}); - } - - .border-#{$color} { - border-color: var(--#{$color}); - } -} - // LEGACY COLORS diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css index 440afc803..f83c19a52 100644 --- a/app/assets/stylesheets/tailwind/buttons.css +++ b/app/assets/stylesheets/tailwind/buttons.css @@ -4,7 +4,7 @@ } .btn { - @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer max-h-[40px]; + @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border border-solid border-transparent appearance-none whitespace-nowrap cursor-pointer max-h-[40px]; } .btn.icon-btn { @@ -40,9 +40,8 @@ } .btn:focus { - @apply no-underline outline-none; + @apply no-underline outline-none text-sn-white; box-shadow: 0px 0px 0px 4px var(--sn-science-blue-hover); - color: var(--sn-white); } .btn:active { @@ -56,99 +55,86 @@ .btn.btn-primary, .btn.btn-success { - background-color: var(--sn-blue); - color: var(--sn-white); + @apply bg-sn-blue text-sn-white; } .btn.btn-primary:hover, .btn.btn-success:hover{ - background-color: var(--sn-blue-hover); - color: var(--sn-white); + @apply bg-sn-blue-hover text-sn-white; } .btn.btn-primary:disabled, .btn.btn-primary.disabled, .btn.btn-success:disabled, .btn.btn-success.disabled { - background-color: var(--sn-light-grey); - border: 1px solid var(--sn-light-grey); - color: var(--sn-sleepy-grey); + @apply bg-sn-light-grey text-sn-sleepy-grey border-sn-light-grey; } .btn.btn-secondary, .btn.btn-default { - background-color: var(--sn-white); - border: 1px solid var(--sn-light-grey); - color: var(--sn-blue); + @apply bg-sn-white text-sn-blue border-sn-light-grey; } .btn.btn-shared { - background-color: var(--sn-science-blue); - border: 1px solid var(--sn-white); - color: var(--sn-white); + @apply bg-sn-science-blue text-sn-white border-sn-white; } .btn.btn-secondary:hover, .btn.btn-default:hover { - border: 1px solid var(--sn-blue-hover); + @apply border-sn-blue-hover; } .btn.btn-shared:hover { - border: 1px solid var(--sn-light-grey); + @apply border-sn-light-grey; } .btn.btn-secondary:disabled, .btn.btn-secondary.disabled, .btn.btn-default:disabled, .btn.btn-default.disabled { - background-color: var(--sn-white); - color: var(--sn-sleepy-grey); + @apply bg-sn-white text-sn-sleepy-grey; } .btn.btn-shared:disabled, .btn.btn-shared.disabled { - background-color: var(--sn-white); - color: var(--sn-sleepy-grey); - border: 1px solid var(--sn-light-grey); + @apply bg-sn-white text-sn-sleepy-grey border-sn-light-grey; } .btn.btn-light { - background-color: transparent; - color: var(--sn-blue); + @apply bg-transparent text-sn-blue border-transparent; } .btn.btn-light.btn-black { - color: var(--sn-black); + @apply text-sn-black; } .btn.btn-light.btn-white { - color: var(--sn-white); + @apply text-sn-white; } .btn.btn-light.btn-white:hover { - background-color: transparent; + @apply bg-transparent; } .btn.btn-light:hover { - background-color: var(--sn-super-light-grey); + @apply bg-sn-super-light-grey; } .btn.btn-light:disabled, .btn.btn-light.disabled { - color: var(--sn-sleepy-grey); + @apply text-sn-sleepy-grey; } .btn.btn-danger { - background-color: var(--sn-delete-red); - color: var(--sn-white); + @apply bg-sn-delete-red text-sn-white; } .btn.btn-danger:hover { - background-color: var(--sn-delete-red-hover); + @apply bg-sn-delete-red-hover; } .btn.btn-danger:disabled, .btn.btn-danger.disabled { - background-color: var(--sn-delete-red-disabled); + @apply bg-sn-delete-red-disabled; } } diff --git a/app/assets/stylesheets/tailwind/flyouts.css b/app/assets/stylesheets/tailwind/flyouts.css index e88729fae..95d63e263 100644 --- a/app/assets/stylesheets/tailwind/flyouts.css +++ b/app/assets/stylesheets/tailwind/flyouts.css @@ -16,7 +16,6 @@ } .sci-flyout .sci-flyout-footer { - @apply flex pt-6 justify-end gap-6 border-0 border-t border-solid; - border-color: var(--sn-light-grey); + @apply flex pt-6 justify-end gap-6 border-0 border-t border-solid border-sn-light-grey; } } diff --git a/app/assets/stylesheets/tailwind/inputs.css b/app/assets/stylesheets/tailwind/inputs.css index 197c717cf..891c63fe6 100644 --- a/app/assets/stylesheets/tailwind/inputs.css +++ b/app/assets/stylesheets/tailwind/inputs.css @@ -1,8 +1,7 @@ @layer components { .sci-label { - @apply text-sm font-medium; - color: var(--sn-grey); + @apply text-sm font-medium text-sn-grey; } .sci-input-container-v2 { @@ -14,12 +13,11 @@ } .sci-input-container-v2 input { - @apply w-full h-full bg-transparent p-0.5 border rounded outline-none absolute top-0 pl-2; - border-color: var(--sn-sleepy-grey); + @apply w-full h-full bg-transparent p-0.5 border rounded outline-none absolute top-0 pl-2 border-sn-sleepy-grey; } .sci-input-container-v2 input::placeholder { - color: var(--sn-sleepy-grey); + @apply text-sn-sleepy-grey; } .sci-input-container-v2 .sci-input-field-v2 { @@ -27,17 +25,15 @@ } .sci-input-container-v2 .error { - border-color: var(--sn-coral) !important; + @apply !border-sn-coral; } .sci-input-container-v2 input:focus { - border-color: var(--sn-science-blue); - box-shadow: none; + @apply border-sn-science-blue shadow-none; } .sci-input-container-v2 .sn-icon { - @apply m-2; - color: var(--sn-black) + @apply m-2 text-sn-black; } .sci-input-container-v2.right-icon .sn-icon { @@ -61,19 +57,18 @@ } .sci-input-container-v2 textarea { - @apply w-full h-full bg-transparent px-2 border rounded outline-none absolute top-0; - border-color: var(--sn-sleepy-grey); + @apply w-full h-full bg-transparent px-2 border rounded outline-none absolute top-0 border-sn-sleepy-grey; } .sci-input-container-v2 textarea::placeholder { - color: var(--sn-sleepy-grey); + @apply text-sn-sleepy-grey; } .sci-input-container-v2 textarea:focus { - border-color: var(--sn-science-blue); + @apply border-sn-science-blue; } .sci-input-container-v2 .history-flyout li:hover { - background-color: var(--sn-super-light-grey); + @apply bg-sn-super-light-grey; } } diff --git a/app/assets/stylesheets/tailwind/modals.css b/app/assets/stylesheets/tailwind/modals.css index cb0ac5c06..22a1deb35 100644 --- a/app/assets/stylesheets/tailwind/modals.css +++ b/app/assets/stylesheets/tailwind/modals.css @@ -1,7 +1,6 @@ @layer components { .modal-backdrop { - @apply fixed right-0 top-0 left-0 bottom-0 z-[1040]; - background-color: black; + @apply fixed right-0 top-0 left-0 bottom-0 z-[1040] bg-sn-black; } .modal-backdrop.fade { @@ -54,8 +53,7 @@ } .modal .modal-content { - @apply relative border border-solid rounded outline-none shadow p-6; - background-color: var(--sn-white); + @apply relative border border-solid rounded outline-none shadow p-6 bg-sn-white; } .modal .modal-header { @@ -83,7 +81,6 @@ } .modal .modal-footer { - @apply flex pt-6 justify-end gap-6 border-0 border-t border-solid; - border-color: var(--sn-light-grey); + @apply flex pt-6 justify-end gap-6 border-0 border-t border-solid border-sn-light-grey; } -} \ No newline at end of file +} diff --git a/config/tailwind.config.js b/config/tailwind.config.js index f9ff1aa04..b10dd864c 100644 --- a/config/tailwind.config.js +++ b/config/tailwind.config.js @@ -19,7 +19,43 @@ module.exports = { }, colors: { transparent: 'transparent', - current: 'currentColor' + current: 'currentColor', + 'sn-white': '#FFFFFF', + 'sn-super-light-grey': '#F9F9F9', + 'sn-light-grey': '#EAECF0', + 'sn-sleepy-grey': '#D0D5DD', + 'sn-grey': '#98A2B3', + 'sn-dark-grey': '#475467', + 'sn-black': '#1D2939', + 'sn-blue': '#104DA9', + 'sn-science-blue': '#3B99FD', + 'sn-super-light-blue': '#F0F8FF', + 'sn-blue-hover': '#2D5FAA', + 'sn-science-blue-hover': '#79B4F3', + 'sn-alert-green': '#5EC66F', + 'sn-alert-violet': '#6F2DC1', + 'sn-alert-brittlebush': '#E9A845', + 'sn-alert-passion': '#DF3562', + 'sn-alert-turqoise': '#46C3C8', + 'sn-alert-bloo': '#3070ED', + 'sn-alert-blue-disabled': '#87A6D4', + 'sn-alert-green-disabled': '#AEE3B7', + 'sn-alert-violet-disabled': '#B796E0', + 'sn-alert-brittlebush-disabled': '#F4D3A2', + 'sn-alert-passion-disabled': '#EF9AB0', + 'sn-alert-turqoise-disabled': '#A2E1E3', + 'sn-alert-science-blue-disabled': '#9DCCFE', + 'sn-delete-red': '#CE0C24', + 'sn-delete-red-hover': '#AD0015', + 'sn-delete-red-disabled': '#F5D7DB', + 'sn-coral': '#FB565B', + 'sn-background-blue': '#DBE4F2', + 'sn-background-green': '#E7F7E9', + 'sn-background-violet': '#E9DFF6', + 'sn-background-brittlebush': '#FCF2E3', + 'sn-background-passion': '#FAE1E7', + 'sn-background-turqoise': '#E3F6F7', + 'sn-background-bloo': '#E2F0FF' } } },