[pan-kot]

The new helper generates Sass mixins from components style api v2 meta-info.

For instance, the generated badge mixin looks as follows:

// GENERATED from the badge Style API docs — do not edit.
@use '@cloudscape-design/component-toolkit/internal/style-api/slot-mixins' as slot-mixins;

@mixin root(
  $color: null,
  $background: null,
  $border-color: null,
  $border-width: null,
  $border-style: null,
  $border-block-color: null,
  $border-block-width: null,
  $border-block-style: null,
  $border-inline-color: null,
  $border-inline-width: null,
  $border-inline-style: null,
  $border-radius: null,
  $border-start-start-radius: null,
  $border-start-end-radius: null,
  $border-end-start-radius: null,
  $border-end-end-radius: null,
  $padding: null,
  $padding-block: null,
  $padding-inline: null,
  $font-family: null,
  $font-size: null,
  $font-weight: null
) {
  @include slot-mixins.apply(
    'badge.root',
    $properties: (
      'color': $color,
      'background': $background,
      'border-color': $border-color,
      'border-width': $border-width,
      'border-style': $border-style,
      'border-block-color': $border-block-color,
      'border-block-width': $border-block-width,
      'border-block-style': $border-block-style,
      'border-inline-color': $border-inline-color,
      'border-inline-width': $border-inline-width,
      'border-inline-style': $border-inline-style,
      'border-radius': $border-radius,
      'border-start-start-radius': $border-start-start-radius,
      'border-start-end-radius': $border-start-end-radius,
      'border-end-start-radius': $border-end-start-radius,
      'border-end-end-radius': $border-end-end-radius,
      'padding': $padding,
      'padding-block': $padding-block,
      'padding-inline': $padding-inline,
      'font-family': $font-family,
      'font-size': $font-size,
      'font-weight': $font-weight,
    ),
  );
}

See integration in components: cloudscape-design/components#5120

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.06%. Comparing base (e367206) to head (ec64e04).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #264      +/-   ##
==========================================
+ Coverage   99.04%   99.06%   +0.01%     
==========================================
  Files          48       49       +1     
  Lines        1368     1396      +28     
  Branches      373      380       +7     
==========================================
+ Hits         1355     1383      +28     
  Misses         12       12              
  Partials        1        1              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

🟡 Changes recommended

Metadata ordering can cause generated shorthands to overwrite more-specific property overrides.

1 open issue

• Normalize expanded property order to preserve specific padding values · New

What changed in this PR

Adds internal helpers to generate Sass slot mixins from Style API v2 metadata for component styling.

Changes:

• Generates per-slot mixins and adds a shared Sass runtime.
• Adds compilation tests, snapshots, and reusable test utilities.
• Exports and packages the new helpers.

File	Description
src/​internal/​style-api/​slot-mixins.scss	Emits token and property declarations.
src/​internal/​style-api/​generate-slot-mixins.ts	Generates mixins from slot metadata.
src/​internal/​style-api/​__tests__/​slot-mixins.test.ts	Tests generation, compilation, and errors.
src/​internal/​style-api/​__tests__/​sass-utils.ts	Shares Sass compilation utilities.
src/​internal/​style-api/​__tests__/​mixins.test.ts	Uses shared test utilities.
src/​internal/​style-api/​__tests__/​__snapshots__/​slot-mixins.test.ts.snap	Records generated Sass and CSS.
package.json	Adds exports and packages the Sass runtime.

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

No blocking issues remain in the generator, Sass runtime, tests, or packaging changes.

No open issues 🎉

1 resolved since last review

• Normalize expanded property order to preserve specific padding values

_{Review effort: Balanced}