Merge pull request #44 from pepabo/update_focus_ring

Focus Ringのアップデート

packages/adapter/_functions.scss

@@ -4,3 +4,4 @@
 @forward "./functions/size";
 @forward "./functions/opacity";
 @forward "./functions/typography";
+@forward "./functions/outline";

packages/adapter/functions/color/_border.scss

@@ -123,6 +123,7 @@ $border-color-tokens: map.get(
   }
 }
 
+/// @deprecated この関数は非推奨です
 @function get-focus-ring-color($color: neutral) {
   $available-colors: list.join(
     helpers.get-semantic-intentions(),
@@ -150,6 +151,37 @@ $border-color-tokens: map.get(
   }
 }
 
+@function get-focus-ring-outline-color($brightness: light,) {
+  $focus-ring-color-tokens: map.get(
+    map.get(tokens.$tokens, color),
+    focus-ring
+  );
+
+  $available-brightnesses: helpers.get-brightnesses();
+
+  @if list.index($available-brightnesses, $brightness) == null {
+    @error error-message.any-one-of(
+      $value: $brightness,
+      $available-values: $available-brightnesses
+    );
+  }
+
+  @if map.get(
+    map.get($focus-ring-color-tokens, base),
+    $brightness
+  ) == null {
+    @return semantic-color.get-semantic-color(
+      $intention: interactive,
+      $level: 500
+    );
+  } @else {
+    @return map.get(
+      map.get($focus-ring-color-tokens, base),
+      $brightness
+    );
+  }
+}
+
 @function get-interactive-list-border-color() {
   @return map.get($border-color-tokens, interactive-list);
 }

packages/adapter/functions/color/_border.test.scss

@@ -40,6 +40,13 @@
   );
 }
 
+@function test-get-focus-ring-outline-color() {
+  @return assert.equals(
+    functions.get-focus-ring-outline-color($brightness: light),
+    #3e93de
+  );
+}
+
 @function test-get-interactive-list-border-color() {
   @return assert.equals(
     functions.get-interactive-list-border-color(),

packages/adapter/functions/opacity/_border.scss

@@ -8,6 +8,7 @@ $border-opacity-tokens: map.get(
   border
 );
 
+/// @deprecated この関数は非推奨です
 @function get-focus-ring-opacity() {
   @return map.get($border-opacity-tokens, focus-ring);
 }

packages/adapter/functions/outline/_focus-ring.scss

@@ -0,0 +1,16 @@
+@use "sass:list";
+@use "../color/border" as border-color;
+@use "../opacity/border" as border-opacity;
+@use "../size/border" as border-size;
+@use "../helpers";
+
+@function get-focus-ring-outline($brightness: light) {
+  $width: border-size.get-focus-ring-size();
+  $color: border-color.get-focus-ring-outline-color($brightness: $brightness);
+
+  @return #{$width} solid $color;
+}
+
+@function get-focus-ring-outline-offset() {
+  @return 0.125rem;
+}