@rokkit/themes 1.0.0-next.90 → 1.0.0-next.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.90",
+  "version": "1.0.0-next.92",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.90"
+    "shared-config": "1.0.0-next.92"
   },
   "files": [
     "src"
@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.90"
+    "@rokkit/core": "1.0.0-next.92"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/base/carousel.css

@@ -0,0 +1,18 @@
+carousel slide {
+  @apply items-center min-h-100 gap-3 px-12;
+}
+carousel slide > img {
+  @apply w-80 h-80 object-cover;
+}
+carousel slide > p {
+  @apply text-xl text-center;
+}
+carousel dot-nav {
+  @apply flex h-4 w-full gap-2 justify-center;
+}
+carousel dot {
+  @apply block h-4 w-4 p-0 m-0 rounded-full cursor-pointer focus:outline-none;
+}
+carousel dot[aria-checked='true'] {
+  @apply bg-primary;
+}

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,46 @@
+th,
+td {
+  @apply px-5 py-3;
+}
+tr {
+  @apply gap-1px;
+}
+th {
+  @apply whitespace-nowrap;
+}
+th 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;
+}
+table > thead {
+  @apply table-header-group 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;
+}
+table-wrapper {
+  @apply shadow-md sm:rounded-lg;
+}

package/src/base.css

@@ -4,4 +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/rokkit/carousel.css

@@ -0,0 +1,19 @@
+carousel slide {
+  @apply items-center min-h-100 gap-3 px-12;
+}
+carousel slide > img {
+  @apply w-80 h-80 object-cover;
+}
+carousel slide > p {
+  @apply text-2xl text-center;
+}
+carousel dot-nav {
+  @apply flex h-4 w-full gap-2 justify-center;
+}
+carousel dot {
+  /* @apply block h-4 w-4 p-0 m-0 text-xs rounded-full bg-neutral-subtle cursor-pointer focus:outline-none; */
+  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
+}
+carousel dot[aria-checked='true'] {
+  @apply bg-gradient-to-r from-primary to-secondary;
+}

package/src/rokkit/organisms.css

@@ -101,17 +101,7 @@
 .rokkit button-group button.active {
   @apply bg-gradient-to-r from-primary to-secondary text-white;
 }
-.rokkit toggle {
-  @apply flex flex-row items-center gap-3 cursor-pointer;
-  @apply rounded-md border border-neutral-muted p-2;
-}
 
-.rokkit toggle:hover > icon {
-  @apply text-secondary;
-}
-.rokkit toggle:focus-within {
-  @apply outline-none ring-2 ring-primary-500;
-}
 /* Input and Drop-down styles */
 .rokkit input-select,
 .rokkit drop-down > button {
@@ -320,44 +310,6 @@
   @apply flex-grow flex-wrap gap-2;
 }
 
-/* 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;
-}
-
 .rokkit container:focus-within {
   @apply outline-none;
 }

package/src/rokkit/table.css

@@ -0,0 +1,47 @@
+th,
+td {
+  @apply px-5 py-3;
+}
+tr {
+  @apply gap-1px;
+}
+th {
+  @apply whitespace-nowrap;
+}
+th 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;
+}
+table > thead {
+  @apply table-header-group 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;
+}
+
+table-wrapper {
+  @apply shadow-md sm:rounded-lg;
+}

package/src/rokkit/toggle.css

@@ -0,0 +1,18 @@
+.rokkit toggle {
+  @apply flex flex-row items-center gap-3 cursor-pointer;
+  @apply rounded-md border border-neutral-muted p-2;
+}
+
+.rokkit toggle:hover > icon {
+  @apply text-secondary;
+}
+.rokkit toggle:focus-within {
+  @apply outline-none ring-2 ring-primary-500;
+}
+
+.rokkit toggle.minimal {
+  @apply py-0 border-none focus-within:ring-0;
+}
+.rokkit toggle.minimal icon > i {
+  @apply h-4;
+}

package/src/rokkit.css

@@ -4,3 +4,6 @@
 @import './rokkit/molecules.css';
 @import './rokkit/organisms.css';
 @import './rokkit/layout.css';
+@import './rokkit/toggle.css';
+@import './rokkit/table.css';
+@import './rokkit/carousel.css';