@rokkit/themes 1.0.0-next.76 → 1.0.0-next.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.76",
+  "version": "1.0.0-next.78",
   "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.0.12",
     "vitest": "~1.2.2",
-    "shared-config": "1.0.0-next.76"
+    "shared-config": "1.0.0-next.78"
   },
   "files": [
     "src"
@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.76"
+    "@rokkit/core": "1.0.0-next.78"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/base/molecules.css

@@ -2,7 +2,7 @@
 input-range range-track {
   @apply h-1 mt-3 relative;
 }
-input-range range-track span {
+input-range range-track range-track-bar {
   @apply bg-neutral-subtle border-neutral-muted rounded-full;
 }
 input-range range-track selected {
@@ -21,27 +21,27 @@ input-range thumb.sliding::before {
 }
 
 /* Bookend styles */
-.bookend range-track span::before,
-.bookend range-track span::after {
+.bookend range-track range-track-bar::before,
+.bookend range-track range-track-bar::after {
   content: '';
   @apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
 }
-.bookend range-track span::before {
+.bookend range-track range-track-bar::before {
   @apply -left-1px;
 }
-.bookend range-track span::after {
+.bookend range-track range-track-bar::after {
   @apply -right-2px;
 }
 
 /* Input range tick styles */
 input-range tick {
-  @apply h-6;
+  grid-template-rows: 7px auto;
 }
-input-range tick span {
-  @apply border-neutral h-full;
+input-range tick tick-bar {
+  @apply border-neutral-600 h-full;
 }
 input-range tick p {
-  @apply items-top;
+  @apply items-top text-neutral-600 leading-tight;
   font-size: 8px;
 }
 

package/src/minimal/input.css

@@ -78,9 +78,9 @@
   @apply -right-2px;
 }
 
-.minimal tick {
+/* .minimal tick {
   @apply h-6;
-}
+} */
 .minimal tick span {
   @apply border-neutral h-full;
 }

package/src/rokkit/atoms.css

@@ -62,3 +62,7 @@
 .rokkit [aria-current='true'] a:hover {
   @apply text-primary-100;
 }
+
+.rokkit.dark ::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}

package/src/rokkit/layout.css

@@ -3,10 +3,10 @@
   @apply outline-none;
 }
 .rokkit field toggle-switch {
-  @apply rounded-sm min-h-10 items-center justify-center px-3 border-none;
+  @apply min-h-10 items-center justify-center px-1 border-none rounded-sm;
 }
 .rokkit field toggle-switch item {
-  @apply leading-loose;
+  @apply leading-loose rounded-sm;
 }
 .rokkit field toggle-switch item p {
   @apply justify-center;

package/src/rokkit/molecules.css

@@ -7,9 +7,15 @@
 .rokkit input-field select {
   @apply border-0 rounded-sm;
 }
+.rokkit checkbox {
+  @apply outline-none;
+}
 .rokkit input-field > label {
   @apply text-secondary-600;
 }
+.rokkit input-field field > label {
+  @apply w-full h-full flex items-center text-secondary-600 uppercase text-xs;
+}
 .rokkit input-field:not(.disabled) field:focus-within {
   @apply border-neutral-base bg-gradient-to-r from-primary to-secondary;
 }
@@ -19,7 +25,7 @@
 /* .rokkit input-field.disabled field:focus-within {
   @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
 } */
-.rokkit input-field span {
+.rokkit input-field > span {
   @apply border-r border-neutral-muted bg-neutral-base px-1 h-full aspect-square;
 }
 .rokkit input-field message {
@@ -33,40 +39,39 @@
 .rokkit input-range range-track {
   @apply h-2 mt-2 relative;
 }
-.rokkit input-range range-track span {
-  @apply bg-neutral-subtle border box-border border-neutral-muted rounded-full;
+.rokkit input-range range-track range-track-bar {
+  @apply bg-neutral-muted border box-border border-neutral-muted rounded-full;
 }
-.rokkit input-range range-track selected {
+.rokkit input-range range-track selected-bar {
   @apply border top-0px bottom-0px bg-gradient-to-r from-primary to-secondary border-secondary rounded-full;
 }
 .rokkit input-range range-track thumb {
   @apply rounded-sm focus:outline-none;
 }
-.rokkit input-range range-ticks {
-  font-size: 6px;
-  @apply bg-primary-100;
-}
-.rokkit .bookend range-track span::before,
-.rokkit .bookend range-track span::after {
+/* .rokkit input-range tick p {
+  @apply text-neutral-800;
+} */
+.rokkit .bookend range-track range-track-bar::before,
+.rokkit .bookend range-track range-track-bar::after {
   content: '';
   @apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
 }
-.rokkit .bookend range-track span::before {
+.rokkit .bookend range-track range-track-bar::before {
   @apply -left-1px;
 }
-.rokkit .bookend range-track span::after {
+.rokkit .bookend range-track range-track-bar::after {
   @apply -right-2px;
 }
 
 /* Styles for 'tick' class */
-.rokkit tick {
+/* .rokkit tick {
   @apply h-6;
-}
-.rokkit tick span {
+} */
+.rokkit tick tick-bar {
   @apply border-neutral h-full;
 }
 .rokkit tick p {
-  @apply items-top text-neutral;
+  @apply items-top text-neutral-600;
   font-size: 8px;
 }