@rokkit/themes 1.0.0-next.57 → 1.0.0-next.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.57",
+  "version": "1.0.0-next.59",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -20,8 +20,7 @@
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vitest": "~0.34.6",
-    "@rokkit/core": "1.0.0-next.57",
-    "shared-config": "1.0.0-next.57"
+    "shared-config": "1.0.0-next.59"
   },
   "files": [
     "src"
@@ -40,7 +39,7 @@
     }
   },
   "dependencies": {
-    "rokkit": "latest"
+    "@rokkit/core": "1.0.0-next.59"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/base/core.css

@@ -9,7 +9,11 @@
 /* Body styles */
 body {
   @apply flex flex-col w-screen overflow-hidden;
-  height: var(--viewport-height, 100vh);
+  /* height: var(--viewport-height, 100dvh); */
+  height: 100vh;
+  height: --webkit-fill-available;
+  height: 100dvh;
+  max-height: 100dvh;
 }
 
 /* Link styles */

package/src/base/molecules.css

@@ -38,7 +38,7 @@ input-range tick {
   @apply h-6;
 }
 input-range tick span {
-  @apply border-neutral-500 h-full;
+  @apply border-neutral h-full;
 }
 input-range tick p {
   @apply items-top;
@@ -68,7 +68,7 @@ day-of-month {
   @apply hover:bg-secondary-200 hover:rounded-full;
 }
 day-of-month[aria-selected='true'] {
-  @apply bg-secondary-500 text-white rounded-full;
+  @apply bg-secondary text-white rounded-full;
 }
 
 /* Form styles */

package/src/constants.js

@@ -1,3 +1,8 @@
-import { themeColors } from '@rokkit/core'
+import { themeColors, themeRules } from '@rokkit/core'
 export { defaultStateIcons, defaultIcons } from '@rokkit/core'
 export const defaultThemeColors = themeColors()
+
+export const palettes = {
+	rokkit: themeRules(),
+	'sea-green': themeRules('sea-green', { primary: 'teal', secondary: 'sky', accent: 'lime' })
+}

package/src/markdown.css

@@ -24,7 +24,7 @@
 .markdown-body h5 .octicon-link,
 .markdown-body h6 .octicon-link {
   /* color: #1b1f23; */
-  @apply text-neutral-500;
+  @apply text-neutral;
   vertical-align: middle;
   visibility: hidden;
 }
@@ -714,7 +714,7 @@
 
 .markdown-body h6 {
   font-size: 0.85em;
-  @apply text-neutral-500;
+  @apply text-neutral;
   /* color: #6a737d; */
 }
 

package/src/material/input.css

@@ -34,7 +34,7 @@
 }
 
 .material input-select:hover square-icon {
-  @apply border-neutral-500;
+  @apply border-neutral;
 }
 .material input-select scroll {
   @apply mt-2 shadow-lg;

package/src/material/list.css

@@ -13,7 +13,7 @@
   @apply w-4 h-4 rounded;
 }
 .material .tab.is-hovering {
-  @apply bg-primary-500;
+  @apply bg-primary;
 }
 
 .material tabs .tab {
@@ -53,7 +53,7 @@
 }
 
 .material accordion .is-selected summary {
-  @apply border-b-primary-500 border-b text-primary-600;
+  @apply border-b-primary border-b text-primary-600;
   @apply hover:text-primary-600;
 }
 /* .material list item[aria-selected='true'] {
@@ -61,14 +61,14 @@
 } */
 .material node[aria-selected='true'],
 .material list item[aria-selected='true'] {
-  @apply bg-primary-500 text-neutral-base;
+  @apply bg-primary text-neutral-base;
 }
 .material crumbs {
   @apply flex-grow gap-1 text-sm;
 }
 
 .material toggle-switch item[aria-selected='true'] {
-  @apply bg-primary text-neutral-50;
+  @apply bg-primary text-neutral-200 dark:text-neutral-800
 }
 .material crumbs crumb.is-selected {
   @apply text-secondary;

package/src/minimal/input.css

@@ -38,7 +38,7 @@
 }
 
 .minimal input-field label {
-  @apply leading-6 w-full uppercase text-sm text-neutral-500;
+  @apply leading-6 w-full uppercase text-sm text-neutral;
 }
 .minimal input-field message {
   @apply px-2 py-1 bg-neutral-base rounded;
@@ -55,7 +55,7 @@
   @apply bg-neutral-subtle box-border border-neutral-muted rounded-full;
 }
 .minimal input-range range-track selected {
-  @apply border -top-0px -bottom-0px border-secondary-500 bg-secondary-600 rounded-full;
+  @apply border -top-0px -bottom-0px border-secondary bg-secondary-600 rounded-full;
 }
 .minimal input-range range-track thumb {
   @apply rounded-full;
@@ -82,7 +82,7 @@
   @apply h-6;
 }
 .minimal tick span {
-  @apply border-neutral-500 h-full;
+  @apply border-neutral h-full;
 }
 .minimal tick p {
   @apply items-top;
@@ -90,7 +90,7 @@
 }
 
 .minimal thumb {
-  @apply -top-1.5 bg-secondary-500 shadow-xl border border-secondary-500;
+  @apply -top-1.5 bg-secondary shadow-xl border border-secondary;
 }
 .minimal thumb.sliding::before {
   content: '';

package/src/minimal/list.css

@@ -53,7 +53,7 @@
 .minimal accordion item.is-selected,
 .minimal accordion item.is-selected > a {
   @apply text-secondary-600;
-  /* @apply hover:text-secondary-500; */
+  /* @apply hover:text-secondary; */
 }
 
 .minimal node {

package/src/palette.css

@@ -22,6 +22,4 @@
       @apply rokkit-mode-light;
     }
   }
-
-
 }

