diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index 84c5458fc5ae..270c202f8405 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -92,6 +92,11 @@
border-bottom: 1px solid $hover-ui;
}
+ .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link,
+ .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link {
+ color: $link-02;
+ }
+
.#{$prefix}--data-table th,
.#{$prefix}--data-table td {
text-align: left;
@@ -219,6 +224,10 @@
}
}
+ .#{$prefix}--data-table--selected .#{$prefix}--link {
+ color: $link-02;
+ }
+
.#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
.#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
height: rem(24px);
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index 075e3e2a33fc..2e64e18ff0b9 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -170,6 +170,7 @@ Array [
"layout06",
"layout07",
"link01",
+ "link02",
"magenta",
"magenta10",
"magenta100",
diff --git a/packages/react/src/components/DataTable/stories/shared.js b/packages/react/src/components/DataTable/stories/shared.js
index 2a90040a2ac8..13d857147eee 100644
--- a/packages/react/src/components/DataTable/stories/shared.js
+++ b/packages/react/src/components/DataTable/stories/shared.js
@@ -4,8 +4,9 @@
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
-
+import React from 'react';
import { action } from '@storybook/addon-actions';
+import Link from '../../Link';
export const rows = [
{
@@ -15,7 +16,7 @@ export const rows = [
port: 3000,
rule: 'Round robin',
attached_groups: 'Kevin’s VM Groups',
- status: 'Disabled',
+ status: Disabled,
},
{
id: 'b',
@@ -24,7 +25,7 @@ export const rows = [
port: 443,
rule: 'Round robin',
attached_groups: 'Maureen’s VM Groups',
- status: 'Starting',
+ status: Starting,
},
{
id: 'c',
@@ -33,7 +34,7 @@ export const rows = [
port: 80,
rule: 'DNS delegation',
attached_groups: 'Andrew’s VM Groups',
- status: 'Active',
+ status: Active,
},
{
id: 'd',
@@ -42,7 +43,7 @@ export const rows = [
port: 3000,
rule: 'Round robin',
attached_groups: 'Marc’s VM Groups',
- status: 'Disabled',
+ status: Disabled,
},
{
id: 'e',
@@ -51,7 +52,7 @@ export const rows = [
port: 443,
rule: 'Round robin',
attached_groups: 'Mel’s VM Groups',
- status: 'Starting',
+ status: Starting,
},
{
id: 'f',
@@ -60,7 +61,7 @@ export const rows = [
port: 80,
rule: 'DNS delegation',
attached_groups: 'Ronja’s VM Groups',
- status: 'Active',
+ status: Active,
},
];
diff --git a/packages/themes/metadata.yml b/packages/themes/metadata.yml
index 0dda81b7aa30..1b09ffdf8908 100644
--- a/packages/themes/metadata.yml
+++ b/packages/themes/metadata.yml
@@ -73,6 +73,9 @@ tokens:
role:
- Primary links
- Ghost button
+ - name: link02
+ role:
+ - Secondary link color for lower contrast backgrounds
- name: field01
role:
- Default input fields
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 9b23b3350759..0cb2aaf544d4 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -67,6 +67,7 @@ export const icon02 = gray70;
export const icon03 = white;
export const link01 = blue60;
+export const link02 = blue70;
export const inverseLink = blue40;
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 64d59f46cc09..3f77c8d2fc07 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -66,6 +66,7 @@ export const icon02 = gray30;
export const icon03 = white;
export const link01 = blue40;
+export const link02 = blue30;
export const inverseLink = blue60;
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 595674dd3207..9d75d7c23303 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -68,6 +68,7 @@ export const icon02 = gray30;
export const icon03 = white;
export const link01 = blue40;
+export const link02 = blue30;
export const inverseLink = blue60;
diff --git a/packages/themes/src/tokens.js b/packages/themes/src/tokens.js
index 4d2fb8965b89..53ac9aedfee9 100644
--- a/packages/themes/src/tokens.js
+++ b/packages/themes/src/tokens.js
@@ -37,6 +37,7 @@ const colors = [
'icon03',
'link01',
+ 'link02',
'inverseLink',
@@ -187,6 +188,7 @@ export const unstable__meta = {
'text05',
'textError',
'link01',
+ 'link02',
'icon01',
'icon02',
'icon03',
diff --git a/packages/themes/src/v9.js b/packages/themes/src/v9.js
index b02db3b9b005..cd00b8bfe762 100644
--- a/packages/themes/src/v9.js
+++ b/packages/themes/src/v9.js
@@ -31,6 +31,7 @@ export const icon02 = '#5a6872';
export const icon03 = white;
export const link01 = '#3d70b2';
+export const link02 = '#3d70b2';
export const inverseLink = '#5596e6';
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 728e85706efe..784189d81e5c 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -67,6 +67,7 @@ export const icon02 = gray70;
export const icon03 = white;
export const link01 = blue60;
+export const link02 = blue70;
export const inverseLink = blue40;