generate-scss-variables

To generate design-system SCSS variables, provide a component name and SCSS attribute list to create standardized definitions. The output enforces a component-element-property-variant naming structure using CSS variables with --wot prefixes and default semantic token fallbacks.

Auditing existing SCSS variables checks naming conventions, prefixes, default values, and structural rules against design-system guidelines. It analyzes current definitions and returns actionable correction suggestions to align non-compliant variables with the required component-element-property-variant structure.

The required naming structure for SCSS variables follows a component-element-property-variant pattern. Variables must exist as CSS variables with --wot prefixes and include default semantic tokens as fallbacks to ensure consistency and maintainability across the design system.

Yes, you can extend existing components by providing the component name and the new list of SCSS attributes. It generates standardized variable definitions that integrate with the current design system, supporting both new component creation and property expansion.

No, you can generate SCSS variables from scratch by providing a component name and attribute list. The generated definitions include default semantic token fallbacks intrinsically, ensuring design-system compliance without requiring a pre-existing token setup.

Fixing inconsistent SCSS variable naming requires auditing existing definitions against design-system rules. Run an audit to detect non-compliant prefixes, structures, and default values, then apply the generated actionable correction suggestions to standardize the entire variable set.