fix(labs): remove unnecessary CSS duplication variables of components in labs

[bre97-web]

I found that some components in the labs folder had duplicate CSS variables (includes badge, navigationbar, navigationtab, segmentedbutton) , like this:

After I compile the component style separately through sass:

npx sass ./labs/navigationbar/internal/navigation-bar-styles.scss ./o.css

This is because of unnecessary prefixes in these styles:

    @each $token, $value in $tokens {
      // We need to delete "var(--md-navigation-bar-#{$token}, "
      //--_#{$token}: var(--md-navigation-bar-#{$token}, #{$value});
      --_#{$token}: #{$value};
    }

After repair:

[asyncLiz]

This is working as intended. The custom properties with underscores are private internal details and not meant to be used directly. The prefixed component properties such as --md-badge-* are the public API surface.

[bre97-web]

This is working as intended. The custom properties with underscores are private internal details and not meant to be used directly. The prefixed component properties such as --md-badge-* are the public API surface.

Sorry to bother you. I still don’t understand why --md-badge-* appears twice.

e.g.

--_size: var(--md-badge-size, var(--md-badge-size, 6px));

[asyncLiz]

I'm sorry, I didn't pay enough attention. You're right, there should only be one --md-* var.

[asyncLiz]

Thanks for catching this, I missed it when adding the ability for tokens to return custom properties directly.