Skip to content

Commit

Permalink
Inherit link color in components using the Feedback color collection (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
adamkudrna committed Oct 8, 2024
1 parent 7898915 commit 92c0881
Show file tree
Hide file tree
Showing 9 changed files with 131 additions and 20 deletions.
7 changes: 5 additions & 2 deletions src/components/Alert/Alert.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@
line-height: settings.$line-height;
}

.message a,
.message strong {
.message :is(a, strong) {
font-weight: theme.$emphasis-font-weight;
}

.message strong {
color: var(--rui-local-foreground-color);
}

Expand All @@ -73,6 +75,7 @@
$variant-name: "color",
$variant-value: $color,
$properties: settings.$themeable-properties,
$inherit-link-color: true,
);
}
}
15 changes: 13 additions & 2 deletions src/components/Alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ Success alerts confirm that an operation has been processed successfully.
```docoff-react-preview
<Alert color="success">
<strong>Success:</strong> Settings have been successfully saved.
{' '}
<TextLink href="/" label="Undo" />
</Alert>
```

Expand All @@ -53,7 +55,7 @@ suggest an action to resolve the problem.
<Alert color="warning">
<strong>Warning:</strong> Your credit card is going to expire soon.
{' '}
<a href="/">Update my payment options</a>
<TextLink href="/" label="Update my payment options" />
</Alert>
```

Expand All @@ -68,7 +70,7 @@ problem.
<strong>Error:</strong> Cannot connect to the server. Is your internet
connection working fine?
{' '}
<a href="/">Try again</a>
<TextLink href="/" label="Try again" />
</Alert>
```

Expand All @@ -80,6 +82,8 @@ This kind of alert can be used to display helpful information.
<Alert color="help">
<strong>Help:</strong> You should choose a password you don&apos;t use
anywhere else.
{' '}
<TextLink href="/" label="Help me choose" />
</Alert>
```

Expand All @@ -90,6 +94,8 @@ Another common, informative alert.
```docoff-react-preview
<Alert color="info">
<strong>Info:</strong> This feature depends on user&apos;s OS preferences.
{' '}
<TextLink href="/" label="Open preferences" />
</Alert>
```

Expand All @@ -100,6 +106,8 @@ Neutral informative alert.
```docoff-react-preview
<Alert>
<strong>Note:</strong> This feature may not be available in all regions.
{' '}
<TextLink href="/" label="Show list of regions" />
</Alert>
```

Expand All @@ -111,6 +119,8 @@ Light alert variant.
<docoff-placeholder dark>
<Alert color="light">
<strong>Light alert:</strong> Stands out on dark backgrounds.
{' '}
<TextLink href="/" label="This is a link" />
</Alert>
</docoff-placeholder>
```
Expand All @@ -122,6 +132,7 @@ Dark alert variant.
```docoff-react-preview
<Alert color="dark">
<strong>Dark alert:</strong> Stands out on light backgrounds.
<TextLink href="/" label="This is a link" />
</Alert>
```

Expand Down
1 change: 1 addition & 0 deletions src/components/Card/Card.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
$component-name: "Card",
$variant-name: "color",
$variant-value: $color,
$inherit-link-color: true,
$properties: settings.$themeable-properties,
);
}
Expand Down
22 changes: 22 additions & 0 deletions src/components/Card/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card color="success">
<CardBody>
Hello! I&apos;m success variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="success" />
Expand All @@ -162,6 +164,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card color="warning">
<CardBody>
Hello! I&apos;m warning variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="warning" />
Expand All @@ -170,6 +174,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card color="danger">
<CardBody>
Hello! I&apos;m danger variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="danger" />
Expand All @@ -178,6 +184,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card color="help">
<CardBody>
Hello! I&apos;m help variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="help" />
Expand All @@ -186,6 +194,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card color="info">
<CardBody>
Hello! I&apos;m info variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="info" />
Expand All @@ -194,6 +204,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card color="note">
<CardBody>
Hello! I&apos;m note variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="note" />
Expand All @@ -202,6 +214,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card>
<CardBody>
Hello! I&apos;m light (default) variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="dark" />
Expand All @@ -210,6 +224,8 @@ To cover all possible needs of your project, Card is available in colors from
<Card color="dark">
<CardBody>
Hello! I&apos;m dark variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="light" />
Expand All @@ -228,6 +244,8 @@ its interactive elements to disallow user's interaction.
<Card disabled>
<CardBody>
Hello! I&apos;m a disabled card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" disabled />
Expand All @@ -236,6 +254,8 @@ its interactive elements to disallow user's interaction.
<Card disabled raised>
<CardBody>
Hello! I&apos;m a disabled raised card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" disabled />
Expand All @@ -244,6 +264,8 @@ its interactive elements to disallow user's interaction.
<Card color="success" disabled>
<CardBody>
Hello! I&apos;m a disabled success variant of card.
{' '}
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Read more" priority="outline" color="success" disabled />
Expand Down
13 changes: 10 additions & 3 deletions src/components/TextLink/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,20 @@ helps to improve its accessibility.

## Theming

