@@ -199,18 +199,45 @@ $list: (
199199
200200// Sass theme approach
201201
202- // $custom-button -theme: button-theme(
202+ // $custom-contained -theme: contained- button-theme(
203203// $background: #f9f0ff,
204204// $foreground: #722ed1,
205- // $border-color: #722ed1,
206205// $hover-background: #efdbff,
207206// $hover-foreground: #9254de,
208- // $hover-border-color: #9254de,
209- // $active-border-color: #531dab,
210207// $active-foreground: #531dab,
211- // $focus-visible-background: #f9f0ff,
208+ // $active-background: #dfc2fa,
209+ // $focus-visible-background: #d3adf7
210+ // );
211+
212+ // $custom-outlined-theme: outlined-button-theme(
213+ // $background: #fff2f0,
214+ // $foreground: #ff4d4f,
215+ // $border-color: #ff4d4f,
216+ // $hover-background: #ffdfdc,
217+ // $hover-foreground: #ff7875,
218+ // $hover-border-color: #ff7875,
219+ // $focus-visible-background: #ffccc7,
220+ // $focus-visible-foreground: #d9363e,
221+ // $focus-border-color: #d9363e
222+
223+ // );
224+
225+ // $custom-flat-theme: flat-button-theme(
226+ // $background: #e6fffb,
227+ // $foreground: #13c2c2,
228+ // $hover-background: #b5f5ec,
229+ // $hover-foreground: #36cfc9,
230+ // $active-foreground: #08979c,
231+ // $focus-visible-background: #b5f5ec,
232+ // $focus-visible-foreground: #08979c
212233// );
213234
235+
214236// .button-sample {
215- // @include css-vars($custom-button-theme)
237+ // @include css-vars($custom-contained-theme);
238+ // @include css-vars($custom-outlined-theme);
239+ // }
240+
241+ // .button-sample.filled {
242+ // @include css-vars($custom-flat-theme);
216243// }
0 commit comments