Dark mode select combobox menu checkbox #1878

rossedfort · 2024-02-23T18:06:31Z

Description & motivation 💭

Update dark mode styles for Menu (Menu Button and Menu Item), Select, Combobox, and Checkbox
Remove "theme" props for these components, they will respect whatever mode the UI is using
Checkbox is tricky cause it can display on a dark background (i.e. a table header) in light mode. May need to revisit later.
Also clean up Button styles a little by making re-usable shadow classes.

Screenshots (if applicable) 📸

checkbox

light mode	dark mode

combobox

light mode	dark mode

select

light mode	dark mode

Note minor checkbox change in table header

before	after

Design Considerations 🎨

Testing 🧪

How was this tested 👻

Manual testing
E2E tests added
Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

input, menu, select, and combobox

vercel · 2024-02-23T18:06:36Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
holocene	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 26, 2024 5:02pm

rossedfort · 2024-02-23T18:08:41Z

src/lib/theme/colors.ts

  slate: {
-    50: '#F5F7F9',
-    100: '#E7EDF2',
-    200: '#D5DEE8',
-    300: '#B9C9D7',
-    400: '#97AEC3',
-    500: '#7E95B3',
-    600: '#667CA1',
-    700: '#607195',
-    800: '#525D7B',
-    900: '#444F64',
-    950: '#2D323E',
-    DEFAULT: '#7E95B3',
+    50: '#E8EFFF',
+    100: '#C9D9F0',
+    200: '#AEBED9',
+    300: '#92A4C3',
+    400: '#7C8FB1',
+    500: '#667CA1',
+    600: '#576E8F',
+    700: '#465A78',
+    800: '#273860',
+    900: '#1E293B',
+    950: '#0F172A',
+    DEFAULT: '#667CA1',


Colors taken from here: https://www.figma.com/file/OZBSltgZ91xMkooeNWK35L/THE-OOZE-(config-file)?type=design&node-id=1323-606&mode=dev

rossedfort · 2024-02-23T18:09:56Z

src/lib/theme/colors.ts

+export const getColor = (
+  color: keyof Palette,
+  shade: Shade = 'DEFAULT',


I don't think the typing was working properly before, now getColor is strongly typed

rossedfort · 2024-02-23T18:10:24Z

src/lib/theme/utilities.ts

@@ -9,4 +11,5 @@ export const rgb = (hexColor: `#${string}`): RGB => {
  return `${r} ${g} ${b}`;
 };

-export const css = (variable: CSSVariable) => `rgb(var(${variable}))`;
+export const css = (variable: keyof typeof variables, opacity?: Opacity) =>


made strongly typed

GraceGardner

This looks way better, everything is really nice and clean. Something to strive for in my PR's. Any chance you can explain to me why we should get rid of the primary, secondary, danger and success colors? Will we just not be using them, or is it bad naming convention?

rossedfort · 2024-02-23T18:31:57Z

Any chance you can explain to me why we should get rid of the primary, secondary, danger and success colors? Will we just not be using them, or is it bad naming convention?

Yes the reason has to do with just having consistent naming conventions. That big color object ends up being included in our tailwind theme, so that when we do bg-blue for example, we get our blue, not tailwind's blue. I'm of the opinion that those colors should be named like actual colors, blue, green, red, etc. Then the mapping of those colors to semantic names, i.e. primary, secondary, danger, etc. should happen at one level higher of abstraction, like the variable names and class helpers. So roughly something like:

const colors = {
  indigo: {
    // ...
    600: '#444CE7',
    // ...
  }
}

const variables = {
  '--color-primary': rgb(getColor('indigo', 600)),
}

* first pass at new dark mode for... input, menu, select, and combobox * clean up some styles * fix checkbox * fix snaps, remove commented out style * fix some button stuff I broke * fix checkbox * clean up hover borders on menu button * fix tests/types * return empty string label if no selected option and no placeholder

* Upgrade to Svelte4 * migration to SvelteKit 2 * Update @types/node and caniuse-lite * update sveltekit and vite to fix vulnerabilities * Expose slot bindings to named slots * Update snaps and tests * Fix type imports * Fix outside-click * fix some type stuff * Bump types/node for sec vul * Update snaps and tests * Fix snaps? * Update snaps * Dark mode select combobox menu checkbox (#1878) * first pass at new dark mode for... input, menu, select, and combobox * clean up some styles * fix checkbox * fix snaps, remove commented out style * fix some button stuff I broke * fix checkbox * clean up hover borders on menu button * fix tests/types * return empty string label if no selected option and no placeholder * 2.23.6 (#1882) Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io> * Fix snaps * Actually factually for suresies 100% I know it has to be true and this is the final time and I won't make this mistake again after merging fixed the snaps --------- Co-authored-by: Alex Tideman <alex.tideman@gmail.com> Co-authored-by: Ross Edfort <rossedfort@gmail.com> Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io>

rossedfort added 7 commits February 23, 2024 09:13

first pass at new dark mode for...

8c52bd2

input, menu, select, and combobox

clean up some styles

3f28062

fix checkbox

3fdc6c3

fix snaps, remove commented out style

25d6d4a

fix some button stuff I broke

daf12d7

fix checkbox

8ad60ca

clean up hover borders on menu button

666d2fb

rossedfort requested a review from a team as a code owner February 23, 2024 18:06

rossedfort requested review from KATIETOLER and removed request for a team February 23, 2024 18:06

rossedfort requested review from stevekinney, Alex-Tideman and GraceGardner and removed request for KATIETOLER February 23, 2024 18:06

rossedfort commented Feb 23, 2024

View reviewed changes

fix tests/types

0c52a26

vercel bot deployed to Preview February 23, 2024 18:12 View deployment

GraceGardner approved these changes Feb 23, 2024

View reviewed changes

return empty string label if no selected option and no placeholder

3c9ae8f

vercel bot deployed to Preview February 26, 2024 17:02 View deployment

rossedfort merged commit 63bd7a4 into main Feb 26, 2024
11 checks passed

rossedfort deleted the dark-mode-select-combobox-menu-checkbox branch February 26, 2024 18:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark mode select combobox menu checkbox #1878

Dark mode select combobox menu checkbox #1878

rossedfort commented Feb 23, 2024 •

edited

Loading

vercel bot commented Feb 23, 2024 •

edited

Loading

rossedfort Feb 23, 2024

rossedfort Feb 23, 2024

rossedfort Feb 23, 2024

GraceGardner left a comment

rossedfort commented Feb 23, 2024 •

edited

Loading

Dark mode select combobox menu checkbox #1878

Dark mode select combobox menu checkbox #1878

Conversation

rossedfort commented Feb 23, 2024 • edited Loading

Description & motivation 💭

Screenshots (if applicable) 📸

checkbox

menu

combobox

select

Design Considerations 🎨

Testing 🧪

How was this tested 👻

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

vercel bot commented Feb 23, 2024 • edited Loading

rossedfort Feb 23, 2024

Choose a reason for hiding this comment

rossedfort Feb 23, 2024

Choose a reason for hiding this comment

rossedfort Feb 23, 2024

Choose a reason for hiding this comment

GraceGardner left a comment

Choose a reason for hiding this comment

rossedfort commented Feb 23, 2024 • edited Loading

rossedfort commented Feb 23, 2024 •

edited

Loading

vercel bot commented Feb 23, 2024 •

edited

Loading

rossedfort commented Feb 23, 2024 •

edited

Loading