material 3.0.2 → 3.0.4

package/src/styles/components/_tooltip.scss

@@ -27,7 +27,7 @@ $arrow-size: 8px;
   transform: scale(0.9);
   transform-origin: center;
   box-sizing: border-box;
-  // M3's plain tooltip has no elevation (PlainTooltipTokens), FLO-324
+  // M3's plain tooltip has no elevation (PlainTooltipTokens)
   
   // Typography
   @include m.typography('body-small');
@@ -73,6 +73,8 @@ $arrow-size: 8px;
     padding: 12px 16px;
     border-radius: v.shape('medium');
     background-color: t.color('surface-container');
+    // The arrow follows the surface (see the arrow styles below).
+    --#{base.$prefix}-tooltip-arrow-color: #{t.color('surface-container')};
     color: t.color('on-surface-variant');
     text-align: start;
     @include m.typography('body-medium');
@@ -81,166 +83,125 @@ $arrow-size: 8px;
 
   // Plain is M3's plain tooltip, which the base already is (PlainTooltipTokens:
   // inverse-surface, inverse-on-surface). It had its own surface-container-high
-  // with an outline, which no M3 source has (FLO-324).
+  // with an outline, which no M3 source has; its arrows kept painting that
+  // surface after the surface itself was corrected, until they went back to the
+  // base colour with the surface.
   &--plain {
     background-color: t.color('inverse-surface');
     color: t.color('inverse-on-surface');
   }
   
   // Arrow styles
