From a563d16de9351f912c88935fb10d1aba8da96680 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 27 Nov 2024 16:51:22 +0000 Subject: [PATCH] chore: miscellaneous element style updates --- src/core/styles/buttons.css | 8 ++++---- src/core/styles/forms.css | 31 +++++++++++++++++------------- src/core/styles/legacy-buttons.css | 4 ++-- src/core/styles/properties.css | 1 - src/core/styles/text.css | 6 +++++- tailwind.config.js | 1 - 6 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css index 13723fb6d..5bf434545 100644 --- a/src/core/styles/buttons.css +++ b/src/core/styles/buttons.css @@ -36,19 +36,19 @@ } .ui-button-primary-base { - @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1200 active:bg-neutral-1100 ui-button-disabled-base; + @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 ui-button-disabled-base; } .ui-theme-dark .ui-button-primary-base { - @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-100 active:bg-neutral-200 ui-button-disabled-base-dark; + @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 ui-button-disabled-base-dark; } .ui-button-secondary-base { - @apply text-neutral-1300 border border-neutral-600 hover:border-neutral-700 active:border-neutral-400 active:text-neutral-1000 disabled:border-gui-unavailable disabled:text-gui-unavailable; + @apply text-neutral-1300 hover:text-neutral-1100 active:text-neutral-1200 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable; } .ui-theme-dark .ui-button-secondary-base { - @apply text-neutral-000 border-neutral-700 hover:border-neutral-600 active:border-neutral-800 active:text-neutral-300 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark; + @apply text-neutral-000 hover:text-neutral-200 active:text-neutral-100 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark; } .ui-button-priority-lg { diff --git a/src/core/styles/forms.css b/src/core/styles/forms.css index 9ebe24047..75d577f4d 100644 --- a/src/core/styles/forms.css +++ b/src/core/styles/forms.css @@ -14,7 +14,12 @@ .ui-checkbox-styled { @apply w-20 h-20 mr-16; @apply bg-white flex flex-shrink-0 justify-center items-center; - @apply border border-dark-grey rounded-md focus-within:border-active-orange; + @apply border border-neutral-500 rounded-md focus-within:border-active-orange; + } + + .ui-theme-dark .ui-checkbox-styled, + .ui-theme-dark .ui-checkbox-input:focus + .ui-checkbox-styled { + @apply border-neutral-900; } .ui-checkbox-styled-tick { @@ -45,7 +50,11 @@ } .ui-checkbox-input:disabled + .ui-checkbox-styled { - @apply bg-gui-unavailable border; + @apply bg-neutral-400 border; + } + + .ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled { + @apply bg-neutral-1000 border-gui-unavailable-dark; } .ui-textarea { @@ -100,24 +109,20 @@ } .ui-input { - @apply ui-text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-colors placeholder-neutral-800; - @apply hover:border-neutral-800 focus:bg-white focus:outline-gui-focus; - @apply max-w-screen-sm; + @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600; + @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus; + @apply max-w-screen-sm invalid:border-gui-error-red; } - .ui-input-dark { - @apply bg-neutral-1200 hover:bg-neutral-1200 focus:bg-neutral-1000 text-neutral-300; + .ui-theme-dark .ui-input { + @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700; } .ui-input:disabled { @apply bg-gui-unavailable placeholder-neutral-500 text-neutral-500; } - .ui-input-dark:disabled { - @apply text-neutral-800 placeholder-neutral-800; - } - - .ui-input { - @apply invalid:border-gui-error-red; + .ui-theme-dark .ui-input:disabled { + @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800; } } diff --git a/src/core/styles/legacy-buttons.css b/src/core/styles/legacy-buttons.css index dab2d86df..2a9211d1d 100644 --- a/src/core/styles/legacy-buttons.css +++ b/src/core/styles/legacy-buttons.css @@ -1,8 +1,8 @@ @layer components { .ui-btn { @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn; - @apply hover:text-white hover:bg-active-orange; - @apply active:text-white active:bg-red-orange; + @apply hover:text-white hover:bg-neutral-1100; + @apply active:text-white active:bg-neutral-1200; @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus; @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed; @apply transition-colors; diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css index b118ce627..9b7aa0b9f 100644 --- a/src/core/styles/properties.css +++ b/src/core/styles/properties.css @@ -258,7 +258,6 @@ --spacing-media: 0.5rem; /* 8px */ --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */ --spacing-overline: 0.6875rem 0; /* 11px 0 */ - --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */ /* In components, when looking at implementing viewport margin and spacing between elements, the values in the comments can be used as guide as they represent the grid the elements (should) sit on. diff --git a/src/core/styles/text.css b/src/core/styles/text.css index a31d15c2d..3b489efcf 100644 --- a/src/core/styles/text.css +++ b/src/core/styles/text.css @@ -127,7 +127,11 @@ } .ui-text-code-inline { - @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1; + @apply inline-flex font-mono px-[3px] py-4 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md; + } + + .dark .ui-text-code-inline { + @apply text-neutral-300 bg-neutral-1000 border-neutral-900; } .ui-unordered-list { diff --git a/tailwind.config.js b/tailwind.config.js index a28d33819..5da8bccde 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -220,7 +220,6 @@ module.exports = { media: "var(--spacing-media)", input: "var(--spacing-input)", overline: "var(--spacing-overline)", - "inline-code": "var(--spacing-inline-code)", ...theme("spacing"), }), spacing: {