@rokkit/themes 1.0.0-next.100

package/src/rokkit/organisms.css

@@ -0,0 +1,315 @@
+/* List styles */
+.rokkit virtual-list-contents {
+  @apply flex flex-col;
+  @apply gap-1px bg-neutral-inset;
+}
+
+.rokkit list {
+  @apply gap-1px bg-neutral-subtle;
+}
+
+.rokkit list > item,
+.rokkit virtual-list-contents > virtual-list-item,
+.rokkit accordion div summary {
+  @apply leading-10 px-4 bg-neutral-base text-neutral-800 min-h-10;
+}
+.rokkit accordion > div > summary {
+  @apply rounded pr-2 bg-gradient from-neutral-subtle to-neutral-muted;
+}
+
+/* Remove default details marker from summary */
+.rokkit accordion > div > summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Nested List and Tree styles */
+.rokkit :not(accordion > div) > list {
+  @apply rounded shadow border border-neutral-400 overflow-y-scroll;
+}
+.rokkit :not(accordion > div) > list item {
+  @apply last:rounded-b first:rounded-t;
+}
+
+.rokkit accordion list item {
+  @apply last:rounded-b gap-2;
+}
+.rokkit accordion list item > a {
+  @apply gap-2;
+}
+.rokkit accordion list {
+  @apply rounded-b;
+}
+
+.rokkit accordion .is-expanded list {
+  @apply -mt-10 pt-10 rounded-t;
+}
+/* Styles for 'tabs' class */
+.rokkit tabs {
+  @apply border-b-2 border-neutral-muted px-1 gap-1;
+}
+.rokkit tabs.is-below {
+  @apply border-b-0 border-t-2;
+}
+.rokkit tabs:focus-within {
+  @apply outline-none border-secondary;
+}
+.rokkit tabs .tab {
+  @apply leading-9 px-3 flex-shrink-0 items-center cursor-pointer rounded-t bg-neutral-base gap-3;
+}
+.rokkit tabs.is-below .tab {
+  @apply rounded-b rounded-t-none;
+}
+.rokkit tabs.is-centered {
+  @apply justify-center;
+}
+.rokkit tabs .tab[aria-selected='true'] {
+  @apply bg-neutral-muted;
+}
+.rokkit tabs:focus-within .tab[aria-selected='true'] {
+  @apply bg-gradient-to-b from-primary to-secondary text-white;
+}
+.rokkit tabs.is-below:focus-within .tab[aria-selected='true'] {
+  @apply bg-gradient-to-t;
+}
+
+/* Styles for 'button' and 'button-group' classes */
+.rokkit button,
+.rokkit .button {
+  @apply flex min-h-9 items-center rounded-full px-6 gap-3 uppercase bg-neutral-muted text-neutral-700 cursor-pointer;
+  animation: button-pop var(--animation-btn, 0.25s) ease-out;
+}
+
+.rokkit button.is-primary,
+.rokkit .button.is-primary {
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
+}
+
+.rokkit button-group {
+  @apply flex items-center justify-center m-auto py-1 gap-1px;
+}
+
+.rokkit button-group button {
+  @apply flex px-2 pt-0.5 uppercase rounded-none focus:outline-none;
+}
+.rokkit button-group button:first-child {
+  @apply rounded-l-full pl-3;
+}
+.rokkit button-group button:last-child {
+  @apply rounded-r-full pr-3;
+}
+
+.rokkit button-group button.active {
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
+}
+
+/* Input and Drop-down styles */
+.rokkit input-select,
+.rokkit drop-down > button {
+  @apply rounded;
+  /* @apply border border-neutral-muted; */
+}
+
+.rokkit drop-down > button {
+  @apply bg-neutral-base p-0;
+}
+.rokkit drop-down > button > span {
+  @apply rounded py-0;
+}
+.rokkit drop-down > button > span > * {
+  @apply h-full items-center;
+}
+
+.rokkit :not(field) > input-select {
+  @apply bg-neutral-base border border-neutral-muted p-2px;
+}
+.rokkit :not(field) > input-select > selected-item {
+  @apply bg-neutral-subtle;
+}
+.rokkit :not(field) > input-select:focus-within,
+.rokkit drop-down:focus-within > button {
+  /* @apply p-2px; */
+  @apply outline-none border-none;
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
+}
+/* .rokkit :not(field) > input-select:focus-within > selected-item,
+.rokkit drop-down:focus-within > button > span {
+  @apply bg-neutral-muted outline-none min-h-10;
+} */
+
+/* Hover and Icon styles */
+/* .rokkit input-select:hover > icon,
+.rokkit drop-down:hover > icon {
+  @apply border-neutral;
+} */
+
+/* Scroll styles */
+.rokkit input-select scroll,
+.rokkit input-select virtual-list {
+  @apply my-1 shadow-lg rounded;
+}
+
+/* .rokkit input-select > selected-item > items {
+  @apply flex-grow flex-wrap gap-2;
+} */
+
+/* Accordion styles */
+.rokkit accordion {
+  @apply flex-grow gap-1 overflow-y-scroll;
+}
+.rokkit accordion > div {
+  @apply rounded shadow relative;
+}
+
+/* Nested List and Node styles */
+.rokkit nested-list {
+  @apply text-neutral-800;
+}
+.rokkit nested-list node > div {
+  @apply px-2 h-8;
+}
+
+/* Tree styles */
+.rokkit tree {
+  @apply rounded;
+}
+
+/* Focus styles for Nested List, Tree, and Accordion */
+.rokkit nested-list,
+.rokkit nested-list:focus-within,
+.rokkit tree:focus-within {
+  @apply outline-none rounded;
+}
+
+.rokkit accordion,
+.rokkit list,
+.rokkit virtual-list-viewport {
+  @apply rounded;
+}
+
+/* Remove outline from focused elements */
+.rokkit accordion:focus-within list,
+.rokkit drop-down:focus-within list,
+.rokkit input-select:focus-within list,
+.rokkit input-select:focus-within virtual-list-viewport {
+  @apply outline-none focus:outline-none;
+}
+
+/* Focus and Hover styles for List and Node */
+.rokkit list:focus {
+  @apply outline outline-secondary;
+}
+/* .rokkit list item.is-hovering, */
+/* .rokkit virtual-list item.is-hovering, */
+.rokkit list item:hover,
+.rokkit virtual-list-contents virtual-list-item:hover,
+.rokkit node > div:hover {
+  @apply bg-neutral-subtle;
+}
+
+/* Selected and Hover styles for List and Node */
+.rokkit list item[aria-selected='true'] > a {
+  @apply text-white;
+}
+.rokkit virtual-list-item[aria-current='true'] {
+  @apply bg-neutral-inset text-secondary;
+}
+
+/* Expanded and Selected styles for Accordion */
+.rokkit accordion .is-expanded summary {
+  @apply border-b border-neutral-muted rounded-b-none sticky top-0 z-1;
+}
+
+.rokkit accordion [aria-selected='true'] summary {
+  @apply bg-neutral-subtle;
+}
+.rokkit accordion:focus-within [aria-selected='true'] summary {
+  @apply outline-none bg-gradient-to-r from-primary to-secondary text-white;
+}
+
+/* Border styles for Accordion */
+.rokkit accordion > div {
+  @apply border border-neutral-muted;
+}
+
+/* Folder Tree styles */
+.rokkit .folder-tree {
+  @apply bg-neutral-inset h-full;
+}
+.rokkit .folder-tree nested-list {
+  @apply bg-neutral-inset h-full;
+}
+.rokkit node > div > item {
+  @apply px-1;
+}
+.rokkit node > div > span {
+  @apply flex-shrink-0;
+}
+.rokkit node > div > span > i {
+  @apply border-neutral-muted;
+}
+.rokkit node > div > icon > i {
+  @apply text-neutral-elevated;
+}
+
+/* Toggle Switch styles */
+.rokkit toggle-switch {
+  @apply min-w-12 rounded-full mx-auto;
+  @apply bg-neutral-subtle border border-neutral-muted;
+  @apply leading-loose p-2px;
+}
+.rokkit toggle-switch:focus-within {
+  @apply outline outline-secondary;
+}
+.rokkit toggle-switch item {
+  @apply items-center justify-center px-3 gap-1 py-0 leading-loose;
+  @apply min-w-6 min-h-6 rounded-full cursor-pointer;
+}
+.rokkit toggle-switch item > icon > i {
+  @apply text-lg;
+}
+
+.rokkit toggle-switch item[aria-selected='true'] {
+  @apply bg-gradient-to-r from-neutral-muted to-neutral-muted;
+}
+
+.rokkit toggle-switch.compact > item {
+  @apply px-0 gap-0;
+}
+.rokkit virtual-list-viewport {
+  @apply border box-content border-neutral-inset;
+}
+.rokkit virtual-list-viewport:focus-within {
+  @apply outline-none;
+}
+.rokkit virtual-list {
+  @apply p-2px from-transparent to-transparent rounded border border-neutral-muted;
+}
+.rokkit virtual-list:focus-within {
+  @apply bg-gradient-to-r from-primary to-secondary;
+}
+
+.rokkit list item[aria-selected='true'],
+.rokkit virtual-list-contents virtual-list-item[aria-selected='true'],
+.rokkit node[aria-selected='true'] > div {
+  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle text-neutral-800;
+}
+/* Focus and Hover styles for Toggle Switch, List, Tree, and Nested List */
+.rokkit toggle-switch:focus-within item[aria-selected='true'],
+.rokkit list:focus-within item[aria-selected='true'],
+.rokkit virtual-list-viewport:focus-within virtual-list-item[aria-selected='true'],
+.rokkit tree:focus-within node[aria-selected='true'] > div,
+.rokkit nested-list:focus-within node[aria-selected='true'] > div {
+  @apply bg-gradient-to-r from-primary to-secondary text-white;
+  @apply hover:from-secondary hover:to-primary;
+}
+
+.rokkit toggle-switch[aria-disabled='true'] {
+  @apply bg-neutral-muted text-neutral-500 cursor-not-allowed;
+}
+.rokkit input-select > selected-item > items {
+  @apply flex-grow flex-wrap gap-2;
+}
+
+.rokkit container:focus-within {
+  @apply outline-none;
+}

package/src/rokkit/table.css

@@ -0,0 +1,57 @@
+th,
+td {
+  @apply px-5 py-3;
+}
+tr {
+  @apply gap-1px;
+}
+th {
+  @apply whitespace-nowrap;
+}
+th cell,
+td cell {
+  @apply flex w-full 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;
+}
+
+td cell.cell-type-integer p,
+td cell.cell-type-number p {
+  @apply text-right w-full;
+}
+
+td cell item {
+  @apply flex w-full;
+}

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

@@ -0,0 +1,11 @@
+@import './base.css';
+
+@import './rokkit/atoms.css';
+@import './rokkit/alert.css';
+@import './rokkit/input.css';
+@import './rokkit/molecules.css';
+@import './rokkit/organisms.css';
+@import './rokkit/layout.css';
+@import './rokkit/toggle.css';
+@import './rokkit/table.css';
+@import './rokkit/carousel.css';