refactor: update button border and tertiary variant base styles (#10086)

Author: web-padawan

packages/button/src/styles/vaadin-button-base-styles.js

@@ -31,10 +31,8 @@ export const buttonStyles = css`
     color: var(--vaadin-button-text-color, var(--vaadin-color));
     background: var(--vaadin-button-background, var(--vaadin-background-container));
     background-origin: border-box;
-    border: var(
-      --vaadin-button-border,
-      var(--vaadin-button-border-width, 1px) solid var(--vaadin-button-border-color, var(--vaadin-border-color-subtle))
-    );
+    border: var(--vaadin-button-border-width, 1px) solid
+      var(--vaadin-button-border-color, var(--vaadin-border-color-subtle));
     border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
     touch-action: manipulation;
   }
@@ -62,9 +60,8 @@ export const buttonStyles = css`
   }
 
   :host([theme~='tertiary']) {
-    --vaadin-button-text-color: var(--_vaadin-button-text-color);
-    --vaadin-button-background: transparent;
-    --vaadin-button-border-color: transparent;
+    background: transparent;
+    border-color: transparent;
   }
 
   :host([disabled]) {

packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js

@@ -29,9 +29,9 @@ export const overlayContentStyles = css`
 
   [part='years-toggle-button'] {
     display: inline-flex;
-    border: var(--vaadin-button-border, var(--vaadin-button-border-width, 1px) solid transparent);
+    align-items: center;
     border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
-    color: var(--vaadin-button-text-color, var(--_vaadin-button-text-color));
+    color: var(--vaadin-color);
     font-size: var(--vaadin-button-font-size, inherit);
     font-weight: var(--vaadin-button-font-weight, 500);
     height: var(--vaadin-button-height, auto);

packages/password-field/src/styles/vaadin-password-field-button-base-styles.js

@@ -10,10 +10,10 @@ import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-style
 const passwordFieldBase = css`
   :host {
     --vaadin-button-background: transparent;
-    --vaadin-button-border: none;
     --vaadin-button-padding: 0;
     color: var(--vaadin-input-field-button-color, inherit);
     display: block;
+    border: none;
     cursor: var(--vaadin-clickable-cursor);
   }