+  // The arrow is part of the container it grows from, so it takes the variant's
+  // surface colour: default and plain paint inverse-surface (the base value) and
+  // rich, whose surface is surface-container, overrides it there. No colour role
+  // exists for an arrow (m3.material.io tooltips specs name none), so the surface
+  // itself is the only colour it can read as.
   &__arrow {
     position: absolute;
     width: 0;
     height: 0;
     border: $arrow-size solid transparent;
     pointer-events: none;
-    
+
     // Top position (arrow points up)
     &--top {
       bottom: 100%;
       left: 50%;
       transform: translateX(-50%);
-      border-bottom-color: t.color('inverse-surface');
+      border-bottom-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-top-width: 0;
-      
-      .#{$component}--plain & {
-        border-bottom-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Top-start position
     &--top-start {
       bottom: 100%;
       left: $arrow-size;
-      border-bottom-color: t.color('inverse-surface');
+      border-bottom-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-top-width: 0;
-      
-      .#{$component}--plain & {
-        border-bottom-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Top-end position
     &--top-end {
       bottom: 100%;
       right: $arrow-size;
-      border-bottom-color: t.color('inverse-surface');
+      border-bottom-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-top-width: 0;
-      
-      .#{$component}--plain & {
-        border-bottom-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Bottom position (arrow points down)
     &--bottom {
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
-      border-top-color: t.color('inverse-surface');
+      border-top-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-bottom-width: 0;
-      
-      .#{$component}--plain & {
-        border-top-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Bottom-start position
     &--bottom-start {
       top: 100%;
       left: $arrow-size;
-      border-top-color: t.color('inverse-surface');
+      border-top-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-bottom-width: 0;
-      
-      .#{$component}--plain & {
-        border-top-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Bottom-end position
     &--bottom-end {
       top: 100%;
       right: $arrow-size;
-      border-top-color: t.color('inverse-surface');
+      border-top-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-bottom-width: 0;
-      
-      .#{$component}--plain & {
-        border-top-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Left position (arrow points left)
     &--left {
       right: 100%;
       top: 50%;
       transform: translateY(-50%);
-      border-right-color: t.color('inverse-surface');
+      border-right-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-left-width: 0;
-      
-      .#{$component}--plain & {
-        border-right-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Left-start position
     &--left-start {
       right: 100%;
       top: $arrow-size;
-      border-right-color: t.color('inverse-surface');
+      border-right-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-left-width: 0;
-      
-      .#{$component}--plain & {
-        border-right-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Left-end position
     &--left-end {
       right: 100%;
       bottom: $arrow-size;
-      border-right-color: t.color('inverse-surface');
+      border-right-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-left-width: 0;
-      
-      .#{$component}--plain & {
-        border-right-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Right position (arrow points right)
     &--right {
       left: 100%;
       top: 50%;
       transform: translateY(-50%);
-      border-left-color: t.color('inverse-surface');
+      border-left-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-right-width: 0;
-      
-      .#{$component}--plain & {
-        border-left-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Right-start position
     &--right-start {
       left: 100%;
       top: $arrow-size;
-      border-left-color: t.color('inverse-surface');
+      border-left-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-right-width: 0;
-      
-      .#{$component}--plain & {
-        border-left-color: t.color('surface-container-high');
-      }
     }
-    
+
     // Right-end position
     &--right-end {
       left: 100%;
       bottom: $arrow-size;
-      border-left-color: t.color('inverse-surface');
+      border-left-color: var(--#{base.$prefix}-tooltip-arrow-color, #{t.color('inverse-surface')});
       border-right-width: 0;
-      
-      .#{$component}--plain & {
-        border-left-color: t.color('surface-container-high');
-      }
     }
   }
   

package/src/styles/elements/_field.scss

@@ -22,7 +22,7 @@ $supporting-row: 20px;
   width: v.text-field('width');
   height: v.text-field('height');
   // The input's line, where the upgraded field's text is: 24px down under a
-  // label (FLO-299). The half pixel is the line's baseline, as measured: with
+  // label. The half pixel is the line's baseline, as measured: with
   // it, the sibling on this line does not move at upgrade.
   padding: 24.5px (v.text-field('padding-horizontal') + $trailing) 0 v.text-field('padding-horizontal');
   border-radius: v.text-field('border-radius') v.text-field('border-radius') 0 0;
@@ -90,7 +90,7 @@ $supporting-row: 20px;
     }
   }
 
-  // The supporting text row (FLO-300): upgraded, the field gets a row under
+  // The supporting text row: upgraded, the field gets a row under
   // it, 4dp and a 16dp body-small line, when it has supporting text or a
   // counter (a maxlength). The host reserves the row as a transparent bottom
   // border, so the fill stays on the 56px field (clipped to the padding box)

package/src/styles/themes/_autumn.scss

@@ -22,7 +22,7 @@
 
     // fixed roles: generated, do not edit
     // (tones 90, 80, 10, 30 of this theme's primary, secondary and tertiary;
-    // the same in dark, so declared once, FLO-315)
+    // the same in dark, so declared once)
     --#{$prefix}-sys-color-primary-fixed: #ffdbcf;
     --#{$prefix}-sys-color-primary-fixed-dim: #ebbcac;
     --#{$prefix}-sys-color-on-primary-fixed: #2e150b;
@@ -54,7 +54,7 @@
     --#{$prefix}-sys-color-outline: #85736c;
     --#{$prefix}-sys-color-outline-variant: #d7c1ba;
     // Inverse roles (M3: inverse-surface N20, inverse-on-surface N95,
-    // inverse-primary P80), from this theme's neutral and primary palettes. FLO-254.
+    // inverse-primary P80), from this theme's neutral and primary palettes.
     --#{$prefix}-sys-color-inverse-surface: #3a2e27;
     --#{$prefix}-sys-color-inverse-on-surface: #ffede5;
     --#{$prefix}-sys-color-inverse-primary: #ebbcac;
@@ -111,7 +111,7 @@
         --#{$prefix}-sys-color-outline: #a08c85;
         --#{$prefix}-sys-color-outline-variant: #53433c;
         // Inverse roles (M3: inverse-surface N90 = on-surface, inverse-on-surface N20,
-        // inverse-primary P40). FLO-254.
+        // inverse-primary P40).
         --#{$prefix}-sys-color-inverse-surface: #ede0d9;
         --#{$prefix}-sys-color-inverse-on-surface: #3a2e27;
         --#{$prefix}-sys-color-inverse-primary: #7a5649;

package/src/styles/themes/_base-theme.scss

@@ -100,11 +100,11 @@ $contrast-emit: all !default;
 }
 
 // Success, warning and info: not M3 scheme roles, so no scheme generates them.
-// Every theme takes these values, baseline included (FLO-329).
+// Every theme takes these values, baseline included.
 // Each keeps its colour's HCT hue and chroma (material-color-utilities) at the
 // tones M3 uses for a role and its on-role: light tone 40 on 100, dark tone 80
 // on 20 (ColorSpec2021 primary / onPrimary). Those tones clear 4.5:1, so none
-// is shifted further (FLO-407).
+// is shifted further.
 @mixin status-roles-light() {
   // Success: #007B5A (hue 169, chroma 43) brought from tone 46 to 40. 6.45:1.
   --#{$prefix}-sys-color-success: #006C4E;

package/src/styles/themes/_baseline.scss

@@ -1,7 +1,7 @@
 // src/styles/themes/_baseline.scss
 // Medium/high contrast: Tonal Spot from seed #6750a4, secondary from #625b71, tertiary from #7d5260.
 // M3's baseline scheme, light and dark: the values of Compose's ColorLightTokens and
-// ColorDarkTokens (the published baseline, primary #6750A4), FLO-315.
+// ColorDarkTokens (the published baseline, primary #6750A4),
 @use "../abstract/base" as *;
 @use "base-theme" as *;
 @use "../abstract/variables" as v;
@@ -16,7 +16,7 @@
     --#{$prefix}-sys-color-on-error: #FFFFFF;
     --#{$prefix}-sys-color-error-container: #F9DEDC;
     --#{$prefix}-sys-color-on-error-container: #410E0B;
-    // Success, warning and info, as every generated theme has them (FLO-329):
+    // Success, warning and info, as every generated theme has them:
     // the badge's status colours had no background under the default theme
     @include status-roles-light;
     // Key colors
@@ -35,7 +35,7 @@
     --#{$prefix}-sys-color-tertiary-container: #ffd8e4;
     --#{$prefix}-sys-color-on-tertiary-container: #31111d;
 
-    // Fixed accents: the same in light and dark (M3 fixed roles, FLO-315;
+    // Fixed accents: the same in light and dark (M3 fixed roles;
     // Compose ColorLightTokens / ColorDarkTokens, tones 90, 80, 10 and 30)
     --#{$prefix}-sys-color-primary-fixed: #eaddff;
     --#{$prefix}-sys-color-primary-fixed-dim: #d0bcff;
@@ -55,7 +55,7 @@
     --#{$prefix}-sys-color-surface-dim: #ded8e1;
     --#{$prefix}-sys-color-surface-bright: #fef7ff;
     // Compose ColorLightTokens.SurfaceVariant = NeutralVariant90; the filled
-    // card's disabled container reads it (FilledCardTokens, FLO-329)
+    // card's disabled container reads it (FilledCardTokens)
     --#{$prefix}-sys-color-surface-variant: #e7e0ec;
     --#{$prefix}-sys-color-surface-container-lowest: #ffffff;
     --#{$prefix}-sys-color-surface-container-low: #f7f2fa;
@@ -105,7 +105,7 @@
     --#{$prefix}-sys-color-tertiary-container: #633b48;
     --#{$prefix}-sys-color-on-tertiary-container: #ffd8e4;
 
-    // Fixed accents: the same in light and dark (M3 fixed roles, FLO-315;
+    // Fixed accents: the same in light and dark (M3 fixed roles;
     // Compose ColorLightTokens / ColorDarkTokens, tones 90, 80, 10 and 30)
     --#{$prefix}-sys-color-primary-fixed: #eaddff;
     --#{$prefix}-sys-color-primary-fixed-dim: #d0bcff;

package/src/styles/themes/_forest.scss

@@ -22,7 +22,7 @@
 
     // fixed roles: generated, do not edit
     // (tones 90, 80, 10, 30 of this theme's primary, secondary and tertiary;
-    // the same in dark, so declared once, FLO-315)
+    // the same in dark, so declared once)
     --#{$prefix}-sys-color-primary-fixed: #d6e9be;
     --#{$prefix}-sys-color-primary-fixed-dim: #bacda3;
     --#{$prefix}-sys-color-on-primary-fixed: #111f05;
@@ -54,7 +54,7 @@
     --#{$prefix}-sys-color-outline: #767b6f;
     --#{$prefix}-sys-color-outline-variant: #c9ccb7;
     // Inverse roles (M3: inverse-surface N20, inverse-on-surface N95,
-    // inverse-primary P80), from this theme's neutral and primary palettes. FLO-254.
+    // inverse-primary P80), from this theme's neutral and primary palettes.
     --#{$prefix}-sys-color-inverse-surface: #303127;
     --#{$prefix}-sys-color-inverse-on-surface: #f3f1e2;
     --#{$prefix}-sys-color-inverse-primary: #bacda3;
@@ -96,7 +96,7 @@
         --#{$prefix}-sys-color-outline: #929688;
         --#{$prefix}-sys-color-outline-variant: #464840;
         // Inverse roles (M3: inverse-surface N90 = on-surface, inverse-on-surface N20,
-        // inverse-primary P40). FLO-254.
+        // inverse-primary P40).
         --#{$prefix}-sys-color-inverse-surface: #e3e3dc;
         --#{$prefix}-sys-color-inverse-on-surface: #303127;
         --#{$prefix}-sys-color-inverse-primary: #536442;

package/src/styles/themes/_ocean.scss

@@ -22,7 +22,7 @@
 
     // fixed roles: generated, do not edit
     // (tones 90, 80, 10, 30 of this theme's primary, secondary and tertiary;
-    // the same in dark, so declared once, FLO-315)
+    // the same in dark, so declared once)
     --#{$prefix}-sys-color-primary-fixed: #cae6ff;
     --#{$prefix}-sys-color-primary-fixed-dim: #8dcdff;
     --#{$prefix}-sys-color-on-primary-fixed: #001e30;
@@ -54,7 +54,7 @@
     --#{$prefix}-sys-color-outline: #71787d;
     --#{$prefix}-sys-color-outline-variant: #c1c8cd;
     // Inverse roles (M3: inverse-surface N20, inverse-on-surface N95,
-    // inverse-primary P80), from this theme's neutral and primary palettes. FLO-254.
+    // inverse-primary P80), from this theme's neutral and primary palettes.
     --#{$prefix}-sys-color-inverse-surface: #2b3135;
     --#{$prefix}-sys-color-inverse-on-surface: #ecf1f6;
     --#{$prefix}-sys-color-inverse-primary: #8dcdff;
@@ -96,7 +96,7 @@
         --#{$prefix}-sys-color-outline: #8b9297;
         --#{$prefix}-sys-color-outline-variant: #41484d;
         // Inverse roles (M3: inverse-surface N90 = on-surface, inverse-on-surface N20,
-        // inverse-primary P40). FLO-254.
+        // inverse-primary P40).
         --#{$prefix}-sys-color-inverse-surface: #e1e3e4;
         --#{$prefix}-sys-color-inverse-on-surface: #2b3135;
         --#{$prefix}-sys-color-inverse-primary: #006493;

package/src/styles/themes/_spring.scss

@@ -22,7 +22,7 @@
 
     // fixed roles: generated, do not edit
     // (tones 90, 80, 10, 30 of this theme's primary, secondary and tertiary;
-    // the same in dark, so declared once, FLO-315)
+    // the same in dark, so declared once)
     --#{$prefix}-sys-color-primary-fixed: #9af7a3;
     --#{$prefix}-sys-color-primary-fixed-dim: #7eda8a;
     --#{$prefix}-sys-color-on-primary-fixed: #002108;
@@ -54,7 +54,7 @@
     --#{$prefix}-sys-color-outline: #727970;
     --#{$prefix}-sys-color-outline-variant: #c1c9be;
     // Inverse roles (M3: inverse-surface N20, inverse-on-surface N95,
-    // inverse-primary P80), from this theme's neutral and primary palettes. FLO-254.
+    // inverse-primary P80), from this theme's neutral and primary palettes.
     --#{$prefix}-sys-color-inverse-surface: #2b322a;
     --#{$prefix}-sys-color-inverse-on-surface: #ebf3e6;
     --#{$prefix}-sys-color-inverse-primary: #7eda8a;
@@ -96,7 +96,7 @@
         --#{$prefix}-sys-color-outline: #8b9388;
         --#{$prefix}-sys-color-outline-variant: #424940;
         // Inverse roles (M3: inverse-surface N90 = on-surface, inverse-on-surface N20,
-        // inverse-primary P40). FLO-254.
+        // inverse-primary P40).
         --#{$prefix}-sys-color-inverse-surface: #d9e3d4;
         --#{$prefix}-sys-color-inverse-on-surface: #2b322a;
         --#{$prefix}-sys-color-inverse-primary: #006e2b;

package/src/styles/themes/_sunset.scss

@@ -22,7 +22,7 @@
 
     // fixed roles: generated, do not edit
     // (tones 90, 80, 10, 30 of this theme's primary, secondary and tertiary;
-    // the same in dark, so declared once, FLO-315)
+    // the same in dark, so declared once)
     --#{$prefix}-sys-color-primary-fixed: #ffdbcc;
     --#{$prefix}-sys-color-primary-fixed-dim: #ffb695;
     --#{$prefix}-sys-color-on-primary-fixed: #351000;
@@ -54,7 +54,7 @@
     --#{$prefix}-sys-color-outline: #85736d;
     --#{$prefix}-sys-color-outline-variant: #d8c2bb;
     // Inverse roles (M3: inverse-surface N20, inverse-on-surface N95,
-    // inverse-primary P80), from this theme's neutral and primary palettes. FLO-254.
+    // inverse-primary P80), from this theme's neutral and primary palettes.
     --#{$prefix}-sys-color-inverse-surface: #33302d;
     --#{$prefix}-sys-color-inverse-on-surface: #f7efeb;
     --#{$prefix}-sys-color-inverse-primary: #ffb695;
@@ -96,7 +96,7 @@
         --#{$prefix}-sys-color-outline: #a08c85;
         --#{$prefix}-sys-color-outline-variant: #53433e;
         // Inverse roles (M3: inverse-surface N90 = on-surface, inverse-on-surface N20,
-        // inverse-primary P40). FLO-254.
+        // inverse-primary P40).
         --#{$prefix}-sys-color-inverse-surface: #f0dfd9;
         --#{$prefix}-sys-color-inverse-on-surface: #33302d;
         --#{$prefix}-sys-color-inverse-primary: #a23f00;

package/src/styles/utilities/_ripple.scss

@@ -36,7 +36,7 @@ $component: '#{base.$prefix}-ripple';
     // Active ripple
     &.active {
       animation: #{$component}-expand 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
-      // The wave is the pressed state layer (FLO-260), as Compose's ripple is.
+      // The wave is the pressed state layer, as Compose's ripple is.
       opacity: v.state('pressed-state-layer-opacity');
     }