feat: introduce 3 focus-visible tokens for Skip Link

nl-design-system · Sep 18, 2024 · 07db8f0 · 07db8f0
1 parent d42b8e6
commit 07db8f0
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 12 deletions.
diff --git a/.changeset/olive-numbers-smile.md b/.changeset/olive-numbers-smile.md
@@ -0,0 +1,15 @@
+---
+"@utrecht/skip-link-css": minor
+---
+
+Add new tokens for Skip Link, to replace deprecated tokens:
+
+- `utrecht.skip-link.focus-visible.color`
+- `utrecht.skip-link.focus-visible.background-color`
+- `utrecht.skip-link.focus-visible.text-decoration`
+
+The following Skip Link tokens are now deprecated:
+
+- `utrecht.skip-link.focus.color`
+- `utrecht.skip-link.focus.background-color`
+- `utrecht.skip-link.focus.text-decoration`
diff --git a/components/skip-link/src/_mixin.scss b/components/skip-link/src/_mixin.scss
@@ -29,10 +29,18 @@
   text-decoration: var(--utrecht-skip-link-text-decoration);
 }
 
+/* stylelint-disable-next-line block-no-empty */
 @mixin utrecht-skip-link--focus {
+}
+
+@mixin utrecht-skip-link--focus-visible {
   @include utrecht-focus-ring;
 
-  text-decoration: var(--utrecht-skip-link-focus-text-decoration);
+  /* `var(--utrecht-skip-link-focus-text-decoration)` is deprecated, but for now we keep it for backwards compatibility */
+  text-decoration: var(
+    --utrecht-skip-link-focus-visible-text-decoration,
+    var(--utrecht-skip-link-focus-text-decoration)
+  );
 }
 
 @mixin utrecht-skip-link--hidden {

diff --git a/components/skip-link/src/index.scss b/components/skip-link/src/index.scss
@@ -26,8 +26,14 @@
   @include utrecht-skip-link--visible;
 }
 
-.utrecht-skip-link--focus,
-.utrecht-skip-link:focus,
+/*
+ * @deprecated `utrecht-skip-link--focus` is deprecated, use `utrecht-skip-link--focus-visible` instead.
+ */
+.utrecht-skip-link--focus {
+  @include utrecht-skip-link--focus-visible;
+}
+
+.utrecht-skip-link--focus-visible,
 .utrecht-skip-link:focus-visible {
-  @include utrecht-skip-link--focus;
+  @include utrecht-skip-link--focus-visible;
 }
diff --git a/components/skip-link/src/tokens.json b/components/skip-link/src/tokens.json
@@ -103,6 +103,44 @@
         "type": "other"
       },
       "focus": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.skip-link.focus-visible.background-color"
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.skip-link.focus-visible.color"
+          },
+          "type": "color"
+        },
+        "text-decoration": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": ["inherit", "none", "underline"],
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.skip-link.focus-visible.text-decoration"
+          },
+          "type": "textDecoration"
+        }
+      },
+      "focus-visible": {
         "background-color": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {

diff --git a/packages/storybook-css/src/SkipLink.stories.tsx b/packages/storybook-css/src/SkipLink.stories.tsx
@@ -17,10 +17,10 @@ interface SkipLinkStoryProps extends SkipLinkProps {
   visibleOnFocus?: boolean;
 }
 
-const SkipLinkStory = ({ focus, visibility, visibleOnFocus, ...restProps }: SkipLinkStoryProps) => (
+const SkipLinkStory = ({ focusVisible, visibility, visibleOnFocus, ...restProps }: SkipLinkStoryProps) => (
   <SkipLink
     className={clsx({
-      'utrecht-skip-link--focus': focus,
+      'utrecht-skip-link--focus-visible': focusVisible,
       'utrecht-skip-link--visible-on-focus': visibleOnFocus,
       'utrecht-skip-link--hidden': visibility === 'hidden',
       'utrecht-skip-link--visible': visibility === 'visible',
@@ -49,6 +49,12 @@ const meta = {
         required: true,
       },
     },
+    focusVisible: {
+      description: 'Simulate :focus-visible',
+      type: {
+        name: 'boolean',
+      },
+    },
     visibility: {
       description: 'Visibilty',
       type: 'select',
@@ -62,7 +68,7 @@ const meta = {
   args: {
     children: '',
     href: '',
-    focus: false,
+    focusVisible: false,
     visibility: '',
     visibleOnFocus: false,
   },
@@ -94,7 +100,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     href: '#main',
-    focus: true,
+    focusVisible: true,
     children: 'Skip to main content',
     visibility: 'visible',
   },
@@ -110,7 +116,7 @@ export const Default: Story = {
 export const VisibleOnFocus: Story = {
   args: {
     href: '#main',
-    focus: true,
+    focusVisible: true,
     children: 'Skip to main content',
     visibleOnFocus: true,
   },
@@ -129,7 +135,7 @@ export const VisibleOnFocus: Story = {
 export const RightToLeft: Story = {
   args: {
     href: '#main',
-    focus: true,
+    focusVisible: true,
     children: 'تخطي إلى المحتوى الرئيسي',
     visibility: 'visible',
   },

diff --git a/proprietary/design-tokens/src/component/utrecht/skip-link.tokens.json b/proprietary/design-tokens/src/component/utrecht/skip-link.tokens.json
@@ -10,8 +10,10 @@
       "text-decoration": { "value": "{utrecht.link.text-decoration}" },
       "focus": {
         "color": { "value": "{utrecht.topnav.link.focus.color}" },
-        "background-color": { "value": "{utrecht.topnav.link.focus.background-color}" },
-        "text-decoration": { "value": "{utrecht.link.focus.text-decoration}" }
+        "background-color": { "value": "{utrecht.topnav.link.focus.background-color}" }
+      },
+      "focus-visible": {
+        "text-decoration": { "value": "{utrecht.link.focus-visible.text-decoration}" }
       }
     }
   }