diff --git a/packages/lsd-react/src/components/Button/Button.styles.ts b/packages/lsd-react/src/components/Button/Button.styles.ts
index ed9fd97..5581742 100644
--- a/packages/lsd-react/src/components/Button/Button.styles.ts
+++ b/packages/lsd-react/src/components/Button/Button.styles.ts
@@ -70,13 +70,19 @@ export const ButtonStyles = css`
 
   .${buttonClasses.outlined} {
     background: none;
-    color: rgb(var(--lsd-text-primary));
     border: 1px solid rgb(var(--lsd-border-primary));
+
+    .${buttonClasses.text} {
+      color: rgb(var(--lsd-text-primary));
+    }
   }
 
   .${buttonClasses.filled} {
     background: rgb(var(--lsd-surface-secondary));
-    color: rgb(var(--lsd-text-secondary));
     border: 1px solid rgb(var(--lsd-border-primary));
+
+    .${buttonClasses.text} {
+      color: rgb(var(--lsd-text-secondary));
+    }
   }
 `
diff --git a/packages/lsd-react/src/components/Typography/Typography.styles.ts b/packages/lsd-react/src/components/Typography/Typography.styles.ts
index 000c7af..0243072 100644
--- a/packages/lsd-react/src/components/Typography/Typography.styles.ts
+++ b/packages/lsd-react/src/components/Typography/Typography.styles.ts
@@ -15,16 +15,9 @@ export const TypographyStyles = css`
   }
 
   .${typographyClasses.root} {
-  }
-
-  .${typographyClasses.primary} {
     color: rgb(var(--lsd-text-primary));
   }
 
-  .${typographyClasses.secondary} {
-    color: rgb(var(--lsd-text-secondary));
-  }
-
   .${typographyClasses.sansSerif} {
     &,
     * {
@@ -57,6 +50,14 @@ export const TypographyStyles = css`
     `,
   )}
 
+  .${typographyClasses.primary} {
+    color: rgb(var(--lsd-text-primary));
+  }
+
+  .${typographyClasses.secondary} {
+    color: rgb(var(--lsd-text-secondary));
+  }
+
   input {
     color: rgb(var(--lsd-text-primary));
     font-size: var(--lsd-body1-fontSize);