feat(styles): synced Link component (#1675)

* fix: synced Link styles * fix: updated screenshots * fix: addressed comments * fix: missed dash * feat: updated `font-weight` for button link to be aligned with link * Update packages/react/src/components/Link/index.css Co-authored-by: Jason <jason@scurker.com> * fix: changed font-weight for buttons --------- Co-authored-by: Jason <jason@scurker.com>
dequelabs · Sep 19, 2024 · 8ff3885 · 8ff3885
1 parent e1e6898
commit 8ff3885
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 9 deletions.
diff --git a/e2e/screenshots/button-variant-link-.png b/e2e/screenshots/button-variant-link-.png
diff --git a/e2e/screenshots/dark--button-variant-link-.png b/e2e/screenshots/dark--button-variant-link-.png
diff --git a/e2e/screenshots/dark--link.png b/e2e/screenshots/dark--link.png
diff --git a/e2e/screenshots/link.png b/e2e/screenshots/link.png
diff --git a/packages/react/src/components/Link/index.css b/packages/react/src/components/Link/index.css
@@ -1,3 +1,9 @@
+a.Button--primary,
+a.Button--secondary,
+a.Button--thin {
+  font-weight: var(--font-weight-medium);
+}
+
 a.Button--primary,
 a.Button--secondary {
   text-decoration: none;

diff --git a/packages/styles/base.css b/packages/styles/base.css
@@ -78,7 +78,6 @@ button,
 
 a {
   color: var(--link-text-color);
-  font-weight: var(--font-weight-medium);
 }
 
 p {

diff --git a/packages/styles/button.css b/packages/styles/button.css
@@ -53,6 +53,7 @@
 button.Link {
   cursor: pointer;
   font-size: inherit;
+  font-weight: var(--font-weight-normal);
 }
 
 .Button--primary:focus,

diff --git a/packages/styles/link.css b/packages/styles/link.css
@@ -12,8 +12,6 @@
 .Link {
   text-decoration: underline;
   color: var(--link-text-color);
-  font-weight: var(--font-weight-medium);
-  display: inline-block;
   padding: var(--space-quarter);
   background: transparent;
   vertical-align: baseline;
@@ -29,10 +27,9 @@
   outline-offset: 0;
 }
 
-p .Link {
-  margin: 0 2px;
-  display: inline;
-  text-decoration: underline;
-  color: var(--link-text-color);
-  font-weight: var(--font-weight-normal);
+.Link:has(.Icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-half);
+  flex-wrap: wrap;
 }