fix: update styles as per design

* fix: Calendar and date picker not clickable when clicking on sides

* feat: Updated to new button designs

* fix: Calendar action buttons are not center aligned, cannot click on calendar buttons due to parent padding

* fix: Textfield layout shift and font-size

* fix: Design QA changes

* fix: Select layout change on state change

packages/raystack/button/button.module.css

@@ -11,8 +11,8 @@
   line-height: var(--fs-600);
   width: fit-content;
   transition: background-color var(--transition);
-  padding:  var(--pd-4) var(--pd-12);
-  border-radius: var(--br-4);  
+  padding: var(--pd-4) var(--pd-12);
+  border-radius: var(--br-4);
 }
 
 .button:before {
@@ -29,8 +29,7 @@
 }
 
 .button-small {
-  padding-top: var(--pd-4);
-  padding-bottom: var(--pd-4);
+  padding: var(--pd-4) var(--pd-8);
 }
 
 .button-medium {
@@ -48,72 +47,71 @@
   padding-bottom: var(--pd-8);
   width: 24px;
   height: 24px;
-  border-radius: var(--br-round);  
+  border-radius: var(--br-round);
 }
 
-
 .button-primary {
-  color: var(--foreground-inverted);
-  background-color: var(--background-accent-inverted)
+  color: var(--ascent-contrast);
+  background-color: var(--background-accent-inverted);
 }
 
-.button-primary:hover, 
+.button-primary:hover,
 .button-primary:active,
 .button-primary[data-radix-popover-trigger][data-state="open"],
 .button-primary[data-radix-dropdown-menu-trigger][data-state="open"] {
-  background-color: var(--background-accent-inverted-hover)
+  background-color: var(--background-accent-inverted-hover);
 }
 
 .button-outline {
   color: var(--foreground-accent);
   background-color: var(--background-base);
-  border: 1px solid var(--border-accent-inverted);
+  outline: 1px solid var(--border-accent-inverted);
 }
 
-.button-outline:hover, 
+.button-outline:hover,
 .button-outline:active,
 .button-outline[data-radix-popover-trigger][data-state="open"],
 .button-outline[data-radix-dropdown-menu-trigger][data-state="open"] {
   background-color: var(--background-accent);
-  border: 1px solid var(--border-accent-inverted-hover);
+  outline: 1px solid var(--border-accent-inverted-hover);
 }
 
 .button-secondary {
   color: var(--foreground-base);
   background-color: var(--background-base);
-  border: 1px solid var(--border-base)
+  outline: 1px solid var(--border-base);
 }
 
-.button-secondary:hover, 
+.button-secondary:hover,
 .button-secondary:active,
 .button-secondary[data-radix-popover-trigger][data-state="open"],
 .button-secondary[data-radix-dropdown-menu-trigger][data-state="open"] {
   background-color: var(--background-base-hover);
-  border: 1px solid var(--border-base-hover);
+  outline: 1px solid var(--border-base-hover);
 }
 
 .button-ghost {
   color: var(--foreground-base);
   background-color: var(--background-base);
-  border: 1px dotted var(--border-base);
+  outline: 1px dashed var(--border-base);
 }
 
-.button-ghost:hover, 
+.button-ghost:hover,
 .button-ghost:active,
 .button-ghost[data-radix-popover-trigger][data-state="open"],
 .button-ghost[data-radix-dropdown-menu-trigger][data-state="open"] {
   background-color: var(--background-base-hover);
-  border: 1px dotted var(--border-base-hover);
+  outline: 1px dashed var(--border-base-hover);
 }
 
 .button-danger {
-  color: var(--foreground-inverted);
-  background-color: var(--background-danger-inverted)
+  color: var(--ascent-contrast);
+  background-color: var(--background-danger-inverted);
 }
 
-.button-danger:hover, 
+.button-danger:hover,
 .button-danger:active,
 .button-danger[data-radix-popover-trigger][data-state="open"],
 .button-danger[data-radix-dropdown-menu-trigger][data-state="open"] {
-  background-color: var(--background-danger-inverted-hover)
+  background-color: var(--background-danger-inverted-hover);
 }

