feat(SW-66, SW-348): search functionality and ui

components/TempDesignSystem/Text/Body/body.module.css

@@ -87,3 +87,7 @@
 .peach80 {
   color: var(--Base-Text-Medium-contrast);
 }
+
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}

components/TempDesignSystem/Text/Body/variants.ts

@@ -14,6 +14,7 @@ const config = {
       white: styles.white,
       peach50: styles.peach50,
       peach80: styles.peach80,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     textAlign: {
       center: styles.textAlignCenter,

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -59,6 +59,10 @@
   color: var(--UI-Opacity-White-100);
 }
 
+.uiTextActive {
+  color: var(--UI-Text-Active);
+}
+
 .center {
   text-align: center;
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -11,6 +11,7 @@ const config = {
       textMediumContrast: styles.textMediumContrast,
       red: styles.red,
       white: styles.white,
+      uiTextActive: styles.uiTextActive,
     },
     textTransform: {
       bold: styles.bold,

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -62,3 +62,7 @@
 .textMediumContrast {
   color: var(--UI-Text-Medium-contrast);
 }
+
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -10,6 +10,7 @@ const config = {
       pale: styles.pale,
       peach50: styles.peach50,
       textMediumContrast: styles.textMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     textAlign: {
       center: styles.center,