Adds a new `mach storybook upgrade` command that will forcefully upgrade all Storybook npm dependencies to their highest versions allowed in the package.json by performing the following tasks:
1. Remove the node_modules directory
2. Remove the package-lock.json file
3. Run `npm install`
Differential Revision: https://phabricator.services.mozilla.com/D244775
The new palette makes use of oklch(), a modern function based on cielab color space.
Oklch has bigger gamut support, while being a perceptual and uniform space - easier to create a system with colors that step down evenly.
While oklch gets us pretty far, you will notice if you look close though that all color groups don't follow the same exact lightness and chroma values to a T. I lightly tweaked some color families based on how colors tend to respond to the human eye as they get more or less lightness and chroma.
I will release alongside this palette some minimal guidance of how to combine colors on acorn.firefox.com. This palette provides an easy to understand system where
0 is the lightest and 110 is the darkest, and 1-100 step towards the darkest value evenly. You could then pretty much split
the scale in half to create light/dark mode safe combinations for background + text, icon + background, etc. But as mentioned before, more guidance to come.
I'm applying colors to tab groups here so made sure to get Amy Lee's approval.
I also ran this by theme reviewers.
UX org has also approved this work.
I also planned with #reusable-components-reviewers team to launch this at the beginning of the next cycle alongside a note to dev mailist announcing the changes.
You should notice some small differences on certain colors, but nothing too dramatic. Colors, besides themes, pretty much only show up as an accent (e.g. primary button) or for feedback (e.g. message bars). Before and after pics can be found [here](https://www.figma.com/design/ZDl1O6w3AA8CC2Keo8ExFg/Bug-1861526-before-and-afters?node-id=0-1&p=f&t=0HeNRoieubFL4ZFl-0).
Note: Storybook isn't playing nicely with oklch and we get some warnings for contrast. I talked to Mark Striemer, and for now we can land this but should look into a solution, if possible. I filed 1950988.
Note to ReComp: I touched up message bar's design slightly here by tweaking the border color.
I also used Julian Gaibler's help to ignore oklch for now since it was spitting errors in the Figma config.
### oklch reads
w3: https://www.w3.org/TR/css-color-4/#lab-colors
tldr: https://chriscoyier.net/2023/10/20/more-oklch-musings/
Differential Revision: https://phabricator.services.mozilla.com/D239079
Upgrades Storybook dependencies to their highest versions allowed in
package-lock.json, which also upgrades `axe-core` to version 4.10.3.
Differential Revision: https://phabricator.services.mozilla.com/D244221
The new palette makes use of oklch(), a modern function based on cielab color space.
Oklch has bigger gamut support, while being a perceptual and uniform space - easier to create a system with colors that step down evenly.
While oklch gets us pretty far, you will notice if you look close though that all color groups don't follow the same exact lightness and chroma values to a T. I lightly tweaked some color families based on how colors tend to respond to the human eye as they get more or less lightness and chroma.
I will release alongside this palette some minimal guidance of how to combine colors on acorn.firefox.com. This palette provides an easy to understand system where
0 is the lightest and 110 is the darkest, and 1-100 step towards the darkest value evenly. You could then pretty much split
the scale in half to create light/dark mode safe combinations for background + text, icon + background, etc. But as mentioned before, more guidance to come.
I'm applying colors to tab groups here so made sure to get Amy Lee's approval.
I also ran this by theme reviewers.
UX org has also approved this work.
I also planned with #reusable-components-reviewers team to launch this at the beginning of the next cycle alongside a note to dev mailist announcing the changes.
You should notice some small differences on certain colors, but nothing too dramatic. Colors, besides themes, pretty much only show up as an accent (e.g. primary button) or for feedback (e.g. message bars). Before and after pics can be found [here](https://www.figma.com/design/ZDl1O6w3AA8CC2Keo8ExFg/Bug-1861526-before-and-afters?node-id=0-1&p=f&t=0HeNRoieubFL4ZFl-0).
Note: Storybook isn't playing nicely with oklch and we get some warnings for contrast. I talked to Mark Striemer, and for now we can land this but should look into a solution, if possible. I filed 1950988.
Note to ReComp: I touched up message bar's design slightly here by tweaking the border color.
I also used Julian Gaibler's help to ignore oklch for now since it was spitting errors in the Figma config.
### oklch reads
w3: https://www.w3.org/TR/css-color-4/#lab-colors
tldr: https://chriscoyier.net/2023/10/20/more-oklch-musings/
Differential Revision: https://phabricator.services.mozilla.com/D239079
Refactor the setting-group and setting-control a little to support
passing in the Preferences.getSetting function rather pulling it off of
window.
Add basic Storybook stories for setting-group and setting-control.
Differential Revision: https://phabricator.services.mozilla.com/D241130
We've allowed for auto importing moz- custom elements since Bug 1803678. This means that often custom elements will use moz- elements without explicitly importing them. This sometimes causes problems in Storybook, since the auto import logic doesn't apply there, and as of Storybook v7 all stories are lazily compiled. This patch ensures that we load all moz- elements and other reusable components up front to avoid display issues in domain specific component stories.
Differential Revision: https://phabricator.services.mozilla.com/D221702
Co-author/investigator: Tim Giles <tgiles@mozilla.com>
Delay sychronous loading of ESM based custom elements until the
DOMContentLoaded event. With D212190--which this patch depends on--the
components that have already been used on the page will be synchronously
loaded when customElements.setElementCreationCallback is registered.
Differential Revision: https://phabricator.services.mozilla.com/D212191
Simplified debouncing logic to avoid depending on DeferredTask. Add missing `aria-label` which is needed for the edge case of showing a search box without placeholder.
Differential Revision: https://phabricator.services.mozilla.com/D210701
Simplified debouncing logic to avoid depending on DeferredTask. Add missing `aria-label` which is needed for the edge case of showing a search box without placeholder.
Differential Revision: https://phabricator.services.mozilla.com/D210701
Simplified debouncing logic to avoid depending on DeferredTask. Add missing `aria-label` which is needed for the edge case of showing a search box without placeholder.
Differential Revision: https://phabricator.services.mozilla.com/D210701
The `<shopping-message-bar>` component is the last place we're using the deprecated `<message-bar>` component. As such, it's the one thing standing preventing us from remvoing the old `<message-bar>` implementation (see Bug 1845151). I took a quick look and the `<message-bar>`s here aren't actually providing any styling/layout and seem to be easily replacable with `<div>`s.
Differential Revision: https://phabricator.services.mozilla.com/D207989
