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

package/src/minimal/list.css

@@ -1,136 +1,136 @@
-.minimal rkt-item {
+[data-style='minimal'] rk-item {
   @apply flex items-center gap-1;
 }
-.minimal rkt-accordion {
+[data-style='minimal'] rk-accordion {
   @apply flex-grow overflow-y-scroll focus-within:outline-none;
 }
-.minimal rkt-accordion > div,
-.minimal rkt-accordion > details {
+[data-style='minimal'] rk-accordion > div,
+[data-style='minimal'] rk-accordion > details {
   @apply relative;
 }
-.minimal rkt-list,
-.minimal rkt-accordion summary {
+[data-style='minimal'] rk-list,
+[data-style='minimal'] rk-accordion rk-summary {
   @apply border-l-2px border-l-neutral-muted;
 }
-.minimal :not(accordion > div) rkt-list:focus-within {
+[data-style='minimal'] :not(rk-accordion > div) rk-list:focus-within {
   @apply outline-offset-3 outline-secondary-700 outline;
 }
-.minimal rkt-list > rkt-item,
-.minimal rkt-accordion summary {
+[data-style='minimal'] rk-list > rk-item,
+[data-style='minimal'] rk-accordion summary {
   @apply bg-neutral-base items-center px-2 leading-8 text-neutral-700;
 }
 
-.minimal rkt-item > a {
+[data-style='minimal'] rk-item > a {
   @apply gap-2 px-0;
 }
 
-.minimal rkt-list rkt-item:hover {
+[data-style='minimal'] rk-list rk-item:hover {
   @apply -m-l-2px border-l-2px border-l-neutral-subtle;
 }
-.minimal rkt-accordion summary:hover {
+[data-style='minimal'] rk-accordion summary:hover {
   @apply border-l-neutral-subtle;
 }
-.minimal rkt-list rkt-item[aria-selected='true'] {
+[data-style='minimal'] rk-list rk-item[aria-selected='true'] {
   @apply -m-l-2px border-l-2px border-l-secondary-600 text-secondary-600 bg-neutral-subtle;
 }
-.minimal rkt-accordion .is-selected summary {
+[data-style='minimal'] rk-accordion .is-selected summary {
   @apply border-l-2px border-l-secondary-600 bg-neutral-subtle;
 }
 
-.minimal rkt-accordion .is-expanded summary {
+[data-style='minimal'] rk-accordion .is-expanded summary {
   @apply z-1 sticky top-0;
 }
-.minimal rkt-accordion rkt-item > a {
+[data-style='minimal'] rk-accordion rk-item > a {
   @apply px-0;
 }
-.minimal rkt-item > img,
-.minimal rkt-item > a > img {
+[data-style='minimal'] rk-item > img,
+[data-style='minimal'] rk-item > a > img {
   @apply h-6 w-6;
 }
 
-.minimal rkt-accordion .is-selected summary,
-.minimal rkt-accordion .is-selected summary > a,
-.minimal rkt-accordion rkt-item[aria-selected='true'],
-.minimal rkt-accordion rkt-item[aria-selected='true'] > a {
+[data-style='minimal'] rk-accordion .is-selected rk-summary,
+[data-style='minimal'] rk-accordion .is-selected rk-summary > a,
+[data-style='minimal'] rk-accordion rk-item[aria-selected='true'],
+[data-style='minimal'] rk-accordion rk-item[aria-selected='true'] > a {
   @apply text-secondary-600;
   /* @apply hover:text-secondary; */
 }
 
-/* .minimal nested-list {
+/* [data-style="minimal"] nested-list {
   @apply text-sm;
 } */
-.minimal rkt-node > div {
+[data-style='minimal'] rk-node > div {
   @apply h-7 px-2 py-1;
 }
-.minimal rkt-node > rkt-item {
+[data-style='minimal'] rk-node > rk-item {
   @apply gap-1 px-1;
 }
-.minimal rkt-node > div > span > i {
+[data-style='minimal'] rk-node > div > span > i {
   @apply w-3 border-none;
 }
-.minimal rkt-node > div > rkt-icon {
+[data-style='minimal'] rk-node > div > rk-icon {
   @apply text-xs text-neutral-400;
 }
-.minimal rkt-node[aria-selected='true'] > rkt-item > p {
+[data-style='minimal'] rk-node[aria-selected='true'] > rk-item > p {
   @apply text-secondary-600;
 }
-.minimal rkt-node.is-selected rkt-icon {
+[data-style='minimal'] rk-node.is-selected rk-icon {
   @apply text-secondary-600;
   @apply hover:text-secondary-600;
 }
 
-.minimal .small rkt-list > rkt-item,
-.minimal .small rkt-accordion summary {
+[data-style='minimal'] .small rk-list > rk-item,
+[data-style='minimal'] .small rk-accordion rk-summary {
   @apply text-sm;
 }
 
-.minimal .small rkt-node > div {
+[data-style='minimal'] .small rk-node > div {
   @apply h-5 gap-1 text-sm;
 }
-.minimal .small rkt-node > div > rkt-icon {
+[data-style='minimal'] .small rk-node > div > rk-icon {
   @apply text-sm;
 }
-.minimal .small rkt-item > img,
-.minimal .small rkt-item > a > img {
+[data-style='minimal'] .small rk-item > img,
+[data-style='minimal'] .small rk-item > a > img {
   @apply h-4 w-4;
 }
-.minimal .small rkt-item > a > rkt-icon {
+[data-style='minimal'] .small rk-item > a > rk-icon {
   @apply text-sm leading-6;
 }
-.minimal rkt-accordion.indented rkt-list > rkt-item {
+[data-style='minimal'] rk-accordion.indented rk-list > rk-item {
   @apply px-4;
 }
 
-.minimal .folder-tree {
+[data-style='minimal'] .folder-tree {
   @apply bg-neutral-inset h-full min-w-40;
 }
 
-/* .minimal rkt-node > div > i {
+/* [data-style="minimal"] rk-node > div > i {
   @apply border-neutral-muted;
 } */
 
-.minimal rkt-crumbs {
+[data-style='minimal'] rk-crumbs {
   @apply flex-grow gap-1 text-sm;
 }
-.minimal rkt-crumbs rkt-crumb.is-selected {
+[data-style='minimal'] rk-crumbs rk-crumb.is-selected {
   @apply text-secondary;
 }
 
-.minimal rkt-toggle {
+[data-style='minimal'] rk-switch {
   @apply mx-auto min-h-6 min-w-12 rounded;
   @apply bg-neutral-subtle border-neutral-muted border;
   @apply p-2px leading-loose;
 }
-.minimal rkt-toggle rkt-item {
+[data-style='minimal'] rk-switch rk-item {
   @apply items-center justify-center gap-1 px-3;
   @apply min-h-6 min-w-6 cursor-pointer rounded;
 }
-.minimal rkt-toggle.compact {
+[data-style='minimal'] rk-switch.compact {
   @apply rounded-full;
 }
-.minimal rkt-toggle.compact > rkt-item {
+[data-style='minimal'] rk-switch.compact > rk-item {
   @apply gap-0 rounded-full px-0;
 }
-.minimal rkt-toggle rkt-item[aria-selected='true'] {
+[data-style='minimal'] rk-switch rk-item[aria-selected='true'] {
   @apply bg-secondary text-neutral-800;
 }

package/src/minimal/tabs.css

@@ -1,44 +1,44 @@
-.minimal rkt-tabs:focus {
+[data-style='minimal'] rk-tabs:focus {
   @apply outline-none;
 }
-.minimal rkt-tabs {
+[data-style='minimal'] rk-tabs {
   @apply border-neutral-subtle box-border cursor-pointer select-none gap-2 border-b-2 px-2;
 }
-.minimal rkt-tabs .tab {
+[data-style='minimal'] rk-tabs .tab {
   @apply px-2 text-base leading-8;
 }
-.minimal rkt-tabs .tab rkt-icon[role='img'] {
+[data-style='minimal'] rk-tabs .tab rk-icon[role='img'] {
   @apply h-6 w-6;
 }
-.minimal rkt-tabs .tab rkt-icon[role='button'] {
+[data-style='minimal'] rk-tabs .tab rk-icon[role='button'] {
   @apply h-4 w-4;
 }
-.minimal rkt-tabs.is-below {
+[data-style='minimal'] rk-tabs.is-below {
   @apply border-b-none border-t-2;
 }
-.minimal rkt-tabs > p {
+[data-style='minimal'] rk-tabs > p {
   @apply pr-4;
 }
-.minimal rkt-tabs .tab {
+[data-style='minimal'] rk-tabs .tab {
   @apply relative flex items-center gap-1;
 }
-.minimal rkt-tabs .tab > img {
+[data-style='minimal'] rk-tabs .tab > img {
   @apply h-5 w-5;
 }
 
-.minimal rkt-tabs .tab[aria-selected='true'] {
+[data-style='minimal'] rk-tabs .tab[aria-selected='true'] {
   @apply -mb-2px border-secondary-600 border-b-2;
 }
-.minimal rkt-tabs.is-below .tab {
+[data-style='minimal'] rk-tabs.is-below .tab {
   @apply pt-2px;
 }
-.minimal rkt-tabs.is-below .tab[aria-selected='true'] {
+[data-style='minimal'] rk-tabs.is-below .tab[aria-selected='true'] {
   @apply -mt-2px border-b-none border-b-secondary-600 mb-0 border-t-2;
 }
 
-.minimal .small rkt-tabs .tab {
+[data-style='minimal'] .small rk-tabs .tab {
   @apply px-2 text-sm leading-8;
 }
-.minimal .small rkt-tabs rkt-tab > img {
+[data-style='minimal'] .small rk-tabs rk-tab > img {
   @apply h-5 w-5;
 }

package/src/palette.css

@@ -3,22 +3,22 @@
     --scroll-width: 0.5rem;
   }
   /* light theme colors */
-  .light {
+  [data-mode='light'] {
     @apply rokkit-mode-light;
   }
   @media (prefers-color-scheme: dark) {
-    body:not(.light) {
+    body:not([data-mode='light']) {
       @apply rokkit-mode-dark;
     }
   }
 
   /* dark theme colors */
-  .dark {
+  [data-mode='dark'] {
     @apply rokkit-mode-dark;
   }
 
   @media (prefers-color-scheme: light) {
-    body:not(.dark) {
+    body:not([data-mode='dark']) {
       @apply rokkit-mode-light;
     }
   }

package/src/rokkit/alert.css

@@ -1,4 +1,4 @@
 /* Styles for 'alert-list' class */
-.rokkit rkt-alert-list {
+[data-style='rokkit'] rk-alert-list {
   @apply right-8 top-12 w-80;
 }

package/src/rokkit/atoms.css

@@ -1,37 +1,24 @@
-/* General styles */
-.rokkit {
-  @apply select-none;
-}
-
 /* Zebra styles */
-.rokkit .zebra rkt-item {
+[data-style='rokkit'] .zebra rk-item,
+[data-style='rokkit'] .zebra rk-list-item {
   @apply even:bg-neutral-zebra hover:bg-neutral-50;
 }
 
-/* Styles for 'rkt-icon' class */
-.rokkit rkt-icon {
+/* Styles for 'rk-icon' class */
+/* [data-style="rokkit"] rk-icon {
   @apply text-neutral-700 focus:outline-none;
-}
-.rokkit button {
-  @apply hover:text-secondary rounded-md text-neutral-700 focus:rounded;
-}
-.rokkit button:focus {
-  @apply from-primary to-secondary bg-gradient-to-r text-neutral-200 outline-none dark:text-neutral-800;
-}
-.rokkit button:disabled {
-  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
-}
+} */
 
 /* Styles for input[type='number'] */
-.rokkit input[type='number'] {
+[data-style='rokkit'] input[type='number'] {
   @apply text-right;
 }
-.rokkit input[type='number']::-webkit-inner-spin-button,
-.rokkit input[type='number']::-webkit-outer-spin-button {
+[data-style='rokkit'] input[type='number']::-webkit-inner-spin-button,
+[data-style='rokkit'] input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
 
-.rokkit rkt-progress-bar rkt-value-bar {
+[data-style='rokkit'] rk-progress-bar rk-value-bar {
   @apply from-primary to-secondary text-neutral-subtle bg-gradient-to-r dark:text-neutral-800;
 }
 
@@ -40,30 +27,30 @@
   @apply border-neutral-subtle border;
 }
 
-.rokkit a {
+[data-style='rokkit'] a {
   @apply text-primary-800 cursor-pointer underline underline-offset-4;
   /* text-underline-offset: 0.25rem; */
 }
-.rokkit a:hover {
+[data-style='rokkit'] a:hover {
   @apply text-secondary-700 cursor-pointer;
 }
-.rokkit a:visited {
+[data-style='rokkit'] a:visited {
   @apply text-primary-700;
 }
-.rokkit a:focus {
+[data-style='rokkit'] a:focus {
   @apply outline-none;
 }
 
-.rokkit [aria-current='true'] a {
+[data-style='rokkit'] [aria-current='true'] a {
   @apply text-primary-100;
 }
-.rokkit [aria-current='true'] a:visited {
+[data-style='rokkit'] [aria-current='true'] a:visited {
   @apply text-primary-100;
 }
-.rokkit [aria-current='true'] a:hover {
+[data-style='rokkit'] [aria-current='true'] a:hover {
   @apply text-primary-100;
 }
 
-.rokkit.dark ::-webkit-calendar-picker-indicator {
+[data-style='rokkit'].dark ::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }

package/src/rokkit/carousel.css

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

package/src/rokkit/input.css

@@ -1,36 +1,57 @@
-/* Styles for 'rkt-input-field' class */
-.rokkit rkt-input-field rkt-field {
+/* Styles for 'rk-input-field' class */
+
+[data-style='rokkit'] rk-input-select select {
+  @apply border-none;
+}
+[data-style='rokkit'] rk-input-field rk-field,
+[data-style='rokkit'] rk-input-select {
   @apply p-2px border-neutral-muted box-border rounded border;
 }
-.rokkit rkt-input-field input,
-.rokkit rkt-input-field textarea,
-.rokkit rkt-input-field select {
+[data-style='rokkit'] rk-input-select {
+  @apply flex h-8 items-center px-2;
+}
+[data-style='rokkit'] rk-input-field input,
+[data-style='rokkit'] rk-input-field textarea,
+[data-style='rokkit'] rk-input-field select {
   @apply rounded-sm border-0;
 }
-.rokkit rkt-checkbox {
+[data-style='rokkit'] rk-checkbox {
   @apply outline-none;
 }
-.rokkit rkt-input-field > label {
+[data-style='rokkit'] rk-input-field > label {
   @apply text-secondary-600;
 }
-.rokkit rkt-input-field rkt-field > label {
+[data-style='rokkit'] rk-input-field rk-field > label {
   @apply text-secondary-600 flex h-full w-full items-center text-xs uppercase;
 }
-.rokkit rkt-input-field:not(.disabled) rkt-field:focus-within {
+[data-style='rokkit'] rk-input-field:not(.disabled) rk-field:focus-within {
   @apply border-neutral-base from-primary to-secondary bg-gradient-to-r;
 }
-.rokkit rkt-input-field.disabled label {
+[data-style='rokkit'] rk-input-field.disabled label {
   @apply text-neutral-500;
 }
-/* .rokkit rkt-input-field.disabled rkt-field:focus-within {
+/* [data-style="rokkit"] rk-input-field.disabled rk-field:focus-within {
   @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
 } */
-.rokkit rkt-input-field > span {
+[data-style='rokkit'] rk-input-field > span {
   @apply border-neutral-muted bg-neutral-base aspect-square h-full border-r px-1;
 }
-.rokkit rkt-input-field message {
+[data-style='rokkit'] rk-input-field message {
   @apply bg-neutral-base rounded px-2 py-1;
 }
-.rokkit rkt-input-field.fail {
+[data-style='rokkit'] rk-input-field.fail {
   @apply bg-error rounded px-2;
 }
+
+[data-style='rokkit'] rk-select,
+[data-style='rokkit'] rk-toggle {
+  @apply p-2px border-neutral-subtle box-border rounded-md border;
+}
+
+[data-style='rokkit'] rk-toggle {
+  @apply aspect-square h-9 w-9;
+}
+
+[data-style='rokkit'] rk-select > select {
+  @apply bg-neutral-subtle text-on-neutral-subtle;
+}

package/src/rokkit/layout.css

@@ -1,17 +1,17 @@
-/* Styles for ' rkt-toggle' */
-.rokkit rkt-field rkt-toggle:focus-within {
+/* Styles for ' rk-switch' */
+[data-style='rokkit'] rk-field rk-switch:focus-within {
   @apply outline-none;
 }
-.rokkit rkt-field rkt-toggle {
-  @apply min-h-10 items-center justify-center rounded-sm border-none px-1;
+[data-style='rokkit'] rk-field rk-switch {
+  @apply min-h-8 items-center justify-center rounded-sm border-none px-1;
 }
-.rokkit rkt-field rkt-toggle rkt-item {
+[data-style='rokkit'] rk-field rk-switch rk-item {
   @apply rounded-sm leading-loose;
 }
-.rokkit rkt-field rkt-toggle rkt-item p {
+[data-style='rokkit'] rk-field rk-switch rk-item p {
   @apply justify-center;
 }
 
-.rokkit .horizontal > rkt-field radio-group {
+[data-style='rokkit'] .horizontal > rk-field radio-group {
   @apply md:flex-row md:gap-4;
 }

package/src/rokkit/molecules.css

@@ -1,119 +1,130 @@
-/* Styles for ' rkt-input-range' class */
-.rokkit rkt-input-range rkt-range-track {
+/* Styles for ' rk-input-range' class */
+[data-style='rokkit'] rk-input-range rk-range-track {
   @apply relative mt-2 h-2;
 }
-.rokkit rkt-input-range rkt-range-track rkt-range-track-bar {
+[data-style='rokkit'] rk-input-range rk-range-track rk-range-track-bar {
   @apply bg-neutral-muted border-neutral-muted box-border rounded-full border;
 }
-.rokkit rkt-input-range rkt-range-track selected-bar {
+[data-style='rokkit'] rk-input-range rk-range-track selected-bar {
   @apply top-0px bottom-0px from-primary to-secondary border-secondary rounded-full border bg-gradient-to-r;
 }
-.rokkit rkt-input-range rkt-range-track rkt-thumb {
+[data-style='rokkit'] rk-input-range rk-range-track rk-thumb {
   @apply rounded-sm focus:outline-none;
 }
-/* .rokkit  rkt-input-range rkt-tick p {
+/* [data-style="rokkit"]  rk-input-range rk-tick p {
   @apply text-neutral-800;
 } */
-.rokkit .bookend rkt-range-track rkt-range-track-bar::before,
-.rokkit .bookend rkt-range-track rkt-range-track-bar::after {
+[data-style='rokkit'] .bookend rk-range-track rk-range-track-bar::before,
+[data-style='rokkit'] .bookend rk-range-track rk-range-track-bar::after {
   content: '';
   @apply w-1px absolute -bottom-2 -top-2 rounded-full bg-gray-300;
 }
-.rokkit .bookend rkt-range-track rkt-range-track-bar::before {
+[data-style='rokkit'] .bookend rk-range-track rk-range-track-bar::before {
   @apply -left-1px;
 }
-.rokkit .bookend rkt-range-track rkt-range-track-bar::after {
+[data-style='rokkit'] .bookend rk-range-track rk-range-track-bar::after {
   @apply -right-2px;
 }
 
 /* Styles for 'tick' class */
-/* .rokkit rkt-tick {
+/* [data-style="rokkit"] rk-tick {
   @apply h-6;
 } */
-.rokkit rkt-tick rkt-tick-bar {
+[data-style='rokkit'] rk-tick rk-tick-bar {
   @apply border-neutral h-full;
 }
-.rokkit rkt-tick p {
+[data-style='rokkit'] rk-tick p {
   @apply items-top text-neutral-600;
   font-size: 8px;
 }
 
 /* Styles for 'thumb' class */
-.rokkit rkt-thumb {
+[data-style='rokkit'] rk-thumb {
   @apply from-primary to-secondary border-secondary border bg-gradient-to-r shadow-xl;
 }
-.rokkit rkt-thumb.sliding::before {
+[data-style='rokkit'] rk-thumb.sliding::before {
   content: '';
   @apply bg-secondary absolute bottom-0 left-0 right-0 top-0 rounded-sm opacity-30;
   transform: scale(2, 2);
 }
 
 /* Styles for 'button[role='switch']' class */
-.rokkit button[role='switch'] {
+[data-style='rokkit'] button[role='switch'] {
   @apply h-8 min-h-6 w-16 rounded-full p-0;
   @apply bg-neutral-subtle border-neutral-subtle border;
 }
-.rokkit button[role='switch'] > rkt-mark {
+[data-style='rokkit'] button[role='switch'] > rk-mark {
   @apply top-0.75 h-6 w-6 rounded-full;
   @apply from-primary to-secondary bg-gradient-to-r;
 }
+[data-style='rokkit'] rk-toggle > button {
+  @apply items-center justify-center rounded-md p-0;
+}
+[data-style='rokkit'] rk-toggle > button > rk-icon {
+  @apply aspect-square items-center justify-center;
+}
 
 /* Styles for 'rating' class */
-.rokkit rating {
+[data-style='rokkit'] rating {
   @apply focus:outline-secondary h-9 justify-center rounded text-xl text-neutral-600 focus:outline;
 }
-.rokkit rating > icon {
+[data-style='rokkit'] rating > icon {
   @apply w-8;
 }
-.rokkit rating:focus-within icon[aria-checked='true'] {
+[data-style='rokkit'] rating:focus-within icon[aria-checked='true'] {
   @apply text-primary;
 }
-.rokkit rating icon.hovering > i {
+[data-style='rokkit'] rating icon.hovering > i {
   @apply text-secondary;
 }
 
 /* Pill styles */
-.rokkit .pill {
+[data-style='rokkit'] .pill {
   @apply bg-neutral-inset border-neutral-subtle flex-grow-0 rounded-full border px-2 py-1;
 }
-.rokkit .pill > icon[role='button'] {
+[data-style='rokkit'] .pill > icon[role='button'] {
   @apply hover:bg-neutral-muted h-5 w-5 rounded-full hover:text-current focus:m-0 focus:rounded-full;
 }
 
-.rokkit .pill > rkt-item {
+[data-style='rokkit'] .pill > rk-item {
   @apply gap-2 px-2 leading-6;
 }
-.rokkit .pill > rkt-item > img {
+[data-style='rokkit'] .pill > rk-item > img {
   @apply h-4 w-4;
 }
 
 /* Styles for 'item' class */
-.rokkit rkt-item {
+[data-style='rokkit'] rk-item,
+[data-style='rokkit'] rk-list-item {
   @apply flex flex-shrink items-center gap-1;
 }
-.rokkit rkt-item > p {
+[data-style='rokkit'] rk-item > p,
+[data-style='rokkit'] rk-list-item > p {
   @apply flex-shrink text-ellipsis;
 }
 
 /* Image and link styles */
-.rokkit rkt-item > img,
-.rokkit rkt-item > a > img {
+[data-style='rokkit'] rk-item > img,
+[data-style='rokkit'] rk-item > a > img,
+[data-style='rokkit'] rk-list-item > img,
+[data-style='rokkit'] rk-list-item > a > img {
   @apply h-6 w-6;
 }
-.rokkit rkt-item > a {
+[data-style='rokkit'] rk-item > a,
+[data-style='rokkit'] rk-list-item > a {
   @apply gap-2;
 }
-.rokkit node rkt-item {
+[data-style='rokkit'] rk-node rk-item {
   @apply gap-2 px-1;
 }
-/* rkt-crumbs styles */
-.rokkit rkt-crumbs {
+/* rk-crumbs styles */
+[data-style='rokkit'] rk-crumbs {
   @apply flex-grow gap-1;
 }
-.rokkit rkt-crumbs rkt-crumb.is-selected {
+[data-style='rokkit'] rk-crumbs rk-crumb.is-selected {
   @apply text-secondary-700;
 }
 
-.rokkit rkt-day-of-month[aria-selected='true'] {
+[data-style='rokkit'] rk-day-of-month[aria-selected='true'] {
   @apply from-primary to-secondary bg-gradient-to-r text-neutral-200 dark:text-neutral-800;
 }