package/src/rokkit/atoms.css

@@ -13,10 +13,10 @@
   @apply focus:outline-none;
 }
 .rokkit icon[role='button'] {
-  @apply text-neutral-500 focus:rounded hover:text-secondary;
+  @apply text-neutral focus:rounded hover:text-secondary;
 }
 .rokkit icon[role='button']:focus {
-  @apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
+  @apply outline-none bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
 }
 .rokkit icon.disabled[role='button'] {
   @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
@@ -32,7 +32,7 @@
 }
 
 .rokkit progress-bar value-bar {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle dark:text-neutral-800;
 }
 
 /* Styles for 'searchable' class */

package/src/rokkit/molecules.css

@@ -57,10 +57,10 @@
   @apply h-6;
 }
 .rokkit tick span {
-  @apply border-neutral-500 h-full;
+  @apply border-neutral h-full;
 }
 .rokkit tick p {
-  @apply items-top text-neutral-500;
+  @apply items-top text-neutral;
   font-size: 8px;
 }
 
@@ -70,7 +70,7 @@
 }
 .rokkit thumb.sliding::before {
   content: '';
-  @apply absolute left-0 top-0 right-0 bottom-0 bg-secondary-500  opacity-30 rounded-sm;
+  @apply absolute left-0 top-0 right-0 bottom-0 bg-secondary  opacity-30 rounded-sm;
   transform: scale(2, 2);
 }
 
@@ -146,5 +146,5 @@
 }
 
 .rokkit day-of-month[aria-selected='true'] {
-  @apply bg-gradient-to-r from-primary to-secondary;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
 }

package/src/rokkit/organisms.css

