@rokkit/themes 1.0.0-next.54 → 1.0.0-next.55

package/src/palette/sea-green.css

@@ -0,0 +1,304 @@
+@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%); /* #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);
+  }
+
+  /* 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

@@ -0,0 +1,27 @@
+@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/palette.css

@@ -6,14 +6,14 @@
     --secondary-saturation: 80%;
     --accent-hue: 329;
     --accent-saturation: 80%;
-    --skin-hue: 223;
-    --skin-saturation: 11.5%;
+    --neutral-hue: 223;
+    --neutral-saturation: 11.5%;
     --scroll-width: 0.5rem;
   }
   /* light theme colors */
   .light {
-    --text-white: var(--skin-hue), var(--skin-saturation), 100%;
-    --text-black: var(--skin-hue), var(--skin-saturation), 20%;
+    --text-white: var(--neutral-hue), var(--neutral-saturation), 100%;
+    --text-black: var(--neutral-hue), var(--neutral-saturation), 20%;
 
     --primary-50: var(--primary-hue), var(--primary-saturation), 95%;
     --primary-100: var(--primary-hue), var(--primary-saturation), 90%;
@@ -48,17 +48,17 @@
     --accent-800: var(--accent-hue), var(--accent-saturation), 30%;
     --accent-900: var(--accent-hue), var(--accent-saturation), 20%;
 
-    --skin-50: var(--skin-hue), var(--skin-saturation), 100%;
-    --skin-100: var(--skin-hue), var(--skin-saturation), 95%;
-    --skin-200: var(--skin-hue), var(--skin-saturation), 90%;
-    --skin-300: var(--skin-hue), var(--skin-saturation), 80%;
-    --skin-400: var(--skin-hue), var(--skin-saturation), 70%;
-    --skin-500: var(--skin-hue), var(--skin-saturation), 60%;
-    --skin-600: var(--skin-hue), var(--skin-saturation), 50%;
-    --skin-700: var(--skin-hue), var(--skin-saturation), 40%;
-    --skin-800: var(--skin-hue), var(--skin-saturation), 30%;
-    --skin-900: var(--skin-hue), var(--skin-saturation), 20%;
-    --skin-zebra: var(--skin-hue), var(--skin-saturation), 98%;
+    --neutral-50: var(--neutral-hue), var(--neutral-saturation), 100%;
+    --neutral-100: var(--neutral-hue), var(--neutral-saturation), 95%;
+    --neutral-200: var(--neutral-hue), var(--neutral-saturation), 90%;
+    --neutral-300: var(--neutral-hue), var(--neutral-saturation), 80%;
+    --neutral-400: var(--neutral-hue), var(--neutral-saturation), 70%;
+    --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
+    --neutral-600: var(--neutral-hue), var(--neutral-saturation), 50%;
+    --neutral-700: var(--neutral-hue), var(--neutral-saturation), 40%;
+    --neutral-800: var(--neutral-hue), var(--neutral-saturation), 30%;
+    --neutral-900: var(--neutral-hue), var(--neutral-saturation), 20%;
+    --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 98%;
 
     /* light theme syntax colors */
     --tab-size: 2;
@@ -84,8 +84,8 @@
 
   /* dark theme colors */
   .dark {
-    --text-white: var(--skin-hue), var(--skin-saturation), 20%;
-    --text-black: var(--skin-hue), var(--skin-saturation), 100%;
+    --text-white: var(--neutral-hue), var(--neutral-saturation), 20%;
+    --text-black: var(--neutral-hue), var(--neutral-saturation), 100%;
 
     --primary-50: var(--primary-hue), var(--primary-saturation), 20%;
     --primary-100: var(--primary-hue), var(--primary-saturation), 30%;
@@ -120,17 +120,17 @@
     --accent-800: var(--accent-hue), var(--accent-saturation), 90%;
     --accent-900: var(--accent-hue), var(--accent-saturation), 95%;
 
-    --skin-50: var(--skin-hue), var(--skin-saturation), 20%;
-    --skin-100: var(--skin-hue), var(--skin-saturation), 25%;
-    --skin-200: var(--skin-hue), var(--skin-saturation), 30%;
-    --skin-300: var(--skin-hue), var(--skin-saturation), 40%;
-    --skin-400: var(--skin-hue), var(--skin-saturation), 50%;
-    --skin-500: var(--skin-hue), var(--skin-saturation), 60%;
-    --skin-600: var(--skin-hue), var(--skin-saturation), 70%;
-    --skin-700: var(--skin-hue), var(--skin-saturation), 80%;
-    --skin-800: var(--skin-hue), var(--skin-saturation), 90%;
-    --skin-900: var(--skin-hue), var(--skin-saturation), 100%;
-    --skin-zebra: var(--skin-hue), var(--skin-saturation), 22%;
+    --neutral-50: var(--neutral-hue), var(--neutral-saturation), 20%;
+    --neutral-100: var(--neutral-hue), var(--neutral-saturation), 25%;
+    --neutral-200: var(--neutral-hue), var(--neutral-saturation), 30%;
+    --neutral-300: var(--neutral-hue), var(--neutral-saturation), 40%;
+    --neutral-400: var(--neutral-hue), var(--neutral-saturation), 50%;
+    --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
+    --neutral-600: var(--neutral-hue), var(--neutral-saturation), 70%;
+    --neutral-700: var(--neutral-hue), var(--neutral-saturation), 80%;
+    --neutral-800: var(--neutral-hue), var(--neutral-saturation), 90%;
+    --neutral-900: var(--neutral-hue), var(--neutral-saturation), 100%;
+    --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 22%;
 
     /* dark theme syntax colors */
     --code-bg: #282c34;
@@ -149,8 +149,8 @@
 
   @media (prefers-color-scheme: light) {
     body:not(.dark) {
-      --text-white: var(--skin-hue), var(--skin-saturation), 100%;
-      --text-black: var(--skin-hue), var(--skin-saturation), 20%;
+      --text-white: var(--neutral-hue), var(--neutral-saturation), 100%;
+      --text-black: var(--neutral-hue), var(--neutral-saturation), 20%;
 
       --primary-50: var(--primary-hue), var(--primary-saturation), 95%;
       --primary-100: var(--primary-hue), var(--primary-saturation), 90%;
@@ -185,17 +185,17 @@
       --accent-800: var(--accent-hue), var(--accent-saturation), 30%;
       --accent-900: var(--accent-hue), var(--accent-saturation), 20%;
 
-      --skin-50: var(--skin-hue), var(--skin-saturation), 100%;
-      --skin-100: var(--skin-hue), var(--skin-saturation), 95%;
-      --skin-200: var(--skin-hue), var(--skin-saturation), 90%;
-      --skin-300: var(--skin-hue), var(--skin-saturation), 80%;
-      --skin-400: var(--skin-hue), var(--skin-saturation), 70%;
-      --skin-500: var(--skin-hue), var(--skin-saturation), 60%;
-      --skin-600: var(--skin-hue), var(--skin-saturation), 50%;
-      --skin-700: var(--skin-hue), var(--skin-saturation), 40%;
-      --skin-800: var(--skin-hue), var(--skin-saturation), 30%;
-      --skin-900: var(--skin-hue), var(--skin-saturation), 20%;
-      --skin-zebra: var(--skin-hue), var(--skin-saturation), 98%;
+      --neutral-50: var(--neutral-hue), var(--neutral-saturation), 100%;
+      --neutral-100: var(--neutral-hue), var(--neutral-saturation), 95%;
+      --neutral-200: var(--neutral-hue), var(--neutral-saturation), 90%;
+      --neutral-300: var(--neutral-hue), var(--neutral-saturation), 80%;
+      --neutral-400: var(--neutral-hue), var(--neutral-saturation), 70%;
+      --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
+      --neutral-600: var(--neutral-hue), var(--neutral-saturation), 50%;
+      --neutral-700: var(--neutral-hue), var(--neutral-saturation), 40%;
+      --neutral-800: var(--neutral-hue), var(--neutral-saturation), 30%;
+      --neutral-900: var(--neutral-hue), var(--neutral-saturation), 20%;
+      --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 98%;
 
       /* light theme syntax colors */
       --tab-size: 2;
@@ -222,8 +222,8 @@
 
   @media (prefers-color-scheme: dark) {
     body:not(.light) {
-      --text-white: var(--skin-hue), var(--skin-saturation), 20%;
-      --text-black: var(--skin-hue), var(--skin-saturation), 100%;
+      --text-white: var(--neutral-hue), var(--neutral-saturation), 20%;
+      --text-black: var(--neutral-hue), var(--neutral-saturation), 100%;
 
       --primary-50: var(--primary-hue), var(--primary-saturation), 20%;
       --primary-100: var(--primary-hue), var(--primary-saturation), 30%;
@@ -258,17 +258,17 @@
       --accent-800: var(--accent-hue), var(--accent-saturation), 90%;
       --accent-900: var(--accent-hue), var(--accent-saturation), 95%;
 
-      --skin-50: var(--skin-hue), var(--skin-saturation), 20%;
-      --skin-100: var(--skin-hue), var(--skin-saturation), 25%;
-      --skin-200: var(--skin-hue), var(--skin-saturation), 30%;
-      --skin-300: var(--skin-hue), var(--skin-saturation), 40%;
-      --skin-400: var(--skin-hue), var(--skin-saturation), 50%;
-      --skin-500: var(--skin-hue), var(--skin-saturation), 60%;
-      --skin-600: var(--skin-hue), var(--skin-saturation), 70%;
-      --skin-700: var(--skin-hue), var(--skin-saturation), 80%;
-      --skin-800: var(--skin-hue), var(--skin-saturation), 90%;
-      --skin-900: var(--skin-hue), var(--skin-saturation), 100%;
-      --skin-zebra: var(--skin-hue), var(--skin-saturation), 22%;
+      --neutral-50: var(--neutral-hue), var(--neutral-saturation), 20%;
+      --neutral-100: var(--neutral-hue), var(--neutral-saturation), 25%;
+      --neutral-200: var(--neutral-hue), var(--neutral-saturation), 30%;
+      --neutral-300: var(--neutral-hue), var(--neutral-saturation), 40%;
+      --neutral-400: var(--neutral-hue), var(--neutral-saturation), 50%;
+      --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
+      --neutral-600: var(--neutral-hue), var(--neutral-saturation), 70%;
+      --neutral-700: var(--neutral-hue), var(--neutral-saturation), 80%;
+      --neutral-800: var(--neutral-hue), var(--neutral-saturation), 90%;
+      --neutral-900: var(--neutral-hue), var(--neutral-saturation), 100%;
+      --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 22%;
 
       /* one dark theme syntax colors */
       --code-bg: #282c34;

package/src/prism.css

@@ -44,7 +44,7 @@ code,
 :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
   /* background: var(--code-bg); */
-  @apply bg-skin-inset;
+  @apply bg-neutral-inset;
 }
 
 :not(pre) > code[class*='language-'] {

package/src/rokkit/atoms.css

@@ -5,7 +5,7 @@
 
 /* Zebra styles */
 .rokkit .zebra item {
-  @apply even:bg-skin-zebra hover:bg-skin-50;
+  @apply even:bg-neutral-zebra hover:bg-neutral-50;
 }
 
 /* Styles for 'icon' class */
@@ -13,13 +13,13 @@
   @apply focus:outline-none;
 }
 .rokkit icon[role='button'] {
-  @apply text-skin-500 focus:rounded hover:text-secondary;
+  @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-skin-50;
+  @apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
 }
 .rokkit icon.disabled[role='button'] {
-  @apply text-skin-subtle hover:text-skin-subtle cursor-not-allowed;
+  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
 }
 
 /* Styles for input[type='number'] */
@@ -32,10 +32,10 @@
 }
 
 .rokkit progress-bar value-bar {
-  @apply bg-gradient-to-r from-primary to-secondary text-skin-subtle;
+  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle;
 }
 
 /* Styles for 'searchable' class */
 .searchable input {
-  @apply border border-skin-subtle;
+  @apply border border-neutral-subtle;
 }

package/src/rokkit/base.css

@@ -8,11 +8,11 @@
   @apply focus:outline-none;
 }
 .rokkit icon[role='button'] {
-  @apply text-skin-500 focus:rounded hover:text-secondary;
+  @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-skin-50;
+  @apply outline-none bg-gradient-to-r from-primary-500 to-secondary text-neutral-50;
 }
 .rokkit icon.disabled[role='button'] {
-  @apply text-skin-subtle hover:text-skin-subtle cursor-not-allowed;
+  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
 } */

package/src/rokkit/molecules.css

@@ -1,6 +1,6 @@
 /* Styles for 'input-field' class */
 .rokkit input-field field {
-  @apply p-2px box-border border border-skin-muted rounded;
+  @apply p-2px box-border border border-neutral-muted rounded;
 }
 .rokkit input-field input,
 .rokkit input-field textarea,
@@ -11,13 +11,13 @@
   @apply text-secondary-600;
 }
 .rokkit input-field field:focus-within {
-  @apply border-skin-base bg-gradient-to-r from-primary to-secondary;
+  @apply border-neutral-base bg-gradient-to-r from-primary to-secondary;
 }
 .rokkit input-field span {
-  @apply border-r border-skin-muted bg-skin-base px-1 h-full aspect-square;
+  @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-skin-base rounded;
+  @apply px-2 py-1 bg-neutral-base rounded;
 }
 .rokkit input-field.fail {
   @apply bg-error rounded px-2;
@@ -28,7 +28,7 @@
   @apply h-2 mt-2 relative;
 }
 .rokkit input-range range-track span {
-  @apply bg-skin-subtle border box-border border-skin-muted rounded-full;
+  @apply bg-neutral-subtle border box-border border-neutral-muted rounded-full;
 }
 .rokkit input-range range-track selected {
   @apply border top-0px bottom-0px bg-gradient-to-r from-primary to-secondary border-secondary rounded-full;
@@ -57,10 +57,10 @@
   @apply h-6;
 }
 .rokkit tick span {
-  @apply border-skin-500 h-full;
+  @apply border-neutral-500 h-full;
 }
 .rokkit tick p {
-  @apply items-top text-skin-500;
+  @apply items-top text-neutral-500;
   font-size: 8px;
 }
 
@@ -77,7 +77,7 @@
 /* Styles for 'button[role='switch']' class */
 .rokkit button[role='switch'] {
   @apply rounded-full p-0 min-h-6 h-8 w-16;
-  @apply bg-skin-subtle border border-skin-subtle;
+  @apply bg-neutral-subtle border border-neutral-subtle;
 }
 .rokkit button[role='switch'] > mark {
   @apply rounded-full w-6 h-6 top-0.75;
@@ -86,7 +86,7 @@
 
 /* Styles for 'rating' class */
 .rokkit rating {
-  @apply text-skin-600 text-xl h-9 justify-center rounded focus:outline focus:outline-secondary;
+  @apply text-neutral-600 text-xl h-9 justify-center rounded focus:outline focus:outline-secondary;
 }
 .rokkit rating > icon {
   @apply w-8;
@@ -105,10 +105,10 @@
 
 /* Pill styles */
 .rokkit .pill {
-  @apply rounded-full bg-skin-inset border-skin-subtle border px-2 py-1 flex-grow-0;
+  @apply rounded-full bg-neutral-inset border-neutral-subtle border px-2 py-1 flex-grow-0;
 }
 .rokkit .pill > icon[role='button'] {
-  @apply rounded-full w-5 h-5 hover:bg-skin-muted hover:text-current focus:rounded-full focus:m-0;
+  @apply rounded-full w-5 h-5 hover:bg-neutral-muted hover:text-current focus:rounded-full focus:m-0;
 }
 
 .rokkit .pill > item {