diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss index 658fe9c5..f78e84cb 100644 --- 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 index 292bfd4d..983fc509 100644 --- 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 `` | -| `--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 `` | +| `--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 index 8dc449e4..e464b33d 100644 --- 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 index d7537a63..1ca76176 100644 --- 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