Skip to content

Commit 95bf05a

Browse files
committed
fix: 🐛 minor styling touch up for dark mode modals
1 parent 173149c commit 95bf05a

2 files changed

Lines changed: 33 additions & 0 deletions

File tree

ui/app.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,21 @@ const overrides: GlobalThemeOverrides = {
171171
panelTextColor: "var(--cf-datepicker-panel-text)",
172172
textColor: "var(--cf-datepicker-panel-text)",
173173
},
174+
Dialog: {
175+
borderRadius: "10px",
176+
boxShadow: "var(--cf-modal-shadow)",
177+
closeColorHover: "var(--cf-modal-close-bg-hover)",
178+
closeColorPressed: "var(--cf-modal-close-bg-hover)",
179+
closeIconColor: "var(--cf-modal-close-icon)",
180+
closeIconColorHover: "var(--cf-modal-close-icon-hover)",
181+
closeIconColorPressed: "var(--cf-modal-close-icon-hover)",
182+
color: "var(--cf-modal-bg)",
183+
contentTextColor: "var(--cf-modal-text)",
184+
iconColor: "var(--cf-modal-icon-info)",
185+
iconColorInfo: "var(--cf-modal-icon-info)",
186+
textColor: "var(--cf-modal-text)",
187+
titleTextColor: "var(--cf-modal-header-text)",
188+
},
174189
Divider: {
175190
color: "var(--cf-divider)",
176191
},

ui/assets/css/tailwind.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,19 @@ body {
172172
--cf-alert-neutral-border: oklch(88% 0.01 260);
173173
--cf-alert-neutral-icon: oklch(55% 0.02 260);
174174

175+
/* Modal colors - light mode */
176+
--cf-modal-bg: oklch(100% 0.00011 271.152);
177+
--cf-modal-header-bg: oklch(97% 0.01 260);
178+
--cf-modal-header-text: oklch(27% 0.02 260);
179+
--cf-modal-text: oklch(35% 0.02 260);
180+
--cf-modal-border: oklch(90% 0.01 260);
181+
--cf-modal-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
182+
--cf-modal-close-icon: oklch(55% 0.02 260);
183+
--cf-modal-close-icon-hover: oklch(27% 0.02 260);
184+
--cf-modal-close-bg-hover: oklch(94% 0.01 260);
185+
--cf-modal-icon-info: oklch(45% 0.18 220);
186+
--cf-modal-action-space: 12px;
187+
175188
--link-color: oklch(45.7% 0.24 277.023);
176189
--link-hover: oklch(49.1% 0.27 292.581);
177190

@@ -332,6 +345,11 @@ body {
332345
--cf-modal-text: oklch(90% 0.01 260);
333346
--cf-modal-border: oklch(38% 0.02 260);
334347
--cf-modal-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
348+
--cf-modal-close-icon: oklch(78% 0.01 260);
349+
--cf-modal-close-icon-hover: oklch(98% 0.01 260);
350+
--cf-modal-close-bg-hover: oklch(32% 0.02 260);
351+
--cf-modal-icon-info: oklch(75% 0.15 220);
352+
--cf-modal-action-space: 12px;
335353

336354
--cf-dropdown-bg: oklch(27% 0.02 260);
337355
--cf-dropdown-divider: oklch(38% 0.02 260);

0 commit comments

Comments
 (0)