From 0be3dd412c84ad8143e85f9a9bbc7e74faf3cf54 Mon Sep 17 00:00:00 2001
From: Valentin Mladenov <valentin.mladenov@broadcom.com>
Date: Tue, 2 Jul 2024 17:14:00 +0300
Subject: [PATCH] fix(datagrid): use outline token for cell focus (#1467)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Focus outline for datagrid cells is not visible in firefox browser.

Issue Number: CDE-2124

## What is the new behavior?
Using object interaction outline token to show the focus for all
browsers.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information
---
 projects/angular/src/data/datagrid/_datagrid.clarity.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/projects/angular/src/data/datagrid/_datagrid.clarity.scss b/projects/angular/src/data/datagrid/_datagrid.clarity.scss
index 98d678dbc5..088b818dbc 100644
--- a/projects/angular/src/data/datagrid/_datagrid.clarity.scss
+++ b/projects/angular/src/data/datagrid/_datagrid.clarity.scss
@@ -432,7 +432,8 @@
       border: none;
 
       &:focus {
-        outline: -webkit-focus-ring-color solid tokens.$cds-global-space-2;
+        outline: tokens.$cds-alias-object-interaction-outline;
+        outline-color: -webkit-focus-ring-color;
         outline-offset: calc(-1 * tokens.$cds-global-space-2);
       }
 
@@ -640,7 +641,8 @@
       }
 
       &:focus {
-        outline: -webkit-focus-ring-color solid tokens.$cds-global-space-2;
+        outline: tokens.$cds-alias-object-interaction-outline;
+        outline-color: -webkit-focus-ring-color;
         outline-offset: calc(-1 * tokens.$cds-global-space-2);
       }