Theme

Theme Skill

Purpose

• Generate SCSS theme files with variables and mixins.
• Add few sample SCSS variables as example in variables file.
• Add a few sample mixins as example in mixins file.
• Create an index.scss file that will forward the variables file. For example:

  @forward './vars';
  

Output

Create the files:

• src/theme/vars.scss
• src/theme/shadow.scss
• src/theme/index.scss

⚠️ CRITICAL: Use Modern Sass Module System

MUST follow current Sass best practices as documented in official Sass documentation

Example of Implementation Pattern

In src/theme/index.scss - Use @forward to re-export variables:

@forward './vars';
@forward './shadow';

In components (App.vue, etc.) - Use @use to import theme:

<style lang="scss">
@use '@/theme/' as *;

.my-component {
  color: $primary-color; // Variables from theme are now available
}
</style>

Verification

After generating theme files:

• Run build and check console output for any deprecation warnings
• If deprecation warnings appear, consult official Sass documentation for current patterns
• Ensure the implementation follows the @forward/@use pattern shown in examples

Notes

• vars.scss provides comprehensive design system variables
• shadow.scss provides Material Design-inspired shadow mixins (0dp to 24dp)
• Forward/use pattern enables clean imports in components
• Use with @use '@/theme/' as *; in components
• Shadow mixins reference $global-black from vars.scss
• The index.scss file acts as a barrel export using @forward