feat: add warning theme variant (#7485)

vaadin · Jun 12, 2024 · 437d18f · 437d18f
1 parent b81988c
commit 437d18f
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 2 deletions.
diff --git a/packages/button/test/visual/lumo/button.test.js b/packages/button/test/visual/lumo/button.test.js
@@ -130,7 +130,7 @@ describe('button', () => {
     });
   });
 
-  ['contrast', 'success', 'error'].forEach((variant) => {
+  ['contrast', 'warning', 'success', 'error'].forEach((variant) => {
     describe(variant, () => {
       it('primary', async () => {
         element.setAttribute('theme', `primary ${variant}`);

diff --git a/...test/visual/lumo/screenshots/button/baseline/theme-primary-warning-disabled.png b/...test/visual/lumo/screenshots/button/baseline/theme-primary-warning-disabled.png
diff --git a/...s/button/test/visual/lumo/screenshots/button/baseline/theme-primary-warning.png b/...s/button/test/visual/lumo/screenshots/button/baseline/theme-primary-warning.png
diff --git a/...st/visual/lumo/screenshots/button/baseline/theme-secondary-warning-disabled.png b/...st/visual/lumo/screenshots/button/baseline/theme-secondary-warning-disabled.png
diff --git a/...button/test/visual/lumo/screenshots/button/baseline/theme-secondary-warning.png b/...button/test/visual/lumo/screenshots/button/baseline/theme-secondary-warning.png
diff --git a/...est/visual/lumo/screenshots/button/baseline/theme-tertiary-warning-disabled.png b/...est/visual/lumo/screenshots/button/baseline/theme-tertiary-warning-disabled.png
diff --git a/.../button/test/visual/lumo/screenshots/button/baseline/theme-tertiary-warning.png b/.../button/test/visual/lumo/screenshots/button/baseline/theme-tertiary-warning.png
diff --git a/packages/button/theme/lumo/vaadin-button-styles.js b/packages/button/theme/lumo/vaadin-button-styles.js
@@ -168,7 +168,7 @@ const button = css`
     opacity: 0.2;
   }
 
-  /* Colors (success, error, contrast) */
+  /* Colors (success, warning, error, contrast) */
 
   :host([theme~='success']) {
     color: var(--lumo-success-text-color);
@@ -179,6 +179,15 @@ const button = css`
     color: var(--lumo-success-contrast-color);
   }
 
+  :host([theme~='warning']) {
+    color: var(--lumo-warning-text-color);
+  }
+
+  :host([theme~='warning'][theme~='primary']) {
+    background-color: var(--lumo-warning-color);
+    color: var(--lumo-warning-contrast-color);
+  }
+
   :host([theme~='error']) {
     color: var(--lumo-error-text-color);
   }