Allow configuration of font weight of links inside Alert #577

Default font weight of links is now set to "regular" so it is consistent with other links in React UI. However, it remains configurable because of downstream project requirements.
react-ui-org · Dec 2, 2024 · 78aacd9 · 78aacd9
1 parent bac1e21
commit 78aacd9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss
@@ -46,7 +46,11 @@
         line-height: settings.$line-height;
     }
 
-    .message :is(a, strong) {
+    .message a {
+        font-weight: theme.$link-font-weight;
+    }
+
+    .message strong {
         font-weight: theme.$emphasis-font-weight;
     }
 

diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
@@ -201,14 +201,15 @@ helps to improve its accessibility.
 
 ### Common Theming Options
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Alert__padding`                               | Padding between border and message                           |
-| `--rui-Alert__font-weight`                           | Message font weight                                          |
-| `--rui-Alert__border-width`                          | Border width                                                 |
-| `--rui-Alert__border-radius`                         | Corner radius                                                |
-| `--rui-Alert__emphasis__font-weight`                 | Font weight of text emphasised with `<strong>`               |
-| `--rui-Alert__stripe__width`                         | Width of the border at the start of the Alert                |
+| Custom Property                      | Description                                    |
+|--------------------------------------|------------------------------------------------|
+| `--rui-Alert__padding`               | Padding between border and message             |
+| `--rui-Alert__font-weight`           | Message font weight                            |
+| `--rui-Alert__border-width`          | Border width                                   |
+| `--rui-Alert__border-radius`         | Corner radius                                  |
+| `--rui-Alert__emphasis__font-weight` | Font weight of text emphasised with `<strong>` |
+| `--rui-Alert__link__font-weight`     | Font weight of links inside Alert              |
+| `--rui-Alert__stripe__width`         | Width of the border at the start of the Alert  |
 
 ### Theming Variants
 

diff --git a/src/components/Alert/_theme.scss b/src/components/Alert/_theme.scss
@@ -3,4 +3,5 @@ $font-weight: var(--rui-Alert__font-weight);
 $border-width: var(--rui-Alert__border-width);
 $border-radius: var(--rui-Alert__border-radius);
 $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight);
+$link-font-weight: var(--rui-Alert__link__font-weight);
 $stripe-width: var(--rui-Alert__stripe__width);
diff --git a/src/theme.scss b/src/theme.scss
@@ -264,6 +264,7 @@
         --rui-Alert__border-width: var(--rui-dimension-border-width-1);
         --rui-Alert__border-radius: var(--rui-dimension-radius-2);
         --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold);
+        --rui-Alert__link__font-weight: var(--rui-font-weight-regular);
         --rui-Alert__stripe__width: var(--rui-dimension-border-width-1);
 
         // Alert: variant: success