@@ -66,7 +66,7 @@
   @apply bg-neutral-muted;
 }
 .rokkit tabs:focus-within .tab[aria-selected='true'] {
-  @apply bg-gradient-to-b from-primary-500 to-secondary text-neutral-50;
+  @apply bg-gradient-to-b from-primary to-secondary text-neutral-200 dark:text-neutral-800;
 }
 .rokkit tabs.is-below:focus-within .tab[aria-selected='true'] {
   @apply bg-gradient-to-t;
@@ -81,7 +81,7 @@
 
 .rokkit button.is-primary,
 .rokkit .button.is-primary {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
 }
 
 .rokkit button-group {
@@ -99,7 +99,7 @@
 }
 
 .rokkit button-group button.active {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
 }
 
 /* Input and Drop-down styles */
@@ -129,7 +129,7 @@
 .rokkit drop-down:focus-within > button {
   /* @apply p-2px; */
   @apply outline-none border-none;
-  @apply bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
 }
 /* .rokkit :not(field) > input-select:focus-within > selected-item,
 .rokkit drop-down:focus-within > button > span {
@@ -139,7 +139,7 @@
 /* Hover and Icon styles */
 /* .rokkit input-select:hover > icon,
 .rokkit drop-down:hover > icon {
-  @apply border-neutral-500;
+  @apply border-neutral;
 } */
 
 /* Scroll styles */
@@ -208,7 +208,7 @@
 
 /* Selected and Hover styles for List and Node */
 .rokkit list item[aria-selected='true'] > a {
-  @apply text-neutral-50;
+  @apply text-neutral-200 dark:text-neutral-800
 }
 .rokkit virtual-list-item[aria-current='true'] {
   @apply bg-neutral-inset text-secondary;
@@ -229,7 +229,7 @@
   @apply bg-neutral-subtle;
 }
 .rokkit accordion:focus-within [aria-selected='true'] summary {
-  @apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
+  @apply outline-none bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
 }
 
 /* Border styles for Accordion */
@@ -264,7 +264,7 @@
   @apply leading-loose p-2px;
 }
 .rokkit toggle-switch:focus-within {
-  @apply outline outline-secondary-500;
+  @apply outline outline-secondary;
 }
 .rokkit toggle-switch item {
   @apply items-center justify-center px-3 gap-1 py-0 leading-loose;
@@ -291,21 +291,19 @@
   @apply p-2px from-transparent to-transparent rounded border border-neutral-muted;
 }
 .rokkit virtual-list:focus-within {
-  @apply bg-gradient-to-r from-primary-500 to-secondary;
+  @apply bg-gradient-to-r from-primary to-secondary;
 }
 
 /* Focus and Hover styles for Toggle Switch, List, Tree, and Nested List */
 .rokkit toggle-switch:focus-within item[aria-selected='true'],
 .rokkit list:focus-within item.is-selected,
-.rokkit
-  virtual-list-viewport:focus-within
-  virtual-list-item[aria-selected='true'],
+.rokkit virtual-list-viewport:focus-within virtual-list-item[aria-selected='true'],
 .rokkit tree:focus-within node[aria-selected='true'],
 .rokkit nested-list:focus-within node[aria-selected='true'] {
-  @apply bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
-  @apply hover:from-secondary-500 hover:to-primary-500 hover:text-neutral-50;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
+  @apply hover:from-secondary hover:to-primary hover:text-neutral-200 dark:text-neutral-800;
 }
 
 .rokkit input-select > selected-item > items {
   @apply flex-grow flex-wrap gap-2;
-}
+}

package/src/palette/sea-green.css