packages/raystack/calendar/calendar.module.css

@@ -32,10 +32,12 @@
 
 .nav_button_previous {
   left: 0;
+  height: 100%;
 }
 
 .nav_button_next {
   right: 0;
+  height: 100%;
 }
 
 .head {
@@ -56,9 +58,6 @@
 }
 
 .cell {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 36px;
   height: 36px;
   background-color: var(--background-base);
@@ -114,6 +113,8 @@
   width: 100%;
   height: 100%;
   padding: unset;
+  display: grid;
+  place-content: center;
 }
 
 .day_outside {

packages/raystack/calendar/calendar.tsx

@@ -39,6 +39,7 @@ export const Calendar = function ({
         day_range_end: styles.day_range_end,
         day_range_start: styles.day_range_start,
         months: styles.months,
+        // button: styles.button,
         ...classNames,
       }}
       className={root({ className })}

packages/raystack/select/select.module.css

@@ -10,26 +10,26 @@
   background-color: var(--background-base);
   border-radius: var(--br-4);
   box-shadow: var(--shadow-xs);
-  border: 1px solid var(--border-subtle);
+  outline: 1px solid var(--border-subtle);
 }
 
 .menuitem {
   display: flex;
   align-items: center;
   position: relative;
-  
+
   gap: var(--pd-4);
   padding: var(--pd-4) var(--pd-8);
   color: var(--foreground-base);
 }
 
-.menuitem:hover, 
+.menuitem:hover,
 .menuitem:focus,
 .menuitem[data-highlighted] {
   outline: none;
   cursor: pointer;
   border-radius: var(--br-4);
-  background: var(--background-base-hover)
+  background: var(--background-base-hover);
 }
 
 .menuitem[data-disabled] {
@@ -41,44 +41,42 @@
   height: 14px;
   width: 14px;
   display: flex;
-  justify-content: center; 
+  justify-content: center;
   align-items: center;
 }
 
