diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss index 658fe9c5..92e31ffa 100644 --- a/src/components/Alert/Alert.module.scss +++ b/src/components/Alert/Alert.module.scss @@ -25,8 +25,8 @@ padding: theme.$padding; } - .close, - .icon { + .icon, + .close { height: settings.$min-height; color: var(--rui-local-foreground-color); } @@ -46,11 +46,8 @@ line-height: settings.$line-height; } - .message :is(a, strong) { - font-weight: theme.$emphasis-font-weight; - } - .message strong { + font-weight: theme.$emphasis-font-weight; color: var(--rui-local-foreground-color); } diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md index 292bfd4d..7d5e5f2b 100644 --- a/src/components/Alert/README.md +++ b/src/components/Alert/README.md @@ -201,14 +201,14 @@ 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__stripe__width` | Width of the border at the start of the Alert | ### Theming Variants diff --git a/src/styles/elements/_links.scss b/src/styles/elements/_links.scss index 30f62de2..724a9231 100644 --- a/src/styles/elements/_links.scss +++ b/src/styles/elements/_links.scss @@ -2,6 +2,7 @@ a { text-decoration: links.$decoration; + text-underline-offset: links.$underline-offset; color: links.$color; &:hover { diff --git a/src/styles/theme/_links.scss b/src/styles/theme/_links.scss index c3fc7e26..67219d42 100644 --- a/src/styles/theme/_links.scss +++ b/src/styles/theme/_links.scss @@ -1,5 +1,6 @@ $color: var(--rui-local-link-color, var(--rui-color-text-link)); $decoration: var(--rui-text-decoration-link); +$underline-offset: var(--rui-underline-offset-link); $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-local-link-color-active, var(--rui-color-text-link-active)); diff --git a/src/theme.scss b/src/theme.scss index d7537a63..8415f20b 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -109,7 +109,8 @@ --rui-line-height-small: 1.25; // Text decorations - --rui-text-decoration-link: none; + --rui-underline-offset-link: 0.1875em; + --rui-text-decoration-link: underline; --rui-text-decoration-link-hover: underline; --rui-text-decoration-link-active: underline;