update-component-styles

Update component styles across themes using the SCSS to Lit CSS workflow.

169|10|Updated May 12, 2021

Search Tags:#theming #storybook #scss #css-variables #transpile #component-styles #lit-css

Ready to run

npx skills add https://github.com/IgniteUI/igniteui-webcomponents --skill update-component-styles

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: update-component-styles
Source: https://github.com/IgniteUI/igniteui-webcomponents/tree/main/.github/skills/update-component-styles
Command: npx skills add https://github.com/IgniteUI/igniteui-webcomponents --skill update-component-styles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Update component styling following the project's SCSS workflow and theming system to ensure consistency across components and themes.

Core Features & Use Cases

Maintain base styles and theme-specific overrides across multiple themes (bootstrap, material, fluent, indigo) plus light/dark variants.
Identify and modify the correct SCSS files (base, shared, light/dark) and ensure proper transpilation to CSS.js as part of the build process.
Validate changes with Storybook and documentation, ensuring CSS parts and custom properties are exposed and testable.

Quick Start

Update the target component's styles to align with the SCSS to Lit CSS workflow and theming system.

Frequently Asked Questions about update-component-styles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I update component styles across multiple themes using SCSS?▼

To update component styles across multiple themes, modify the base, shared, and theme-specific SCSS files, then transpile them to Lit CSS to ensure consistent light and dark mode theming.

What is the SCSS to Lit CSS workflow for component styling?▼

The SCSS to Lit CSS workflow involves modifying base and theme-specific SCSS files for light and dark modes, then transpiling the SCSS into CSS.js files to maintain consistent component theming.

How do I verify component style changes in Storybook?▼

You verify component style changes in Storybook by transpiling the modified SCSS to CSS.js and checking that the CSS parts and custom properties are properly exposed and testable across all themes.

Does this component styling workflow support bootstrap, material, fluent, and indigo themes?▼

Yes, the component styling workflow supports maintaining base styles and theme-specific overrides across bootstrap, material, fluent, and indigo themes, including both light and dark variants.

Why are my component styles not syncing across light and dark modes?▼

Component styles may not sync across light and dark modes if the correct shared and theme-specific SCSS files are not identified or if the SCSS to CSS.js transpilation step was not completed.

Can I use CSS variables to maintain consistent theming across components?▼

Yes, the workflow exposes and validates CSS custom properties and parts through Storybook, ensuring that CSS variables maintain consistent theming across all components and theme variants.