style(v2)/fix component style (#714)

* style(v2): correct style in primary outlined button * style(v2): update style when table.cell use rowspan & add font-sarabun in table.cell
thinc-org · Nov 10, 2024 · 3690096 · 3690096
1 parent b305d94
commit 3690096
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/packages/ui/src/components/button/index.ts b/packages/ui/src/components/button/index.ts
@@ -4,7 +4,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import Root from './button.svelte'
 
 const buttonVariants = tv({
-  base: 'inline-flex items-center justify-center whitespace-nowrap rounded-button text-button2 font-medium ring-offset-surface transition-all focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  base: 'inline-flex items-center justify-center  whitespace-nowrap rounded-button text-button2 font-medium font-sans ring-offset-surface transition-all focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   variants: {
     variant: {
       solid: 'hover:outline-none hover:ring-1.5 hover:ring-offset-2',
@@ -16,7 +16,7 @@ const buttonVariants = tv({
       lg: 'h-10 px-5',
     },
     color: {
-      primary: 'text-on-primary-container focus-visible:ring-primary-container',
+      primary: 'focus-visible:ring-primary-container',
       neutral: 'text-on-surface focus-visible:ring-surface-container-low',
       error: 'text-on-error-container focus-visible:ring-error-container',
       secondary:
@@ -27,7 +27,8 @@ const buttonVariants = tv({
     {
       variant: 'solid',
       color: 'primary',
-      class: 'bg-primary-container hover:ring-primary-container',
+      class:
+        'bg-primary-container hover:ring-primary-container text-on-primary-container ',
     },
     {
       variant: 'solid',
@@ -47,7 +48,8 @@ const buttonVariants = tv({
     {
       variant: 'outlined',
       color: 'primary',
-      class: 'ring-primary-container hover:bg-primary-container',
+      class:
+        'ring-primary hover:bg-primary-container text-primary hover:text-on-primary-container',
     },
     {
       variant: 'outlined',

diff --git a/packages/ui/src/components/table/table-cell.svelte b/packages/ui/src/components/table/table-cell.svelte
@@ -11,7 +11,7 @@
 
 <td
   class="{cn(
-    'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-on-surface font-normal text-body1',
+    'p-4 align-middle data-[rowspan=true]:align-top  [&:has([role=checkbox])]:pr-0 text-on-surface font-normal font-sarabun text-body1',
     className,
   )}"
   {...$$restProps}

diff --git a/packages/ui/src/components/table/table.stories.svelte b/packages/ui/src/components/table/table.stories.svelte
@@ -18,7 +18,8 @@ This example demonstrates the use of each sub-component:
 - **Table.Row**: Represents a row within either the header or the body.
 - **Table.Head**: Column headers, typically styled differently from body cells.
 - **Table.Body**: Contains the main content rows.
-- **Table.Cell**: Represents an individual data cell, with support for styling and spans.
+- **Table.Cell**: Represents an individual data cell, with support for styling and spans. 
+**(don't forget to use data-rowspan='true' or 'false' to apply correct style)**
           `,
         },
       },
@@ -44,7 +45,7 @@ This example demonstrates the use of each sub-component:
     </Table.Header>
     <Table.Body>
       <Table.Row class="border-b-0">
-        <Table.Cell rowspan="{2}">INV001</Table.Cell>
+        <Table.Cell data-rowspan="{true}" rowspan="{2}">INV001</Table.Cell>
         <Table.Cell>Paid</Table.Cell>
         <Table.Cell>Credit Card</Table.Cell>
         <Table.Cell>$250.00</Table.Cell>