material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 01:20:23 +03:00
Code Issues Projects Releases Wiki Activity

chore(tabs): fix color contrast for custom tabs demo

Browse Source 
PiperOrigin-RevId: 601833325
This commit is contained in:
Elizabeth Mitchell 2024-01-26 12:13:02 -08:00 committed by Copybara-Service
parent 04b7e9b120
commit 6ecda49749
1 changed files with 3 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
tabs/demo/stories.ts
View File

@ -189,27 +189,18 @@ const custom: MaterialStoryInit<StoryKnobs> = {
styles,
css`
.custom {
/* colors */
--md-sys-color-primary: var(--md-sys-color-tertiary);
/* text */
--md-primary-tab-label-text-font: cursive, system-ui;
--md-primary-tab-label-text-size: 0.8em;
/* indicator */
--md-primary-tab-active-indicator-color: firebrick;
--md-primary-tab-active-indicator-height: 8px;
--md-primary-tab-active-indicator-shape: 9999px 0;
/* active/selected tab */
--active-color: darkorange;
--md-primary-tab-active-icon-color: var(--active-color);
--md-primary-tab-active-label-text-color: var(--active-color);
--md-primary-tab-active-focus-icon-color: var(--active-color);
--md-primary-tab-active-focus-label-text-color: var(--active-color);
--md-primary-tab-active-hover-icon-color: var(--active-color);
--md-primary-tab-active-hover-label-text-color: var(--active-color);
--md-primary-tab-active-pressed-icon-color: var(--active-color);
--md-primary-tab-active-pressed-label-text-color: var(--active-color);
}
.custom::part(divider) {
--md-divider-color: var(--active-color);
--md-divider-color: var(--md-sys-color-tertiary);
--md-divider-thickness: 4px;
}
`,