@rokkit/themes 1.0.0-next.94 → 1.0.0-next.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.94",
+  "version": "1.0.0-next.96",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -11,15 +11,15 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@vitest/coverage-v8": "^1.4.0",
-    "@vitest/ui": "~1.4.0",
-    "jsdom": "^24.0.0",
-    "svelte": "^4.2.12",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.8",
-    "vitest": "~1.4.0",
-    "shared-config": "1.0.0-next.94"
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "~1.6.0",
+    "jsdom": "^24.1.0",
+    "svelte": "^4.2.17",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vitest": "~1.6.0",
+    "shared-config": "1.0.0-next.96"
   },
   "files": [
     "src"
@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.94"
+    "@rokkit/core": "1.0.0-next.96"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/base/alert.css

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

package/src/base/molecules.css

@@ -72,9 +72,9 @@ day-of-month[aria-selected='true'] {
 }
 
 /* Form styles */
-/* form button[type='submit'] {
-  @apply mt-4;
-} */
+form {
+  @apply flex flex-col gap-4;
+}
 field-layout.vertical {
   @apply flex flex-col gap-2;
 }

package/src/base/organisms.css

@@ -1,30 +1,3 @@
-/* Alert styles */
-alert-list {
-  @apply top-4 right-4 w-80;
-}
-alert,
-error,
-info,
-warning,
-success {
-  @apply px-4 py-2 border rounded select-none cursor-pointer;
-}
-alert.error {
-  @apply bg-error text-error border-error;
-}
-alert.info,
-info {
-  @apply bg-info text-info border-info;
-}
-alert.warning,
-warning {
-  @apply bg-warn text-warn border-warn;
-}
-alert.success,
-success {
-  @apply bg-pass text-pass border-pass;
-}
-
 input-select,
 drop-down {
   @apply overflow-visible cursor-pointer;

package/src/base/tree.css

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

package/src/base.css

@@ -5,5 +5,7 @@
 @import './base/organisms.css';
 @import './base/layout.css';
 @import './base/table.css';
+@import './base/tree.css';
 @import './base/carousel.css';
 @import './base/animation.css';
+@import './base/alert.css';

package/src/material/list.css

@@ -26,7 +26,7 @@
   @apply border-b-0 border-t-3;
 }
 
-.material node {
+.material node > div {
   @apply h-7 px-2;
 }
 .material node > item {

package/src/minimal/list.css

@@ -56,18 +56,20 @@
   /* @apply hover:text-secondary; */
 }
 
-.minimal node {
-  @apply h-7 px-2;
+/* .minimal nested-list {
+  @apply text-sm;
+} */
+.minimal node > div {
+  @apply h-7 px-2 py-1;
 }
 .minimal node > item {
   @apply px-1 gap-1;
 }
-.minimal node > span {
-  @apply w-3;
+.minimal node > div > span > i {
+  @apply border-none w-3;
 }
-.minimal node > span > icon {
-  /* .minimal node > icon { */
-  @apply text-sm;
+.minimal node > div > icon {
+  @apply text-xs text-neutral-400;
 }
 .minimal node[aria-selected='true'] > item > p {
   @apply text-secondary-600;
@@ -82,10 +84,10 @@
   @apply text-sm;
 }
 
-.minimal .small node {
+.minimal .small node > div {
   @apply text-sm gap-1 h-5;
 }
-.minimal .small node > span > icon {
+.minimal .small node > div > icon {
   @apply text-sm;
 }
 .minimal .small item > img,
@@ -103,9 +105,9 @@
   @apply h-full bg-neutral-inset min-w-40;
 }
 
-.minimal node > span > i {
+/* .minimal node > div > i {
   @apply border-neutral-muted;
-}
+} */
 
 .minimal crumbs {
   @apply flex-grow gap-1 text-sm;

package/src/rokkit/alert.css

@@ -0,0 +1,4 @@
+/* Styles for 'alert-list' class */
+.rokkit alert-list {
+  @apply top-12 right-8 w-80;
+}

package/src/rokkit/input.css

@@ -0,0 +1,36 @@
+/* Styles for 'input-field' class */
+.rokkit input-field field {
+  @apply p-2px box-border border border-neutral-muted rounded;
+}
+.rokkit input-field input,
+.rokkit input-field textarea,
+.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;
+}
+.rokkit input-field.disabled label {
+  @apply text-neutral-500;
+}
+/* .rokkit input-field.disabled field:focus-within {
+  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
+} */
+.rokkit input-field > span {
+  @apply border-r border-neutral-muted bg-neutral-base px-1 h-full aspect-square;
+}
+.rokkit input-field message {
+  @apply px-2 py-1 bg-neutral-base rounded;
+}
+.rokkit input-field.fail {
+  @apply bg-error rounded px-2;
+}

package/src/rokkit/molecules.css

@@ -1,40 +1,3 @@
-/* Styles for 'input-field' class */
-.rokkit input-field field {
-  @apply p-2px box-border border border-neutral-muted rounded;
-}
-.rokkit input-field input,
-.rokkit input-field textarea,
-.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;
-}
-.rokkit input-field.disabled label {
-  @apply text-neutral-500;
-}
-/* .rokkit input-field.disabled field:focus-within {
-  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
-} */
-.rokkit input-field > span {
-  @apply border-r border-neutral-muted bg-neutral-base px-1 h-full aspect-square;
-}
-.rokkit input-field message {
-  @apply px-2 py-1 bg-neutral-base rounded;
-}
-.rokkit input-field.fail {
-  @apply bg-error rounded px-2;
-}
-
 /* Styles for 'input-range' class */
 .rokkit input-range range-track {
   @apply h-2 mt-2 relative;
@@ -109,11 +72,6 @@
   @apply text-secondary;
 }
 
-/* Styles for 'alert-list' class */
-.rokkit alert-list {
-  @apply top-4 right-4 w-80;
-}
-
 /* Pill styles */
 .rokkit .pill {
   @apply rounded-full bg-neutral-inset border-neutral-subtle border px-2 py-1 flex-grow-0;

package/src/rokkit.css

@@ -1,6 +1,8 @@
 @import './base.css';
 
 @import './rokkit/atoms.css';
+@import './rokkit/alert.css';
+@import './rokkit/input.css';
 @import './rokkit/molecules.css';
 @import './rokkit/organisms.css';
 @import './rokkit/layout.css';