Strategy for applying styles?

[madhaze]

I know we wanted to have minimal styles to allow for projects to be able to specify styles. Do we have a documented uniform way of doing this?

• Is the outline component not planned to be extended and styles added to the new extended component?
  • In this case do we have both a <outline-button> and <design-button> in the design system?
• Are we supplying properties to control styles (font sizes, colors, borders, hover, focus, etc)?
• Are the styles set via css variable and controlled by updating those?
  • If we are using tailwind @apply border-gray-50 or a specific color, how would someone update that to blue if needed? Since you wouldn't update var(--gray-500) to a blue color

[mabry1985]

If I'm understanding the question here, I believe most of this is addressed by someone coming in and extending the component and then simply overriding the static styles = [componentStyles] with their own CSS and then they can do as they please with the styling.

I'm planning on building some more examples of extended classes use that might make this more clear. It's something I've been thinking about this week and I have some ideas there to present to the group.

[madhaze]

I was pretty sure that was an option. I knew we had also talked also about design tokens but if we are going to use design tokens it seemed like we would have to set some css vars different from the tailwind ones https://github.com/phase2/outline/blob/next/outline.theme.css that would maybe need to be more component specific. Wasn't sure if we were trying to build the flexibility into the outline component via props and css vars or extending.

Like for button there is some options like variant and size, but if I only wanted to update the hover background for the primary (https://github.com/phase2/outline/blob/next/src/components/base/outline-button/outline-button.css) it seems like I would need to extend to update the css to something else. Since I wouldn't be updating css variable for --neutral-black but would need to update the @apply bg-neutral-black to something else in the css.

[mabry1985]

I think I see what you are saying here. I'll make note of this and see if I can put some examples together with the extension tests of how that might look

[damontgomery]

We have used the extension to overwrite or remove CSS from a component we are basically using as-is. Works OK.

If the component is structurally / functionally different, we copy & paste & modify rather than extend.

import { customElement } from 'lit/decorators.js';
import { OutlineHeading } from '../../base/outline-heading/outline-heading';
import outlineComponentStyles from '../../base/outline-heading/outline-heading.css.lit';
import componentStyles from './example-heading.css.lit';

/**
 * Heading
 *
 * @element example-heading
 */
@customElement('example-heading')
export class ExampleHeading extends OutlineHeading {
  static styles = [outlineComponentStyles, componentStyles];
}