@economic/taco 2.9.2 → 2.10.0

package/dist/index.css

@@ -647,7 +647,7 @@
 
 [role='cell']:not([data-highlighted='true']),
 [role='columnheader'] {
-    @apply flex px-4;
+    @apply flex;
 }
 
 /* In cases where row height might differ from default one (example: textarea without truncate or changing of font size or row height),
@@ -696,13 +696,20 @@
         @apply bg-grey-100;
     }
 [role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: theme(colors.grey.200);
-        @apply bg-grey-200;
+        --table3-row-actions-shadow: theme(colors.grey.100);
+        @apply bg-grey-100;
     }
 [role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
+/* normal rows when focus is inside the table */
+[data-taco='table2']:focus-within
+    [role='row'][data-current='true']:not([data-selected='true']):not([data-error='true'])
+    [role='cell'] {
+    --table3-row-actions-shadow: theme(colors.grey.200);
+    @apply bg-grey-200;
+}
 /* normal rows when hover is paused */
 [data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.white);
@@ -721,14 +728,17 @@
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
-        --table3-row-actions-shadow: #ccd8eb;
-        @apply bg-[#CCD8EB];
-    }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'] {
+[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'],
+    
+    [role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
+/* selected rows when focus is inside the table */
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-selected='true']:not([data-error='true']) [role='cell'] {
+    --table3-row-actions-shadow: #ccd8eb;
+    @apply bg-[#CCD8EB];
+}
 /* selected rows when hover is paused */
 [data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.blue.100);
@@ -755,6 +765,11 @@
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
+/* error rows when focus is inside the table */
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-error='true'] [role='cell'] {
+    --table3-row-actions-shadow: theme(colors.red.100);
+    @apply bg-red-100;
+}
 /* error rows when hover is paused */
 [data-pause-hover='true'] [role='row'][data-error='true']:hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: #ffede9;
@@ -777,17 +792,27 @@
 /* cell component overrides */
 
 /* small font size */
+[data-font-size='small'] [role='cell'] > [data-taco='button'],
+[data-font-size='small'] [role='cell'] > [data-taco='icon-button'] {
+    @apply !-my-2;
+}
+
+[data-font-size='small'] [role='cell'] > [data-taco='icon'] {
+    @apply !-my-[3px];
+}
+
 [data-font-size='small'] [role='cell'] [data-taco='badge'],
-[data-font-size='small'] [role='cell'] [data-taco='badge-icon'],
-[data-font-size='small'] [role='cell'] [data-taco='icon'] {
+[data-font-size='small'] [role='cell'] [data-taco='badge-icon'] {
     @apply !-my-0.5 !text-xs;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='tag'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='tag'] {
+    @apply !-my-1;
+}
+
 [data-font-size='small'] [role='cell'] [data-taco='input-container'],
 [data-font-size='small'] [role='cell'] [data-taco='Select2'] {
-    @apply !-my-1;
+    @apply !-my-[3px];
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='input'],
@@ -816,30 +841,70 @@
     @apply !my-0;
 }
 
+[data-font-size='small'] [role='cell'][data-editable] {
+    @apply px-[calc(var(--table3-cell-padding-x)_-_7px)];
+}
+
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox-container'],
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='switch'],
+[data-font-size='small'] [role='cell'][data-editable] [data-taco='switch-container'] {
+    @apply !mx-[calc(var(--table3-cell-padding-x)_-_1px)] !-mt-px;
+}
+
 /* medium font size */
+[data-font-size='medium'] [role='cell'] > [data-taco='button'],
+[data-font-size='medium'] [role='cell'] > [data-taco='icon-button'] {
+    @apply !-my-1.5;
+}
+
+[data-font-size='medium'] [role='cell'] > [data-taco='icon'] {
+    @apply !-my-0.5;
+}
+
 [data-font-size='medium'] [role='cell'] [data-taco='tag'] {
     @apply !-my-0.5;
 }
 
 [data-font-size='medium'] [role='cell'] [data-taco='Select2'],
 [data-font-size='medium'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-1.5;
+    @apply !-my-[5px];
+}
+
+[data-font-size='medium'] [role='cell'][data-editable] {
+    @apply px-[calc(var(--table3-cell-padding-x)_-_9px)];
+}
+
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox-container'],
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='switch'],
+[data-font-size='medium'] [role='cell'][data-editable] [data-taco='switch-container'] {
+    @apply !mx-[calc(var(--table3-cell-padding-x)_-_3px)] !mt-px;
 }
 
 /* large font size */
+[data-font-size='large'] [role='cell'] > [data-taco='button'],
+[data-font-size='large'] [role='cell'] > [data-taco='icon-button'] {
+    @apply !-my-1;
+}
+
+[data-font-size='large'] [role='cell'] > [data-taco='icon'] {
+    @apply !-my-0.5;
+}
+
 [data-font-size='large'] [role='cell'] [data-taco='tag'] {
     @apply !-my-0.5;
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-2;
+    @apply !-my-[7.5px];
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='input'],
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='textarea'] {
-    @apply h-10 px-2.5 text-lg;
+    @apply h-10 px-2.5 text-base;
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] button {
@@ -849,3 +914,14 @@
 [data-font-size='large'] [role='cell'] [data-taco='input-container'] [data-affix-type='postfix'] [data-taco='icon'] {
     @apply !h-6 !w-6;
 }
+
+[data-font-size='large'] [role='cell'][data-editable] {
+    @apply px-[calc(var(--table3-cell-padding-x)_-_11px)];
+}
+
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox-container'],
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='switch'],
+[data-font-size='large'] [role='cell'][data-editable] [data-taco='switch-container'] {
+    @apply !mx-[calc(var(--table3-cell-padding-x)_-_5px)] !mt-px;
+}