braid-design-system 32.12.3 → 32.12.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/styles/lib/components/TextLink/TextLink.css.cjs +13 -4
  3. package/dist/styles/lib/components/TextLink/TextLink.css.mjs +13 -4
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # braid-design-system
2
2
 
3
+ ## 32.12.4
4
+
5
+ ### Patch Changes
6
+
7
+ - **TextLink, TextLinkButton:** Ensure consistent underline thickness on weak links ([#1380](https://github.com/seek-oss/braid-design-system/pull/1380))
8
+
9
+ A subtle bug affecting weak links was resulting in a change in underline thickness on hover.
10
+ This bug has been fixed such that weak links now always have the same underline thickness regardless of hover state.
11
+
3
12
  ## 32.12.3
4
13
 
5
14
  ### Patch Changes
package/dist/styles/lib/components/TextLink/TextLink.css.cjs CHANGED
@@ -20,16 +20,17 @@ const weakLinkVars = css.assignVars(textLinkVars, {
20
20
  color: "inherit",
21
21
  colorHover: "inherit"
22
22
  });
23
+ const textDecorationThickness = "0.08em";
23
24
  const base = css.style({
24
25
  color: textLinkVars.color,
25
26
  textDecoration: styles_lib_themes_vars_css_cjs.vars.linkDecoration,
26
- textDecorationThickness: "0.08em",
27
+ textDecorationThickness,
27
28
  textUnderlineOffset: 3,
28
29
  ":hover": {
29
30
  color: textLinkVars.colorHover,
30
31
  textDecoration: "underline",
31
32
  /*
32
- Duplicating the thickness rule due to inconsistent support
33
+ Duplicating the thickness property due to inconsistent support
33
34
  for shorthand properties of `text-decoration`. Without this,
34
35
  applying the above decoration rule resets the thickness in
35
36
  browsers that do support shorthands.
@@ -37,7 +38,7 @@ const base = css.style({
37
38
  We also cannot use the long-form `text-decoration-line` due
38
39
  to browser support policy of Edge 16+.
39
40
  */
40
- textDecorationThickness: "0.08em"
41
+ textDecorationThickness
41
42
  },
42
43
  ":focus-visible": {
43
44
  color: textLinkVars.colorHover,
@@ -48,7 +49,15 @@ const base = css.style({
48
49
  }, "base");
49
50
  const weakLink = css.style({
50
51
  vars: weakLinkVars,
51
- textDecoration: "underline"
52
+ textDecoration: "underline",
53
+ /*
54
+ Duplicating the thickness property again as the `textDecoration`
55
+ property above overrides the `textDecorationThickness` property
56
+ in the `base` style due to CSS rule ordering. Without this property,
57
+ weak links were receiving `auto` thickness instead of the desired
58
+ value.
59
+ */
60
+ textDecorationThickness
52
61
  }, "weakLink");
53
62
  const regularLinkLightMode = css.styleVariants({
54
63
  light: {
package/dist/styles/lib/components/TextLink/TextLink.css.mjs CHANGED
@@ -19,16 +19,17 @@ const weakLinkVars = assignVars(textLinkVars, {
19
19
  color: "inherit",
20
20
  colorHover: "inherit"
21
21
  });
22
+ const textDecorationThickness = "0.08em";
22
23
  const base = style({
23
24
  color: textLinkVars.color,
24
25
  textDecoration: vars.linkDecoration,
25
- textDecorationThickness: "0.08em",
26
+ textDecorationThickness,
26
27
  textUnderlineOffset: 3,
27
28
  ":hover": {
28
29
  color: textLinkVars.colorHover,
29
30
  textDecoration: "underline",
30
31
  /*
31
- Duplicating the thickness rule due to inconsistent support
32
+ Duplicating the thickness property due to inconsistent support
32
33
  for shorthand properties of `text-decoration`. Without this,
33
34
  applying the above decoration rule resets the thickness in
34
35
  browsers that do support shorthands.
@@ -36,7 +37,7 @@ const base = style({
36
37
  We also cannot use the long-form `text-decoration-line` due
37
38
  to browser support policy of Edge 16+.
38
39
  */
39
- textDecorationThickness: "0.08em"
40
+ textDecorationThickness
40
41
  },
41
42
  ":focus-visible": {
42
43
  color: textLinkVars.colorHover,
@@ -47,7 +48,15 @@ const base = style({
47
48
  }, "base");
48
49
  const weakLink = style({
49
50
  vars: weakLinkVars,
50
- textDecoration: "underline"
51
+ textDecoration: "underline",
52
+ /*
53
+ Duplicating the thickness property again as the `textDecoration`
54
+ property above overrides the `textDecorationThickness` property
55
+ in the `base` style due to CSS rule ordering. Without this property,
56
+ weak links were receiving `auto` thickness instead of the desired
57
+ value.
58
+ */
59
+ textDecorationThickness
51
60
  }, "weakLink");
52
61
  const regularLinkLightMode = styleVariants({
53
62
  light: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "braid-design-system",
3
- "version": "32.12.3",
3
+ "version": "32.12.4",
4
4
  "description": "Themeable design system for the SEEK Group",
5
5
  "homepage": "https://seek-oss.github.io/braid-design-system/",
6
6
  "bugs": {