diff --git a/Gemfile.lock b/Gemfile.lock index 3be3125a4..a60f2d7a6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -339,7 +339,7 @@ GEM nio4r (~> 2.0) raabro (1.4.0) racc (1.8.1) - rack (3.1.9) + rack (3.1.10) rack-mini-profiler (3.3.1) rack (>= 1.2.0) rack-session (2.1.0) @@ -473,14 +473,16 @@ GEM railties (>= 6.0.0) stringio (3.1.2) stripe (13.4.1) - tailwindcss-rails (3.3.1) + tailwindcss-rails (4.0.0) railties (>= 7.0.0) - tailwindcss-ruby (~> 3.0) - tailwindcss-ruby (3.4.17-aarch64-linux) - tailwindcss-ruby (3.4.17-arm-linux) - tailwindcss-ruby (3.4.17-arm64-darwin) - tailwindcss-ruby (3.4.17-x86_64-darwin) - tailwindcss-ruby (3.4.17-x86_64-linux) + tailwindcss-ruby (~> 4.0) + tailwindcss-ruby (4.0.6) + tailwindcss-ruby (4.0.6-aarch64-linux-gnu) + tailwindcss-ruby (4.0.6-aarch64-linux-musl) + tailwindcss-ruby (4.0.6-arm64-darwin) + tailwindcss-ruby (4.0.6-x86_64-darwin) + tailwindcss-ruby (4.0.6-x86_64-linux-gnu) + tailwindcss-ruby (4.0.6-x86_64-linux-musl) terminal-table (4.0.0) unicode-display_width (>= 1.1.1, < 4) thor (1.3.2) diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css deleted file mode 100644 index e049f766a..000000000 --- a/app/assets/stylesheets/application.tailwind.css +++ /dev/null @@ -1,194 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -/* Reset rules, default styles applied to plain HTML */ -@layer base { - details>summary::-webkit-details-marker { - @apply hidden; - } - - details>summary { - @apply list-none; - } -} - -@layer components { - .form-field { - @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-white border-alpha-black-100 shadow-xs w-full; - @apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100; - } - - - .form-field__label, .hw-combobox__label { - @apply block text-xs text-gray-500 peer-disabled:text-gray-400; - } - - .form-field__input { - @apply border-none bg-transparent text-sm opacity-100 w-full p-0; - @apply focus:opacity-100 focus:outline-none focus:ring-0; - @apply placeholder-shown:opacity-50; - @apply disabled:text-gray-400; - @apply text-ellipsis overflow-hidden whitespace-nowrap; - } - - select.form-field__input { - @apply pr-8; - } - - .form-field__radio { - @apply text-gray-900; - } - - .form-field__submit { - @apply cursor-pointer rounded-lg bg-black p-3 text-center text-white hover:bg-gray-700; - } - - input:checked+label+.toggle-switch-dot { - transform: translateX(100%); - } - - [type='checkbox'].maybe-checkbox { - @apply rounded-sm; - } - - [type='checkbox'].maybe-checkbox--light { - @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500; - } - - [type='checkbox'].maybe-checkbox--light:disabled { - @apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400; - } - - [type='checkbox'].maybe-checkbox--dark { - @apply ring-gray-900 checked:text-white; - } - - [type='checkbox'].maybe-checkbox--dark:disabled { - @apply cursor-not-allowed opacity-80 ring-gray-600; - } - - [type='checkbox'].maybe-checkbox--dark:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); - } - - select[multiple="multiple"] { - @apply py-2 pr-2 space-y-0.5 overflow-y-auto; - } - - select[multiple="multiple"] option { - @apply py-2 rounded-md; - } - - select[multiple="multiple"] option:checked { - @apply after:content-['\2713'] bg-white after:text-gray-500 after:ml-2; - } - - select[multiple="multiple"] option:active, - select[multiple="multiple"] option:focus { - @apply bg-white; - } - - .maybe-switch { - @apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer; - @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out; - @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4; - } - - .prose--github-release-notes { - .octicon { - @apply inline-block overflow-visible align-text-bottom fill-current; - } - - .dropdown-caret { - @apply content-none border-4 border-b-0 border-transparent border-t-gray-500 size-0 inline-block; - } - - .user-mention { - @apply font-bold; - } - } - - .tooltip { - @apply hidden absolute; - } - - .btn { - @apply px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500; - } - - .btn--primary { - @apply bg-gray-900 text-white hover:bg-gray-700 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400; - } - - .btn--secondary { - @apply bg-gray-50 hover:bg-gray-100 text-gray-900; - } - - .btn--outline { - @apply border border-alpha-black-200 text-gray-900 hover:bg-gray-50 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400; - } - - .btn--ghost { - @apply border border-transparent text-gray-900 hover:bg-gray-50; - } -} - -.combobox { - .hw-combobox__main__wrapper, .hw-combobox__input { - @apply w-full; - } - - .hw-combobox__main__wrapper { - @apply border-0 p-0 focus:border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none focus-within:shadow-none; - } - - .hw-combobox__listbox { - @apply absolute top-[160%] right-0 w-full bg-transparent rounded z-30; - } - - .hw_combobox__pagination__wrapper { - @apply h-px; - - &:only-child { - @apply bg-transparent; - } - } - - --hw-border-color: rgba(0, 0, 0, 0.2); - --hw-handle-width: 20px; - --hw-handle-height: 20px; - --hw-handle-offset-right: 0px; -} - -/* Small, single purpose classes that should take precedence over other styles */ -@layer utilities { - .scrollbar::-webkit-scrollbar { - width: 4px; - } - - .scrollbar::-webkit-scrollbar-thumb { - background: #d6d6d6; - border-radius: 10px; - } - - .scrollbar::-webkit-scrollbar-thumb:hover { - background: #a6a6a6; - } -} - -/* Custom scrollbar implementation for Windows browsers */ -.windows { - ::-webkit-scrollbar { - width: 4px; - } - - ::-webkit-scrollbar-thumb { - background: #d6d6d6; - border-radius: 10px; - } - - ::-webkit-scrollbar-thumb:hover { - background: #a6a6a6; - } -} \ No newline at end of file diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css new file mode 100644 index 000000000..668e3a138 --- /dev/null +++ b/app/assets/tailwind/application.css @@ -0,0 +1,429 @@ +@import 'tailwindcss'; + +@plugin "@tailwindcss/typography"; +@plugin "@tailwindcss/forms"; + +@theme { + /* Base colors */ + --color-white: #ffffff; + --color-black: #0B0B0B; + --color-success: #10A861; + --color-warning: #F79009; + --color-error: #F13636; + + /* Gray scale */ + --color-gray-25: #FAFAFA; + --color-gray-50: #F5F5F5; + --color-gray-100: #F0F0F0; + --color-gray-200: #E5E5E5; + --color-gray-300: #D6D6D6; + --color-gray-400: #A3A3A3; + --color-gray-500: #737373; + --color-gray-600: #525252; + --color-gray-700: #3D3D3D; + --color-gray-800: #212121; + --color-gray-900: #141414; + + /* Alpha colors */ + --color-alpha-white-25: rgba(255, 255, 255, 0.03); + --color-alpha-white-50: rgba(255, 255, 255, 0.05); + --color-alpha-white-100: rgba(255, 255, 255, 0.08); + --color-alpha-white-200: rgba(255, 255, 255, 0.1); + --color-alpha-white-300: rgba(255, 255, 255, 0.15); + --color-alpha-white-400: rgba(255, 255, 255, 0.2); + --color-alpha-white-500: rgba(255, 255, 255, 0.3); + --color-alpha-white-600: rgba(255, 255, 255, 0.4); + --color-alpha-white-700: rgba(255, 255, 255, 0.5); + --color-alpha-white-800: rgba(255, 255, 255, 0.6); + --color-alpha-white-900: rgba(255, 255, 255, 0.7); + + --color-alpha-black-25: rgba(11, 11, 11, 0.03); + --color-alpha-black-50: rgba(11, 11, 11, 0.05); + --color-alpha-black-100: rgba(11, 11, 11, 0.08); + --color-alpha-black-200: rgba(11, 11, 11, 0.1); + --color-alpha-black-300: rgba(11, 11, 11, 0.15); + --color-alpha-black-400: rgba(11, 11, 11, 0.2); + --color-alpha-black-500: rgba(11, 11, 11, 0.3); + --color-alpha-black-600: rgba(11, 11, 11, 0.4); + --color-alpha-black-700: rgba(11, 11, 11, 0.5); + --color-alpha-black-800: rgba(11, 11, 11, 0.6); + --color-alpha-black-900: rgba(11, 11, 11, 0.7); + + /* Red scale */ + --color-red-25: #FFFBFB; + --color-red-50: #FFF1F0; + --color-red-100: #FFDEDB; + --color-red-200: #FEB9B3; + --color-red-300: #F88C86; + --color-red-400: #ED4E4E; + --color-red-500: #F13636; + --color-red-600: #EC2222; + --color-red-700: #C91313; + --color-red-800: #A40E0E; + --color-red-900: #7E0707; + + /* Green scale */ + --color-green-25: #F6FEF9; + --color-green-50: #ECFDF3; + --color-green-100: #D1FADF; + --color-green-200: #A6F4C5; + --color-green-300: #6CE9A6; + --color-green-400: #32D583; + --color-green-500: #12B76A; + --color-green-600: #10A861; + --color-green-700: #078C52; + --color-green-800: #05603A; + --color-green-900: #054F31; + + /* Yellow scale */ + --color-yellow-25: #FFFCF5; + --color-yellow-50: #FFFAEB; + --color-yellow-100: #FEF0C7; + --color-yellow-200: #FEDF89; + --color-yellow-300: #FEC84B; + --color-yellow-400: #FDB022; + --color-yellow-500: #F79009; + --color-yellow-600: #DC6803; + --color-yellow-700: #B54708; + --color-yellow-800: #93370D; + --color-yellow-900: #7A2E0E; + + /* Cyan scale */ + --color-cyan-25: #F5FEFF; + --color-cyan-50: #ECFDFF; + --color-cyan-100: #CFF9FE; + --color-cyan-200: #A5F0FC; + --color-cyan-300: #67E3F9; + --color-cyan-400: #22CCEE; + --color-cyan-500: #06AED4; + --color-cyan-600: #088AB2; + --color-cyan-700: #0E7090; + --color-cyan-800: #155B75; + --color-cyan-900: #155B75; + + /* Blue scale */ + --color-blue-25: #F5FAFF; + --color-blue-50: #EFF8FF; + --color-blue-100: #D1E9FF; + --color-blue-200: #B2DDFF; + --color-blue-300: #84CAFF; + --color-blue-400: #53B1FD; + --color-blue-500: #2E90FA; + --color-blue-600: #1570EF; + --color-blue-700: #175CD3; + --color-blue-800: #1849A9; + --color-blue-900: #194185; + + /* Indigo scale */ + --color-indigo-25: #F5F8FF; + --color-indigo-50: #EFF4FF; + --color-indigo-100: #E0EAFF; + --color-indigo-200: #C7D7FE; + --color-indigo-300: #A4BCFD; + --color-indigo-400: #8098F9; + --color-indigo-500: #6172F3; + --color-indigo-600: #444CE7; + --color-indigo-700: #3538CD; + --color-indigo-800: #2D31A6; + --color-indigo-900: #2D3282; + + /* Violet scale */ + --color-violet-25: #FBFAFF; + --color-violet-50: #F5F3FF; + --color-violet-100: #ECE9FE; + --color-violet-200: #DDD6FE; + --color-violet-300: #C3B5FD; + --color-violet-400: #A48AFB; + --color-violet-500: #875BF7; + --color-violet-600: #7839EE; + --color-violet-700: #6927DA; + + /* Fuchsia scale */ + --color-fuchsia-25: #FEFAFF; + --color-fuchsia-50: #FDF4FF; + --color-fuchsia-100: #FBE8FF; + --color-fuchsia-200: #F6D0FE; + --color-fuchsia-300: #EEAAFD; + --color-fuchsia-400: #E478FA; + --color-fuchsia-500: #D444F1; + --color-fuchsia-600: #BA24D5; + --color-fuchsia-700: #9F1AB1; + --color-fuchsia-800: #821890; + --color-fuchsia-900: #6F1877; + + /* Pink scale */ + --color-pink-25: #FFFAFC; + --color-pink-50: #FEF0F7; + --color-pink-100: #FFD1E2; + --color-pink-200: #FFB1CE; + --color-pink-300: #FD8FBA; + --color-pink-400: #F86BA7; + --color-pink-500: #F23E94; + --color-pink-600: #D5327F; + --color-pink-700: #BA256B; + --color-pink-800: #9E1958; + --color-pink-900: #840B45; + + /* Orange scale */ + --color-orange-25: #FFF9F5; + --color-orange-50: #FFF4ED; + --color-orange-100: #FFE6D5; + --color-orange-200: #FFD6AE; + --color-orange-300: #FF9C66; + --color-orange-400: #FF692E; + --color-orange-500: #FF4405; + --color-orange-600: #E62E05; + --color-orange-700: #BC1B06; + --color-orange-800: #97180C; + --color-orange-900: #771A0D; + + /* Shadows */ + --shadow-none: 0 0 #0000; + --shadow-xs: 0px 1px 2px 0px rgba(11, 11, 11, 0.05); + --shadow-sm: 0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10); + --shadow-md: 0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10); + --shadow-lg: 0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08); + --shadow-xl: 0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08); + --shadow-2xl: 0px 24px 48px -12px rgba(11, 11, 11, 0.12); + --shadow-3xl: 0px 32px 64px -12px rgba(11, 11, 11, 0.14); + + /* Border radius */ + --border-radius-none: 0; + --border-radius-full: 9999px; + --border-radius-xs: 2px; + --border-radius-sm: 4px; + --border-radius-md: 8px; + --border-radius-lg: 10px; + --border-radius-xl: 12px; + --border-radius-2xl: 16px; + --border-radius-3xl: 24px; +} + +.form-field { + @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-white border-alpha-black-100 shadow-xs w-full; + @apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100; +} + +.form-field__label { + @apply block text-xs text-gray-500 peer-disabled:text-gray-400; +} + +.hw-combobox__label { + @apply block text-xs text-gray-500 peer-disabled:text-gray-400; +} + +.form-field__input { + @apply border-none bg-transparent text-sm opacity-100 w-full p-0; + @apply focus:opacity-100 focus:outline-hidden focus:ring-0; + @apply placeholder-shown:opacity-50; + @apply disabled:text-gray-400; + @apply text-ellipsis overflow-hidden whitespace-nowrap; + + &select { + @apply pr-8; + } +} + +.form-field__radio { + @apply text-gray-900; +} + +.form-field__submit { + @apply cursor-pointer rounded-lg bg-black p-3 text-center text-white hover:bg-gray-700; +} + +.toggle-switch-dot { + input:checked + label + & { + transform: translateX(100%); + } +} + +.maybe-checkbox { + &[type='checkbox'] { + @apply rounded-sm; + } +} + +.maybe-checkbox--light { + &[type='checkbox'] { + @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500; + } + + &[type='checkbox']:disabled { + @apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400; + } +} + +.maybe-checkbox--dark { + &[type='checkbox'] { + @apply ring-gray-900 checked:text-white; + } + + &[type='checkbox']:disabled { + @apply cursor-not-allowed opacity-80 ring-gray-600; + } + + &[type='checkbox']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); + } +} + +.maybe-switch { + @apply block bg-gray-100 w-9 h-5 rounded-full cursor-pointer; + @apply after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out; + @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4; +} + +.prose { + @apply max-w-none; + + h2 { + @apply text-xl font-medium; + } + + h3 { + @apply text-lg font-medium; + } + + li { + @apply m-0; + } + + details { + @apply mb-4 rounded-xl mt-3.5; + } + + summary { + @apply flex items-center gap-1; + } + + video { + @apply m-0 rounded-b-xl; + } +} + +.prose--github-release-notes { + .octicon { + @apply inline-block overflow-visible align-text-bottom fill-current; + } + + .dropdown-caret { + @apply content-none border-4 border-b-0 border-transparent border-t-gray-500 size-0 inline-block; + } + + .user-mention { + @apply font-bold; + } +} + +.tooltip { + @apply hidden absolute; +} + +.btn { + @apply px-3 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:cursor-not-allowed focus:outline-gray-500; +} + +.btn--primary { + @apply bg-gray-900 text-white hover:bg-gray-700 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400; +} + +.btn--secondary { + @apply bg-gray-50 hover:bg-gray-100 text-gray-900; +} + +.btn--outline { + @apply border border-alpha-black-200 text-gray-900 hover:bg-gray-50 disabled:bg-gray-50 disabled:hover:bg-gray-50 disabled:text-gray-400; +} + +.btn--ghost { + @apply border border-transparent text-gray-900 hover:bg-gray-50; +} +.scrollbar { + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-thumb { + background: #d6d6d6; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb:hover { + background: #a6a6a6; + } +} + +/* Reset rules, default styles applied to plain HTML */ +@layer base { + details>summary::-webkit-details-marker { + @apply hidden; + } + + details>summary { + @apply list-none; + } +} + +@layer components { + select[multiple="multiple"] { + @apply py-2 pr-2 space-y-0.5 overflow-y-auto; + } + + select[multiple="multiple"] option { + @apply py-2 rounded-md; + } + + select[multiple="multiple"] option:checked { + @apply after:content-['\2713'] bg-white after:text-gray-500 after:ml-2; + } + + select[multiple="multiple"] option:active, + select[multiple="multiple"] option:focus { + @apply bg-white; + } +} + +@utility combobox { + .hw-combobox__main__wrapper, + .hw-combobox__input { + @apply w-full; + } + + .hw-combobox__main__wrapper { + @apply border-0 p-0 focus:border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none focus-within:shadow-none; + } + + .hw-combobox__listbox { + @apply absolute top-[160%] right-0 w-full bg-transparent rounded z-30; + } + + .hw_combobox__pagination__wrapper { + @apply h-px; + + &:only-child { + @apply bg-transparent; + } + } + + --hw-border-color: rgba(0, 0, 0, 0.2); + --hw-handle-width: 20px; + --hw-handle-height: 20px; + --hw-handle-offset-right: 0px; +} + +/* Custom scrollbar implementation for Windows browsers */ +.windows { + ::-webkit-scrollbar { + width: 4px; + } + + ::-webkit-scrollbar-thumb { + background: #d6d6d6; + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb:hover { + background: #a6a6a6; + } +} \ No newline at end of file diff --git a/app/helpers/forms_helper.rb b/app/helpers/forms_helper.rb index 2a187d62b..a66c740e2 100644 --- a/app/helpers/forms_helper.rb +++ b/app/helpers/forms_helper.rb @@ -11,13 +11,13 @@ module FormsHelper end def radio_tab_tag(form:, name:, value:, label:, icon:, checked: false, disabled: false) - form.label name, for: form.field_id(name, value), class: "group has-[:disabled]:cursor-not-allowed" do + form.label name, for: form.field_id(name, value), class: "group has-disabled:cursor-not-allowed" do concat radio_tab_contents(label:, icon:) concat form.radio_button(name, value, checked:, disabled:, class: "hidden") end end - def period_select(form:, selected:, classes: "border border-alpha-black-100 shadow-xs rounded-lg text-sm pr-7 cursor-pointer text-gray-900 focus:outline-none focus:ring-0") + def period_select(form:, selected:, classes: "border border-alpha-black-100 shadow-xs rounded-lg text-sm pr-7 cursor-pointer text-gray-900 focus:outline-hidden focus:ring-0") periods_for_select = [ %w[CWD current_week], # Current Week to Date %w[7D last_7_days], @@ -39,9 +39,9 @@ end private def radio_tab_contents(label:, icon:) - tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-[:checked]:bg-white group-has-[:checked]:text-gray-800 group-has-[:checked]:shadow-sm") do + tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm") do concat lucide_icon(icon, class: "w-5 h-5") - concat tag.span(label, class: "group-has-[:checked]:font-semibold") + concat tag.span(label, class: "group-has-checked:font-semibold") end end end diff --git a/app/javascript/controllers/time_series_chart_controller.js b/app/javascript/controllers/time_series_chart_controller.js index 626ec7451..0f687e0df 100644 --- a/app/javascript/controllers/time_series_chart_controller.js +++ b/app/javascript/controllers/time_series_chart_controller.js @@ -1,5 +1,4 @@ import { Controller } from "@hotwired/stimulus"; -import tailwindColors from "@maybe/tailwindcolors"; import * as d3 from "d3"; export default class extends Controller { @@ -85,7 +84,7 @@ export default class extends Controller { .attr("y1", 0) .attr("x2", this._d3InitialContainerWidth / 2) .attr("y2", this._d3InitialContainerHeight) - .attr("stroke", tailwindColors.gray[300]) + .attr("stroke", "var(--color-gray-300)") .attr("stroke-dasharray", "4, 4"); } @@ -95,7 +94,7 @@ export default class extends Controller { .attr("cx", this._d3InitialContainerWidth / 2) .attr("cy", this._d3InitialContainerHeight / 2) .attr("r", 4) - .style("fill", tailwindColors.gray[400]); + .style("fill", "var(--color-gray-400)"); } _drawChart() { @@ -151,7 +150,7 @@ export default class extends Controller { .append("stop") .attr("class", "end-color") .attr("offset", "100%") - .attr("stop-color", tailwindColors.gray[300]); + .attr("stop-color", "var(--color-gray-300)"); } _setTrendlineSplitAt(percent) { @@ -191,7 +190,7 @@ export default class extends Controller { // Style ticks this._d3Group .selectAll(".tick text") - .style("fill", tailwindColors.gray[500]) + .style("fill", "var(--color-gray-500)") .style("font-size", "12px") .style("font-weight", "500") .attr("text-anchor", "middle") @@ -261,8 +260,8 @@ export default class extends Controller { .style("position", "absolute") .style("padding", "8px") .style("font", "14px Inter, sans-serif") - .style("background", tailwindColors.white) - .style("border", `1px solid ${tailwindColors["alpha-black"][100]}`) + .style("background", "var(--color-white)") + .style("border", "1px solid var(--color-alpha-black-100)") .style("border-radius", "10px") .style("pointer-events", "none") .style("opacity", 0); // Starts as hidden @@ -313,7 +312,7 @@ export default class extends Controller { .attr("y1", 0) .attr("x2", this._d3XScale(d.date)) .attr("y2", this._d3ContainerHeight) - .attr("stroke", tailwindColors.gray[300]) + .attr("stroke", "var(--color-gray-300)") .attr("stroke-dasharray", "4, 4"); // Big circle @@ -361,7 +360,7 @@ export default class extends Controller { _tooltipTemplate(datum) { return ` -
+
${d3.utcFormat("%b %d, %Y")(datum.date)}
@@ -401,13 +400,13 @@ export default class extends Controller { return { up: datum.trend.favorable_direction === "up" - ? tailwindColors.success - : tailwindColors.error, + ? "var(--color-success)" + : "var(--color-error)", down: datum.trend.favorable_direction === "down" - ? tailwindColors.success - : tailwindColors.error, - flat: tailwindColors.gray[500], + ? "var(--color-success)" + : "var(--color-error)", + flat: "var(--color-gray-500)", }[datum.trend.direction]; } @@ -505,12 +504,12 @@ export default class extends Controller { get _trendColor() { if (this._trendDirection === "flat") { - return tailwindColors.gray[500]; + return "var(--color-gray-500)"; } if (this._trendDirection === this._favorableDirection) { - return tailwindColors.green[500]; + return "var(--color-green-500)"; } - return tailwindColors.error; + return "var(--color-error)"; } get _trendDirection() { diff --git a/app/javascript/tailwindColors.js b/app/javascript/tailwindColors.js deleted file mode 100644 index 2f5e1a4f1..000000000 --- a/app/javascript/tailwindColors.js +++ /dev/null @@ -1,181 +0,0 @@ -/** - * To keep consistent styling across the app, this file can be imported in - * Stimulus controllers to reference our color palette. Mostly used for D3 charts. - */ - -export default { - transparent: "transparent", - current: "currentColor", - white: "#ffffff", - black: "#0B0B0B", - success: "#10A861", - warning: "#F79009", - error: "#F13636", - gray: { - 25: "#FAFAFA", - 50: "#F5F5F5", - 100: "#F0F0F0", - 200: "#E5E5E5", - 300: "#D6D6D6", - 400: "#A3A3A3", - 500: "#737373", - 600: "#525252", - 700: "#3D3D3D", - 800: "#212121", - 900: "#141414", - }, - "alpha-white": { - 25: "rgba(255, 255, 255, 0.03)", - 50: "rgba(255, 255, 255, 0.05)", - 100: "rgba(255, 255, 255, 0.08)", - 200: "rgba(255, 255, 255, 0.1)", - 300: "rgba(255, 255, 255, 0.15)", - 400: "rgba(255, 255, 255, 0.2)", - 500: "rgba(255, 255, 255, 0.3)", - 600: "rgba(255, 255, 255, 0.4)", - 700: "rgba(255, 255, 255, 0.5)", - 800: "rgba(255, 255, 255, 0.6)", - 900: "rgba(255, 255, 255, 0.7)", - }, - "alpha-black": { - 25: "rgba(11, 11, 11, 0.03)", - 50: "rgba(11, 11, 11, 0.05)", - 100: "rgba(11, 11, 11, 0.08)", - 200: "rgba(11, 11, 11, 0.1)", - 300: "rgba(11, 11, 11, 0.15)", - 400: "rgba(11, 11, 11, 0.2)", - 500: "rgba(11, 11, 11, 0.3)", - 600: "rgba(11, 11, 11, 0.4)", - 700: "rgba(11, 11, 11, 0.5)", - 800: "rgba(11, 11, 11, 0.6)", - 900: "rgba(11, 11, 11, 0.7)", - }, - red: { - 25: "#FFFBFB", - 50: "#FFF1F0", - 100: "#FFDEDB", - 200: "#FEB9B3", - 300: "#F88C86", - 400: "#ED4E4E", - 500: "#F13636", - 600: "#EC2222", - 700: "#C91313", - 800: "#A40E0E", - 900: "#7E0707", - }, - green: { - 25: "#F6FEF9", - 50: "#ECFDF3", - 100: "#D1FADF", - 200: "#A6F4C5", - 300: "#6CE9A6", - 400: "#32D583", - 500: "#12B76A", - 600: "#10A861", - 700: "#078C52", - 800: "#05603A", - 900: "#054F31", - }, - yellow: { - 25: "#FFFCF5", - 50: "#FFFAEB", - 100: "#FEF0C7", - 200: "#FEDF89", - 300: "#FEC84B", - 400: "#FDB022", - 500: "#F79009", - 600: "#DC6803", - 700: "#B54708", - 800: "#93370D", - 900: "#7A2E0E", - }, - cyan: { - 25: "#F5FEFF", - 50: "#ECFDFF", - 100: "#CFF9FE", - 200: "#A5F0FC", - 300: "#67E3F9", - 400: "#22CCEE", - 500: "#06AED4", - 600: "#088AB2", - 700: "#0E7090", - 800: "#155B75", - 900: "#155B75", - }, - blue: { - 25: "#F5FAFF", - 50: "#EFF8FF", - 100: "#D1E9FF", - 200: "#B2DDFF", - 300: "#84CAFF", - 400: "#53B1FD", - 500: "#2E90FA", - 600: "#1570EF", - 700: "#175CD3", - 800: "#1849A9", - 900: "#194185", - }, - indigo: { - 25: "#F5F8FF", - 50: "#EFF4FF", - 100: "#E0EAFF", - 200: "#C7D7FE", - 300: "#A4BCFD", - 400: "#8098F9", - 500: "#6172F3", - 600: "#444CE7", - 700: "#3538CD", - 800: "#2D31A6", - 900: "#2D3282", - }, - violet: { - 25: "#FBFAFF", - 50: "#F5F3FF", - 100: "#ECE9FE", - 200: "#DDD6FE", - 300: "#C3B5FD", - 400: "#A48AFB", - 500: "#875BF7", - 600: "#7839EE", - 700: "#6927DA", - }, - fuchsia: { - 25: "#FEFAFF", - 50: "#FDF4FF", - 100: "#FBE8FF", - 200: "#F6D0FE", - 300: "#EEAAFD", - 400: "#E478FA", - 500: "#D444F1", - 600: "#BA24D5", - 700: "#9F1AB1", - 800: "#821890", - 900: "#6F1877", - }, - pink: { - 25: "#FFFAFC", - 50: "#FEF0F7", - 100: "#FFD1E2", - 200: "#FFB1CE", - 300: "#FD8FBA", - 400: "#F86BA7", - 500: "#F23E94", - 600: "#D5327F", - 700: "#BA256B", - 800: "#9E1958", - 900: "#840B45", - }, - orange: { - 25: "#FFF9F5", - 50: "#FFF4ED", - 100: "#FFE6D5", - 200: "#FFD6AE", - 300: "#FF9C66", - 400: "#FF692E", - 500: "#FF4405", - 600: "#E62E05", - 700: "#BC1B06", - 800: "#97180C", - 900: "#771A0D", - }, -}; diff --git a/app/views/account/holdings/show.html.erb b/app/views/account/holdings/show.html.erb index 390964b74..cedaddbf5 100644 --- a/app/views/account/holdings/show.html.erb +++ b/app/views/account/holdings/show.html.erb @@ -10,7 +10,7 @@
- +

<%= t(".overview") %>

<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %> @@ -48,7 +48,7 @@
- +

<%= t(".history") %>

<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %> @@ -88,7 +88,7 @@
- +

<%= t(".settings") %>

<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %> diff --git a/app/views/account/transactions/_form.html.erb b/app/views/account/transactions/_form.html.erb index 34e322362..f3290c5b6 100644 --- a/app/views/account/transactions/_form.html.erb +++ b/app/views/account/transactions/_form.html.erb @@ -8,7 +8,7 @@
<%= radio_tab_tag form: f, name: :nature, value: :outflow, label: t(".expense"), icon: "minus-circle", checked: params[:nature] == "outflow" || params[:nature].nil? %> <%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow" %> - <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-[:checked]:bg-white group-has-[:checked]:text-gray-800 group-has-[:checked]:shadow-sm" do %> + <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %> <%= lucide_icon "arrow-right-left", class: "w-5 h-5" %> <%= tag.span t(".transfer") %> <% end %> diff --git a/app/views/account/transactions/bulk_edit.html.erb b/app/views/account/transactions/bulk_edit.html.erb index 0fa23ae62..993712e6c 100644 --- a/app/views/account/transactions/bulk_edit.html.erb +++ b/app/views/account/transactions/bulk_edit.html.erb @@ -21,7 +21,7 @@
- +

<%= t(".overview") %>

<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %> @@ -32,7 +32,7 @@
- +

<%= t(".details") %>

<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %> diff --git a/app/views/accounts/_account_type.html.erb b/app/views/accounts/_account_type.html.erb index ffcc90ae3..d8b104db4 100644 --- a/app/views/accounts/_account_type.html.erb +++ b/app/views/accounts/_account_type.html.erb @@ -1,7 +1,7 @@ <%# locals: (accountable:) %> <%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]), - class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %> + class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %> <%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %> diff --git a/app/views/accounts/index/_manual_accounts.html.erb b/app/views/accounts/index/_manual_accounts.html.erb index 9fe0779af..2d93a9eb2 100644 --- a/app/views/accounts/index/_manual_accounts.html.erb +++ b/app/views/accounts/index/_manual_accounts.html.erb @@ -1,7 +1,7 @@ <%# locals: (accounts:) %>
- + <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %>
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb index 02c1b3f8e..e3399f2b6 100644 --- a/app/views/accounts/new.html.erb +++ b/app/views/accounts/new.html.erb @@ -13,7 +13,7 @@ <% unless params[:return_to].present? %> <%= button_to imports_path(import: { type: "AccountImport" }), data: { turbo_frame: :_top }, - class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %> + class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %> <%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %> diff --git a/app/views/accounts/new/_method_selector.html.erb b/app/views/accounts/new/_method_selector.html.erb index 13834f090..388f40280 100644 --- a/app/views/accounts/new/_method_selector.html.erb +++ b/app/views/accounts/new/_method_selector.html.erb @@ -2,7 +2,7 @@ <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
- <%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %> + <%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %> <%= lucide_icon("keyboard", class: "text-gray-500 w-5 h-5") %> @@ -11,7 +11,7 @@ <% if us_link_token %> <%# Default US-only Link %> -
-
+
<%= lucide_icon("info", class: "w-5 h-5 shrink-0") %> diff --git a/app/views/imports/_ready.html.erb b/app/views/imports/_ready.html.erb index 1800d8b07..c564a7777 100644 --- a/app/views/imports/_ready.html.erb +++ b/app/views/imports/_ready.html.erb @@ -5,7 +5,7 @@

<%= t(".description") %>

-
+

item

diff --git a/app/views/invite_codes/_invite_code.html.erb b/app/views/invite_codes/_invite_code.html.erb index 6eb1953e5..9937cbddf 100644 --- a/app/views/invite_codes/_invite_code.html.erb +++ b/app/views/invite_codes/_invite_code.html.erb @@ -4,7 +4,7 @@
<%= invite_code.token %>
-
<%= link_to new_account_path, id: "sidebar-new-account", class: "block hover:bg-gray-100 font-semibold text-gray-900 flex items-center rounded p-1", title: t(".new_account"), data: { turbo_frame: "modal" } do %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index ca2da86d8..ba805c3c9 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -6,7 +6,7 @@ <%= csrf_meta_tags %> <%= csp_meta_tag %> - <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> + <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_include_tag "https://cdn.plaid.com/link/v2/stable/link-initialize.js" %> diff --git a/app/views/layouts/imports.html.erb b/app/views/layouts/imports.html.erb index 699ab61e5..a304588e6 100644 --- a/app/views/layouts/imports.html.erb +++ b/app/views/layouts/imports.html.erb @@ -14,7 +14,7 @@ <% end %> -
+
<%= yield %>
diff --git a/app/views/layouts/wizard.html.erb b/app/views/layouts/wizard.html.erb index fc540a71a..647580b2a 100644 --- a/app/views/layouts/wizard.html.erb +++ b/app/views/layouts/wizard.html.erb @@ -14,7 +14,7 @@ <% end %> -
+
<%= yield %>
diff --git a/app/views/pages/changelog.html.erb b/app/views/pages/changelog.html.erb index 99d9a9c9a..c12d1b170 100644 --- a/app/views/pages/changelog.html.erb +++ b/app/views/pages/changelog.html.erb @@ -4,7 +4,7 @@

<%= t(".title") %>

-
+
diff --git a/app/views/pages/early_access.html.erb b/app/views/pages/early_access.html.erb index cd86b0c35..7c762c078 100644 --- a/app/views/pages/early_access.html.erb +++ b/app/views/pages/early_access.html.erb @@ -23,7 +23,7 @@ ');"> -
+
<%= image_tag "logo-squircle.svg", alt: "Maybe Logo", class: "w-16 h-16 sm:w-18 sm:h-18 mx-auto mb-6 sm:mb-8" %>

Maybe Early Access

diff --git a/app/views/plaid_items/_plaid_item.html.erb b/app/views/plaid_items/_plaid_item.html.erb index 895af1cfd..e8ea54fa4 100644 --- a/app/views/plaid_items/_plaid_item.html.erb +++ b/app/views/plaid_items/_plaid_item.html.erb @@ -2,7 +2,7 @@ <%= tag.div id: dom_id(plaid_item) do %>
- +
<%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %> diff --git a/app/views/settings/_nav_link_large.html.erb b/app/views/settings/_nav_link_large.html.erb index 3b1b2b505..7cc627318 100644 --- a/app/views/settings/_nav_link_large.html.erb +++ b/app/views/settings/_nav_link_large.html.erb @@ -5,7 +5,7 @@ <%= lucide_icon("arrow-left") %>
<% end %> -
<%= "text-right" if direction == "previous" %>"> +
<%= "text-right" if direction == "previous" %>"> <%= t(".#{direction}") %> <%= title %>
diff --git a/app/views/shared/_disclosure.html.erb b/app/views/shared/_disclosure.html.erb index 747d3345e..f615f1680 100644 --- a/app/views/shared/_disclosure.html.erb +++ b/app/views/shared/_disclosure.html.erb @@ -2,7 +2,7 @@
> + uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">

<%= title %>

<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5 h-5" %> diff --git a/app/views/shared/_drawer.html.erb b/app/views/shared/_drawer.html.erb index 050bff211..06323f40c 100644 --- a/app/views/shared/_drawer.html.erb +++ b/app/views/shared/_drawer.html.erb @@ -1,7 +1,7 @@ <%# locals: (content:, reload_on_close: false) %> <%= turbo_frame_tag "drawer" do %> - diff --git a/app/views/shared/_modal.html.erb b/app/views/shared/_modal.html.erb index 18dea29dd..1b53cc98e 100644 --- a/app/views/shared/_modal.html.erb +++ b/app/views/shared/_modal.html.erb @@ -1,6 +1,6 @@ <%# locals: (content:, classes:) -%> <%= turbo_frame_tag "modal" do %> - +
<%= content %>
diff --git a/config/importmap.rb b/config/importmap.rb index 96aaed737..65539f9d3 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -8,9 +8,6 @@ pin_all_from "app/javascript/controllers", under: "controllers" pin_all_from "app/javascript/services", under: "services", to: "services" pin "@github/hotkey", to: "@github--hotkey.js" # @3.1.0 -# Custom namespace for local files -pin "@maybe/tailwindcolors", to: "tailwindColors.js" - # D3 packages pin "d3" # @7.8.5 pin "d3-array" # @3.2.4 diff --git a/config/tailwind.config.js b/config/tailwind.config.js deleted file mode 100644 index aa7cbf2e6..000000000 --- a/config/tailwind.config.js +++ /dev/null @@ -1,96 +0,0 @@ -const defaultTheme = require("tailwindcss/defaultTheme"); -const colors = require("../app/javascript/tailwindColors"); - -module.exports = { - content: [ - "./public/*.html", - "./app/helpers/**/*.rb", - "./app/javascript/**/*.js", - "./app/views/**/*.{erb,haml,html,slim}", - ], - theme: { - colors, - boxShadow: { - none: "0 0 #0000", - inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)", - xs: "0px 1px 2px 0px rgba(11, 11, 11, 0.05)", - sm: "0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10)", - md: "0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10)", - lg: "0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08)", - xl: "0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08)", - "2xl": "0px 24px 48px -12px rgba(11, 11, 11, 0.12)", - "3xl": "0px 32px 64px -12px rgba(11, 11, 11, 0.14)", - }, - borderRadius: { - none: "0", - full: "9999px", - xs: "2px", - sm: "4px", - md: "8px", - DEFAULT: "8px", - lg: "10px", - xl: "12px", - "2xl": "16px", - "3xl": "24px", - }, - extend: { - fontFamily: { - display: ["Inter var", ...defaultTheme.fontFamily.sans], - }, - fontSize: { - "2xs": ".625rem", - }, - spacing: { - '40': '10rem', - }, - keyframes: { - "appear-then-fade": { - "0%,100%": { opacity: 0 }, - "5%,90%": { opacity: 1 }, - }, - "stroke-fill": { - to: { "stroke-dashoffset": 0 }, - }, - }, - typography: (theme) => ({ - DEFAULT: { - css: { - maxWidth: "none", - h2: { - fontSize: theme("fontSize.xl"), - fontWeight: theme("fontWeight.medium"), - }, - h3: { - fontSize: theme("fontSize.lg"), - fontWeight: theme("fontWeight.medium"), - }, - li: { - margin: 0, - }, - details: { - borderRadius: "12px", - marginBottom: "0.875rem", - marginTop: "0.875rem", - }, - summary: { - display: "flex", - alignItems: "center", - columnGap: "0.25rem", - }, - video: { - margin: 0, - borderBottomLeftRadius: "12px", - borderBottomRightRadius: "12px", - }, - }, - }, - }), - }, - }, - plugins: [ - require("@tailwindcss/forms"), - require("@tailwindcss/aspect-ratio"), - require("@tailwindcss/typography"), - require("@tailwindcss/container-queries"), - ], -}; diff --git a/db/schema.rb b/db/schema.rb index c2d3815b2..971846977 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -101,7 +101,7 @@ ActiveRecord::Schema[7.2].define(version: 2025_02_11_161238) do t.decimal "balance", precision: 19, scale: 4 t.string "currency" t.boolean "is_active", default: true, null: false - t.virtual "classification", type: :string, as: "\nCASE\n WHEN ((accountable_type)::text = ANY (ARRAY[('Loan'::character varying)::text, ('CreditCard'::character varying)::text, ('OtherLiability'::character varying)::text])) THEN 'liability'::text\n ELSE 'asset'::text\nEND", stored: true + t.virtual "classification", type: :string, as: "\nCASE\n WHEN ((accountable_type)::text = ANY ((ARRAY['Loan'::character varying, 'CreditCard'::character varying, 'OtherLiability'::character varying])::text[])) THEN 'liability'::text\n ELSE 'asset'::text\nEND", stored: true t.uuid "import_id" t.uuid "plaid_account_id" t.boolean "scheduled_for_deletion", default: false