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;