@sebgroup/green-core 2.22.1 → 2.22.2-rc.20260116120346907

package/components/table/table.styles.js

@@ -153,7 +153,6 @@ const TableStyles = css`
 
   thead tr th {
     padding-block: var(--gds-sys-space-3xs);
-    /*  background: var(--gds-sys-color-l2-neutral-01); */
     background: var(--_table-header-bg);
   }
 
@@ -254,12 +253,10 @@ const TableStyles = css`
 
   @media (hover: hover) and (min-width: 768px) {
     tbody tr.selected:hover {
-      /*     background-color: var(--gds-sys-color-l3-neutral-03); */
       background-color: var(--_table-row-selected-hover);
     }
 
     tbody tr:hover:not(.selected) {
-      /*       background-color: var(--gds-sys-color-l2-neutral-01); */
       background-color: var(--_table-row-hover);
     }
   }
@@ -625,24 +622,6 @@ const TableStyles = css`
         }
       }
 
-      /* tbody td .cell-content,
-    thead th .column-header { 
-      animation-name: CELL_ANIMATION_HORIZONTAL, CELL_ANIMATION_HORIZONTAL;
-      animation-fill-mode: both;
-      animation-timing-function: ease-in-out;
-      animation-direction: normal, reverse;
-      animation-timeline: view(inline);
-      animation-range: entry, exit;
-    }
-
-    @keyframes CELL_ANIMATION_HORIZONTAL {
-      0% {
-        opacity: 0.8;
-        filter: blur(12px);
-        translate: 4px 0px;
-      }
-    } */
-
       thead {
         position: sticky;
         top: 4px;
@@ -676,46 +655,46 @@ const TableStyles = css`
       }
 
       /* Horizontal scroll */
-      @property --_inline-start-fade {
+      @property --_start-fade {
         syntax: '<length>';
         inherits: false;
         initial-value: 0;
       }
 
-      @property --_inline-end-fade {
+      @property --_end-fade {
         syntax: '<length>';
         inherits: false;
         initial-value: 0;
       }
 
-      @keyframes table-scroll-inline-fade {
+      @keyframes scroll-fade {
         0% {
-          --_inline-start-fade: 0;
+          --_start-fade: 0;
         }
         10%,
         100% {
-          --_inline-start-fade: var(--gds-sys-space-4xl);
+          --_start-fade: var(--gds-sys-space-4xl);
         }
         0%,
         90% {
-          --_inline-end-fade: var(--gds-sys-space-4xl);
+          --_end-fade: var(--gds-sys-space-4xl);
         }
         100% {
-          --_inline-end-fade: 0;
+          --_end-fade: 0;
         }
       }
 
       .data {
-        overflow-x: scroll;
+        overflow-x: auto;
         mask: linear-gradient(
           to right,
           #0000,
-          #ffff var(--_inline-start-fade) calc(100% - var(--_inline-end-fade)),
+          #ffff var(--_start-fade) calc(100% - var(--_end-fade)),
           #0000
         );
-        animation: table-scroll-inline-fade;
-        animation-timeline: --table-scroll-inline-fade;
-        scroll-timeline: --table-scroll-inline-fade x;
+        animation: scroll-fade;
+        animation-timeline: --scroll-fade;
+        scroll-timeline: --scroll-fade x;
       }
     }
   }
@@ -742,7 +721,7 @@ const TableStyles = css`
 
   /* Scrollbar */
   .data {
-    --_scrollbar-color-thumb: var(--gds-sys-color-l3-neutral-01);
+    --_scrollbar-color-thumb: var(--gds-sys-color-content-neutral-02);
     --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02);
     --_scrollbar-width: var(--gds-sys-space-2xs);
   }