fix(focus)!: move --md-focus-ring tokens to host

BREAKING CHANGE: Set `--md-focus-ring-*` tokens directly on `<md-focus-ring>` elements. Focus rings are exposed with `::part(focus-ring)`. PiperOrigin-RevId: 549114124
material-components · Jul 18, 2023 · f7eff48 · f7eff48
1 parent ff2e089
commit f7eff48
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 82 deletions.
diff --git a/docs/components/focus-ring.md b/docs/components/focus-ring.md
@@ -33,43 +33,25 @@ one of three ways.
 1.  Attached to the parent element
 
     ```html
-    <style>
-      .container {
-        position: relative;
-        --md-focus-ring-shape: 8px;
-      }
-    </style>
-    <button class="container">
-      <md-focus-ring></md-focus-ring>
+    <button style="position: relative">
+      <md-focus-ring style="--md-focus-ring-shape: 8px"></md-focus-ring>
     </button>
     ```
 
 1.  Attached to a referenced element
 
     ```html
-    <style>
-      .container {
-        position: relative;
-        --md-focus-ring-shape: 8px;
-      }
-    </style>
-    <div class="container">
-      <md-focus-ring for="control"></md-focus-ring>
+    <div style="position: relative">
+      <md-focus-ring for="control" style="--md-focus-ring-shape: 8px"></md-focus-ring>
       <input id="control">
     </div>
     ```
 
 1.  Attached imperatively
 
     ```html
-    <style>
-      .container {
-        position: relative;
-        --md-focus-ring-shape: 8px;
-      }
-    </style>
-    <div class="container">
-      <md-focus-ring id="ring"></md-focus-ring>
+    <div style="position: relative">
+      <md-focus-ring id="ring" style="--md-focus-ring-shape: 8px"></md-focus-ring>
       <button id="ring-control"></button>
     </div>
     <script>
@@ -89,14 +71,8 @@ This is useful for components like list items.
 ![An element with a focus ring that animates inward.](images/focus/usage-inward.gif "A focus ring animating inward.")
 
 ```html
-<style>
-  .container {
-    position: relative;
-    --md-focus-ring-shape: 8px;
-  }
-</style>
-<button class="container">
-  <md-focus-ring inward></md-focus-ring>
+<button style="position: relative">
+  <md-focus-ring inward style="--md-focus-ring-shape: 8px"></md-focus-ring>
 </button>
 ```
 
@@ -109,7 +85,7 @@ properties.
 
 ```html
 <style>
-  :root {
+  md-focus-ring {
     --md-focus-ring-duration: 0s; /* disabled animation */
   }
 </style>
@@ -127,11 +103,11 @@ terms of color and shape.
 
 ### Tokens
 
-Token                    | Default value
------------------------- | --------------------------
-`--md-focus-ring-color`  | `--md-sys-color-secondary`
-`--md-focus-ring-shape`  | `9999px`
-`--md-focus-ring-width`  | `3px`
+Token                   | Default value
+----------------------- | --------------------------
+`--md-focus-ring-color` | `--md-sys-color-secondary`
+`--md-focus-ring-shape` | `9999px`
+`--md-focus-ring-width` | `3px`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss)
     <!-- {.external} -->
