angular / angular/components

bug(button-toggle): Mixin does not support color variants

Đang mở
#29,547 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
docs P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

According to [documentation](https://material.angular.io/guide/theming#using-component-color-variants), the MatButtonToggle component can be stylized using 4 color variants:

> | Component | Supported $color-variant values | Default |
> |--------|--------|--------|
> | Button-toggle | primary, secondary, tertiary, error | secondary |

But when I use the mixin `@include mat.button-toggle-color(theme.$light-theme, $color-variant: primary);` I get the following error:
```
"Invalid color variant: primary. Mixin does not support color variants."

123 │ token-utils.get-tokens-for($tokens, tokens-mat-standard-button-toggle.$prefix, $options...);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

node_modules\@angular\material\button-toggle\_button-toggle-theme.scss 123:7 -theme-from-tokens()
node_modules\@angular\material\button-toggle\_button-toggle-theme.scss 38:5 color()
src\styles.scss 36:2 root stylesheet
```

### Reproduction

Setup a regular Material 3 project and copy/paste:
```
@use '@angular/material' as mat;

:root {
@include mat.button-toggle-theme($theme);
@include mat.button-toggle-color($theme, $color-variant: primary);
}

```
Replace `$theme` with a M3 theme.

### Expected Behavior

All styles for color variant should be included.

### Actual Behavior

Error is thrown.

### Environment

- Angular: 18.1.3
- CDK/Material: 18.1.3

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với mixin color() của button-toggle và các vị trí _button-toggle-theme.scss được hiển thị trong stack trace, sau đó tái hiện thiết lập M3 từ issue bằng src/styles.scss. Theo dõi cách tùy chọn $color-variant được xác thực. Hoàn tất khi biến thể primary biên dịch và bao gồm các style button-toggle mong đợi mà không có lỗi invalid-variant.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, sass
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
52/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.