feat: adjust select rate ui to latest design

components/TempDesignSystem/Button/button.module.css

@@ -55,10 +55,12 @@ a.text {
   border: none;
   outline: none;
 }
+
 /* TODO: The variants for combinations of size/text/wrapping should be looked at and iterated on */
 .text:not(.wrapping) {
   padding: 0 !important;
 }
+
 /* VARIANTS */
 .default,
 a.default {
@@ -827,3 +829,15 @@ a.default {
 .icon.tertiaryLightSecondary:disabled svg * {
   fill: var(--Tertiary-Light-Button-Secondary-On-Fill-Disabled);
 }
+
+button.btn.clean {
+  background: none;
+  background-color: unset;
+  border: none;
+  border-color: unset;
+  border-radius: unset;
+  color: unset;
+  gap: unset;
+  margin: 0;
+  padding: 0;
+}

components/TempDesignSystem/Button/index.tsx

@@ -10,6 +10,7 @@ import type { ButtonProps } from "./button"
 export default function Button(props: ButtonProps) {
   const {
     className,
+    clean,
     intent,
     size,
     theme,
@@ -21,6 +22,7 @@ export default function Button(props: ButtonProps) {
 
   const classNames = buttonVariants({
     className,
+    clean,
     intent,
     size,
     theme,

components/TempDesignSystem/Button/variants.ts

@@ -28,12 +28,16 @@ export const buttonVariants = cva(styles.btn, {
       tertiaryDark: "",
     },
     variant: {
+      clean: styles.clean,
       default: styles.default,
       icon: styles.icon,
     },
     wrapping: {
       true: styles.wrapping,
     },
+    clean: {
+      true: styles.clean,
+    },
     fullWidth: {
       true: styles.fullWidth,
     },

components/TempDesignSystem/Chip/chip.module.css

@@ -1,14 +1,21 @@
 div.chip {
   --chip-text-color: var(--Base-Text-High-contrast);
   --chip-background-color: var(--Base-Surface-Primary-light-Normal);
-  display: flex;
-  justify-content: center;
   align-items: center;
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  gap: var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Small);
   color: var(--chip-text-color);
   background-color: var(--chip-background-color);
+  border-radius: var(--Corner-radius-Small);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: center;
+}
+
+.chip.small {
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+}
+
+.chip.medium {
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
 }
 
 .chip *,
@@ -29,3 +36,8 @@ div.chip {
 .chip.tag {
   --chip-background-color: var(--Base-Surface-Subtle-Hover);
 }
+
+.chip.uiTextHighContrast {
+  --chip-background-color: var(--UI-Text-High-contrast);
+  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
+}

components/TempDesignSystem/Chip/index.tsx

@@ -4,9 +4,15 @@ import { chipVariants } from "./variants"
 
 import type { ChipProps } from "./chip"
 
-export default function Chip({ children, className, variant }: ChipProps) {
+export default function Chip({
+  children,
+  className,
+  size,
+  variant,
+}: ChipProps) {
   const classNames = chipVariants({
     className,
+    size,
     variant,
   })
   return (

components/TempDesignSystem/Chip/variants.ts

@@ -4,14 +4,20 @@ import styles from "./chip.module.css"
 
 export const chipVariants = cva(styles.chip, {
   variants: {
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+    },
     variant: {
       default: styles.default,
       burgundy: styles.burgundy,
       transparent: styles.transparent,
       tag: styles.tag,
+      uiTextHighContrast: styles.uiTextHighContrast,
     },
   },
   defaultVariants: {
+    size: "medium",
     variant: "default",
   },
 })