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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.104",
+  "version": "1.0.0-next.106",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -32,6 +32,6 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.104"
+    "@rokkit/core": "latest"
   }
 }

package/src/base/alert.css

@@ -1,30 +1,30 @@
 /* Alert styles */
-rkt-alert-list {
+rk-alert-list {
   @apply right-8 top-12 w-80;
 }
 
-rkt-alert,
-rkt-error,
-rkt-info,
-rkt-warning,
-rkt-success {
-  @apply cursor-pointer select-none rounded border px-4 py-2;
+rk-alert,
+rk-error,
+rk-info,
+rk-warning,
+rk-success {
+  @apply cursor-pointer rounded border px-4 py-2;
 }
 
-rkt-alert.error,
-rkt-alert.danger,
-rkt-error {
+rk-alert.error,
+rk-alert.danger,
+rk-error {
   @apply bg-error text-error-contrast border-error-muted;
 }
-rkt-alert.info,
-rkt-info {
+rk-alert.info,
+rk-info {
   @apply bg-info text-info-contrast border-info-muted;
 }
-rkt-alert.warning,
-rkt-warning {
+rk-alert.warning,
+rk-warning {
   @apply bg-warn text-warn-contrast border-warn-muted;
 }
-rkt-alert.success,
-rkt-success {
+rk-alert.success,
+rk-success {
   @apply bg-success text-success-contrast border-success-muted;
 }

package/src/base/animation.css

@@ -8,6 +8,21 @@
   }
 }
 
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(1px);
+  }
+  50% {
+    transform: translateX(-1px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 /* Button and focus animation */
 @keyframes button-pop {
   0% {

package/src/base/atoms.css

@@ -1,59 +1,58 @@
 /* Icon styles */
-rkt-icon {
+rk-icon {
   @apply flex flex-shrink-0 flex-grow-0 items-center justify-center;
-  @apply h-4 min-h-4 w-4;
+  /* @apply h-6 min-h-6 w-6; */
 }
-button > rkt-icon {
-  @apply aspect-square cursor-pointer select-none p-2 focus:outline;
+button > rk-icon {
+  @apply text-md aspect-square cursor-pointer select-none p-2 focus:outline;
 }
-rkt-icon > i {
-  @apply mx-auto aspect-square text-2xl leading-6 text-current;
+rk-icon > i {
+  @apply mx-auto aspect-square text-current;
 }
-rkt-icon.large > i {
+rk-icon.large {
   @apply text-3xl;
 }
-rkt-icon.medium > i {
+rk-icon.medium {
   @apply text-lg leading-5;
 }
-rkt-icon.small > i {
+rk-icon.small {
   @apply leading-4;
   font-size: 1rem;
 }
-button > rkt-icon.large {
+button > rk-icon.large {
   @apply h-12 w-12;
 }
-button > rkt-icon.medium {
+button > rk-icon.medium {
   @apply h-8 w-8;
 }
-button > rkt-icon.small {
+button > rk-icon.small {
   @apply h-6 w-6;
 }
 
 /* Scroll styles */
-rkt-scroll {
+rk-scroll {
   @apply flex flex-col overflow-y-scroll;
 }
 
 /* Square styles */
 square {
-  @apply flex aspect-square h-full min-h-full flex-col items-center justify-center;
+  @apply flex aspect-square flex-col items-center justify-center;
+  /*h-full min-h-full*/
 }
 /* Item styles */
-rkt-item,
+rk-item,
+rk-list-item,
 .item {
-  @apply flex flex-shrink-0 flex-grow-0 cursor-pointer select-none items-center gap-2;
+  @apply flex flex-shrink-0 flex-grow-0 cursor-pointer items-center gap-2;
 }
-rkt-item p,
-rkt-summary p {
+
+rk-item p,
+rk-list-item p,
+rk-summary p {
   @apply flex flex-grow;
 }
 
 /* Overlay styles */
-rkt-overlay {
+rk-overlay {
   @apply bg-neutral-inset bg-opacity-50;
 }
-
-/* Checkbox styles */
-rkt-checkbox {
-  @apply gap-2;
-}

package/src/base/carousel.css

@@ -1,18 +1,18 @@
-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-xl;
 }
-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 m-0 block h-4 w-4 cursor-pointer rounded-full p-0 focus:outline-none;
 }
-rkt-carousel rkt-dot[aria-checked='true'] {
+rk-carousel rk-dot[aria-checked='true'] {
   @apply bg-primary;
 }

package/src/base/core.css

@@ -35,6 +35,7 @@ pre {
 .disabled {
   @apply text-disabled;
 }
+
 input[disabled='true'],
 textarea[disabled='true'],
 select[disabled='true'] {
@@ -42,28 +43,29 @@ select[disabled='true'] {
 }
 
 /* plots*/
-rkt-plot {
+rk-plot {
   @apply bg-neutral-inset rounded-md p-4;
 }
+
 g[aria-label='tip'] {
   --plot-background: var(--neutral-200);
 }
 
-rkt-input-field input,
-rkt-input-field toggle-switch,
-rkt-drop-down {
+rk-input-field input,
+rk-input-field toggle-switch,
+rk-drop-down {
   @apply focus:outline-none;
 }
 
-rkt-alert,
-rkt-error,
-rkt-info,
-rkt-warning,
-rkt-success {
-  @apply cursor-pointer select-none rounded border px-4 py-2;
+rk-alert,
+rk-error,
+rk-info,
+rk-warning,
+rk-success {
+  @apply cursor-pointer rounded border px-4 py-2;
 }
 
-rkt-checkbox {
+rk-checkbox {
   @apply gap-2;
 }
 
@@ -71,14 +73,32 @@ button:disabled {
   @apply bg-neutral-muted cursor-not-allowed text-neutral-500;
 }
 
-rkt-cell.cell-type-string {
+rk-cell.cell-type-string {
   @apply text-left;
 }
-rkt-cell.cell-type-integer rkt-itemp,
-rkt-cell.cell-type-number rkt-itemp {
+rk-cell.cell-type-integer rk-item p,
+rk-cell.cell-type-number rk-item p {
   @apply text-right;
 }
 
-rkt-cell rkt-item {
+rk-cell rk-item {
   @apply flex w-full;
 }
+
+.dark ::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
+
+/* Autofill styles */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: var(--neutral-200);
+  transition: background-color 5000s ease-in-out 0s;
+}

package/src/base/layout.css

@@ -1,4 +1,4 @@
-rkt-container > rkt-segment {
+rk-container > rk-segment {
   @apply h-full overflow-hidden;
 }
 

package/src/base/molecules.css

@@ -1,73 +1,73 @@
 /* Input range styles */
-rkt-input-range rkt-range-track {
+rk-input-range rk-range-track {
   @apply relative mt-3 h-1;
 }
-rkt-input-range rkt-range-track rkt-range-track-bar {
+rk-input-range rk-range-track rk-range-track-bar {
   @apply bg-neutral-subtle border-neutral-muted rounded-full;
 }
-rkt-input-range rkt-range-track selected {
+rk-input-range rk-range-track selected {
   @apply top-0px bottom-0px;
 }
-rkt-input-range rkt-range-track rkt-thumb {
+rk-input-range rk-range-track rk-thumb {
   @apply rounded-full;
 }
-rkt-input-range rkt-thumb {
+rk-input-range rk-thumb {
   @apply bg-secondary border-secondary -top-1.5 border shadow-xl;
 }
-rkt-input-range rkt-thumb.sliding::before {
+rk-input-range rk-thumb.sliding::before {
   content: '';
   @apply bg-secondary-400 absolute bottom-0 left-0 right-0 top-0 rounded-full opacity-30;
   transform: scale(2, 2);
 }
 
 /* Bookend styles */
-.bookend rkt-range-track rkt-range-track-bar::before,
-.bookend rkt-range-track rkt-range-track-bar::after {
+.bookend rk-range-track rk-range-track-bar::before,
+.bookend rk-range-track rk-range-track-bar::after {
   content: '';
   @apply w-1px absolute -bottom-2 -top-2 rounded-full bg-gray-300;
 }
-.bookend rkt-range-track rkt-range-track-bar::before {
+.bookend rk-range-track rk-range-track-bar::before {
   @apply -left-1px;
 }
-.bookend rkt-range-track rkt-range-track-bar::after {
+.bookend rk-range-track rk-range-track-bar::after {
   @apply -right-2px;
 }
 
-/* Input rkt-range tick styles */
-rkt-input-range tick {
+/* Input rk-range tick styles */
+rk-input-range tick {
   grid-template-rows: 7px auto;
 }
-rkt-input-range tick tick-bar {
+rk-input-range tick tick-bar {
   @apply h-full border-neutral-600;
 }
-rkt-input-range tick p {
+rk-input-range tick p {
   @apply items-top leading-tight text-neutral-600;
   font-size: 8px;
 }
 
-/* Calendar styles */
-calendar {
+/* rk-calendar styles */
+rk-calendar {
   @apply overflow-hidden rounded-md shadow-lg;
 }
-calendar month-year {
+rk-calendar month-year {
   @apply bg-secondary-400 text-white;
 }
-calendar cal-body days-of-week p,
-calendar cal-body days-of-month p {
+rk-calendar cal-body days-of-week p,
+rk-calendar cal-body days-of-month p {
   @apply h-8 w-8 text-xs;
 }
-calendar cal-body days-of-week p.weekend,
-calendar cal-body days-of-month p.weekend,
-calendar cal-body days-of-month p.holiday {
+rk-calendar cal-body days-of-week p.weekend,
+rk-calendar cal-body days-of-month p.weekend,
+rk-calendar cal-body days-of-month p.holiday {
   @apply text-primary-700;
 }
-calendar cal-body days-of-month {
+rk-calendar cal-body days-of-month {
   @apply gap-2px;
 }
-day-of-month {
+rk-day-of-month {
   @apply hover:bg-secondary-200 hover:rounded-full;
 }
-day-of-month[aria-selected='true'] {
+rk-day-of-month[aria-selected='true'] {
   @apply bg-secondary rounded-full text-white;
 }
 
@@ -81,46 +81,29 @@ field-layout.vertical {
 field-layout.horizontal {
   @apply flex flex-col gap-2 md:flex-row md:gap-4;
 }
-selected-item rkt-item {
+selected-item rk-item {
   @apply flex-grow;
 }
-rkt-input-field {
+rk-input-field {
   @apply m-0 w-full py-1;
 }
-rkt-input-field input,
-rkt-input-field textarea,
-rkt-input-field select,
-rkt-input-field > field > :not(icon) {
+rk-input-field input,
+rk-input-field textarea,
+rk-input-field select,
+rk-input-field > field > :not(icon) {
   @apply px-3;
   @apply min-h-9 flex-grow leading-loose outline-none;
   @apply bg-neutral-subtle text-neutral-800;
 }
-rkt-input-field > label {
+rk-input-field > label {
   @apply text-xs uppercase;
   @apply leading-loose;
 }
-rkt-input-field > label.required::after {
+rk-input-field > label.required::after {
   content: ' *';
   @apply state-danger;
 }
 
-radio-group label {
-  @apply cursor-pointer uppercase;
-}
-/* Progress bar styles */
-progress-bar {
-  @apply bg-neutral-muted border-neutral-subtle border;
-}
-progress-bar value-bar {
-  @apply bg-primary;
-}
-
-.indeterminate value-bar {
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  /* Move the bar infinitely */
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-name: pendulum;
+rk-select > select {
+  @apply min-h-9 min-w-40 rounded px-3;
 }

package/src/base/organisms.css

@@ -1,25 +1,65 @@
-rkt-input-select,
-rkt-drop-down {
+/* default structure */
+/*  List styles */
+rk-list {
+  @apply flex w-full flex-shrink-0 select-none flex-col;
+}
+
+/* Accordion */
+rk-accordion {
+  @apply flex w-full select-none flex-col;
+}
+/* Node Styles */
+rk-node {
+  @apply flex min-h-5 cursor-pointer select-none flex-col;
+}
+/* Nested List Styles */
+rk-nested-list {
+  @apply flex w-full flex-col;
+}
+rk-tree {
+  @apply flex h-full w-full flex-shrink-0 flex-col scroll-auto;
+}
+rk-status-report {
+  @apply flex flex-col;
+}
+rk-status-report > rk-message {
+  @apply flex gap-2;
+}
+rk-input-range {
+  @apply relative grid h-10 grid-rows-2;
+}
+rk-checkbox {
+  @apply flex cursor-pointer select-none items-center leading-loose;
+}
+rk-crumbs {
+  @apply flex gap-1;
+}
+rk-pill {
+  @apply py-2px flex items-center gap-2 px-2;
+}
+
+rk-input-select,
+rk-drop-down {
   @apply cursor-pointer overflow-visible;
 }
 
-rkt-input-field rkt-field {
+rk-input-field rk-field {
   @apply gap-1px;
 }
-rkt-input-field rkt-field rkt-icon {
+rk-input-field rk-field rk-icon {
   @apply bg-neutral-subtle h-9 w-9 text-neutral-800;
 }
 
-rkt-input-field > rkt-field > rkt-input-select {
+rk-input-field > rk-field > rk-input-select {
   @apply px-0;
 }
 
-rkt-input-select rkt-selected-item > rkt-icon,
-rkt-drop-down > button > span > rkt-icon {
+rk-input-select rk-selected-item > rk-icon,
+rk-drop-down > button > span > rk-icon {
   @apply h-full w-9;
 }
-rkt-input-select > rkt-selected-item,
-rkt-drop-down > button > span {
+rk-input-select > rk-selected-item,
+rk-drop-down > button > span {
   /* @apply bg-neutral-base pl-3; */
   @apply min-h-9 items-center gap-2 pl-3 normal-case;
   @apply rounded text-neutral-800;

package/src/base/progress.css

@@ -0,0 +1,21 @@
+/* Progress bar styles */
+rk-progress {
+  @apply flex w-full;
+}
+
+rk-progress {
+  @apply bg-neutral-muted border-neutral-subtle border;
+}
+rk-progress value-bar {
+  @apply bg-primary;
+}
+
+.indeterminate value-bar {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  /* Move the bar infinitely */
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-name: pendulum;
+}

package/src/base/table.css

@@ -43,7 +43,7 @@ table > tfoot {
 table > tfoot > tr {
   @apply table-row font-semibold text-neutral-800;
 }
-rkt-tree-table,
-rkt-table {
+rk-tree-table,
+rk-table {
   @apply max-h-full overflow-y-auto;
 }

package/src/base/toggles.css

@@ -0,0 +1,21 @@
+/* Checkbox styles */
+rk-checkbox {
+  @apply gap-2;
+}
+
+rk-switch,
+rk-toggle {
+  @apply flex items-center gap-2;
+}
+
+rk-radio-group label {
+  @apply cursor-pointer uppercase;
+}
+
+rk-toggle {
+  @apply text-primary-700;
+}
+
+rk-toggle button {
+  @apply flex h-8 w-8 items-center justify-center rounded-sm;
+}

package/src/base/tree.css

@@ -1,18 +1,18 @@
-rkt-tree,
-rkt-nested-list {
+rk-tree,
+rk-nested-list {
   @apply flex w-full flex-col text-sm;
 }
-rkt-nested-list rkt-node > div {
+rk-nested-list rk-node > div {
   @apply h-8 px-2;
 }
 
-rkt-nested-list rkt-node {
+rk-nested-list rk-node {
   @apply flex flex-col;
 }
 
-rkt-node > div > rkt-item {
+rk-node > div > rk-item {
   @apply px-1;
 }
-rkt-node > div > span {
+rk-node > div > span {
   @apply flex-shrink-0;
 }

package/src/base.css

@@ -9,3 +9,5 @@
 @import './base/carousel.css';
 @import './base/animation.css';
 @import './base/alert.css';
+@import './base/progress.css';
+@import './base/toggles.css';

package/src/markdown.css

@@ -72,7 +72,7 @@
 }
 /* postcss-ignore */
 .markdown-body summary {
-  display: rkt-list-item;
+  display: rk-list-item;
 }
 /* postcss-ignore */
 .markdown-body a {
@@ -223,7 +223,7 @@
   margin-bottom: 0;
 }
 .markdown-body ul {
-  rkt-list-style-type: none;
+  rk-list-style-type: none;
 }
 .markdown-body ul li {
   @apply relative mb-2;
@@ -234,19 +234,19 @@
 }
 
 .markdown-body ol {
-  rkt-list-style-type: decimal;
+  rk-list-style-type: decimal;
 }
 
 .markdown-body ol ol,
 .markdown-body ul ol {
-  rkt-list-style-type: lower-roman;
+  rk-list-style-type: lower-roman;
 }
 
 .markdown-body ol ol ol,
 .markdown-body ol ul ol,
 .markdown-body ul ol ol,
 .markdown-body ul ul ol {
-  rkt-list-style-type: lower-alpha;
+  rk-list-style-type: lower-alpha;
 }
 
 .markdown-body dd {
@@ -942,7 +942,7 @@
 }
 
 .markdown-body .task-list-item {
-  rkt-list-style-type: none;
+  rk-list-style-type: none;
 }
 
 .markdown-body .task-list-item + .task-list-item {

package/src/material/base.css

@@ -1,12 +1,12 @@
 @import '../base.css';
 
-.material rkt-icon[role='button'] {
+[data-style='material'] rk-icon[role='button'] {
   @apply text-neutral-muted hover:text-primary focus:outline-primary focus:m-1px focus:rounded;
 }
-.material rkt-icon.disabled[role='button'] {
+[data-style='material'] rk-icon.disabled[role='button'] {
   @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
 }
 
-.material * {
+[data-style='material'] * {
   @apply focus:outline-primary-400;
 }