ℹ️ The TextLink component is context-aware and can inherit text color from its
parent component. This applies for components using
[Feedback color collection](/docs/foundation/collections#colors) and for
components in any of the supported
[validation states](/docs/foundation/colors#validation-states).
In such cases, the custom properties marked with an asterisk (\*) are ignored.

| Custom Property | Description |
|-------------------------------------------|-------------------------------------|
| `--rui-TextLink__color` | Text color |
| `--rui-TextLink__color` \* | Text color |
| `--rui-TextLink__text-decoration` | Text decoration, e.g. underline |
| `--rui-TextLink--hover__color` | Text color on hover |
| `--rui-TextLink--hover__color` \* | Text color on hover |
| `--rui-TextLink--hover__text-decoration` | Text decoration on hover |
| `--rui-TextLink--active__color` | Text color in the active state |
| `--rui-TextLink--active__color` \* | Text color in the active state |
| `--rui-TextLink--active__text-decoration` | Text decoration in the active state |

[a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
Expand Down
6 changes: 3 additions & 3 deletions src/components/TextLink/_theme.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$color: var(--rui-TextLink__color);
$color: var(--rui-local-link-color, var(--rui-TextLink__color));
$text-decoration: var(--rui-TextLink__text-decoration);
$hover-color: var(--rui-TextLink--hover__color);
$hover-color: var(--rui-local-link-color-hover, var(--rui-TextLink--hover__color));
$hover-text-decoration: var(--rui-TextLink--hover__text-decoration);
$active-color: var(--rui-TextLink--active__color);
$active-color: var(--rui-local-link-color-active, var(--rui-TextLink--active__color));
$active-text-decoration: var(--rui-TextLink--active__text-decoration);
8 changes: 6 additions & 2 deletions src/styles/elements/_links.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@ a {
text-decoration: links.$decoration;
color: links.$color;

&:hover,
&:focus {
&:hover {
text-decoration: links.$hover-decoration;
color: links.$hover-color;
}

&:active {
text-decoration: links.$active-decoration;
color: links.$active-color;
}
}
6 changes: 3 additions & 3 deletions src/styles/theme/_links.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$color: var(--rui-color-text-link);
$color: var(--rui-local-link-color, var(--rui-color-text-link));
$decoration: var(--rui-text-decoration-link);
$hover-color: var(--rui-color-text-link-hover);
$hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
$hover-decoration: var(--rui-text-decoration-link-hover);
$active-color: var(--rui-color-text-link-active);
$active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
$active-decoration: var(--rui-text-decoration-link-active);
73 changes: 68 additions & 5 deletions src/styles/tools/_collections.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,31 @@
@use "sass:list";
@use "sass:map";
@use "../settings/collections";
@use "string" as rui-string;

// Mixin to generate CSS custom properties for a set of visual properties.
// Function to get the parent collection category by value.
//
// 1. Returns **only the first** matching collection category.
//
// @param {String} $value - The value to get the category for.
// @param {Map} $collections - The collections map to search in.

@function _get-category-by-value($value, $collections) {
@each $category, $values in $collections {
@if list.index($values, $value) {
@return $category; // 1.
}
}

@error
"Supplied value \""
+ $value
+ "\" not found in any category ("
+ map.keys($collections)
+ ")";
}

// Mixin to generate CSS custom properties for a component theme.
//
// 1. Generates a CSS custom property for each property in the `$properties` list.
// 2. Theming of the disabled state is optional, so the `default` theme options are used (via CSS custom property
Expand All @@ -15,7 +40,7 @@
//
// Example:
//
// @include generate-properties(
// @include generate-component-properties(
// $prefix: "rui-",
// $component-name: "Card",
// $variant-name: "color",
Expand All @@ -29,7 +54,7 @@
// --rui-local-border-color: var(--rui-Card--success__border-color);
// --rui-local-background-color: var(--rui-Card--success__background-color);

@mixin generate-properties(
@mixin generate-component-properties(
$prefix,
$component-name,
$modifier-value: null,
Expand Down Expand Up @@ -72,6 +97,38 @@
}
}

// Mixin to generate CSS custom properties for links theme.
//
// 1. Links theming is only available for feedback colors.
//
// @param {String} $prefix - The prefix for the CSS custom properties.
// @param {String} $variant-value - The value of the variant.
//
// Example:
//
// @include generate-link-properties(
// $prefix: "rui-",
// $variant-value: "success",
// );
//
// … will output:
//
// --rui-local-link-color: var(--rui-color-feedback-success);
// --rui-local-link-color-hover: var(--rui-color-feedback-success-hover);
// --rui-local-link-color-active: var(--rui-color-feedback-success-active);

@mixin generate-link-properties($prefix, $variant-value) {
$color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);

// 1.
// TODO: Figure out what to do with the `dark` color category where blue links do not work.
@if $color-category == "feedback" {
--#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$variant-value});
--#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$variant-value}-hover);
--#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$variant-value}-active);
}
}

// Mixin to generate CSS classes for a component variant.
//
// @param {String} $prefix - The prefix for the CSS custom properties.
Expand All @@ -81,6 +138,7 @@
// @param {String} $variant-name - The name of the variant.
// @param {String} $variant-value - The value of the variant.
// @param {Boolean} $generate-interaction-states - Whether to generate interaction states (disabled, hover, active).
// @param {Boolean} $inherit-link-color - Whether to inherit link color from the component variant.
// @param {List} $properties - The list of properties to generate CSS custom properties for.
//
// Examples:
Expand Down Expand Up @@ -147,6 +205,7 @@
$variant-name,
$variant-value,
$generate-interaction-states: false,
$inherit-link-color: false,
$properties,
) {
$modifier-class-name:
Expand All @@ -168,7 +227,7 @@

@each $interaction-state, $interaction-state-selector in $interaction-state-selector-map {
#{$interaction-state-selector} {
@include generate-properties(
@include generate-component-properties(
$prefix: $prefix,
$component-name: $component-name,
$modifier-value: $modifier-value,
Expand All @@ -179,13 +238,17 @@
}
}
} @else {
@include generate-properties(
@include generate-component-properties(
$prefix: $prefix,
$component-name: $component-name,
$modifier-value: $modifier-value,
$variant-value: $variant-value,
$properties: $properties,
);
}

@if $inherit-link-color {
@include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
}
}
}

0 comments on commit 92c0881

Please sign in to comment.