Skip to content

Commit d1592ef

Browse files
adamkudrnaadamkudrna
committed
Inherit link color in components using the Feedback color collection (#492)
1 parent db3b229 commit d1592ef

File tree

9 files changed

+147
-25
lines changed

9 files changed

+147
-25
lines changed

‎src/components/Alert/Alert.module.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,11 @@
4646
line-height: settings.$line-height;
4747
}
4848

49-
.message a,
50-
.message strong {
49+
.message :is(a, strong) {
5150
font-weight: theme.$emphasis-font-weight;
51+
}
52+
53+
.message strong {
5254
color: var(--rui-local-foreground-color);
5355
}
5456

@@ -73,6 +75,7 @@
7375
$variant-name: "color",
7476
$variant-value: $color,
7577
$properties: settings.$themeable-properties,
78+
$inherit-link-color: true,
7679
);
7780
}
7881
}

‎src/components/Alert/README.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ Success alerts confirm that an operation has been processed successfully.
4141
```docoff-react-preview
4242
<Alert color="success">
4343
<strong>Success:</strong> Settings have been successfully saved.
44+
{' '}
45+
<TextLink href="/" label="Undo" />
4446
</Alert>
4547
```
4648

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

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

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

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

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

@@ -111,6 +119,8 @@ Light alert variant.
111119
<docoff-placeholder dark>
112120
<Alert color="light">
113121
<strong>Light alert:</strong> Stands out on dark backgrounds.
122+
{' '}
123+
<TextLink href="/" label="This is a link" />
114124
</Alert>
115125
</docoff-placeholder>
116126
```
@@ -122,6 +132,7 @@ Dark alert variant.
122132
```docoff-react-preview
123133
<Alert color="dark">
124134
<strong>Dark alert:</strong> Stands out on light backgrounds.
135+
<TextLink href="/" label="This is a link" />
125136
</Alert>
126137
```
127138

‎src/components/Card/Card.module.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,19 @@
3434
box-shadow: theme.$raised-box-shadow;
3535
}
3636

37+
.isRootDisabled {
38+
background-color: theme.$disabled-background-color;
39+
opacity: theme.$disabled-opacity;
40+
}
41+
3742
@each $color in settings.$colors {
3843
@include collections.generate-class(
3944
$prefix: "rui-",
4045
$component-name: "Card",
4146
$variant-name: "color",
4247
$variant-value: $color,
48+
$inherit-link-color: true,
4349
$properties: settings.$themeable-properties,
4450
);
4551
}
46-
47-
.isRootDisabled {
48-
background-color: theme.$disabled-background-color;
49-
opacity: theme.$disabled-opacity;
50-
}
5152
}

‎src/components/Card/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,8 @@ To cover all possible needs of your project, Card is available in colors from
154154
<Card color="success">
155155
<CardBody>
156156
Hello! I&apos;m success variant of card.
157+
{' '}
158+
<TextLink href="/" label="This is a link" />
157159
</CardBody>
158160
<CardFooter>
159161
<Button label="Read more" priority="outline" color="success" />
@@ -162,6 +164,8 @@ To cover all possible needs of your project, Card is available in colors from
162164
<Card color="warning">
163165
<CardBody>
164166
Hello! I&apos;m warning variant of card.
167+
{' '}
168+
<TextLink href="/" label="This is a link" />
165169
</CardBody>
166170
<CardFooter>
167171
<Button label="Read more" priority="outline" color="warning" />
@@ -170,6 +174,8 @@ To cover all possible needs of your project, Card is available in colors from
170174
<Card color="danger">
171175
<CardBody>
172176
Hello! I&apos;m danger variant of card.
177+
{' '}
178+
<TextLink href="/" label="This is a link" />
173179
</CardBody>
174180
<CardFooter>
175181
<Button label="Read more" priority="outline" color="danger" />
@@ -178,6 +184,8 @@ To cover all possible needs of your project, Card is available in colors from
178184
<Card color="help">
179185
<CardBody>
180186
Hello! I&apos;m help variant of card.
187+
{' '}
188+
<TextLink href="/" label="This is a link" />
181189
</CardBody>
182190
<CardFooter>
183191
<Button label="Read more" priority="outline" color="help" />
@@ -186,6 +194,8 @@ To cover all possible needs of your project, Card is available in colors from
186194
<Card color="info">
187195
<CardBody>
188196
Hello! I&apos;m info variant of card.
197+
{' '}
198+
<TextLink href="/" label="This is a link" />
189199
</CardBody>
190200
<CardFooter>
191201
<Button label="Read more" priority="outline" color="info" />
@@ -194,6 +204,8 @@ To cover all possible needs of your project, Card is available in colors from
194204
<Card color="note">
195205
<CardBody>
196206
Hello! I&apos;m note variant of card.
207+
{' '}
208+
<TextLink href="/" label="This is a link" />
197209
</CardBody>
198210
<CardFooter>
199211
<Button label="Read more" priority="outline" color="note" />
@@ -202,6 +214,8 @@ To cover all possible needs of your project, Card is available in colors from
202214
<Card>
203215
<CardBody>
204216
Hello! I&apos;m light (default) variant of card.
217+
{' '}
218+
<TextLink href="/" label="This is a link" />
205219
</CardBody>
206220
<CardFooter>
207221
<Button label="Read more" priority="outline" color="dark" />
@@ -210,6 +224,8 @@ To cover all possible needs of your project, Card is available in colors from
210224
<Card color="dark">
211225
<CardBody>
212226
Hello! I&apos;m dark variant of card.
227+
{' '}
228+
<TextLink href="/" label="This is a link" />
213229
</CardBody>
214230
<CardFooter>
215231
<Button label="Read more" priority="outline" color="light" />
@@ -228,6 +244,8 @@ its interactive elements to disallow user's interaction.
228244
<Card disabled>
229245
<CardBody>
230246
Hello! I&apos;m a disabled card.
247+
{' '}
248+
<TextLink href="/" label="This is a link" />
231249
</CardBody>
232250
<CardFooter>
233251
<Button label="Read more" priority="outline" disabled />
@@ -236,6 +254,8 @@ its interactive elements to disallow user's interaction.
236254
<Card disabled raised>
237255
<CardBody>
238256
Hello! I&apos;m a disabled raised card.
257+
{' '}
258+
<TextLink href="/" label="This is a link" />
239259
</CardBody>
240260
<CardFooter>
241261
<Button label="Read more" priority="outline" disabled />
@@ -244,6 +264,8 @@ its interactive elements to disallow user's interaction.
244264
<Card color="success" disabled>
245265
<CardBody>
246266
Hello! I&apos;m a disabled success variant of card.
267+
{' '}
268+
<TextLink href="/" label="This is a link" />
247269
</CardBody>
248270
<CardFooter>
249271
<Button label="Read more" priority="outline" color="success" disabled />

‎src/components/TextLink/README.md‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,20 @@ helps to improve its accessibility.
6464

6565
## Theming
6666

67+
ℹ️ The TextLink component is context-aware and can inherit text color from its
68+
parent component. This applies for components using
69+
[Feedback color collection](/docs/foundation/collections#colors) and for
70+
components in any of the supported
71+
[validation states](/docs/foundation/colors#validation-states).
72+
In such cases, the custom properties marked with an asterisk (\*) are ignored.
73+
6774
| Custom Property | Description |
6875
|-------------------------------------------|-------------------------------------|
69-
| `--rui-TextLink__color` | Text color |
76+
| `--rui-TextLink__color` \* | Text color |
7077
| `--rui-TextLink__text-decoration` | Text decoration, e.g. underline |
71-
| `--rui-TextLink--hover__color` | Text color on hover |
78+
| `--rui-TextLink--hover__color` \* | Text color on hover |
7279
| `--rui-TextLink--hover__text-decoration` | Text decoration on hover |
73-
| `--rui-TextLink--active__color` | Text color in the active state |
80+
| `--rui-TextLink--active__color` \* | Text color in the active state |
7481
| `--rui-TextLink--active__text-decoration` | Text decoration in the active state |
7582

7683
[a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes

‎src/components/TextLink/_theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
$color: var(--rui-TextLink__color);
1+
$color: var(--rui-local-link-color, var(--rui-TextLink__color));
22
$text-decoration: var(--rui-TextLink__text-decoration);
3-
$hover-color: var(--rui-TextLink--hover__color);
3+
$hover-color: var(--rui-local-link-color-hover, var(--rui-TextLink--hover__color));
44
$hover-text-decoration: var(--rui-TextLink--hover__text-decoration);
5-
$active-color: var(--rui-TextLink--active__color);
5+
$active-color: var(--rui-local-link-color-active, var(--rui-TextLink--active__color));
66
$active-text-decoration: var(--rui-TextLink--active__text-decoration);

‎src/styles/elements/_links.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ a {
44
text-decoration: links.$decoration;
55
color: links.$color;
66

7-
&:hover,
8-
&:focus {
7+
&:hover {
98
text-decoration: links.$hover-decoration;
109
color: links.$hover-color;
1110
}
11+
12+
&:active {
13+
text-decoration: links.$active-decoration;
14+
color: links.$active-color;
15+
}
1216
}

‎src/styles/theme/_links.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
$color: var(--rui-color-text-link);
1+
$color: var(--rui-local-link-color, var(--rui-color-text-link));
22
$decoration: var(--rui-text-decoration-link);
3-
$hover-color: var(--rui-color-text-link-hover);
3+
$hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
44
$hover-decoration: var(--rui-text-decoration-link-hover);
5-
$active-color: var(--rui-color-text-link-active);
5+
$active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
66
$active-decoration: var(--rui-text-decoration-link-active);

0 commit comments

Comments
 (0)