feat(button): update tokens excluding padding

PiperOrigin-RevId: 401820667

Author: allan-chen

components/button/lib/_button-theme.scss

@@ -12,13 +12,13 @@
 @use '@material/typography/typography';
 
 $light-theme: (
-  container-height: 36px,
-  container-shape: 4px,
+  container-height: 40px,
+  container-shape: 100px,
   label-text-font: typography.get-font(button),
-  label-text-size: typography.get-size(button),
-  label-text-tracking: typography.get-tracking(button),
-  label-text-transform: uppercase,
-  label-text-weight: typography.get-weight(button),
+  label-text-size: 14px,
+  label-text-tracking: typography.px-to-rem(0.1px),
+  label-text-transform: none,
+  label-text-weight: 500,
   with-icon-icon-size: 18px,
 );
 

components/button/lib/_elevated-button-theme.scss

@@ -16,31 +16,31 @@ $_custom-property-prefix: 'elevated-button';
 $light-theme: map.merge(
   button-theme.$light-theme,
   (
-    container-color: #6200ee,
+    container-color: #fffbfe,
     container-elevation: 1,
     container-shadow-color: #000,
-    disabled-container-color: rgba(#000, 0.12),
+    disabled-container-color: rgba(#1c1b1f, 0.12),
     disabled-container-elevation: 0,
-    disabled-label-text-color: rgba(#000, 0.38),
+    disabled-label-text-color: rgba(#1c1b1f, 0.38),
     focus-container-elevation: 1,
-    focus-label-text-color: #fff,
-    focus-state-layer-color: #fff,
-    focus-state-layer-opacity: 0.24,
+    focus-label-text-color: #6750a4,
+    focus-state-layer-color: #6750a4,
+    focus-state-layer-opacity: 0.12,
     hover-container-elevation: 3,
-    hover-label-text-color: #fff,
-    hover-state-layer-color: #fff,
+    hover-label-text-color: #6750a4,
+    hover-state-layer-color: #6750a4,
     hover-state-layer-opacity: 0.08,
-    label-text-color: #fff,
+    label-text-color: #6750a4,
     pressed-container-elevation: 1,
-    pressed-label-text-color: #fff,
-    pressed-state-layer-color: #fff,
-    pressed-state-layer-opacity: 0.24,
-    surface-tint-layer-color: transparent,
-    with-icon-disabled-icon-color: rgba(#000, 0.38),
-    with-icon-focus-icon-color: #fff,
-    with-icon-hover-icon-color: #fff,
-    with-icon-icon-color: #fff,
-    with-icon-pressed-icon-color: #fff,
+    pressed-label-text-color: #6750a4,
+    pressed-state-layer-color: #6750a4,
+    pressed-state-layer-opacity: 0.12,
+    surface-tint-layer-color: #6750a4,
+    with-icon-disabled-icon-color: rgba(#1c1b1f, 0.38),
+    with-icon-focus-icon-color: #6750a4,
+    with-icon-hover-icon-color: #6750a4,
+    with-icon-icon-color: #6750a4,
+    with-icon-pressed-icon-color: #6750a4,
   )
 );
 

components/button/lib/_filled-button-theme.scss

@@ -16,26 +16,26 @@ $_custom-property-prefix: 'filled-button';
 $light-theme: map.merge(
   button-theme.$light-theme,
   (
-    container-color: #6200ee,
+    container-color: #6750a4,
     container-elevation: 0,
     container-shadow-color: #000,
-    disabled-container-color: rgba(#000, 0.12),
+    disabled-container-color: rgba(#1c1b1f, 0.12),
     disabled-container-elevation: 0,
-    disabled-label-text-color: rgba(#000, 0.38),
+    disabled-label-text-color: rgba(#1c1b1f, 0.38),
     focus-container-elevation: 0,
     focus-label-text-color: #fff,
     focus-state-layer-color: #fff,
-    focus-state-layer-opacity: 0.24,
-    hover-container-elevation: 0,
+    focus-state-layer-opacity: 0.12,
+    hover-container-elevation: 1,
     hover-label-text-color: #fff,
     hover-state-layer-color: #fff,
     hover-state-layer-opacity: 0.08,
     label-text-color: #fff,
     pressed-container-elevation: 0,
     pressed-label-text-color: #fff,
     pressed-state-layer-color: #fff,
-    pressed-state-layer-opacity: 0.24,
-    with-icon-disabled-icon-color: rgba(#000, 0.38),
+    pressed-state-layer-opacity: 0.12,
+    with-icon-disabled-icon-color: rgba(#1c1b1f, 0.38),
     with-icon-focus-icon-color: #fff,
     with-icon-hover-icon-color: #fff,
     with-icon-icon-color: #fff,

components/button/lib/_outlined-button-theme.scss

@@ -20,27 +20,27 @@ $_custom-property-prefix: 'outlined-button';
 $light-theme: map.merge(
   button-theme.$light-theme,
   (
-    disabled-label-text-color: rgba(#000, 0.38),
-    disabled-outline-color: rgba(#000, 0.12),
-    focus-label-text-color: #6200ee,
-    focus-outline-color: rgba(#000, 0.12),
-    focus-state-layer-color: #fff,
+    disabled-label-text-color: rgba(#1c1b1f, 0.38),
+    disabled-outline-color: rgba(#1c1b1f, 0.12),
+    focus-label-text-color: #6750a4,
+    focus-outline-color: #79747e,
+    focus-state-layer-color: #6750a4,
     focus-state-layer-opacity: 0.12,
-    hover-label-text-color: #6200ee,
-    hover-outline-color: rgba(#000, 0.12),
-    hover-state-layer-color: #6200ee,
-    hover-state-layer-opacity: 0.04,
-    label-text-color: #6200ee,
-    outline-color: rgba(#000, 0.12),
+    hover-label-text-color: #6750a4,
+    hover-outline-color: #79747e,
+    hover-state-layer-color: #6750a4,
+    hover-state-layer-opacity: 0.08,
+    label-text-color: #6750a4,
+    outline-color: #79747e,
     outline-width: 1px,
-    pressed-label-text-color: #6200ee,
-    pressed-state-layer-color: #6200ee,
+    pressed-label-text-color: #6750a4,
+    pressed-state-layer-color: #6750a4,
     pressed-state-layer-opacity: 0.12,
-    with-icon-disabled-icon-color: rgba(#000, 0.38),
-    with-icon-focus-icon-color: #6200ee,
-    with-icon-hover-icon-color: #6200ee,
-    with-icon-icon-color: #6200ee,
-    with-icon-pressed-icon-color: #6200ee,
+    with-icon-disabled-icon-color: rgba(#1c1b1f, 0.38),
+    with-icon-focus-icon-color: #6750a4,
+    with-icon-hover-icon-color: #6750a4,
+    with-icon-icon-color: #6750a4,
+    with-icon-pressed-icon-color: #6750a4,
   )
 );
 

components/button/lib/_text-button-theme.scss

@@ -16,22 +16,22 @@ $_custom-property-prefix: 'text-button';
 $light-theme: map.merge(
   button-theme.$light-theme,
   (
-    disabled-label-text-color: rgba(#000, 0.38),
-    focus-label-text-color: #6200ee,
-    focus-state-layer-color: #6200ee,
+    disabled-label-text-color: rgba(#1c1b1f, 0.38),
+    focus-label-text-color: #6750a4,
+    focus-state-layer-color: #6750a4,
     focus-state-layer-opacity: 0.12,
-    hover-label-text-color: #6200ee,
-    hover-state-layer-color: #6200ee,
-    hover-state-layer-opacity: 0.04,
-    label-text-color: #6200ee,
-    pressed-label-text-color: #6200ee,
-    pressed-state-layer-color: #6200ee,
+    hover-label-text-color: #6750a4,
+    hover-state-layer-color: #6750a4,
+    hover-state-layer-opacity: 0.08,
+    label-text-color: #6750a4,
+    pressed-label-text-color: #6750a4,
+    pressed-state-layer-color: #6750a4,
     pressed-state-layer-opacity: 0.12,
-    with-icon-disabled-icon-color: rgba(#000, 0.38),
-    with-icon-focus-icon-color: #6200ee,
-    with-icon-hover-icon-color: #6200ee,
-    with-icon-icon-color: #6200ee,
-    with-icon-pressed-icon-color: #6200ee,
+    with-icon-disabled-icon-color: rgba(#1c1b1f, 0.38),
+    with-icon-focus-icon-color: #6750a4,
+    with-icon-hover-icon-color: #6750a4,
+    with-icon-icon-color: #6750a4,
+    with-icon-pressed-icon-color: #6750a4,
   )
 );
 

components/button/lib/_tonal-button-theme.scss

@@ -16,30 +16,30 @@ $_custom-property-prefix: 'tonal-button';
 $light-theme: map.merge(
   button-theme.$light-theme,
   (
-    container-color: #6200ee,
+    container-color: #e8def8,
     container-elevation: 0,
     container-shadow-color: #000,
-    disabled-container-color: rgba(#000, 0.12),
+    disabled-container-color: rgba(#1c1b1f, 0.12),
     disabled-container-elevation: 0,
-    disabled-label-text-color: rgba(#000, 0.38),
+    disabled-label-text-color: rgba(#1c1b1f, 0.38),
     focus-container-elevation: 0,
-    focus-label-text-color: #fff,
-    focus-state-layer-color: #fff,
-    focus-state-layer-opacity: 0.24,
+    focus-label-text-color: #1d192b,
+    focus-state-layer-color: #23005d,
+    focus-state-layer-opacity: 0.12,
     hover-container-elevation: 0,
-    hover-label-text-color: #fff,
-    hover-state-layer-color: #fff,
+    hover-label-text-color: #1d192b,
+    hover-state-layer-color: #23005d,
     hover-state-layer-opacity: 0.08,
-    label-text-color: #fff,
+    label-text-color: #1d192b,
     pressed-container-elevation: 0,
-    pressed-label-text-color: #fff,
-    pressed-state-layer-color: #fff,
-    pressed-state-layer-opacity: 0.24,
-    with-icon-disabled-icon-color: rgba(#000, 0.38),
-    with-icon-focus-icon-color: #fff,
-    with-icon-hover-icon-color: #fff,
-    with-icon-icon-color: #fff,
-    with-icon-pressed-icon-color: #fff,
+    pressed-label-text-color: #1d192b,
+    pressed-state-layer-color: #23005d,
+    pressed-state-layer-opacity: 0.12,
+    with-icon-disabled-icon-color: rgba(#1c1b1f, 0.38),
+    with-icon-focus-icon-color: #1d192b,
+    with-icon-hover-icon-color: #1d192b,
+    with-icon-icon-color: #1d192b,
+    with-icon-pressed-icon-color: #1d192b,
   )
 );