diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss index e66698bea2..6f9ff0ee9e 100644 --- a/app/styles/components/datepicker.scss +++ b/app/styles/components/datepicker.scss @@ -20,12 +20,12 @@ } .react-datepicker__header:not(.react-datepicker__header--has-time-select) { - border-top-right-radius: var(--border-radius-lg); + @apply rounded-tr-lg; } .react-datepicker__header { @apply bg-white dark:bg-gray-900 border-b-0 py-1 px-0; - // border-top-left-radius: var(--border-radius-lg); + @apply rounded-tl-lg; } .react-datepicker__current-month, diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss index 1f5cb0fc56..3b0ec9ebae 100644 --- a/app/styles/components/react-toggle.scss +++ b/app/styles/components/react-toggle.scss @@ -32,8 +32,7 @@ } .react-toggle-track { - @apply bg-gray-500 dark:bg-gray-700 w-[50px] p-0 rounded-full transition-colors; - height: var(--input-height); + @apply bg-gray-500 dark:bg-gray-700 h-[30px] w-[50px] p-0 rounded-full transition-colors; } .react-toggle--checked .react-toggle-track { diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 7ae47230bd..3d57ab7463 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -231,7 +231,7 @@ select { input[type=password], textarea, .rfipbtn { - @apply border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-black dark:text-white; + @apply border border-solid border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-black dark:text-white; box-sizing: border-box; font-size: 16px; color: var(--primary-text-color); @@ -241,7 +241,6 @@ select { font-family: inherit; resize: vertical; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - border: 1px solid var(--input-border-color); border-radius: 6px; padding: 8px 12px; transition: 0.2s; diff --git a/app/styles/themes.scss b/app/styles/themes.scss index 5efd0fc973..9c0e43fc38 100644 --- a/app/styles/themes.scss +++ b/app/styles/themes.scss @@ -32,7 +32,6 @@ body, --primary-text-color: var(--gray-900); --background-color: hsl(var(--background-color_hsl)); --foreground-color: hsl(var(--foreground-color_hsl)); - --warning-color: hsla(var(--warning-color_hsl)); // Meta-variables --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l); @@ -40,7 +39,6 @@ body, --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l); --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l); --foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l); - --warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l); --accent-color_h: calc(var(--brand-color_h) - 15); --accent-color_s: 86%; --accent-color_l: 44%; @@ -49,41 +47,16 @@ body, --brand-color--faint: hsla(var(--brand-color_hsl), 0.1); --brand-color--med: hsla(var(--brand-color_hsl), 0.2); --accent-color--faint: hsla(var(--accent-color_hsl), 0.15); - --accent-color--med: hsla(var(--accent-color_hsl), 0.25); --accent-color--bright: hsl( var(--accent-color_h), var(--accent-color_s), calc(var(--accent-color_l) + 3%) ); --primary-text-color--faint: var(--gray-400); - --warning-color--faint: hsla(var(--warning-color_hsl), 0.5); // Colors --gray-900: #08051b; - // --gray-800: #1d1932; - --gray-700: #37344c; - --gray-500: #656175; --gray-400: #868393; - --gray-300: #c9c8cc; - --gray-50: #f9f8fc; - --white: #fff; - --dark-blue: #1d1953; - --electric-blue: #5448ee; - --electric-blue-contrast: #e8e7fd; - - // Sizes - --border-radius-base: 4px; - --border-radius-lg: 8px; - --border-radius-xl: 12px; - - // Forms - --input-height: 30px; - --input-border-color: #d1d5db; - - // Typography - --font-sans: 'Inter', arial, sans-serif; - --font-weight-heading: 700; - --font-weight-body: 400; } .theme-mode-light { @@ -93,7 +66,6 @@ body, var(--brand-color_s), calc(var(--brand-color_l) - 8%) ); - --vignette-color: transparent; // Meta-variables --primary-text-color_h: 0; @@ -105,9 +77,6 @@ body, --foreground-color_h: 0; --foreground-color_s: 0%; --foreground-color_l: 100%; - --warning-color_h: 0; - --warning-color_s: 100%; - --warning-color_l: 66%; // Modifiers --brand-color--hicontrast: hsl( @@ -115,45 +84,4 @@ body, var(--brand-color_s), calc(var(--brand-color_l) - 5%) ); - --warning-color--hicontrast: hsl( - var(--warning-color_h), - var(--warning-color_s), - calc(var(--warning-color_l) - 12%) - ); -} - -.theme-mode-dark { - // Primary variables - --highlight-text-color: hsl( - var(--brand-color_h), - var(--brand-color_s), - calc(var(--brand-color_l) + 8%) - ); - --vignette-color: #000; - - // Meta-variables - --primary-text-color_h: 0; - --primary-text-color_s: 0%; - --primary-text-color_l: 100%; - --background-color_h: 0; - --background-color_s: 0%; - --background-color_l: 20%; - --foreground-color_h: 0; - --foreground-color_s: 0%; - --foreground-color_l: 13%; - --warning-color_h: 0; - --warning-color_s: 100%; - --warning-color_l: 66%; - - // Modifiers - --brand-color--hicontrast: hsl( - var(--brand-color_h), - var(--brand-color_s), - calc(var(--brand-color_l) + 12%) - ); - --warning-color--hicontrast: hsl( - var(--warning-color_h), - var(--warning-color_s), - calc(var(--warning-color_l) + 12%) - ); }