@rokkit/themes 1.0.0-next.110 → 1.0.0-next.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.110",
+  "version": "1.0.0-next.112",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/base/atoms.css

@@ -4,7 +4,7 @@ rk-icon {
   /* @apply h-6 min-h-6 w-6; */
 }
 button > rk-icon {
-  @apply text-md aspect-square cursor-pointer select-none p-2 focus:outline;
+  @apply text-md aspect-square cursor-pointer select-none;
 }
 rk-icon > i {
   @apply mx-auto aspect-square text-current;

package/src/base/core.css

@@ -5,6 +5,9 @@
 *[tabindex='-1']:focus {
   @apply outline-none;
 }
+* {
+  @apply box-border;
+}
 
 /* Body styles */
 body {

package/src/base/molecules.css

@@ -105,5 +105,5 @@ rk-input-field > label.required::after {
 }
 
 rk-select > select {
-  @apply min-h-9 min-w-40 rounded px-3;
+  @apply min-w-40 rounded px-3 leading-loose;
 }

package/src/base/toggles.css

@@ -5,7 +5,7 @@ rk-checkbox {
 
 rk-switch,
 rk-toggle {
-  @apply flex items-center gap-2;
+  @apply flex items-center;
 }
 
 rk-radio-group label {
@@ -13,9 +13,5 @@ rk-radio-group label {
 }
 
 rk-toggle {
-  @apply text-primary-700;
-}
-
-rk-toggle button {
-  @apply flex h-8 w-8 items-center justify-center rounded-sm;
+  @apply text-primary-700 flex items-center justify-center rounded-sm;
 }

package/src/rokkit/atoms.css

@@ -4,11 +4,6 @@
   @apply even:bg-neutral-zebra hover:bg-neutral-50;
 }
 
-/* Styles for 'rk-icon' class */
-/* [data-style="rokkit"] rk-icon {
-  @apply text-neutral-700 focus:outline-none;
-} */
-
 /* Styles for input[type='number'] */
 [data-style='rokkit'] input[type='number'] {
   @apply text-right;
@@ -23,13 +18,14 @@
 }
 
 /* Styles for 'searchable' class */
-.searchable input {
+[data-style='rokkit'] .searchable input {
   @apply border-neutral-subtle border;
 }
-
+[data-style='rokkit'] a.button {
+  @apply no-underline;
+}
 [data-style='rokkit'] a {
   @apply text-primary-800 cursor-pointer underline underline-offset-4;
-  /* text-underline-offset: 0.25rem; */
 }
 [data-style='rokkit'] a:hover {
   @apply text-secondary-700 cursor-pointer;
@@ -51,6 +47,6 @@
   @apply text-primary-100;
 }
 
-[data-style='rokkit'].dark ::-webkit-calendar-picker-indicator {
+[data-style='rokkit'] .dark ::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }

package/src/rokkit/input.css

@@ -43,15 +43,10 @@
   @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 {
+  @apply border-neutral-subtle box-border h-9 rounded-md border;
 }
 
 [data-style='rokkit'] rk-select > select {
-  @apply bg-neutral-subtle text-on-neutral-subtle;
+  @apply bg-neutral-subtle text-on-neutral-subtle h-full;
 }

package/src/rokkit/molecules.css

@@ -57,12 +57,6 @@
   @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 */
 [data-style='rokkit'] rating {

package/src/rokkit/organisms.css

@@ -82,10 +82,10 @@
   @apply from-primary to-secondary bg-gradient-to-r text-white;
 }
 [data-style='rokkit'] a.square > rk-icon {
-  @apply text-on-neutral-subtle bg-neutral-subtle h-full w-full rounded-md;
+  @apply text-on-neutral-subtle h-full w-full;
 }
 [data-style='rokkit'] a.square {
-  @apply border-neutral-subtle p-2px flex h-10 w-10 items-center justify-center rounded-md border;
+  @apply border-neutral-subtle bg-neutral-subtle flex items-center justify-center rounded-md border leading-loose;
 }
 [data-style='rokkit'] button-group {
   @apply gap-1px m-auto flex items-center justify-center py-1;

package/src/rokkit/toggle.css

@@ -8,7 +8,7 @@
 }
 [data-style='rokkit'] rk-switch:focus-within,
 [data-style='rokkit'] rk-toggle:focus-within {
-  @apply ring-primary-500 outline-none ring-2;
+  @apply ring-primary-500 px-2 outline-none;
 }
 
 [data-style='rokkit'] rk-switch.minimal {
@@ -18,16 +18,47 @@
   @apply text-md h-4;
 }
 [data-style='rokkit'] rk-toggle {
-  @apply min-h-10 min-w-10 rounded-md;
+  @apply border-neutral-subtle bg-neutral-subtle box-border aspect-square h-9 border;
+  @apply flex items-center justify-center rounded-md leading-loose;
 }
 
-[data-style='rokkit'] rk-toggle button {
-  @apply m-0 h-full w-full p-0;
+[data-style='rokkit'] rk-toggle:focus-within,
+[data-style='rokkit'] a.button.square:focus-within {
+  @apply ring-secondary border-neutral-base border ring-2;
+}
+[data-style='rokkit'] rk-toggle:focus-within button {
+  @apply p-0;
 }
+[data-style='rokkit'] rk-toggle > button {
+  @apply p-0 outline-none;
+}
+/* [data-style='rokkit'] rk-toggle rk-icon {
+  @apply bg-neutral-base flex rounded p-0 leading-loose;
+} */
 
-[data-style='rokkit'] rk-toggle.small {
-  @apply p-2px flex aspect-square flex-col items-center justify-center;
+[data-style='rokkit'] a.square {
+  @apply aspect-square min-h-9 min-w-9;
+}
+[data-style='rokkit'] a.button {
+  @apply p-0;
 }
+[data-style='rokkit'] rk-toggle rk-icon {
+  @apply bg-neutral-subtle h-full w-full rounded-md;
+}
+
+/* [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;
+} */
+/* [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;
 } */