@rokkit/themes 1.0.0-next.105 → 1.0.0-next.106

package/src/rokkit/organisms.css

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

package/src/rokkit/table.css

@@ -43,15 +43,15 @@ table > tfoot > tr {
   @apply table-row font-semibold text-neutral-800;
 }
 
-rkt-table-wrapper {
+rk-table-wrapper {
   @apply shadow-md sm:rounded-lg;
 }
 
-td rkt-cell.cell-type-integer p,
-td rkt-cell.cell-type-number p {
+td rk-cell.cell-type-integer p,
+td rk-cell.cell-type-number p {
   @apply w-full text-right;
 }
 
-td rkt-cell rkt-item {
+td rk-cell rk-item {
   @apply flex w-full;
 }

package/src/rokkit/toggle.css

@@ -1,18 +1,33 @@
-.rokkit rkt-toggle {
+[data-style='rokkit'] rk-switch {
   @apply flex cursor-pointer flex-row items-center gap-3;
   @apply border-neutral-muted rounded-md border p-2;
 }
 
-.rokkit rkt-toggle:hover > rkt-icon {
+[data-style='rokkit'] rk-switch:hover > rk-icon {
   @apply text-secondary;
 }
-.rokkit rkt-toggle:focus-within {
+[data-style='rokkit'] rk-switch:focus-within,
+[data-style='rokkit'] rk-toggle:focus-within {
   @apply ring-primary-500 outline-none ring-2;
 }
 
-.rokkit rkt-toggle.minimal {
+[data-style='rokkit'] rk-switch.minimal {
   @apply border-none py-0 focus-within:ring-0;
 }
-.rokkit rkt-toggle.minimal rkt-icon > i {
-  @apply h-4;
+[data-style='rokkit'] rk-switch.minimal rk-icon > i {
+  @apply text-md h-4;
 }
+[data-style='rokkit'] rk-toggle {
+  @apply min-h-10 min-w-10 rounded-md;
+}
+
+[data-style='rokkit'] rk-toggle button {
+  @apply m-0 h-full w-full p-0;
+}
+
+[data-style='rokkit'] rk-toggle.small {
+  @apply p-2px flex aspect-square flex-col items-center justify-center;
+}
+/* [data-style="rokkit"] rk-toggle:focus-within button {
+  @apply bg-neutral-base text-neutral hover:text-primary rounded-sm;
+} */