@mekari/pixel3-theme 0.3.0-dev.4 → 0.3.0-dev.5

package/dist/index.js

@@ -2780,7 +2780,7 @@ var radioSlotRecipe = (0, import_dev19.defineSlotRecipe)({
 var import_dev20 = require("@pandacss/dev");
 var sharedSlotRecipe = (0, import_dev20.defineSlotRecipe)({
   className: "shared",
-  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
+  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio", "MpToggle", "mp-toggle"],
   slots: ["hidden"],
   base: {
     hidden: {
@@ -2973,10 +2973,42 @@ var tableRecipe = (0, import_dev22.defineRecipe)({
         _nextTheme: {
           boxShadow: "0px 2px var(--mp-colors-border-default)"
         }
+      },
+      "&[data-table-head-narrowed=true]": {
+        "& th": {
+          paddingY: "2",
+          paddingLeft: "2",
+          paddingRight: "4"
+        }
+      },
+      "&[data-table-head-bordered=true]": {
+        "& th:nth-last-child(n+2)": {
+          borderRightWidth: "sm",
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.default"
+          }
+        }
       }
     },
     "& > tbody": {
-      width: "full"
+      width: "full",
+      "&[data-table-head-narrowed=true]": {
+        "& td": {
+          paddingY: "2",
+          paddingLeft: "2",
+          paddingRight: "4"
+        }
+      },
+      "&[data-table-head-bordered=true]": {
+        "& td:nth-last-child(n+2)": {
+          borderRightWidth: "sm",
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.default"
+          }
+        }
+      }
     },
     "& > tr": {
       width: "full",
@@ -2985,9 +3017,9 @@ var tableRecipe = (0, import_dev22.defineRecipe)({
     },
     "& th, & td": {
       cursor: "default",
+      paddingY: "4",
       paddingLeft: "2",
       paddingRight: "4",
-      height: "52px",
       textStyle: "label.md",
       textAlign: "left",
       color: "dark",
@@ -3218,7 +3250,6 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
     },
     trigger: {
       overflowY: "auto",
-      overflowX: "hidden",
       position: "relative",
       display: "flex",
       alignItems: "center",
@@ -3290,26 +3321,13 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
       }
     },
     input: {
-      appearance: "none",
-      outline: "none",
-      transition: "none",
-      width: "full",
-      textStyle: "label.md",
-      color: "dark",
-      _nextTheme: {
-        color: "text.default"
-      },
+      padding: "0 !important",
+      margin: "0 !important",
+      borderWidth: "0 !important",
       _placeholder: {
         color: "gray.400",
         _nextTheme: {
-          color: "text.placeholder"
-        }
-      },
-      _disabled: {
-        cursor: "not-allowed",
-        color: "gray.400",
-        _nextTheme: {
-          color: "text.disabled"
+          borderColor: "text.placeholder"
         }
       }
     },
@@ -6162,35 +6180,63 @@ var aireneInputSlotRecipe = (0, import_dev46.defineSlotRecipe)({
       alignItems: "flex-end",
       gap: "2",
       width: "full",
-      py: "xs",
-      px: "md",
+      py: "2",
+      px: "4",
       rounded: "full",
       borderWidth: "1px",
-      borderColor: "border.default",
-      backgroundColor: "background.neutral",
-      color: "text.default",
+      borderColor: "gray.100",
+      backgroundColor: "white",
+      color: "dark",
       transitionDuration: "250ms",
       transitionProperty: "border-color",
       transitionTimingFunction: "linear",
+      _nextTheme: {
+        gap: "xs",
+        py: "xs",
+        px: "md",
+        borderColor: "border.default",
+        backgroundColor: "background.neutral",
+        color: "text.default"
+      },
       _hover: {
-        borderColor: "border.focused"
+        borderColor: "blue.400",
+        _nextTheme: {
+          borderColor: "border.focused"
+        }
       },
       _focusWithin: {
-        borderColor: "border.focused"
+        borderColor: "blue.400",
+        _nextTheme: {
+          borderColor: "border.focused"
+        }
       },
       _invalid: {
-        borderColor: "border.danger",
-        _hover: {
+        borderColor: "red.400",
+        _nextTheme: {
           borderColor: "border.danger"
+        },
+        _hover: {
+          borderColor: "border.danger",
+          _nextTheme: {
+            borderColor: "red.400"
+          }
         }
       },
       _disabled: {
-        backgroundColor: "background.disabled",
-        borderColor: "border.disabled",
-        color: "text.disabled",
+        backgroundColor: "gray,50",
+        borderColor: "gray.100",
+        color: "gray.400",
         cursor: "not-allowed",
+        _nextTheme: {
+          backgroundColor: "background.disabled",
+          borderColor: "border.disabled",
+          color: "text.disabled"
+        },
         _hover: {
-          borderColor: "border.disabled"
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.disabled"
+          }
         }
       }
     },
@@ -6207,20 +6253,29 @@ var aireneInputSlotRecipe = (0, import_dev46.defineSlotRecipe)({
       maxHeight: "136px",
       outline: "none",
       resize: "none",
-      caretColor: "border.selected",
+      caretColor: "blue.400",
       fontSize: "md",
       fontWeight: "regular",
       lineHeight: "md",
       scrollbarWidth: "none",
+      _nextTheme: {
+        caretColor: "border.selected"
+      },
       "-ms-overflow-style": "none",
       "&::-webkit-scrollbar": {
         display: "none"
       },
       "&::selection": {
-        background: "background.brand"
+        background: "ice.50",
+        _nextTheme: {
+          background: "background.brand"
+        }
       },
       "&::-moz-selection": {
-        background: "background.brand"
+        background: "ice.50",
+        _nextTheme: {
+          background: "background.brand"
+        }
       }
     }
   },
@@ -6241,34 +6296,53 @@ var aireneBubbleSlotRecipe = (0, import_dev47.defineSlotRecipe)({
       width: "full",
       display: "flex",
       flexDirection: "column",
-      gap: "xs",
-      py: "xs"
+      gap: "2",
+      py: "2",
+      _nextTheme: {
+        gap: "xs",
+        py: "xs"
+      }
     },
     header: {
       display: "flex",
       alignItems: "center",
-      gap: "xs"
+      gap: "2",
+      _nextTheme: {
+        gap: "xs"
+      }
     },
     loading: {
       display: "flex",
       flexDirection: "column",
-      gap: "2xs"
+      gap: "1.5",
+      _nextTheme: {
+        gap: "2xs"
+      }
     },
     body: {
       position: "relative",
       display: "flex",
       flexDirection: "column",
-      gap: "sm",
-      padding: "sm",
+      gap: "3",
+      padding: "3",
       background: "lightPurple",
       borderRadius: "lg",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "background.neutral.subtle"
+      borderColor: "blue.50",
+      _nextTheme: {
+        gap: "sm",
+        padding: "sm",
+        background: "lightPurple",
+        borderColor: "background.neutral.subtle"
+      }
     },
     text: {
       display: "flex",
-      gap: "xs"
+      gap: "2",
+      _nextTheme: {
+        gap: "xs"
+      }
     }
   },
   variants: {},
@@ -6424,6 +6498,7 @@ var colors = import_dev50.defineTokens.colors({
   overlay: { value: "rgba(22, 26, 32, 0.8)" },
   white: { value: "#FFFFFF" },
   vibrantPurple: { value: "linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)" },
+  lightPurple: { value: "radial-gradient(108.28% 139.29% at 0% 0%, #E9F1FD 0%, #F4F0FF 100%)" },
   whiteAlpha: {
     50: { value: "rgba(255, 255, 255, 0.04)" },
     100: { value: "rgba(255, 255, 255, 0.06)" },
@@ -6583,7 +6658,7 @@ var radii = import_dev53.defineTokens.radii({
   md: { value: "0.375rem", description: "6px" },
   lg: { value: "0.5rem", description: "8px" },
   xl: { value: "0.75rem", description: "12px" },
-  full: { value: "50%" }
+  full: { value: "999px" }
 });
 
 // src/tokens/shadows.ts

package/dist/index.mjs

@@ -2754,7 +2754,7 @@ var radioSlotRecipe = defineSlotRecipe9({
 import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
 var sharedSlotRecipe = defineSlotRecipe10({
   className: "shared",
-  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
+  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio", "MpToggle", "mp-toggle"],
   slots: ["hidden"],
   base: {
     hidden: {
@@ -2947,10 +2947,42 @@ var tableRecipe = defineRecipe10({
         _nextTheme: {
           boxShadow: "0px 2px var(--mp-colors-border-default)"
         }
+      },
+      "&[data-table-head-narrowed=true]": {
+        "& th": {
+          paddingY: "2",
+          paddingLeft: "2",
+          paddingRight: "4"
+        }
+      },
+      "&[data-table-head-bordered=true]": {
+        "& th:nth-last-child(n+2)": {
+          borderRightWidth: "sm",
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.default"
+          }
+        }
       }
     },
     "& > tbody": {
-      width: "full"
+      width: "full",
+      "&[data-table-head-narrowed=true]": {
+        "& td": {
+          paddingY: "2",
+          paddingLeft: "2",
+          paddingRight: "4"
+        }
+      },
+      "&[data-table-head-bordered=true]": {
+        "& td:nth-last-child(n+2)": {
+          borderRightWidth: "sm",
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.default"
+          }
+        }
+      }
     },
     "& > tr": {
       width: "full",
@@ -2959,9 +2991,9 @@ var tableRecipe = defineRecipe10({
     },
     "& th, & td": {
       cursor: "default",
+      paddingY: "4",
       paddingLeft: "2",
       paddingRight: "4",
-      height: "52px",
       textStyle: "label.md",
       textAlign: "left",
       color: "dark",
@@ -3192,7 +3224,6 @@ var inputTagSlotRecipe = defineSlotRecipe14({
     },
     trigger: {
       overflowY: "auto",
-      overflowX: "hidden",
       position: "relative",
       display: "flex",
       alignItems: "center",
@@ -3264,26 +3295,13 @@ var inputTagSlotRecipe = defineSlotRecipe14({
       }
     },
     input: {
-      appearance: "none",
-      outline: "none",
-      transition: "none",
-      width: "full",
-      textStyle: "label.md",
-      color: "dark",
-      _nextTheme: {
-        color: "text.default"
-      },
+      padding: "0 !important",
+      margin: "0 !important",
+      borderWidth: "0 !important",
       _placeholder: {
         color: "gray.400",
         _nextTheme: {
-          color: "text.placeholder"
-        }
-      },
-      _disabled: {
-        cursor: "not-allowed",
-        color: "gray.400",
-        _nextTheme: {
-          color: "text.disabled"
+          borderColor: "text.placeholder"
         }
       }
     },
@@ -6136,35 +6154,63 @@ var aireneInputSlotRecipe = defineSlotRecipe32({
       alignItems: "flex-end",
       gap: "2",
       width: "full",
-      py: "xs",
-      px: "md",
+      py: "2",
+      px: "4",
       rounded: "full",
       borderWidth: "1px",
-      borderColor: "border.default",
-      backgroundColor: "background.neutral",
-      color: "text.default",
+      borderColor: "gray.100",
+      backgroundColor: "white",
+      color: "dark",
       transitionDuration: "250ms",
       transitionProperty: "border-color",
       transitionTimingFunction: "linear",
+      _nextTheme: {
+        gap: "xs",
+        py: "xs",
+        px: "md",
+        borderColor: "border.default",
+        backgroundColor: "background.neutral",
+        color: "text.default"
+      },
       _hover: {
-        borderColor: "border.focused"
+        borderColor: "blue.400",
+        _nextTheme: {
+          borderColor: "border.focused"
+        }
       },
       _focusWithin: {
-        borderColor: "border.focused"
+        borderColor: "blue.400",
+        _nextTheme: {
+          borderColor: "border.focused"
+        }
       },
       _invalid: {
-        borderColor: "border.danger",
-        _hover: {
+        borderColor: "red.400",
+        _nextTheme: {
           borderColor: "border.danger"
+        },
+        _hover: {
+          borderColor: "border.danger",
+          _nextTheme: {
+            borderColor: "red.400"
+          }
         }
       },
       _disabled: {
-        backgroundColor: "background.disabled",
-        borderColor: "border.disabled",
-        color: "text.disabled",
+        backgroundColor: "gray,50",
+        borderColor: "gray.100",
+        color: "gray.400",
         cursor: "not-allowed",
+        _nextTheme: {
+          backgroundColor: "background.disabled",
+          borderColor: "border.disabled",
+          color: "text.disabled"
+        },
         _hover: {
-          borderColor: "border.disabled"
+          borderColor: "gray.100",
+          _nextTheme: {
+            borderColor: "border.disabled"
+          }
         }
       }
     },
@@ -6181,20 +6227,29 @@ var aireneInputSlotRecipe = defineSlotRecipe32({
       maxHeight: "136px",
       outline: "none",
       resize: "none",
-      caretColor: "border.selected",
+      caretColor: "blue.400",
       fontSize: "md",
       fontWeight: "regular",
       lineHeight: "md",
       scrollbarWidth: "none",
+      _nextTheme: {
+        caretColor: "border.selected"
+      },
       "-ms-overflow-style": "none",
       "&::-webkit-scrollbar": {
         display: "none"
       },
       "&::selection": {
-        background: "background.brand"
+        background: "ice.50",
+        _nextTheme: {
+          background: "background.brand"
+        }
       },
       "&::-moz-selection": {
-        background: "background.brand"
+        background: "ice.50",
+        _nextTheme: {
+          background: "background.brand"
+        }
       }
     }
   },
@@ -6215,34 +6270,53 @@ var aireneBubbleSlotRecipe = defineSlotRecipe33({
       width: "full",
       display: "flex",
       flexDirection: "column",
-      gap: "xs",
-      py: "xs"
+      gap: "2",
+      py: "2",
+      _nextTheme: {
+        gap: "xs",
+        py: "xs"
+      }
     },
     header: {
       display: "flex",
       alignItems: "center",
-      gap: "xs"
+      gap: "2",
+      _nextTheme: {
+        gap: "xs"
+      }
     },
     loading: {
       display: "flex",
       flexDirection: "column",
-      gap: "2xs"
+      gap: "1.5",
+      _nextTheme: {
+        gap: "2xs"
+      }
     },
     body: {
       position: "relative",
       display: "flex",
       flexDirection: "column",
-      gap: "sm",
-      padding: "sm",
+      gap: "3",
+      padding: "3",
       background: "lightPurple",
       borderRadius: "lg",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "background.neutral.subtle"
+      borderColor: "blue.50",
+      _nextTheme: {
+        gap: "sm",
+        padding: "sm",
+        background: "lightPurple",
+        borderColor: "background.neutral.subtle"
+      }
     },
     text: {
       display: "flex",
-      gap: "xs"
+      gap: "2",
+      _nextTheme: {
+        gap: "xs"
+      }
     }
   },
   variants: {},
@@ -6398,6 +6472,7 @@ var colors = defineTokens2.colors({
   overlay: { value: "rgba(22, 26, 32, 0.8)" },
   white: { value: "#FFFFFF" },
   vibrantPurple: { value: "linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)" },
+  lightPurple: { value: "radial-gradient(108.28% 139.29% at 0% 0%, #E9F1FD 0%, #F4F0FF 100%)" },
   whiteAlpha: {
     50: { value: "rgba(255, 255, 255, 0.04)" },
     100: { value: "rgba(255, 255, 255, 0.06)" },
@@ -6557,7 +6632,7 @@ var radii = defineTokens5.radii({
   md: { value: "0.375rem", description: "6px" },
   lg: { value: "0.5rem", description: "8px" },
   xl: { value: "0.75rem", description: "12px" },
-  full: { value: "50%" }
+  full: { value: "999px" }
 });
 
 // src/tokens/shadows.ts

package/dist/tokens/colors.d.mts

@@ -20,6 +20,9 @@ declare const colors: {
     vibrantPurple: {
         value: string;
     };
+    lightPurple: {
+        value: string;
+    };
     whiteAlpha: {
         50: {
             value: string;

package/dist/tokens/colors.d.ts

@@ -20,6 +20,9 @@ declare const colors: {
     vibrantPurple: {
         value: string;
     };
+    lightPurple: {
+        value: string;
+    };
     whiteAlpha: {
         50: {
             value: string;

package/dist/tokens/index.d.mts

@@ -35,6 +35,9 @@ declare const tokens: {
         vibrantPurple: {
             value: string;
         };
+        lightPurple: {
+            value: string;
+        };
         whiteAlpha: {
             50: {
                 value: string;

package/dist/tokens/index.d.ts

@@ -35,6 +35,9 @@ declare const tokens: {
         vibrantPurple: {
             value: string;
         };
+        lightPurple: {
+            value: string;
+        };
         whiteAlpha: {
             50: {
                 value: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-theme",
   "description": "Theme for mekari pixel 3",
-  "version": "0.3.0-dev.4",
+  "version": "0.3.0-dev.5",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

package/src/recipes/airene-chat-bubble.ts

@@ -10,34 +10,58 @@ const aireneBubbleSlotRecipe = defineSlotRecipe({
       width: 'full',
       display: 'flex',
       flexDirection: 'column',
-      gap: 'xs',
-      py: 'xs'
+      gap: '2',
+      py: '2',
+
+      _nextTheme: {
+        gap: 'xs',
+        py: 'xs'
+      }
     },
     header: {
       display: 'flex',
       alignItems: 'center',
-      gap: 'xs'
+      gap: '2',
+
+      _nextTheme: {
+        gap: 'xs'
+      }
     },
     loading: {
       display: 'flex',
       flexDirection: 'column',
-      gap: '2xs'
+      gap: '1.5',
+
+      _nextTheme: {
+        gap: '2xs'
+      }
     },
     body: {
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',
-      gap: 'sm',
-      padding: 'sm',
+      gap: '3',
+      padding: '3',
       background: 'lightPurple',
       borderRadius: 'lg',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'background.neutral.subtle'
+      borderColor: 'blue.50',
+
+      _nextTheme: {
+        gap: 'sm',
+        padding: 'sm',
+        background: 'lightPurple',
+        borderColor: 'background.neutral.subtle'
+      }
     },
     text: {
       display: 'flex',
-      gap: 'xs'
+      gap: '2',
+
+      _nextTheme: {
+        gap: 'xs'
+      }
     }
   },
   variants: {},

package/src/recipes/airene-chat-input.ts

@@ -11,36 +11,73 @@ const aireneInputSlotRecipe = defineSlotRecipe({
       alignItems: 'flex-end',
       gap: '2',
       width: 'full',
-      py: 'xs',
-      px: 'md',
+      py: '2',
+      px: '4',
       rounded: 'full',
       borderWidth: '1px',
-      borderColor: 'border.default',
-      backgroundColor: 'background.neutral',
-      color: 'text.default',
+      borderColor: 'gray.100',
+      backgroundColor: 'white',
+      color: 'dark',
       transitionDuration: '250ms',
       transitionProperty: 'border-color',
       transitionTimingFunction: 'linear',
 
+      _nextTheme: {
+        gap: 'xs',
+        py: 'xs',
+        px: 'md',
+        borderColor: 'border.default',
+        backgroundColor: 'background.neutral',
+        color: 'text.default'
+      },
+
       _hover: {
-        borderColor: 'border.focused'
+        borderColor: 'blue.400',
+
+        _nextTheme: {
+          borderColor: 'border.focused'
+        }
       },
       _focusWithin: {
-        borderColor: 'border.focused'
+        borderColor: 'blue.400',
+
+        _nextTheme: {
+          borderColor: 'border.focused'
+        }
       },
       _invalid: {
-        borderColor: 'border.danger',
-        _hover: {
+        borderColor: 'red.400',
+
+        _nextTheme: {
           borderColor: 'border.danger'
+        },
+
+        _hover: {
+          borderColor: 'border.danger',
+
+          _nextTheme: {
+            borderColor: 'red.400'
+          }
         }
       },
       _disabled: {
-        backgroundColor: 'background.disabled',
-        borderColor: 'border.disabled',
-        color: 'text.disabled',
+        backgroundColor: 'gray,50',
+        borderColor: 'gray.100',
+        color: 'gray.400',
         cursor: 'not-allowed',
+
+        _nextTheme: {
+          backgroundColor: 'background.disabled',
+          borderColor: 'border.disabled',
+          color: 'text.disabled'
+        },
+
         _hover: {
-          borderColor: 'border.disabled'
+          borderColor: 'gray.100',
+
+          _nextTheme: {
+            borderColor: 'border.disabled'
+          }
         }
       }
     },
@@ -57,20 +94,33 @@ const aireneInputSlotRecipe = defineSlotRecipe({
       maxHeight: '136px',
       outline: 'none',
       resize: 'none',
-      caretColor: 'border.selected',
+      caretColor: 'blue.400',
       fontSize: 'md',
       fontWeight: 'regular',
       lineHeight: 'md',
       scrollbarWidth: 'none',
+
+      _nextTheme: {
+        caretColor: 'border.selected'
+      },
+
       '-ms-overflow-style': 'none',
       '&::-webkit-scrollbar': {
         display: 'none'
       },
       '&::selection': {
-        background: 'background.brand'
+        background: 'ice.50',
+
+        _nextTheme: {
+          background: 'background.brand'
+        }
       },
       '&::-moz-selection': {
-        background: 'background.brand'
+        background: 'ice.50',
+
+        _nextTheme: {
+          background: 'background.brand'
+        }
       }
     }
   },

package/src/recipes/input-tag.ts

@@ -23,7 +23,6 @@ const inputTagSlotRecipe = defineSlotRecipe({
     },
     trigger: {
       overflowY: 'auto',
-      overflowX: 'hidden',
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
@@ -97,29 +96,13 @@ const inputTagSlotRecipe = defineSlotRecipe({
       }
     },
     input: {
-      appearance: 'none',
-      outline: 'none',
-      transition: 'none',
-      width: 'full',
-      textStyle: 'label.md',
-      color: 'dark',
-      _nextTheme: {
-        color: 'text.default'
-      },
-
+      padding: '0 !important',
+      margin: '0 !important',
+      borderWidth: '0 !important',
       _placeholder: {
         color: 'gray.400',
         _nextTheme: {
-          color: 'text.placeholder'
-        }
-      },
-
-      _disabled: {
-        cursor: 'not-allowed',
-        color: 'gray.400',
-
-        _nextTheme: {
-          color: 'text.disabled'
+          borderColor: 'text.placeholder'
         }
       }
     },

package/src/recipes/shared.ts

@@ -2,7 +2,7 @@ import { defineSlotRecipe } from '@pandacss/dev'
 
 const sharedSlotRecipe = defineSlotRecipe({
   className: 'shared',
-  jsx: ['MpCheckbox', 'mp-checkbox', 'MpRadio', 'mp-radio'],
+  jsx: ['MpCheckbox', 'mp-checkbox', 'MpRadio', 'mp-radio', 'MpToggle', 'mp-toggle'],
   slots: ['hidden'],
   base: {
     hidden: {

package/src/recipes/table.ts

@@ -31,11 +31,43 @@ const tableRecipe = defineRecipe({
         boxShadow: '0px 2px var(--mp-colors-gray-100)',
         _nextTheme: {
           boxShadow: '0px 2px var(--mp-colors-border-default)'
+        },
+      },
+      '&[data-table-head-narrowed=true]': {
+        '& th': {
+          paddingY: '2',
+          paddingLeft: '2',
+          paddingRight: '4',
+        }
+      },
+      '&[data-table-head-bordered=true]': {
+        '& th:nth-last-child(n+2)': {
+          borderRightWidth: 'sm',
+          borderColor: 'gray.100',
+          _nextTheme: {
+            borderColor: 'border.default'
+          }
         }
       }
     },
     '& > tbody': {
-      width: 'full'
+      width: 'full',
+      '&[data-table-head-narrowed=true]': {
+        '& td': {
+          paddingY: '2',
+          paddingLeft: '2',
+          paddingRight: '4',
+        }
+      },
+      '&[data-table-head-bordered=true]': {
+        '& td:nth-last-child(n+2)': {
+          borderRightWidth: 'sm',
+          borderColor: 'gray.100',
+          _nextTheme: {
+            borderColor: 'border.default'
+          }
+        }
+      }
     },
     '& > tr': {
       width: 'full',
@@ -44,9 +76,9 @@ const tableRecipe = defineRecipe({
     },
     '& th, & td': {
       cursor: 'default',
+      paddingY: '4',
       paddingLeft: '2',
       paddingRight: '4',
-      height: '52px',
       textStyle: 'label.md',
       textAlign: 'left',
       color: 'dark',

package/src/tokens/colors.ts

@@ -8,6 +8,7 @@ export const colors = defineTokens.colors({
   overlay: { value: 'rgba(22, 26, 32, 0.8)' },
   white: { value: '#FFFFFF' },
   vibrantPurple: { value: 'linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)' },
+  lightPurple: { value: 'radial-gradient(108.28% 139.29% at 0% 0%, #E9F1FD 0%, #F4F0FF 100%)' },
   whiteAlpha: {
     50: { value: 'rgba(255, 255, 255, 0.04)' },
     100: { value: 'rgba(255, 255, 255, 0.06)' },

package/src/tokens/radii.ts

@@ -7,5 +7,5 @@ export const radii = defineTokens.radii({
   md: { value: '0.375rem', description: '6px' },
   lg: { value: '0.5rem', description: '8px' },
   xl: { value: '0.75rem', description: '12px' },
-  full: { value: '50%' }
+  full: { value: '999px' }
 })