@rokkit/themes 1.0.0-next.89 → 1.0.0-next.90

package/package.json

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

package/src/base/core.css

@@ -49,6 +49,14 @@ pre {
   @apply outline-disabled;
 }
 
+/* plots*/
+plot {
+  @apply rounded-md bg-neutral-inset p-4;
+}
+g[aria-label='tip'] {
+  --plot-background: var(--neutral-200);
+}
+
 input-field input,
 input-field toggle-switch,
 drop-down {

package/src/base/layout.css

@@ -1,14 +1,16 @@
 container > segment {
-  @apply overflow-hidden;
+  @apply overflow-hidden h-full;
 }
-.three-col {
-  @apply grid w-full h-full overflow-hidden;
+
+.three-col,
+.two-col {
+  @apply grid w-full min-h-full overflow-hidden;
 }
 
 .three-col.md {
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  /* @apply grid-cols-2 grid-rows-2; */
+  @apply grid-cols-2 grid-rows-2;
+  /* grid-template-columns: repeat(2, 1fr); */
+  /* grid-template-rows: repeat(2, 1fr); */
   grid-template-areas:
     'c-1 c-2'
     'c-1 c-3';
@@ -26,13 +28,38 @@ container > segment {
   grid-area: c-3;
 }
 .three-col.lg {
-  /* @apply grid-cols-5; */
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(2, 1fr);
+  @apply grid-cols-5 grid-rows-2;
+  /* grid-template-columns: repeat(5, 1fr); */
+  /* grid-template-rows: repeat(2, 1fr); */
   grid-template-areas:
     'c-1 c-1 c-2 c-2 c-2'
     'c-1 c-1 c-3 c-3 c-3';
 }
-.three-col.sm {
+.three-col.sm,
+.two-col.sm {
   @apply grid-cols-1 grid-rows-1;
 }
+
+.two-col.md {
+  @apply grid-rows-1 grid-cols-2;
+  /* grid-template-columns: repeat(2, 1fr); */
+  grid-template-areas: 'c-1 c-2';
+}
+.two-col.lg {
+  @apply grid-rows-1 grid-cols-5;
+  /* grid-template-columns: repeat(5, 1fr); */
+  grid-template-areas: 'c-1 c-1 c-2 c-2 c-2';
+}
+
+.two-col.md > .col-1,
+.two-col.lg > .col-1 {
+  grid-area: c-1;
+}
+.two-col.md > .col-2,
+.two-col.lg > .col-2 {
+  grid-area: c-2;
+}
+.two-col.md > .col-3,
+.two-col.lg > .col-3 {
+  display: none;
+}

package/src/prism.css

@@ -18,7 +18,6 @@ pre[class*='language-'] {
 pre[class*='language-'] {
   overflow: auto;
   padding: 1.2em;
-
 }
 
 /* p code,

package/src/rokkit/molecules.css

@@ -150,7 +150,7 @@
 }
 /* Crumbs styles */
 .rokkit crumbs {
-  @apply flex-grow gap-1 text-sm;
+  @apply flex-grow gap-1;
 }
 .rokkit crumbs crumb.is-selected {
   @apply text-secondary-700;

package/src/rokkit/organisms.css

@@ -212,8 +212,8 @@
 /* .rokkit virtual-list item.is-hovering, */
 .rokkit list item:hover,
 .rokkit virtual-list-contents virtual-list-item:hover,
-.rokkit node:hover > div {
-  @apply bg-neutral-inset;
+.rokkit node > div:hover {
+  @apply bg-neutral-subtle;
 }
 
 /* Selected and Hover styles for List and Node */
@@ -263,7 +263,7 @@
 
 /* Toggle Switch styles */
 .rokkit toggle-switch {
-  @apply min-w-12 min-h-6 rounded-full mx-auto;
+  @apply min-w-12 rounded-full mx-auto;
   @apply bg-neutral-subtle border border-neutral-muted;
   @apply leading-loose p-2px;
 }
@@ -357,3 +357,7 @@
 .rokkit tree-table tr.even[aria-current='true'] td icon {
   @apply text-secondary-100;
 }
+
+.rokkit container:focus-within {
+  @apply outline-none;
+}