@@ -142,7 +118,7 @@ Token                    | Default value
 
 ```html
 <style>
-:root {
+md-focus-ring {
   --md-focus-ring-shape: 0px;
   --md-focus-ring-width: 2px;
   --md-focus-ring-active-width: 4px;

diff --git a/focus/demo/demo.ts b/focus/demo/demo.ts
@@ -8,25 +8,13 @@ import './index.js';
 import './material-collection.js';
 
 import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {boolInput, cssCustomProperty, Knob, textInput} from './index.js';
+import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
 const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Focus', [
       new Knob('inward', {ui: boolInput(), defaultValue: false}),
-      new Knob(
-          '--md-focus-ring-width',
-          {ui: textInput(), wiring: cssCustomProperty, defaultValue: '3px'}),
-      new Knob(
-          '--md-focus-ring-active-width',
-          {ui: textInput(), wiring: cssCustomProperty, defaultValue: '8px'}),
-      new Knob(
-          '--md-focus-ring-outward-offset',
-          {ui: textInput(), wiring: cssCustomProperty, defaultValue: '2px'}),
-      new Knob(
-          '--md-focus-ring-inward-offset',
-          {ui: textInput(), wiring: cssCustomProperty, defaultValue: '0px'}),
     ]);
 
 collection.addStories(...materialInitsToStoryInits(stories));

diff --git a/focus/demo/stories.ts b/focus/demo/stories.ts
@@ -12,10 +12,6 @@ import {css, html} from 'lit';
 /** Knob types for focus ring stories. */
 export interface StoryKnobs {
   inward: boolean;
-  '--md-focus-ring-width': string;
-  '--md-focus-ring-active-width': string;
-  '--md-focus-ring-outward-offset': string;
-  '--md-focus-ring-inward-offset': string;
 }
 
 const standard: MaterialStoryInit<StoryKnobs> = {

diff --git a/focus/lib/_focus-ring.scss b/focus/lib/_focus-ring.scss
@@ -35,21 +35,21 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-focus-ring-#{$token}, #{$value});
+      --md-focus-ring-#{$token}: #{$value};
     }
 
     // Support logical shape properties
-    --_shape-start-start: var(--md-focus-ring-shape-start-start, var(--_shape));
-    --_shape-start-end: var(--md-focus-ring-shape-start-end, var(--_shape));
-    --_shape-end-end: var(--md-focus-ring-shape-end-end, var(--_shape));
-    --_shape-end-start: var(--md-focus-ring-shape-end-start, var(--_shape));
-
-    animation-delay: 0s, calc(var(--_duration) * 0.25);
-    animation-duration: calc(var(--_duration) * 0.25),
-      calc(var(--_duration) * 0.75);
+    --md-focus-ring-shape-start-start: var(--md-focus-ring-shape);
+    --md-focus-ring-shape-start-end: var(--md-focus-ring-shape);
+    --md-focus-ring-shape-end-end: var(--md-focus-ring-shape);
+    --md-focus-ring-shape-end-start: var(--md-focus-ring-shape);
+
+    animation-delay: 0s, calc(var(--md-focus-ring-duration) * 0.25);
+    animation-duration: calc(var(--md-focus-ring-duration) * 0.25),
+      calc(var(--md-focus-ring-duration) * 0.75);
     animation-timing-function: map.get($_md-sys-motion, 'easing-emphasized');
     box-sizing: border-box;
-    color: var(--_color);
+    color: var(--md-focus-ring-color);
     display: none;
     pointer-events: none;
     position: absolute;
@@ -61,48 +61,54 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
   :host(:not([inward])) {
     animation-name: outward-grow, outward-shrink;
-    border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end) + var(--md-focus-ring-outward-offset)
+    );
     border-end-start-radius: calc(
-      var(--_shape-end-start) + var(--_outward-offset)
+      var(--md-focus-ring-shape-end-start) + var(--md-focus-ring-outward-offset)
     );
     border-start-end-radius: calc(
-      var(--_shape-start-end) + var(--_outward-offset)
+      var(--md-focus-ring-shape-start-end) + var(--md-focus-ring-outward-offset)
     );
     border-start-start-radius: calc(
-      var(--_shape-start-start) + var(--_outward-offset)
+      var(--md-focus-ring-shape-start-start) +
+        var(--md-focus-ring-outward-offset)
     );
-    inset: calc(-1 * (var(--_outward-offset)));
-    outline: var(--_width) solid currentColor;
+    inset: calc(-1 * (var(--md-focus-ring-outward-offset)));
+    outline: var(--md-focus-ring-width) solid currentColor;
   }
 
   :host([inward]) {
     animation-name: inward-grow, inward-shrink;
-    border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end) - var(--md-focus-ring-inward-offset)
+    );
     border-end-start-radius: calc(
-      var(--_shape-end-start) - var(--_inward-offset)
+      var(--md-focus-ring-shape-end-start) - var(--md-focus-ring-inward-offset)
     );
     border-start-end-radius: calc(
-      var(--_shape-start-end) - var(--_inward-offset)
+      var(--md-focus-ring-shape-start-end) - var(--md-focus-ring-inward-offset)
     );
     border-start-start-radius: calc(
-      var(--_shape-start-start) - var(--_inward-offset)
+      var(--md-focus-ring-shape-start-start) -
+        var(--md-focus-ring-inward-offset)
     );
-    border: var(--_width) solid currentColor;
-    inset: var(--_inward-offset);
+    border: var(--md-focus-ring-width) solid currentColor;
+    inset: var(--md-focus-ring-inward-offset);
   }
 
   @keyframes outward-grow {
     from {
       outline-width: 0;
     }
     to {
-      outline-width: var(--_active-width);
+      outline-width: var(--md-focus-ring-active-width);
     }
   }
 
   @keyframes outward-shrink {
     from {
-      outline-width: var(--_active-width);
+      outline-width: var(--md-focus-ring-active-width);
     }
   }
 
@@ -111,13 +117,13 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       border-width: 0;
     }
     to {
-      border-width: var(--_active-width);
+      border-width: var(--md-focus-ring-active-width);
     }
   }
 
   @keyframes inward-shrink {
     from {
-      border-width: var(--_active-width);
+      border-width: var(--md-focus-ring-active-width);
     }
   }