Meeting minutes
<noamr> ScribeNick noamr
<lea> w3c/
<noamr> lea: I filed this issue 3 minutes before this breakout, better than slides... this can create discussion afterward csswg 10148
<estelle> base color defined by user, with the UI library using relative colors with that color as the from?
<miriam> "core design tokens" sounds almost like "normal css properties"
<khush> ^ that's how i understood it.
<khush> It's not that?
<noamr> estelle: if frameworks have different colors, you define the one blue, and use relative colors of the frameworks
<noamr> lea: I proposed relative colors, unfortunately this is way more complicated than you might expect
<noamr> lea: looking at Tailwind
<noamr> keithamus: one concern with relative colors, we want to maintain contrast ratios, relative color syntax allows too much flexibility, we want devleopers to use the given colors
<noamr> lea: the vision behind relative colors is that proper gamut mapping is broken. also, OKLCH is out best coordinates, and even the hue is not constant
<noamr> lea: if you look at different color palettes, it's not even the same across the palettes
<noamr> lea: you can't just multiply your lightness or add tints. It makes it easier but not trivial
noamr: could this be a centralised registry, does standardising it do anything?
<noamr> lea: accent color has a default that go to the OS, for these common things it can be a good direction
<noamr> lea: a community thing might not be adopted enough
<noamr> lea: looking at the existing color palettes, there is such variance that I don't think that would play out well
<noamr> lea: custom units would be syntactic sugar, if they're implemented that way they won't be able to do that
<noamr> miriam: perhaps combining custom units with custom functions
<noamr> lea: as a component author, I need to know which color to use, the page might have several tints
what about using custom property units? 1--red, 2--size, etc.
<noamr> keithamus: that could integrate with the contrast functions available (yet to be implemented)
<noamr> lea: Safari has a prototype
<noamr> lea: that is part of reducing the number of tokens
<noamr> estelle: what if we gave it a base hue
<noamr> lea: producing the tints is still not trivial. you can't derive an accent color from hue
<noamr> keithamus: part of the work at github was that the design team produces a tool where the ramps are adjustable, because none of the color spaces map into where you can do simple calculations
<noamr> miriam: beyond colors, adding a border, I want to expose that. two ways, one is "I want your thin, what is your thin?" the other is "I want to know your borders"
<noamr> miriam: it's 2 approaches: am I exposing the property or the values
<noamr> lea: perhaps query all the borders of the page
<noamr> miriam: at some point in here I want to expose styling of my custom elements
<noamr> lea: there are always element-specific things, and universal things like accent colors
<noamr> lea: things like sans-serif for example, or ui-serif, but they correspond to OS defaults. maybe these tokens can be redefinable by the page
<noamr> Rain: I agree that it would be great if we could move away from using system defaults and give more flexibility. We should note that there is a strong a11y use case for the browser defaults
<noamr> Rain: custom fonts allow users who need a specific font or color that is setup by the system for a11y. we should still have a way to the browser or OS to take over if needs be
<noamr> lea: excellent point. is that in UA stylesheet, or generic font family mapping?
<noamr> lea: but pages override the default
<noamr> Rain: extensions can smash existing fonts and change to Serif
<noamr> miriam: I have my default serif, my default sans-serif
<noamr> lea: that's a good point around function for tints, they would need to maintain the contrast ratio
<noamr> keithamus: arc lets you theme the browser, with CSS for every page, it exposes design tokens to the page
noamr: system colors are user observable but not web observable for privacy reasons
lea: what if you mix them with something like color-mix?
noamr: I don't have an answer
lea: it must behave like blue, no? We have color-extract to extract components of a color
khush: how do you read it back?
noamr: it's not a new problem, we've been doing this for ages with visited links
<noamr> lea: beyond solutions, have people encountered this? like the a11y use case?
<noamr> keithamus: we thought it would be useful if @property can configure whether it's private or used within JS. They're heavy and not easily manglable.
<noamr> keithamus: perhaps we can annotate if a @property is used outside of the scope. perhaps static/constant
<noamr> lea: we had an idea about constants a long time ago, like using variables for selectors
<noamr> lea: I get env() can be used because it's global. We talked about an at role or pseudo-elements for document globals
<kizu8> Custom env() variables: w3c/
<noamr> lea: another direction is to pass around multiple variables, e.g. this css variable groups proposal (see issue on top)
<noamr> lea: and color scale is about creating continuous color scales, like green/red/yellow, being able to pick 5 colors on this scale.
<noamr> keithamus: like passing a linear gradient
<noamr> (see poroposal #10034
<noamr> lea: what this didn't have is a way to make this discrete
<noamr> lea: calc-scale/color-scale would probably cover it
<noamr> lea: if you use the wrong colors it's very noticable, for fonts you can use simple inheritance. it comes more as a problem when you need to use a specific font
<noamr> lea: e.g. a monospace font or a badge
<noamr> lea: for length you can sometimes derive something not terrible
<noamr> estelle: a solution could be to use to grab the style of e.g. the main after an h2 of the page
<noamr> estelle: like grab a value of a particular DOM style
<noamr> lea: grab the values already in use
<noamr> estelle: what if you could grab it from the page somehow
<noamr> miriam: the problem there is which paragraph? There could be so many other criteria
<noamr> lea: one concern I would have is that implementors would push back. what when the page changes? Update everything?
<noamr> Roman: a similar issue with anchor position, we had to put some restrictions, perhaps colors can have a similar directional flow/containment
<noamr> estelle: style queries are not supported here for this. the parts that aren't supported yet, maybe this would be for this?
<noamr> keithamus: like a font feature query
<noamr> talking about issue #2864, inherit() a property name
<noamr> miriam: like grab the current parent's margin and use it as padding
<noamr> miriam: it doesn't necessarily work for 3p widgets
<noamr> lea: there was the @like proposal (#10948). would let you do things like "style this thing like a button"
<noamr> lea: might be useful beyond styling
<noamr> miriam: to some extent, if I want you to theme my thing in a special way, I'll have to name things and export them. there is no way of avoiding the mapping
<noamr> miriam: on the other hand it's just a style for border
noamr: is this just class? Class name? The same problem with parts and such - we want a shared name for this.
keithamus: the problem is co-operation and having a prescribed shared name
<noamr> perhaps it's a matter of interface, and exporting/importing classes across shadow
<noamr> JRJurman: seems like it's pretty easy to expose those tokens. Maybe something local can be done rather than something big and standardized?
<noamr> lea: I don't have high hopes that a community efforts would get it right, and native elements would not use it
<noamr> lea: even the direction is not standardize, some go from lighter to darker, some the other way
<noamr> lea: would be good to track this on a higher level
<noamr> miriam: it's several issue, but yea
<noamr> lea: what if you could define a color scale with mix or discrete, and you ask for e.g. 75% in that color scale
<noamr> keithamus: you can provide discrete steps, and you can reason across teams "use 82% and not 75%"
<noamr> lea: the distribution of lightnesses across the different palettes, they vary wildly
<ray-schwartz7> does this help? https://
<ray-schwartz7> would ’end meeting’ do it?
<ray-schwartz7> I mean ‘Zakim,’ before that
<ray-schwartz7> Let me try it