-.label{
+.label {
   padding: var(--pd-6) var(--pd-8);
   font-weight: 500;
 }
-.separator{
+.separator {
   height: 1px;
   margin: var(--mr-4) calc(var(--mr-8) * -1);
-  background: var(--background-inset)
+  background: var(--background-inset);
 }
 
-.menugroup{
+.menugroup {
   padding: var(--pd-8);
 }
 
-
-
 .trigger {
-  display: flex; 
-  justify-content: space-between; 
-  align-items: center; 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   outline: none;
 
   color: var(--foreground-base);
   padding: var(--pd-4) var(--pd-12);
-  background-color: var(--background-base); 
+  background-color: var(--background-base);
   font-size: 12px;
-  line-height: 16px; 
+  line-height: 16px;
   border-radius: var(--br-4);
-  border: 0.5px solid var(--border-base);
+  outline: 0.5px solid var(--border-base);
   box-shadow: var(--shadow-xs);
 }
 
 .trigger:focus {
-  border: 1px solid var(--border-accent-inverted)
+  outline: 1px solid var(--border-accent-inverted);
 }
 
 .trigger:disabled {
@@ -97,4 +95,4 @@
   height: 16px;
   opacity: 0.5;
   margin-left: var(--mr-8);
-}
+}

packages/raystack/style.css

@@ -41,6 +41,8 @@
   --border-success: #92ceac;
   --border-success-inverted: #30a46c;
 
+  --ascent-contrast: #fff;
+
   --ff-inter: "Inter", -apple-system, system-ui, sans-serif;
   --ff-mono: Söhne Mono, menlo, monospace;
 
@@ -114,6 +116,8 @@ html[data-theme="dark"] {
   --background-success: #16301d;
   --background-success-inverted: #46a758;
 
+  --ascent-contrast: #fff;
+
   --border-base: #3a3f42;
   --border-base-hover: #4c5155;
   --border-muted: #313538;

packages/raystack/textfield/textfield.module.css

@@ -6,27 +6,28 @@
   padding: 0;
   height: auto;
   width: 100%;
-
   background-color: var(--background-base);
-  border: 0.5px solid var(--border-base);
+  outline: 0.5px solid var(--border-base);
+  border: none;
   box-shadow: var(--shadow-xs);
   border-radius: var(--br-4);
   color: var(--foreground-base);
   padding: var(--pd-4);
+  letter-spacing: 0.4px;
+  line-height: 16px;
 }
 
 .textfield:-webkit-autofill {
   box-shadow: var(--shadow-xs);
 }
 
 .textfield:focus {
-  border: 1px solid var(--background-accent-inverted);
+  outline: 1px solid var(--background-accent-inverted);
 }
 
 .textfield::placeholder {
   color: var(--foreground-subtle);
   font-size: 12px;
-  line-height: 16px;
 }
 
 .textfield:disabled {
@@ -42,30 +43,28 @@
 .textfield-sm {
   border-radius: var(--br-4);
   font-size: 12px;
-  line-height: 16px;
-  padding: var(--pd-4);
+  padding: var(--pd-4) var(--pd-8);
 }
 
 .textfield-md {
   border-radius: var(--br-4);
-  font-size: 13px;
-  line-height: 16px;
+  font-size: 12px;
   padding: var(--pd-8);
 }
 
 .textfield-invlid {
-  border: 1px solid var(--border-danger);
+  outline: 1px solid var(--border-danger);
 }
 .textfield-invlid:focus {
-  border: 1px solid var(--border-danger);
+  outline: 1px solid var(--border-danger);
 }
 
 .textfield-valid {
-  border: 1px solid var(--border-success);
+  outline: 1px solid var(--border-success);
 }
 
 .textfield-valid:focus {
-  border: 1px solid var(--border-success);
+  outline: 1px solid var(--border-success);
 }
 
 .textfield-leading {

packages/raystack/textfield/textfield.tsx

@@ -34,11 +34,22 @@ export type TextfieldProps = Omit<
   PropsWithChildren<VariantProps<typeof textfield>> & {
     leading?: React.ReactElement;
     trailing?: React.ReactElement;
+    iconClass?: { leadingIcon?: string; trailingIcon?: string };
   };
 
 export const TextField = forwardRef<HTMLInputElement, TextfieldProps>(
   (
-    { leading, trailing, className, src, size, state, style, ...props },
+    {
+      leading,
+      trailing,
+      className,
+      src,
+      size,
+      state,
+      style,
+      iconClass,
+      ...props
+    },
     ref
   ) => {
     const hasLeadingElement = Boolean(leading);
@@ -47,10 +58,14 @@ export const TextField = forwardRef<HTMLInputElement, TextfieldProps>(
     return (
       <Flex align="center" style={{ position: "relative", width: "100%" }}>
         {hasLeadingElement ? (
-          <Flex style={{ left: "8px" }} className={styles.leadingIcon}>
+          <Flex
+            style={{ left: "8px" }}
+            className={cx(styles.leadingIcon, iconClass?.leadingIcon)}
+          >
             {leading}
           </Flex>
         ) : null}
+
         <input
           className={cx(
             textfield({
@@ -64,8 +79,12 @@ export const TextField = forwardRef<HTMLInputElement, TextfieldProps>(
           {...props}
           ref={ref}
         />
+
         {hasTrailingElement ? (
-          <Flex style={{ right: "8px" }} className={styles.trailingIcon}>
+          <Flex
+            style={{ right: "8px" }}
+            className={cx(styles.trailingIcon, iconClass?.trailingIcon)}
+          >
             {trailing}
           </Flex>
         ) : null}

packages/raystack/tooltip/tooltip.module.css

@@ -9,4 +9,9 @@
   border: 1px solid var(--border-subtle);
   padding: var(--pd-4) var(--pd-8);
   border-radius: var(--br-4);
+  width: 280px;
+  color: var(--foreground-base);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
 }