15:02:53 <RRSAgent> RRSAgent has joined #design-integration
15:02:57 <RRSAgent> logging to https://www.w3.org/2024/09/25-design-integration-irc
15:02:57 <tpac-breakout-bot> RRSAgent, do not leave
15:02:58 <tpac-breakout-bot> RRSAgent, make logs public
15:02:59 <tpac-breakout-bot> Meeting: Integrating UI components is too damn hard!
15:02:59 <tpac-breakout-bot> Chair: Lea Verou, Keith Cirkel
15:02:59 <tpac-breakout-bot> Agenda: https://github.com/w3c/tpac2024-breakouts/issues/92
15:02:59 <Zakim> Zakim has joined #design-integration
15:03:00 <tpac-breakout-bot> Zakim, clear agenda
15:03:00 <Zakim> agenda cleared
15:03:00 <tpac-breakout-bot> Zakim, agenda+ Pick a scribe
15:03:01 <Zakim> agendum 1 added
15:03:01 <tpac-breakout-bot> Zakim, agenda+ Reminders: code of conduct, health policies, recorded session policy
15:03:01 <Zakim> agendum 2 added
15:03:01 <tpac-breakout-bot> Zakim, agenda+ Goal of this session
15:03:02 <Zakim> agendum 3 added
15:03:02 <tpac-breakout-bot> Zakim, agenda+ Discussion
15:03:02 <Zakim> agendum 4 added
15:03:02 <tpac-breakout-bot> Zakim, agenda+ Next steps / where discussion continues
15:03:03 <Zakim> agendum 5 added
15:03:04 <tpac-breakout-bot> tpac-breakout-bot has left #design-integration
21:40:09 <kbabbitt> kbabbitt has joined #design-integration
21:41:20 <keithamus> keithamus has joined #design-integration
21:41:26 <keithamus> present+
21:43:54 <kbabbitt> present+
21:44:21 <miriam> miriam has joined #design-integration
21:44:27 <lea> lea has joined #design-integration
21:44:53 <siye> siye has joined #design-integration
21:45:09 <estelle> estelle has joined #design-integration
21:45:21 <khush> khush has joined #design-integration
21:45:27 <khush> present+
21:45:29 <noamr> noamr has joined #design-integration
21:45:33 <miriam> present+
21:45:34 <Rain> Rain has joined #design-integration
21:45:36 <noamr> present+
21:45:37 <lea> present+
21:45:39 <noamr> ScribeNick noamr
21:45:39 <Rain> present+
21:46:37 <JJ> JJ has joined #design-integration
21:46:41 <JJ> present+
21:47:10 <lea> https://github.com/w3c/csswg-drafts/issues/10948
21:47:12 <noamr> lea: I filed this issue 3 minutes before this breakout, better than slides... this can create discussion afterward csswg 10148
21:47:24 <JRJurman> JRJurman has joined #design-integration
21:50:02 <vmpstr> vmpstr has joined #design-integration
21:50:06 <vmpstr> present+
21:50:41 <khush> khush has joined #design-integration
21:51:04 <estelle> present+
21:51:13 <JRJurman> present+
21:54:05 <khush> present+
21:54:31 <estelle> base color defined by user, with the UI library using relative colors with that color as the from?
21:54:39 <estelle> q+
21:54:39 <miriam> "core design tokens" sounds almost like "normal css properties"
21:54:51 <jamesn> jamesn has joined #design-integration
21:54:55 <khush> ^ that's how i understood it.
21:54:59 <khush> It's not that?
21:55:37 <jamesn> q?
21:55:45 <noamr> ack estelle
21:56:03 <noamr> estelle: if frameworks have different colors, you define the one blue, and use relative colors of the frameworks
21:56:20 <noamr> lea: I proposed relative colors, unfortunately this is way more complicated than you might expect
21:56:28 <noamr> lea: looking at Tailwind
21:56:59 <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
21:58:04 <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
21:58:21 <noamr> lea: if you look at different color palettes, it's not even the same across the palettes
21:59:00 <noamr> lea: you can't just multiply your lightness or add tints. It makes it easier but not trivial
21:59:26 <JohnRiv> JohnRiv has joined #design-integration
21:59:31 <kizu8> kizu8 has joined #design-integration
21:59:50 <keithamus> scribe+
22:00:01 <keithamus> noamr: could this be a centralised registry, does standardising it do anything?
22:00:19 <noamr> lea: accent color has a default that go to the OS, for these common things it can be a good direction
22:00:21 <ray-schwartz7> ray-schwartz7 has joined #design-integration
22:00:24 <keithamus> q+
22:00:29 <noamr> lea: a community thing might not be adopted enough
22:00:52 <noamr> lea: looking at the existing color palettes, there is such variance that I don't think that would play out well
22:01:48 <noamr> lea: custom units would be syntactic sugar, if they're implemented that way they won't be able to do that
22:02:06 <noamr> miriam: perhaps combining custom units with custom functions
22:02:27 <robglidden8> robglidden8 has joined #design-integration
22:02:31 <noamr> lea: as a component author, I need to know which color to use, the page might have several tints
22:02:36 <keithamus> what about using custom property units? 1--red, 2--size, etc.
22:02:59 <noamr> keithamus: that could integrate with the contrast functions available (yet to be implemented)
22:03:03 <noamr> lea: Safari has a prototype
22:03:10 <noamr> lea: that is part of reducing the number of tokens
22:03:30 <noamr> estelle: what if we gave it a base hue
22:03:42 <miriam> q+
22:03:47 <noamr> lea: producing the tints is still not trivial. you can't derive an accent color from hue
22:03:51 <noamr> ack keithamus
22:04:47 <Arthur> Arthur has joined #design-integration
22:04:50 <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
22:05:11 <noamr> ack miriam
22:05:38 <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"
22:05:51 <noamr> miriam: it's 2 approaches: am I exposing the property or the values
22:06:08 <noamr> lea: perhaps query all the borders of the page
22:06:41 <noamr> miriam: at some point in here I want to expose styling of my custom elements
22:06:55 <noamr> lea: there are always element-specific things, and universal things like accent colors
22:07:22 <Rain> q+
22:07:34 <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
22:08:20 <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
22:08:57 <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
22:09:19 <noamr> lea: excellent point. is that in UA stylesheet, or generic font family mapping?
22:09:37 <noamr> lea: but pages override the default
22:09:51 <noamr> Rain: extensions can smash existing fonts and change to Serif
22:10:09 <noamr> miriam: I have my default serif, my default sans-serif
22:10:54 <noamr> lea: that's a good point around function for tints, they would need to maintain the contrast ratio
22:11:29 <noamr> keithamus: arc lets you theme the browser, with CSS for every page, it exposes design tokens to the page
22:12:24 <keithamus> noamr: system colors are user observable but not web observable for privacy reasons
22:12:41 <keithamus> lea: what if you mix them with something like color-mix?
22:12:47 <keithamus> noamr: I don't have an answer
22:13:06 <keithamus> lea: it must behave like blue, no? We have color-extract to extract components of a color
22:13:14 <keithamus> khush: how do you read it back?
22:13:37 <keithamus> noamr: it's not a new problem, we've been doing this for ages with visited links
22:13:44 <khush> q?
22:13:55 <Rain> ack Rain
22:14:07 <noamr> lea: beyond solutions, have people encountered this? like the a11y use case?
22:14:21 <keithamus> https://github.blog/news-insights/product-news/accelerating-github-theme-creation-with-color-tooling/
22:15:42 <estelle> estelle has joined #design-integration
22:16:42 <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.
22:17:09 <noamr> keithamus: perhaps we can annotate if a @property is used outside of the scope. perhaps static/constant
22:17:40 <noamr> lea: we had an idea about constants a long time ago, like using variables for selectors
22:18:10 <noamr> lea: I get env() can be used because it's global. We talked about an at role or pseudo-elements for document globals
22:18:37 <kizu8> Custom env() variables: https://github.com/w3c/csswg-drafts/issues/2627
22:18:53 <noamr> lea: another direction is to pass around multiple variables, e.g. this css variable groups proposal (see issue on top)
22:20:34 <noamr> lea: and color scale is about creating continuous color scales, like green/red/yellow, being able to pick 5 colors on this scale.
22:20:41 <noamr> keithamus: like passing a linear gradient
22:21:14 <noamr> (see poroposal #10034
22:21:24 <noamr> lea: what this didn't have is a way to make this discrete
22:21:55 <noamr> lea: calc-scale/color-scale would probably cover it
22:22:55 <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
22:23:02 <noamr> lea: e.g. a monospace font or a badge
22:23:26 <noamr> lea: for length you can sometimes derive something not terrible
22:23:48 <estelle> q+
22:23:57 <noamr> ack estelle
22:24:27 <noamr> estelle: a solution could be to use to grab the style of e.g. the main after an h2 of the page
22:24:47 <noamr> estelle: like grab a value of a particular DOM style
22:24:51 <noamr> lea: grab the values already in use
22:25:02 <noamr> estelle: what if you could grab it from the page somehow
22:25:19 <noamr> miriam: the problem there is which paragraph? There could be so many other criteria
22:25:46 <noamr> lea: one concern I would have is that implementors would push back. what when the page changes? Update everything?
22:25:51 <miriam> q+
22:26:38 <noamr> Roman: a similar issue with anchor position, we had to put some restrictions, perhaps colors can have a similar directional flow/containment
22:28:17 <noamr> estelle: style queries are not supported here for this. the parts that aren't supported yet, maybe this would be for this?
22:28:31 <noamr> keithamus: like a font feature query
22:29:04 <noamr> talking about issue #2864, inherit() a property name
22:29:27 <noamr> miriam: like grab the current parent's margin and use it as padding
22:29:42 <keithamus> q?
22:29:47 <keithamus> ack miriam
22:29:54 <noamr> miriam: it doesn't necessarily work for 3p widgets
22:30:40 <noamr> lea: there was the @like proposal (#10948). would let you do things like "style this thing like a button"
22:31:41 <noamr> lea: might be useful beyond styling
22:31:51 <JRJurman> q+
22:32:21 <estelle> estelle has joined #design-integration
22:32:43 <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
22:33:11 <noamr> miriam: on the other hand it's just a style for border
22:36:03 <keithamus> noamr: is this just class? Class name? The same problem with parts and such - we want a shared name for this.
22:36:20 <keithamus> keithamus: the problem is co-operation and having a prescribed shared name
22:37:22 <noamr> perhaps it's a matter of interface, and exporting/importing classes across shadow
22:39:12 <noamr> JJ: seems like it's pretty easy to expose those tokens. Maybe something local can be done rather than something big and standardized?
22:40:03 <kbabbitt> s/JJ/JRJurman
22:40:44 <noamr> lea: I don't have high hopes that a community efforts would get it right, and native elements would not use it
22:41:08 <lea> q?
22:41:15 <keithamus> ack JRJurman
22:45:02 <noamr> lea: even the direction is not standardize, some go from lighter to darker, some the other way
22:45:56 <noamr> lea: would be good to track this on a higher level
22:46:10 <noamr> miriam: it's several issue, but yea
22:47:48 <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
22:48:15 <noamr> keithamus: you can provide discrete steps, and you can reason across teams "use 82% and not 75%"
22:48:44 <noamr> lea: the distribution of lightnesses across the different palettes, they vary wildly
23:10:47 <lea> Zakim, make minutes
23:10:47 <Zakim> I don't understand 'make minutes', lea
23:11:41 <lea> Zakim, draft minutes
23:11:41 <Zakim> I don't understand 'draft minutes', lea
23:14:40 <ray-schwartz7> does this help? https://github.com/w3c/aria/blob/main/documentation/onboarding.md
23:16:21 <ray-schwartz7> would ’end meeting’ do it?
23:17:12 <ray-schwartz7> I mean ‘Zakim,’ before that
23:18:48 <ray-schwartz7> Let me try it
23:18:57 <ray-schwartz7> Zakim, end meeting
23:18:57 <Zakim> As of this point the attendees have been keithamus, kbabbitt, khush, miriam, noamr, lea, Rain, JJ, vmpstr, estelle, JRJurman
23:19:00 <Zakim> RRSAgent, please draft minutes
23:19:01 <RRSAgent> I have made the request to generate https://www.w3.org/2024/09/25-design-integration-minutes.html Zakim
23:19:09 <Zakim> I am happy to have been of service, ray-schwartz7; please remember to excuse RRSAgent.  Goodbye
23:19:09 <Zakim> Zakim has left #design-integration
23:23:24 <lea> thank you!!
23:23:43 <ray-schwartz7> Sure thing!