@@ -1,304 +0,0 @@
-@layer base {
-  :root {
-    --primary-hue: 138;
-    --primary-saturation: 76%;
-    --secondary-hue: 329;
-    --secondary-saturation: 80%;
-    --accent-hue: 329;
-    --accent-saturation: 80%;
-    --neutral-hue: 210;
-    --neutral-saturation: 40%;
-    --scroll-width: 0.5rem;
-  }
-  /* light theme colors */
-  .sea-green.light {
-    --primary-50: 138, 76%, 98%;
-    --primary-100: 141, 84%, 93%;
-    --primary-200: 141, 79%, 85%;
-    --primary-300: 142, 77%, 73%;
-    --primary-400: 142, 69%, 58%;
-    --primary-500: 142, 71%, 45%;
-    --primary-600: 142, 76%, 36%;
-    --primary-700: 142, 72%, 29%;
-    --primary-800: 143, 64%, 24%;
-    --primary-900: 144, 61%, 20%;
-    --primary-950: 145, 80%, 10%;
-
-    --secondary-50: 214, 100%, 97%;
-    --secondary-100: 214, 95%, 93%;
-    --secondary-200: 213, 97%, 87%;
-    --secondary-300: 212, 96%, 78%;
-    --secondary-400: 213, 94%, 68%;
-    --secondary-500: 217, 91%, 60%;
-    --secondary-600: 221, 83%, 53%;
-    --secondary-700: 224, 76%, 48%;
-    --secondary-800: 226, 71%, 40%;
-    --secondary-900: 224, 64%, 33%;
-    --secondary-950: 226, 57%, 21%;
-
-    --accent-50: 327, 73%, 97%;
-    --accent-100: 326, 78%, 95%;
-    --accent-200: 326, 85%, 90%;
-    --accent-300: 327, 87%, 82%;
-    --accent-400: 329, 86%, 70%;
-    --accent-500: 330, 81%, 60%;
-    --accent-600: 333, 71%, 51%;
-    --accent-700: 335, 78%, 42%;
-    --accent-800: 336, 74%, 35%;
-    --accent-900: 336, 69%, 30%;
-    --accent-950: 336, 84%, 17%;
-
-    --neutral-50: 210, 40%, 98%;
-    --neutral-100: 210, 40%, 96%;
-    --neutral-200: 214, 32%, 91%;
-    --neutral-300: 213, 27%, 84%;
-    --neutral-400: 215, 20%, 65%;
-    --neutral-500: 215, 16%, 47%;
-    --neutral-600: 215, 19%, 35%;
-    --neutral-700: 215, 25%, 27%;
-    --neutral-800: 217, 33%, 17%;
-    --neutral-900: 222, 47%, 11%;
-    --neutral-950: 229, 84%, 5%;
-    --neutral-zebra: 210, 40%, 97%;
-
-    --text-white: 210, 40%, 100%;
-    --text-black: 217, 33%, 20%;
-
-    /* light theme syntax colors */
-    --tab-size: 2;
-    --code-bg: #f3f4f6;
-    --code-fill: #f3f4f6;
-    --code-normal: #333333; /*hsl(45, 7%, 45%)*/
-    --code-string: hsl(41, 37%, 45%); /*#183691 */
-    --code-number: hsl(102, 27%, 50%); /* #0086b3;*/
-    --code-atrule: var(--code-string);
-    --code-keyword: hsl(204, 58%, 45%); /* */
-    --code-comment: #969896;
-    --code-property: #63a35c;
-    --code-selector: var(--code-keyword);
-    --code-operator: hsl(19, 67%, 45%);
-    --code-function: hsl(19, 67%, 45%); /* #a71d5d; */
-
-    --code-gutter-marker: black;
-    --code-gutter-subtle: #999;
-    --code-cursor: #24292e;
-    --code-cursor-block: rgba(20, 255, 20, 0.5);
-    --code-linenumbers: rgba(27, 31, 35, 0.3);
-  }
-
-  /* dark theme colors */
-  .sea-green.dark {
-    --primary-950: 138, 76%, 98%;
-    --primary-900: 141, 84%, 93%;
-    --primary-800: 141, 79%, 85%;
-    --primary-700: 142, 77%, 73%;
-    --primary-600: 142, 69%, 58%;
-    --primary-500: 142, 71%, 45%;
-    --primary-400: 142, 76%, 36%;
-    --primary-300: 142, 72%, 29%;
-    --primary-200: 143, 64%, 24%;
-    --primary-100: 144, 61%, 20%;
-    --primary-50: 145, 80%, 10%;
-
-    --secondary-950: 214, 100%, 97%;
-    --secondary-900: 214, 95%, 93%;
-    --secondary-800: 213, 97%, 87%;
-    --secondary-700: 212, 96%, 78%;
-    --secondary-600: 213, 94%, 68%;
-    --secondary-500: 217, 91%, 60%;
-    --secondary-400: 221, 83%, 53%;
-    --secondary-300: 224, 76%, 48%;
-    --secondary-300: 226, 71%, 40%;
-    --secondary-100: 224, 64%, 33%;
-    --secondary-50: 226, 57%, 21%;
-
-    --accent-950: 327, 73%, 97%;
-    --accent-900: 326, 78%, 95%;
-    --accent-800: 326, 85%, 90%;
-    --accent-700: 327, 87%, 82%;
-    --accent-600: 329, 86%, 70%;
-    --accent-500: 330, 81%, 60%;
-    --accent-400: 333, 71%, 51%;
-    --accent-300: 335, 78%, 42%;
-    --accent-200: 336, 74%, 35%;
-    --accent-100: 336, 69%, 30%;
-    --accent-50: 336, 84%, 17%;
-
-    --neutral-950: 210, 40%, 98%;
-    --neutral-900: 210, 40%, 96%;
-    --neutral-800: 214, 32%, 91%;
-    --neutral-700: 213, 27%, 84%;
-    --neutral-600: 215, 20%, 65%;
-    --neutral-500: 215, 16%, 47%;
-    --neutral-400: 215, 19%, 35%;
-    --neutral-300: 215, 25%, 27%;
-    --neutral-200: 217, 33%, 17%;
-    --neutral-100: 222, 47%, 11%;
-    --neutral-50: 229, 84%, 5%;
-    --neutral-zebra: 225, 60%, 8%;
-
-    --text-black: 210, 40%, 100%;
-    --text-white: 217, 33%, 20%;
-
-    /* dark theme syntax colors */
-    --code-bg: #282c34;
-    --code-fill: #282c34;
-    --code-normal: #e06c75; /*#ABB2BF;*/
-    --code-string: #98c379;
-    --code-number: #d19a66;
-    --code-atrule: #61afef;
-    --code-keyword: #c678dd;
-    --code-comment: #5c6370;
-    --code-property: #d19a66;
-    --code-selector: #e06c75;
-    --code-operator: #56b6c2;
-    --code-function: #61afef;
-  }
-
-  @media (prefers-color-scheme: light) {
-    body.sea-green:not(.dark) {
-      --primary-50: 138, 76%, 98%;
-    --primary-100: 141, 84%, 93%;
-    --primary-200: 141, 79%, 85%;
-    --primary-300: 142, 77%, 73%;
-    --primary-400: 142, 69%, 58%;
-    --primary-500: 142, 71%, 45%;
-    --primary-600: 142, 76%, 36%;
-    --primary-700: 142, 72%, 29%;
-    --primary-800: 143, 64%, 24%;
-    --primary-900: 144, 61%, 20%;
-    --primary-950: 145, 80%, 10%;
-
-    --secondary-50: 214, 100%, 97%;
-    --secondary-100: 214, 95%, 93%;
-    --secondary-200: 213, 97%, 87%;
-    --secondary-300: 212, 96%, 78%;
-    --secondary-400: 213, 94%, 68%;
-    --secondary-500: 217, 91%, 60%;
-    --secondary-600: 221, 83%, 53%;
-    --secondary-700: 224, 76%, 48%;
-    --secondary-800: 226, 71%, 40%;
-    --secondary-900: 224, 64%, 33%;
-    --secondary-950: 226, 57%, 21%;
-
-    --accent-50: 327, 73%, 97%;
-    --accent-100: 326, 78%, 95%;
-    --accent-200: 326, 85%, 90%;
-    --accent-300: 327, 87%, 82%;
-    --accent-400: 329, 86%, 70%;
-    --accent-500: 330, 81%, 60%;
-    --accent-600: 333, 71%, 51%;
-    --accent-700: 335, 78%, 42%;
-    --accent-800: 336, 74%, 35%;
-    --accent-900: 336, 69%, 30%;
-    --accent-950: 336, 84%, 17%;
-
-    --neutral-50: 210, 40%, 98%;
-    --neutral-100: 210, 40%, 96%;
-    --neutral-200: 214, 32%, 91%;
-    --neutral-300: 213, 27%, 84%;
-    --neutral-400: 215, 20%, 65%;
-    --neutral-500: 215, 16%, 47%;
-    --neutral-600: 215, 19%, 35%;
-    --neutral-700: 215, 25%, 27%;
-    --neutral-800: 217, 33%, 17%;
-    --neutral-900: 222, 47%, 11%;
-    --neutral-950: 229, 84%, 5%;
-    --neutral-zebra: 210, 40%, 97%;
-
-    --text-white: 210, 40%, 100%;
-    --text-black: 217, 33%, 20%;
-
-      /* light theme syntax colors */
-      --tab-size: 2;
-      --code-bg: #f3f4f6;
-      --code-fill: #f3f4f6;
-      --code-normal: #333333; /*hsl(45, 7%, 45%)*/
-      --code-string: hsl(41, 37%, 45%); /*#183691 */
-      --code-number: hsl(102, 27%, 50%); /* #0086b3;*/
-      --code-atrule: var(--code-string);
-      --code-keyword: hsl(204, 58%, 45%); /* #795da3;*/
-      --code-comment: #969896; /*hsl(210, 25%, 60%)*/
-      --code-property: #63a35c;
-      --code-selector: var(--code-keyword);
-      --code-operator: hsl(19, 67%, 45%);
-      --code-function: hsl(19, 67%, 45%); /* #a71d5d; */
-
-      --code-gutter-marker: black;
-      --code-gutter-subtle: #999;
-      --code-cursor: #24292e;
-      --code-cursor-block: rgba(20, 255, 20, 0.5);
-      --code-linenumbers: rgba(27, 31, 35, 0.3);
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    body.sea-green:not(.light) {
-      --primary-950: 138, 76%, 98%;
-    --primary-900: 141, 84%, 93%;
-    --primary-800: 141, 79%, 85%;
-    --primary-700: 142, 77%, 73%;
-    --primary-600: 142, 69%, 58%;
-    --primary-500: 142, 71%, 45%;
-    --primary-400: 142, 76%, 36%;
-    --primary-300: 142, 72%, 29%;
-    --primary-200: 143, 64%, 24%;
-    --primary-100: 144, 61%, 20%;
-    --primary-50: 145, 80%, 10%;
-
-    --secondary-950: 214, 100%, 97%;
-    --secondary-900: 214, 95%, 93%;
-    --secondary-800: 213, 97%, 87%;
-    --secondary-700: 212, 96%, 78%;
-    --secondary-600: 213, 94%, 68%;
-    --secondary-500: 217, 91%, 60%;
-    --secondary-400: 221, 83%, 53%;
-    --secondary-300: 224, 76%, 48%;
-    --secondary-300: 226, 71%, 40%;
-    --secondary-100: 224, 64%, 33%;
-    --secondary-50: 226, 57%, 21%;
-
-    --accent-950: 327, 73%, 97%;
-    --accent-900: 326, 78%, 95%;
-    --accent-800: 326, 85%, 90%;
-    --accent-700: 327, 87%, 82%;
-    --accent-600: 329, 86%, 70%;
-    --accent-500: 330, 81%, 60%;
-    --accent-400: 333, 71%, 51%;
-    --accent-300: 335, 78%, 42%;
-    --accent-200: 336, 74%, 35%;
-    --accent-100: 336, 69%, 30%;
-    --accent-50: 336, 84%, 17%;
-
-    --neutral-950: 210, 40%, 98%;
-    --neutral-900: 210, 40%, 96%;
-    --neutral-800: 214, 32%, 91%;
-    --neutral-700: 213, 27%, 84%;
-    --neutral-600: 215, 20%, 65%;
-    --neutral-500: 215, 16%, 47%;
-    --neutral-400: 215, 19%, 35%;
-    --neutral-300: 215, 25%, 27%;
-    --neutral-200: 217, 33%, 17%;
-    --neutral-100: 222, 47%, 11%;
-    --neutral-50: 229, 84%, 5%;
-    --neutral-zebra: 225, 60%, 8%;
-
-    --text-black: 210, 40%, 100%;
-    --text-white: 217, 33%, 20%;
-
-      /* one dark theme syntax colors */
-      --code-bg: #282c34;
-      --code-fill: #282c34;
-      --code-normal: #e06c75; /*#ABB2BF;*/
-      --code-string: #98c379;
-      --code-number: #d19a66;
-      --code-atrule: #61afef;
-      --code-keyword: #c678dd;
-      --code-comment: #5c6370;
-      --code-property: #d19a66;
-      --code-selector: #e06c75;
-      --code-operator: #56b6c2;
-      --code-function: #61afef;
-    }
-  }
-}

package/src/palette/states.css

@@ -1,27 +0,0 @@
-@layer base {
-	.light {
-		--success-50: 138, 76%, 98%;
-    --success-100: 141, 84%, 93%;
-    --success-200: 141, 79%, 85%;
-    --success-300: 142, 77%, 73%;
-    --success-400: 142, 69%, 58%;
-    --success-500: 142, 71%, 45%;
-    --success-600: 142, 76%, 36%;
-    --success-700: 142, 72%, 29%;
-    --success-800: 143, 64%, 24%;
-    --success-900: 144, 61%, 20%;
-    --success-950: 145, 80%, 10%;
-
-		--error-50: 138, 76%, 98%;
-    --error-100: 141, 84%, 93%;
-    --error-200: 141, 79%, 85%;
-    --error-300: 142, 77%, 73%;
-    --error-400: 142, 69%, 58%;
-    --error-500: 142, 71%, 45%;
-    --error-600: 142, 76%, 36%;
-    --error-700: 142, 72%, 29%;
-    --error-800: 143, 64%, 24%;
-    --error-900: 144, 61%, 20%;
-    --error-950: 145, 80%, 10%;
-	}
-}

package/src/rokkit/base.css

@@ -1,18 +0,0 @@
-/* @import '../base/base.css'; */
-
-/* .rokkit * {
-	@apply focus:outline-offset-0;
-} */
-
-/* .rokkit icon:not([role='button']) {
-  @apply focus:outline-none;
-}
-.rokkit icon[role='button'] {
-  @apply text-neutral-500 focus:rounded hover:text-secondary;
-}
-.rokkit icon[role='button']:focus {
-  @apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
-}
-.rokkit icon.disabled[role='button'] {
-  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
-} */