@rokkit/themes 1.0.0-next.91 → 1.0.0-next.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.91",
+  "version": "1.0.0-next.93",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -12,14 +12,14 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@vitest/coverage-v8": "^1.3.1",
-    "@vitest/ui": "~1.3.1",
+    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/ui": "~1.4.0",
     "jsdom": "^24.0.0",
-    "svelte": "^4.2.11",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
-    "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.91"
+    "svelte": "^4.2.12",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7",
+    "vitest": "~1.4.0",
+    "shared-config": "1.0.0-next.93"
   },
   "files": [
     "src"
@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.91"
+    "@rokkit/core": "1.0.0-next.93"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/base/organisms.css

@@ -51,21 +51,3 @@ drop-down > button > span {
   @apply pl-3 min-h-9 gap-2 items-center normal-case;
   @apply rounded text-neutral-800;
 }
-
-/* Tree Table styles */
-tree-table {
-  @apply flex flex-col h-full w-full overflow-auto;
-}
-tree-table > table {
-  @apply flex flex-col w-full h-full justify-start border-collapse overflow-auto;
-}
-tree-table > table tr {
-  @apply grid;
-}
-tree-table > table tr td,
-tree-table > table tr th {
-  @apply flex flex-row items-center px-4 py-3;
-}
-tree-table > table > tbody {
-  @apply flex flex-col overflow-y-auto;
-}

package/src/base/table.css

@@ -0,0 +1,49 @@
+th,
+td {
+  @apply px-5 py-3;
+}
+tr {
+  @apply gap-1px;
+}
+th {
+  @apply whitespace-nowrap;
+}
+table cell {
+  @apply flex items-center gap-2;
+}
+th[data-sortable='true'] {
+  @apply cursor-pointer;
+}
+th[data-sortable='true']:hover,
+th[data-sortable='true']:hover icon {
+  @apply text-primary-700;
+}
+
+table {
+  @apply w-full text-sm text-left rtl:text-right text-neutral-700;
+  @apply border-separate border-spacing-x-1px;
+}
+table > thead {
+  @apply table-header-group sticky top-0 z-10;
+  @apply text-xs uppercase bg-neutral-400;
+}
+table > caption {
+  @apply table-caption p-5 text-sm font-normal text-left rtl:text-right bg-neutral-subtle text-neutral-600;
+}
+
+table > tbody > tr {
+  @apply table-row border-b border-neutral-base bg-neutral-subtle;
+}
+table.striped > tbody > tr:nth-child(even) {
+  @apply bg-neutral-inset;
+}
+table > tfoot {
+  @apply table-footer-group;
+}
+table > tfoot > tr {
+  @apply table-row font-semibold text-neutral-800;
+}
+tree-table,
+table-wrapper {
+  @apply max-h-full overflow-y-auto;
+}

package/src/base.css

@@ -4,5 +4,6 @@
 @import './base/molecules.css';
 @import './base/organisms.css';
 @import './base/layout.css';
+@import './base/table.css';
 @import './base/carousel.css';
 @import './base/animation.css';

package/src/mixins/mixins.scss

@@ -2,9 +2,9 @@
   @each $name, $color in $theme-colors {
     $hue: hue($color);
     $saturation: saturation($color);
-    @if $values != null {
-      $start: if($mode == 'dark', length($values), 1);
-      $offset: if($mode == 'dark', -1, 1);
+    @if $values !== null {
+      $start: if($mode === 'dark', length($values), 1);
+      $offset: if($mode === 'dark', -1, 1);
       @for $i from 0 to length($values) - 1 {
         $index: $start + $offset * $i;
         $lightness: nth($values, $index);
@@ -13,7 +13,7 @@
       }
     } @else {
       @for $i from 0 to 9 {
-        $lightness: if($mode == 'dark', $i * 10%, 100 - $i * 10%);
+        $lightness: if($mode === 'dark', $i * 10%, 100 - $i * 10%);
         $variable: '--#{$name}-#{50 + ($i) * 100}';
         #{$variable}: hsl($hue, $saturation, $lightness);
       }

package/src/rokkit/table.css

@@ -45,41 +45,3 @@ table > tfoot > tr {
 table-wrapper {
   @apply shadow-md sm:rounded-lg;
 }
-
-/* Tree Table styles */
-/* .rokkit tree-table > table tr {
-  @apply gap-1px;
-}
-.rokkit tree-table > table {
-  @apply gap-2px;
-}
-.rokkit tree-table > table tr > th {
-  @apply bg-gradient-to-b from-neutral-muted to-neutral-subtle uppercase;
-}
-.rokkit tree-table > table > thead > tr > th {
-  @apply text-secondary-700 font-light;
-}
-.rokkit tree-table > table > tbody {
-  @apply gap-1px;
-}
-.rokkit tree-table > table > tbody > tr > td {
-  @apply bg-neutral-subtle gap-2;
-}
-.rokkit tree-table > table > tbody > tr.even > td {
-  @apply bg-neutral-muted;
-} */
-.rokkit tree-table tr:hover td,
-.rokkit tree-table tr.even:hover td {
-  @apply bg-neutral-500;
-}
-.rokkit tree-table tr[aria-current='true'] td,
-.rokkit tree-table tr.even[aria-current='true'] td {
-  @apply bg-secondary-700 text-neutral-100;
-}
-.rokkit tree-table tr td icon {
-  @apply text-secondary-700;
-}
-.rokkit tree-table tr[aria-current='true'] td icon,
-.rokkit tree-table tr.even[aria-current='true'] td icon {
-  @apply text-secondary-100;
-}