feat: add baseText style

components/TempDesignSystem/Button/button.module.css

@@ -41,6 +41,12 @@ a.inverted {
   border: none;
 }
 
+.text,
+a.text {
+  background: none;
+  border: none;
+}
+
 /* VARIANTS */
 .default,
 a.default {
@@ -227,6 +233,41 @@ a.default {
   fill: var(--Base-Button-Inverted-On-Fill-Disabled);
 }
 
+.baseText {
+  color: var(--Base-Button-Text-On-Fill-Normal, #4d001b);
+}
+
+.baseText:active,
+.baseText:focus,
+.baseText:hover {
+  color: var(--Base-Button-Text-On-Fill-Hover, #8f4350);
+  text-decoration: underline;
+}
+
+.baseText:disabled {
+  color: var(--Base-Button-Text-On-Fill-Disabled, #a8a4a2);
+}
+
+.icon.baseText svg,
+.icon.baseText svg * {
+  fill: var(--Base-Button-Text-On-Fill-Normal, #4d001b);
+}
+
+.icon.baseText:active svg,
+.icon.baseText:focus svg,
+.icon.baseText:hover svg,
+.icon.baseText:active svg *,
+.icon.baseText:focus svg *,
+.icon.baseText:hover svg * {
+  fill: var(--Base-Button-Text-On-Fill-Hover, #8f4350);
+  text-decoration: underline;
+}
+
+.icon.baseText:disabled svg,
+.icon.baseText:disabled svg * {
+  fill: var(--Base-Button-Text-On-Fill-Disabled, #a8a4a2);
+}
+
 .primaryStrongPrimary {
   background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal);
   color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);

components/TempDesignSystem/Button/variants.ts

@@ -9,6 +9,7 @@ export const buttonVariants = cva(styles.btn, {
       primary: styles.primary,
       secondary: styles.secondary,
       tertiary: styles.tertiary,
+      text: styles.text,
     },
     size: {
       small: styles.small,
@@ -128,5 +129,10 @@ export const buttonVariants = cva(styles.btn, {
       intent: "secondary",
       theme: "tertiaryLight",
     },
+    {
+      className: styles.baseText,
+      intent: "text",
+      theme: "base",
+    },
   ],
 })