Merge branch 'master' into feature/tracking

components/TempDesignSystem/Link/link.module.css

@@ -16,7 +16,7 @@
 .breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -24,7 +24,7 @@
 .link.breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -128,6 +128,15 @@
   color: #000;
 }
 
+.uiTextPlaceholder {
+  color: var(--Base-Text-Placeholder);
+}
+
+.uiTextPlaceholder:hover,
+.uiTextPlaceholder:active {
+  color: var(--Base-Text-Medium-contrast);
+}
+
 .burgundy {
   color: var(--Base-Text-High-contrast);
 }
@@ -211,6 +220,14 @@
   line-height: var(--typography-Caption-Regular-lineHeight);
 }
 
+.tiny {
+  font-family: var(--typography-Footnote-Regular-fontFamily);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: var(--typography-Footnote-Regular-fontWeight);
+  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
+}
+
 .activeSmall {
   font-family: var(--typography-Caption-Bold-fontFamily);
   font-size: var(--typography-Caption-Bold-fontSize);

components/TempDesignSystem/Link/variants.ts

@@ -17,10 +17,12 @@ export const linkVariants = cva(styles.link, {
       peach80: styles.peach80,
       white: styles.white,
       red: styles.red,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     size: {
       small: styles.small,
       regular: styles.regular,
+      tiny: styles.tiny,
     },
     textDecoration: {
       none: styles.noDecoration,