@rokkit/themes 1.0.0-next.122 → 1.0.0-next.123

package/package.json

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

package/src/base/alert.css

@@ -14,17 +14,17 @@ rk-success {
 rk-alert.error,
 rk-alert.danger,
 rk-error {
-  @apply bg-error text-error-contrast border-error-muted;
+  @apply bg-error text-error-z7 border-error-z3;
 }
 rk-alert.info,
 rk-info {
-  @apply bg-info text-info-contrast border-info-muted;
+  @apply bg-info text-info-z7 border-info-z3;
 }
 rk-alert.warning,
 rk-warning {
-  @apply bg-warn text-warn-contrast border-warn-muted;
+  @apply bg-warn text-warn-z7 border-warn-z3;
 }
 rk-alert.success,
 rk-success {
-  @apply bg-success text-success-contrast border-success-muted;
+  @apply bg-success text-success-z7 border-success-z3;
 }

package/src/base/atoms.css

@@ -54,5 +54,5 @@ rk-summary p {
 
 /* Overlay styles */
 rk-overlay {
-  @apply bg-neutral-50 bg-opacity-50;
+  @apply bg-surface-50 bg-opacity-50;
 }

package/src/base/core.css

@@ -47,11 +47,11 @@ select[disabled='true'] {
 
 /* plots*/
 rk-plot {
-  @apply bg-neutral-inset rounded-md p-4;
+  @apply bg-surface-z0 rounded-md p-4;
 }
 
 g[aria-label='tip'] {
-  --plot-background: rgb(var(--neutral-200));
+  --plot-background: rgb(var(--surface-200));
 }
 
 rk-input-field input,
@@ -73,7 +73,7 @@ rk-checkbox {
 }
 
 button:disabled {
-  @apply bg-neutral-muted cursor-not-allowed text-neutral-500;
+  @apply bg-surface-z3 text-surface-500 cursor-not-allowed;
 }
 
 rk-cell.cell-type-string {
@@ -102,6 +102,6 @@ textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
-  -webkit-text-fill-color: var(--neutral-200);
+  -webkit-text-fill-color: var(--surface-200);
   transition: background-color 5000s ease-in-out 0s;
 }

package/src/base/molecules.css

@@ -3,7 +3,7 @@ rk-input-range rk-range-track {
   @apply relative mt-3 h-1;
 }
 rk-input-range rk-range-track rk-range-track-bar {
-  @apply bg-neutral-subtle border-neutral-muted rounded-full;
+  @apply bg-surface-z2 border-surface-z3 rounded-full;
 }
 rk-input-range rk-range-track selected {
   @apply top-0px bottom-0px;
@@ -38,10 +38,10 @@ rk-input-range tick {
   grid-template-rows: 7px auto;
 }
 rk-input-range tick tick-bar {
-  @apply h-full border-neutral-600;
+  @apply border-surface-600 h-full;
 }
 rk-input-range tick p {
-  @apply items-top leading-tight text-neutral-600;
+  @apply items-top text-surface-600 leading-tight;
   font-size: 8px;
 }
 
@@ -93,7 +93,7 @@ rk-input-field select,
 rk-input-field > field > :not(icon) {
   @apply px-3;
   @apply min-h-9 flex-grow leading-loose outline-none;
-  @apply bg-neutral-subtle text-neutral-800;
+  @apply bg-surface-z2 text-surface-800;
 }
 rk-input-field > label {
   @apply text-xs uppercase;

package/src/base/organisms.css

@@ -47,7 +47,7 @@ rk-input-field rk-field {
   @apply gap-1px;
 }
 rk-input-field rk-field rk-icon {
-  @apply bg-neutral-subtle h-9 w-9 text-neutral-800;
+  @apply bg-surface-z2 text-surface-800 h-9 w-9;
 }
 
 rk-input-field > rk-field > rk-input-select {
@@ -60,7 +60,7 @@ rk-drop-down > button > span > rk-icon {
 }
 rk-input-select > rk-selected-item,
 rk-drop-down > button > span {
-  /* @apply bg-neutral-base pl-3; */
+  /* @apply bg-surface-z1 pl-3; */
   @apply min-h-9 items-center gap-2 pl-3 normal-case;
-  @apply rounded text-neutral-800;
+  @apply text-surface-800 rounded;
 }

package/src/base/progress.css

@@ -4,7 +4,7 @@ rk-progress {
 }
 
 rk-progress {
-  @apply border border-neutral-100 bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900;
+  @apply border-surface-100 bg-surface-200 dark:border-surface-800 dark:bg-surface-900 border;
 }
 rk-progress value-bar {
   @apply bg-primary;

package/src/base/table.css

@@ -20,28 +20,28 @@ th[data-sortable='true']:hover icon {
 }
 
 table {
-  @apply w-full text-left text-sm text-neutral-700 rtl:text-right;
+  @apply text-surface-700 w-full text-left text-sm rtl:text-right;
   @apply border-spacing-x-1px border-separate;
 }
 table > thead {
   @apply sticky top-0 z-10 table-header-group;
-  @apply bg-neutral-400 text-xs uppercase;
+  @apply bg-surface-400 text-xs uppercase;
 }
 table > caption {
-  @apply bg-neutral-subtle table-caption p-5 text-left text-sm font-normal text-neutral-600 rtl:text-right;
+  @apply bg-surface-z2 text-surface-600 table-caption p-5 text-left text-sm font-normal rtl:text-right;
 }
 
 table > tbody > tr {
-  @apply border-neutral-base bg-neutral-subtle table-row border-b;
+  @apply border-surface-z1 bg-surface-z2 table-row border-b;
 }
 table.striped > tbody > tr:nth-child(even) {
-  @apply bg-neutral-inset;
+  @apply bg-surface-z0;
 }
 table > tfoot {
   @apply table-footer-group;
 }
 table > tfoot > tr {
-  @apply table-row font-semibold text-neutral-800;
+  @apply text-surface-800 table-row font-semibold;
 }
 rk-tree-table,
 rk-table {

package/src/markdown.css

@@ -24,7 +24,7 @@
 .markdown-body h5 .octicon-link,
 .markdown-body h6 .octicon-link {
   /* color: #1b1f23; */
-  @apply text-neutral;
+  @apply text-surface;
   vertical-align: middle;
   visibility: hidden;
 }
@@ -230,7 +230,7 @@
 }
 .markdown-body ul li::before {
   content: '';
-  @apply bg-neutral-muted absolute -ml-5 mt-2 h-1.5 w-1.5 rounded-sm;
+  @apply bg-surface-z3 absolute -ml-5 mt-2 h-1.5 w-1.5 rounded-sm;
 }
 
 .markdown-body ol {
@@ -650,7 +650,7 @@
 .markdown-body h1,
 .markdown-body h2 {
   /* padding-bottom: 0.3em; */
-  @apply border-neutral-subtle mt-16 border-b;
+  @apply border-surface-z2 mt-16 border-b;
   /* border-bottom: 1px solid #eaecef; */
 }
 
@@ -677,7 +677,7 @@
 
 .markdown-body h6 {
   font-size: 0.85em;
-  @apply text-neutral;
+  @apply text-surface;
   /* color: #6a737d; */
 }
 
@@ -737,17 +737,17 @@
 .markdown-body table th {
   padding: 6px 13px;
   /* border: 1px solid #dfe2e5; */
-  @apply border-neutral-base border;
+  @apply border-surface-z1 border;
 }
 
 .markdown-body table tr {
   /* background-color: #fff; */
-  @apply border-neutral-subtle border-t;
+  @apply border-surface-z2 border-t;
   /* border-top: 1px solid #c6cbd1; */
 }
 
 .markdown-body table tr:nth-child(2n) {
-  @apply bg-neutral-zebra;
+  @apply bg-surface-zebra;
   /* background-color: #f6f8fa; */
 }
 
@@ -773,7 +773,7 @@
 
 .markdown-body pre {
   word-wrap: normal;
-  @apply border-neutral-subtle rounded-sm border;
+  @apply border-surface-z2 rounded-sm border;
 }
 
 .markdown-body pre > code {

package/src/material/base.css

@@ -1,10 +1,10 @@
 @import '../base.css';
 
 [data-style='material'] rk-icon[role='button'] {
-  @apply text-neutral-muted hover:text-primary focus:outline-primary focus:m-1px focus:rounded;
+  @apply text-surface-z3 hover:text-primary focus:outline-primary focus:m-1px focus:rounded;
 }
 [data-style='material'] rk-icon.disabled[role='button'] {
-  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
+  @apply text-surface-z2 hover:text-surface-z2 cursor-not-allowed;
 }
 
 [data-style='material'] * {

package/src/material/form.css

@@ -4,7 +4,7 @@
 
 [data-style='material'] button,
 [data-style='material'] .button {
-  @apply bg-neutral-subtle rounded px-4 py-2 uppercase;
+  @apply bg-surface-z2 rounded px-4 py-2 uppercase;
 }
 [data-style='material'] button-group {
   @apply flex justify-center rounded-sm shadow;
@@ -14,9 +14,9 @@
 }
 
 [data-style='material'] button-group > button {
-  @apply rounded-none border-none border-neutral-400;
-  @apply bg-neutral-subtle focus:outline-none;
-  @apply text-sm uppercase text-neutral-800;
+  @apply border-surface-400 rounded-none border-none;
+  @apply bg-surface-z2 focus:outline-none;
+  @apply text-surface-800 text-sm uppercase;
 }
 [data-style='material'] button-group > button:not(:last-child) {
   @apply border-r;

package/src/material/input.css

@@ -2,8 +2,8 @@
   @apply border-box focus:outline-none;
 }
 [data-style='material'] rk-input-field {
-  @apply border-neutral-muted box-border rounded border;
-  @apply relative pb-0 leading-loose text-neutral-800;
+  @apply border-surface-z3 box-border rounded border;
+  @apply text-surface-800 relative pb-0 leading-loose;
 }
 [data-style='material'] rk-input-field.empty label {
   @apply absolute top-0 my-3.5 align-middle;
@@ -20,7 +20,7 @@
 
 [data-style='material'] rk-input-field label,
 [data-style='material'] rk-input-field:focus-within label {
-  @apply bg-neutral-base z-1 absolute block;
+  @apply bg-surface-z1 z-1 absolute block;
   @apply -top-2 left-3 my-0 px-1 leading-tight opacity-100;
 }
 
@@ -28,13 +28,13 @@
   @apply cursor-pointer select-none rounded;
 }
 [data-style='material'] rk-input-select > selected-item {
-  @apply bg-neutral-base h-8 items-center pl-4 pr-0 normal-case;
-  @apply border-neutral-muted rounded border text-neutral-800;
-  @apply hover:bg-neutral-muted hover:border-secondary-600;
+  @apply bg-surface-z1 h-8 items-center pl-4 pr-0 normal-case;
+  @apply border-surface-z3 text-surface-800 rounded border;
+  @apply hover:bg-surface-z3 hover:border-secondary-600;
 }
 
 [data-style='material'] rk-input-select:hover square-icon {
-  @apply border-neutral;
+  @apply border-surface;
 }
 [data-style='material'] rk-input-select scroll {
   @apply mt-2 shadow-lg;
@@ -51,7 +51,7 @@
 }
 
 [data-style='material'] rk-rating {
-  @apply text-xl text-neutral-600 focus:outline-none;
+  @apply text-surface-600 text-xl focus:outline-none;
 }
 [data-style='material'] rk-rating > rk-icon {
   @apply w-8;

package/src/material/list.css

@@ -3,7 +3,7 @@
   @apply gap-1px rounded;
 }
 [data-style='material'] rk-list > rk-item {
-  @apply bg-neutral-subtle;
+  @apply bg-surface-z2;
 }
 [data-style='material'] rk-item {
   @apply flex items-center gap-2 px-3 leading-10;
@@ -49,7 +49,7 @@
 }
 
 [data-style='material'] rk-accordion .is-expanded rk-summary {
-  @apply border-neutral-muted z-1 sticky top-0 rounded-b-none border-b;
+  @apply border-surface-z3 z-1 sticky top-0 rounded-b-none border-b;
 }
 
 [data-style='material'] rk-accordion .is-selected rk-summary {
@@ -61,14 +61,14 @@
 } */
 [data-style='material'] rk-node[aria-selected='true'],
 [data-style='material'] rk-list rk-item[aria-selected='true'] {
-  @apply bg-primary text-neutral-base;
+  @apply bg-primary text-surface-z1;
 }
 [data-style='material'] rk-crumbs {
   @apply flex-grow gap-1 text-sm;
 }
 
 [data-style='material'] rk-switch rk-item[aria-selected='true'] {
-  @apply bg-primary text-neutral-200 dark:text-neutral-800;
+  @apply bg-primary text-surface-200 dark:text-surface-800;
 }
 [data-style='material'] rk-crumbs rk-crumb.is-selected {
   @apply text-secondary;
@@ -76,7 +76,7 @@
 
 [data-style='material'] rk-switch {
   @apply mx-auto min-h-6 min-w-12 rounded-full;
-  @apply bg-neutral-subtle border-neutral-muted border;
+  @apply bg-surface-z2 border-surface-z3 border;
   @apply p-2px;
 }
 [data-style='material'] rk-switch rk-item {

package/src/minimal/base.css

@@ -1,8 +1,8 @@
 /* @import '../base.css'; */
 
 [data-style='minimal'] rk-icon[role='button'] {
-  @apply text-neutral-muted hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px focus:rounded;
+  @apply text-surface-z3 hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px focus:rounded;
 }
 [data-style='minimal'] button:disabled > rk-icon {
-  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
+  @apply text-surface-z2 hover:text-surface-z2 cursor-not-allowed;
 }

package/src/minimal/form.css

@@ -1,6 +1,6 @@
 [data-style='minimal'] button {
   @apply select-none rounded px-4 leading-loose;
-  @apply bg-neutral-muted border-neutral-muted border;
+  @apply bg-surface-z3 border-surface-z3 border;
 }
 [data-style='minimal'] button rk-icon-left,
 [data-style='minimal'] button rk-icon-right {
@@ -21,9 +21,9 @@
   @apply gap-1px flex justify-center rounded-sm;
 }
 [data-style='minimal'] rk-button-group button {
-  @apply rounded-none border-none border-neutral-400;
-  @apply bg-neutral-subtle shadow focus:outline-none;
-  @apply px-2 text-sm uppercase leading-8 text-neutral-800;
+  @apply border-surface-400 rounded-none border-none;
+  @apply bg-surface-z2 shadow focus:outline-none;
+  @apply text-surface-800 px-2 text-sm uppercase leading-8;
 }
 [data-style='minimal'] rk-button-group button:not(:last-child) {
   @apply border-r;
@@ -44,7 +44,7 @@
 }
 [data-style='minimal'] rk-input-select > selected-item {
   @apply min-h-8 cursor-pointer items-center gap-4 pl-2 leading-8;
-  @apply border-b-neutral-muted border-b-2;
+  @apply border-b-surface-z3 border-b-2;
   @apply focus:border-b-secondary-600;
 }
 [data-style='minimal'] rk-input-select:focus > selected-item {
@@ -57,7 +57,7 @@
   @apply flex-grow flex-wrap gap-2;
 }
 [data-style='minimal'] rk-pill {
-  @apply gap-2 rounded-full border border-neutral-400 px-2;
+  @apply border-surface-400 gap-2 rounded-full border px-2;
 }
 [data-style='minimal'] rk-pill > rk-item {
   @apply gap-2 leading-6;
@@ -75,7 +75,7 @@
 
 [data-style='minimal'] button[role='switch'] {
   @apply h-8 min-h-6 w-16 rounded-full p-0;
-  @apply bg-neutral-subtle border-neutral-subtle border;
+  @apply bg-surface-z2 border-surface-z2 border;
 }
 
 [data-style='minimal'] button[role='switch'] > rk-mark {

package/src/minimal/input.css

@@ -3,14 +3,14 @@
 [data-style='minimal'] textarea,
 [data-style='minimal'] select,
 [data-style='minimal'] fieldset {
-  @apply border-neutral-muted rounded border px-2 leading-loose outline-none;
+  @apply border-surface-z3 rounded border px-2 leading-loose outline-none;
 }
 
 [data-style='minimal'] fieldset {
   @apply gap-2 rounded-md p-4 pt-2;
 }
 [data-style='minimal'] fieldset legend {
-  @apply border-neutral-muted hover:text-primary select-none rounded-md border-l border-r px-2 leading-tight;
+  @apply border-surface-z3 hover:text-primary select-none rounded-md border-l border-r px-2 leading-tight;
 }
 [data-style='minimal'] fieldset rk-icon {
   @apply text-2xl;
@@ -21,14 +21,14 @@
 }
 
 [data-style='minimal'] input-field field {
-  @apply border-b-1 border-neutral-muted box-border min-h-9 overflow-hidden;
+  @apply border-b-1 border-surface-z3 box-border min-h-9 overflow-hidden;
   @apply focus-within:border-b-secondary-600;
 }
 [data-style='minimal'] input-field:focus-within label {
   @apply text-secondary-600;
 }
 [data-style='minimal'] input-field span {
-  @apply border-neutral-muted bg-neutral-base aspect-square h-full border-r px-1;
+  @apply border-surface-z3 bg-surface-z1 aspect-square h-full border-r px-1;
 }
 [data-style='minimal'] input-field input,
 [data-style='minimal'] input-field textarea,
@@ -38,10 +38,10 @@
 }
 
 [data-style='minimal'] input-field label {
-  @apply text-neutral w-full text-sm uppercase leading-6;
+  @apply text-surface w-full text-sm uppercase leading-6;
 }
 [data-style='minimal'] input-field message {
-  @apply bg-neutral-base rounded px-2 py-1;
+  @apply bg-surface-z1 rounded px-2 py-1;
 }
 
 [data-style='minimal'] input-field.fail {
@@ -52,7 +52,7 @@
   @apply relative mt-3 h-1;
 }
 [data-style='minimal'] input-range range-track span {
-  @apply bg-neutral-subtle border-neutral-muted box-border rounded-full;
+  @apply bg-surface-z2 border-surface-z3 box-border rounded-full;
 }
 [data-style='minimal'] input-range range-track selected {
   @apply -top-0px -bottom-0px border-secondary bg-secondary-600 rounded-full border;
@@ -82,7 +82,7 @@
   @apply h-6;
 } */
 [data-style='minimal'] tick span {
-  @apply border-neutral h-full;
+  @apply border-surface h-full;
 }
 [data-style='minimal'] tick p {
   @apply items-top;

package/src/minimal/list.css

@@ -10,14 +10,14 @@
 }
 [data-style='minimal'] rk-list,
 [data-style='minimal'] rk-accordion rk-summary {
-  @apply border-l-2px border-l-neutral-muted;
+  @apply border-l-2px border-l-surface-z3;
 }
 [data-style='minimal'] :not(rk-accordion > div) rk-list:focus-within {
   @apply outline-offset-3 outline-secondary-700 outline;
 }
 [data-style='minimal'] rk-list > rk-item,
 [data-style='minimal'] rk-accordion summary {
-  @apply bg-neutral-base items-center px-2 leading-8 text-neutral-700;
+  @apply bg-surface-z1 text-surface-700 items-center px-2 leading-8;
 }
 
 [data-style='minimal'] rk-item > a {
@@ -25,16 +25,16 @@
 }
 
 [data-style='minimal'] rk-list rk-item:hover {
-  @apply -m-l-2px border-l-2px border-l-neutral-subtle;
+  @apply -m-l-2px border-l-2px border-l-surface-z2;
 }
 [data-style='minimal'] rk-accordion summary:hover {
-  @apply border-l-neutral-subtle;
+  @apply border-l-surface-z2;
 }
 [data-style='minimal'] rk-list rk-item[aria-selected='true'] {
-  @apply -m-l-2px border-l-2px border-l-secondary-600 text-secondary-600 bg-neutral-subtle;
+  @apply -m-l-2px border-l-2px border-l-secondary-600 text-secondary-600 bg-surface-z2;
 }
 [data-style='minimal'] rk-accordion .is-selected summary {
-  @apply border-l-2px border-l-secondary-600 bg-neutral-subtle;
+  @apply border-l-2px border-l-secondary-600 bg-surface-z2;
 }
 
 [data-style='minimal'] rk-accordion .is-expanded summary {
@@ -69,7 +69,7 @@
   @apply w-3 border-none;
 }
 [data-style='minimal'] rk-node > div > rk-icon {
-  @apply text-xs text-neutral-400;
+  @apply text-surface-400 text-xs;
 }
 [data-style='minimal'] rk-node[aria-selected='true'] > rk-item > p {
   @apply text-secondary-600;
@@ -102,11 +102,11 @@
 }
 
 [data-style='minimal'] .folder-tree {
-  @apply bg-neutral-inset h-full min-w-40;
+  @apply bg-surface-z0 h-full min-w-40;
 }
 
 /* [data-style="minimal"] rk-node > div > i {
-  @apply border-neutral-muted;
+  @apply border-surface-z3;
 } */
 
 [data-style='minimal'] rk-crumbs {
@@ -118,7 +118,7 @@
 
 [data-style='minimal'] rk-switch {
   @apply mx-auto min-h-6 min-w-12 rounded;
-  @apply bg-neutral-subtle border-neutral-muted border;
+  @apply bg-surface-z2 border-surface-z3 border;
   @apply p-2px leading-loose;
 }
 [data-style='minimal'] rk-switch rk-item {
@@ -132,5 +132,5 @@
   @apply gap-0 rounded-full px-0;
 }
 [data-style='minimal'] rk-switch rk-item[aria-selected='true'] {
-  @apply bg-secondary text-neutral-800;
+  @apply bg-secondary text-surface-800;
 }

package/src/minimal/tabs.css

@@ -2,10 +2,10 @@
   @apply outline-none;
 }
 [data-style='minimal'] rk-tabs {
-  @apply border-neutral-subtle box-border cursor-pointer select-none gap-2 border-b-2 px-2;
+  @apply border-surface-z2 box-border cursor-pointer select-none gap-2 border-b-2 px-2;
 }
 [data-style='minimal'] rk-tabs .tab {
-  @apply px-2 text-base leading-8;
+  @apply text-z2 px-2 leading-8;
 }
 [data-style='minimal'] rk-tabs .tab rk-icon[role='img'] {
   @apply h-6 w-6;

package/src/mixins/mixins.scss

@@ -37,7 +37,7 @@
   --code-function: hsl(19, 67%, 45%); /* #a71d5d; */
 
   --code-gutter-marker: black;
-  --code-gutter-subtle: #999;
+  --code-gutter-z2: #999;
   --code-cursor: #24292e;
   --code-cursor-block: rgba(20, 255, 20, 0.5);
   --code-linenumbers: rgba(27, 31, 35, 0.3);
@@ -59,7 +59,7 @@
   --code-function: #61afef;
 
   --code-gutter-marker: black;
-  --code-gutter-subtle: #999;
+  --code-gutter-z2: #999;
   --code-cursor: #24292e;
   --code-cursor-block: rgba(20, 255, 20, 0.5);
   --code-linenumbers: rgba(27, 31, 35, 0.3);

package/src/mixins/palette.scss

@@ -4,7 +4,7 @@ $theme-colors: (
   primary: #fb923c,
   secondary: #ef5da8,
   accent: #eb479c,
-  neutral: #262730
+  surface: #262730
 );
 
 $lightness: (95%, 90%, 85%, 80%, 70%, 60%, 50%, 40%, 30%, 20%);
@@ -17,8 +17,8 @@ $lightness: (95%, 90%, 85%, 80%, 70%, 60%, 50%, 40%, 30%, 20%);
     --secondary-saturation: 80%;
     --accent-hue: 329;
     --accent-saturation: 80%;
-    --neutral-hue: 233;
-    --neutral-saturation: 11.9%;
+    --surface-hue: 233;
+    --surface-saturation: 11.9%;
 
     --tab-size: 2;
   }

package/src/rokkit/atoms.css

@@ -1,7 +1,7 @@
 /* Zebra styles */
 [data-style='rokkit'] .zebra rk-item,
 [data-style='rokkit'] .zebra rk-list-item {
-  @apply even:bg-neutral-zebra hover:bg-neutral-50;
+  @apply even:bg-surface-zebra hover:bg-surface-50;
 }
 
 /* Styles for input[type='number'] */
@@ -14,12 +14,12 @@
 }
 
 [data-style='rokkit'] rk-progress-bar rk-value-bar {
-  @apply from-primary-500 to-secondary-500 bg-gradient-to-r text-neutral-100 dark:text-neutral-800;
+  @apply from-primary-500 to-secondary-500 text-surface-100 dark:text-surface-800 bg-gradient-to-r;
 }
 
 /* Styles for 'searchable' class */
 [data-style='rokkit'] .searchable input {
-  @apply border-neutral-subtle border;
+  @apply border-surface-z2 border;
 }
 [data-style='rokkit'] a.button {
   @apply px-4 no-underline;

package/src/rokkit/carousel.css

@@ -11,8 +11,8 @@ rk-carousel rk-dot-nav {
   @apply flex h-4 w-full justify-center gap-2;
 }
 rk-carousel rk-dot {
-  /* @apply block h-4 w-4 p-0 m-0 text-xs rounded-full bg-neutral-subtle cursor-pointer focus:outline-none; */
-  @apply from-neutral-subtle to-neutral-subtle bg-gradient-to-r;
+  /* @apply block h-4 w-4 p-0 m-0 text-xs rounded-full bg-surface-z2 cursor-pointer focus:outline-none; */
+  @apply from-surface-z2 to-surface-z2 bg-gradient-to-r;
 }
 rk-carousel rk-dot[aria-checked='true'] {
   @apply from-primary to-secondary bg-gradient-to-r;

package/src/rokkit/molecules.css

@@ -3,7 +3,7 @@
   @apply relative mt-2 h-2;
 }
 [data-style='rokkit'] rk-input-range rk-range-track rk-range-track-bar {
-  @apply bg-neutral-muted border-neutral-muted box-border rounded-full border;
+  @apply bg-surface-z3 border-surface-z3 box-border rounded-full border;
 }
 [data-style='rokkit'] rk-input-range rk-range-track selected-bar {
   @apply top-0px bottom-0px from-primary to-secondary border-secondary rounded-full border bg-gradient-to-r;
@@ -12,7 +12,7 @@
   @apply rounded-sm focus:outline-none;
 }
 /* [data-style="rokkit"]  rk-input-range rk-tick p {
-  @apply text-neutral-800;
+  @apply text-surface-800;
 } */
 [data-style='rokkit'] .bookend rk-range-track rk-range-track-bar::before,
 [data-style='rokkit'] .bookend rk-range-track rk-range-track-bar::after {
@@ -31,10 +31,10 @@
   @apply h-6;
 } */
 [data-style='rokkit'] rk-tick rk-tick-bar {
-  @apply border-neutral h-full;
+  @apply border-surface h-full;
 }
 [data-style='rokkit'] rk-tick p {
-  @apply items-top text-neutral-600;
+  @apply items-top text-surface-600;
   font-size: 8px;
 }
 
@@ -51,7 +51,7 @@
 /* Styles for 'button[role='switch']' class */
 [data-style='rokkit'] button[role='switch'] {
   @apply h-8 min-h-6 w-16 rounded-full p-0;
-  @apply bg-neutral-subtle border-neutral-subtle border;
+  @apply bg-surface-z2 border-surface-z2 border;
 }
 [data-style='rokkit'] button[role='switch'] > rk-mark {
   @apply top-0.75 h-6 w-6 rounded-full;
@@ -60,7 +60,7 @@
 
 /* Styles for 'rating' class */
 [data-style='rokkit'] rating {
-  @apply focus:outline-secondary h-9 justify-center rounded text-xl text-neutral-600 focus:outline;
+  @apply focus:outline-secondary text-surface-600 h-9 justify-center rounded text-xl focus:outline;
 }
 [data-style='rokkit'] rating > icon {
   @apply w-8;
@@ -74,10 +74,10 @@
 
 /* Pill styles */
 [data-style='rokkit'] .pill {
-  @apply bg-neutral-inset border-neutral-subtle flex-grow-0 rounded-full border px-2 py-1;
+  @apply bg-surface-z0 border-surface-z2 flex-grow-0 rounded-full border px-2 py-1;
 }
 [data-style='rokkit'] .pill > icon[role='button'] {
-  @apply hover:bg-neutral-muted h-5 w-5 rounded-full hover:text-current focus:m-0 focus:rounded-full;
+  @apply hover:bg-surface-z3 h-5 w-5 rounded-full hover:text-current focus:m-0 focus:rounded-full;
 }
 
 [data-style='rokkit'] .pill > rk-item {
@@ -120,5 +120,5 @@
 }
 
 [data-style='rokkit'] rk-day-of-month[aria-selected='true'] {
-  @apply from-primary to-secondary bg-gradient-to-r text-neutral-200 dark:text-neutral-800;
+  @apply from-primary to-secondary text-surface-200 dark:text-surface-800 bg-gradient-to-r;
 }

package/src/rokkit/organisms.css

@@ -4,15 +4,15 @@
 /* rk-list styles */
 
 [data-style='rokkit'] rk-list {
-  @apply gap-1px bg-neutral-subtle;
+  @apply gap-1px bg-surface-z2;
 }
 
 [data-style='rokkit'] rk-list rk-list-item,
 [data-style='rokkit'] rk-accordion div rk-summary {
-  @apply bg-neutral-base min-h-8 px-4 leading-10 text-neutral-800;
+  @apply bg-surface-z1 text-surface-800 min-h-8 px-4 leading-10;
 }
 [data-style='rokkit'] rk-accordion > div > rk-summary {
-  @apply bg-gradient from-neutral-subtle to-neutral-muted rounded pr-2;
+  @apply bg-gradient from-surface-z2 to-surface-z3 rounded pr-2;
 }
 
 /* Remove default details marker from summary */
@@ -22,7 +22,7 @@
 
 /* Nested rk-list and Tree styles */
 [data-style='rokkit'] :not(accordion > div) > rk-list {
-  @apply overflow-y-scroll rounded border border-neutral-400 shadow;
+  @apply border-surface-400 overflow-y-scroll rounded border shadow;
 }
 [data-style='rokkit'] :not(accordion > div) > rk-list rk-list-item {
   @apply first:rounded-t last:rounded-b;
@@ -43,7 +43,7 @@
 }
 /* Styles for 'tabs' class */
 [data-style='rokkit'] tabs {
-  @apply border-neutral-muted gap-1 border-b-2 px-1;
+  @apply border-surface-z3 gap-1 border-b-2 px-1;
 }
 [data-style='rokkit'] tabs.is-below {
   @apply border-b-0 border-t-2;
@@ -52,7 +52,7 @@
   @apply border-secondary outline-none;
 }
 [data-style='rokkit'] tabs .tab {
-  @apply bg-neutral-base flex-shrink-0 cursor-pointer items-center gap-3 rounded-t px-3 leading-9;
+  @apply bg-surface-z1 flex-shrink-0 cursor-pointer items-center gap-3 rounded-t px-3 leading-9;
 }
 [data-style='rokkit'] tabs.is-below .tab {
   @apply rounded-b rounded-t-none;
@@ -61,7 +61,7 @@
   @apply justify-center;
 }
 [data-style='rokkit'] tabs .tab[aria-selected='true'] {
-  @apply bg-neutral-muted;
+  @apply bg-surface-z3;
 }
 [data-style='rokkit'] tabs:focus-within .tab[aria-selected='true'] {
   @apply from-primary to-secondary bg-gradient-to-b text-white;
@@ -73,7 +73,7 @@
 /* Styles for 'button' and 'button-group' classes */
 [data-style='rokkit'] button,
 [data-style='rokkit'] .button {
-  @apply bg-neutral-subtle text-on-neutral-subtle flex min-h-9 cursor-pointer items-center gap-3 rounded-full px-6 uppercase;
+  @apply bg-surface-z2 text-on-surface-z2 flex min-h-9 cursor-pointer items-center gap-3 rounded-full px-6 uppercase;
   animation: button-pop var(--animation-btn, 0.25s) ease-out;
 }
 
@@ -82,10 +82,10 @@
   @apply from-primary to-secondary bg-gradient-to-r px-4 text-white;
 }
 [data-style='rokkit'] a.square > rk-icon {
-  @apply text-on-neutral-subtle h-full w-full;
+  @apply text-on-surface-z2 h-full w-full;
 }
 [data-style='rokkit'] a.square {
-  @apply border-neutral-subtle bg-neutral-subtle flex items-center justify-center rounded-md border leading-loose;
+  @apply border-surface-z2 bg-surface-z2 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;
@@ -110,11 +110,11 @@
 /* [data-style="rokkit"] select, */
 [data-style="rokkit"] drop-down > button {
   @apply rounded;
-  /* @apply border border-neutral-muted; */
+  /* @apply border border-surface-z3; */
 }
 
 [data-style='rokkit'] drop-down > button {
-  @apply bg-neutral-base p-0;
+  @apply bg-surface-z1 p-0;
 }
 [data-style='rokkit'] drop-down > button > span {
   @apply rounded py-0;
@@ -124,10 +124,10 @@
 }
 
 [data-style='rokkit'] :not(field) > input-select {
-  @apply bg-neutral-base border-neutral-muted p-2px border;
+  @apply bg-surface-z1 border-surface-z3 p-2px border;
 }
 [data-style='rokkit'] :not(field) > input-select > selected-item {
-  @apply bg-neutral-subtle;
+  @apply bg-surface-z2;
 }
 [data-style='rokkit'] :not(field) > input-select:focus-within,
 [data-style='rokkit'] :not(field) > input-select:focus-within,
@@ -138,13 +138,13 @@
 }
 /* [data-style="rokkit"] :not(field) > input-select:focus-within > selected-item,
 [data-style="rokkit"] drop-down:focus-within > button > span {
-  @apply bg-neutral-muted outline-none min-h-10;
+  @apply bg-surface-z3 outline-none min-h-10;
 } */
 
 /* Hover and rk-icon styles */
 /* [data-style="rokkit"] input-select:hover > rk-icon,
 [data-style="rokkit"] drop-down:hover > rk-icon {
-  @apply border-neutral;
+  @apply border-surface;
 } */
 
 /* Scroll styles */
@@ -166,7 +166,7 @@
 
 /* Nested rk-list and rk-node styles */
 [data-style='rokkit'] rk-nested-list {
-  @apply text-neutral-800;
+  @apply text-surface-800;
 }
 [data-style='rokkit'] rk-nested-list rk-node > div {
   @apply h-8 px-2;
@@ -202,12 +202,12 @@
 }
 [data-style='rokkit'] rk-list rk-list-item:hover,
 [data-style='rokkit'] rk-node > div:hover {
-  @apply bg-neutral-subtle;
+  @apply bg-surface-z2;
 }
 
 [data-style='rokkit'] rk-list-item[aria-current='true'],
 [data-style='rokkit'] rk-node[aria-current='true'] > div {
-  @apply bg-neutral-subtle text-on-neutral-subtle;
+  @apply bg-surface-z2 text-on-surface-z2;
 }
 
 /* Selected and Hover styles for rk-list and rk-node */
@@ -217,11 +217,11 @@
 
 /* Expanded and Selected styles for rk-accordion */
 [data-style='rokkit'] rk-accordion .is-expanded rk-summary {
-  @apply border-neutral-muted z-1 sticky top-0 rounded-b-none border-b;
+  @apply border-surface-z3 z-1 sticky top-0 rounded-b-none border-b;
 }
 
 [data-style='rokkit'] rk-accordion [aria-selected='true'] rk-summary {
-  @apply bg-neutral-subtle;
+  @apply bg-surface-z2;
 }
 [data-style='rokkit'] rk-accordion:focus-within [aria-selected='true'] rk-summary {
   @apply from-primary to-secondary bg-gradient-to-r text-white outline-none;
@@ -229,15 +229,15 @@
 
 /* Border styles for rk-accordion */
 [data-style='rokkit'] rk-accordion > div {
-  @apply border-neutral-muted border;
+  @apply border-surface-z3 border;
 }
 
 /* Folder Tree styles */
 [data-style='rokkit'] .folder-tree {
-  @apply bg-neutral-inset h-full;
+  @apply bg-surface-z0 h-full;
 }
 [data-style='rokkit'] .folder-tree rk-nested-list {
-  @apply bg-neutral-inset h-full;
+  @apply bg-surface-z0 h-full;
 }
 [data-style='rokkit'] rk-node > div > rk-item {
   @apply px-1;
@@ -246,16 +246,16 @@
   @apply flex-shrink-0;
 }
 [data-style='rokkit'] rk-node > div > span > i {
-  @apply border-neutral-muted;
+  @apply border-surface-z3;
 }
 [data-style='rokkit'] rk-node > div > rk-icon > i {
-  @apply text-neutral-elevated;
+  @apply text-surface-z6;
 }
 
 /* Toggle Switch styles */
 [data-style='rokkit'] rk-switch {
   @apply mx-auto min-w-12 rounded-full;
-  @apply bg-neutral-subtle border-neutral-muted border;
+  @apply bg-surface-z2 border-surface-z3 border;
   @apply p-2px leading-loose;
 }
 [data-style='rokkit'] rk-switch:focus-within {
@@ -270,7 +270,7 @@
 }
 
 [data-style='rokkit'] rk-switch rk-item[aria-selected='true'] {
-  @apply from-neutral-muted to-neutral-muted bg-gradient-to-r;
+  @apply from-surface-z3 to-surface-z3 bg-gradient-to-r;
 }
 
 [data-style='rokkit'] rk-switch.compact > rk-item {
@@ -285,7 +285,7 @@
 }
 
 [data-style='rokkit'] rk-switch[aria-disabled='true'] {
-  @apply bg-neutral-muted cursor-not-allowed text-neutral-500;
+  @apply bg-surface-z3 text-surface-500 cursor-not-allowed;
 }
 [data-style='rokkit'] rk-input-select > rk-selected-item > rk-items {
   @apply flex-grow flex-wrap gap-2;
@@ -296,12 +296,12 @@
 }
 
 [data-style='rokkit'] rk-pill {
-  @apply bg-neutral-muted border-neutral-muted rounded-full border px-4 text-neutral-800;
+  @apply bg-surface-z3 border-surface-z3 text-surface-800 rounded-full border px-4;
 }
 [data-style='rokkit'] rk-pill rk-icon {
-  @apply text-neutral-700;
+  @apply text-surface-700;
 }
 
 [data-style='rokkit'] rk-pill rk-icon[role='button'] {
-  @apply hover:text-primary-elevated text-neutral-elevated text-sm;
+  @apply hover:text-primary-z6 text-surface-z6 text-sm;
 }

package/src/rokkit/table.css

@@ -21,26 +21,26 @@ th[data-sortable='true']:hover icon {
 }
 
 table {
-  @apply w-full text-left text-sm text-neutral-700 rtl:text-right;
+  @apply text-surface-700 w-full text-left text-sm rtl:text-right;
 }
 table > thead {
-  @apply table-header-group bg-neutral-400 text-xs uppercase;
+  @apply bg-surface-400 table-header-group text-xs uppercase;
 }
 table > caption {
-  @apply bg-neutral-subtle table-caption p-5 text-left text-sm font-normal text-neutral-600 rtl:text-right;
+  @apply bg-surface-z2 text-surface-600 table-caption p-5 text-left text-sm font-normal rtl:text-right;
 }
 
 table > tbody > tr {
-  @apply border-neutral-base bg-neutral-subtle table-row border-b;
+  @apply border-surface-z1 bg-surface-z2 table-row border-b;
 }
 table.striped > tbody > tr:nth-child(even) {
-  @apply bg-neutral-inset;
+  @apply bg-surface-z0;
 }
 table > tfoot {
   @apply table-footer-group;
 }
 table > tfoot > tr {
-  @apply table-row font-semibold text-neutral-800;
+  @apply text-surface-800 table-row font-semibold;
 }
 
 rk-table-wrapper {

package/src/rokkit/toggle.css

@@ -1,6 +1,6 @@
 [data-style='rokkit'] rk-switch {
   @apply flex cursor-pointer flex-row items-center gap-3;
-  @apply border-neutral-muted rounded-md border p-2;
+  @apply border-surface-z3 rounded-md border p-2;
 }
 
 [data-style='rokkit'] rk-switch:hover > rk-icon {
@@ -18,13 +18,13 @@
   @apply text-md h-4;
 }
 [data-style='rokkit'] rk-toggle {
-  @apply border-neutral-subtle bg-neutral-subtle box-border aspect-square h-9 border;
+  @apply border-surface-z2 bg-surface-z2 box-border aspect-square h-9 border;
   @apply flex items-center justify-center rounded-md leading-loose;
 }
 
 [data-style='rokkit'] rk-toggle:focus-within,
 [data-style='rokkit'] a.button.square:focus-within {
-  @apply ring-secondary border-neutral-base border ring-2;
+  @apply ring-secondary border-surface-z1 border ring-2;
 }
 [data-style='rokkit'] rk-toggle:focus-within button {
   @apply p-0;
@@ -33,7 +33,7 @@
   @apply p-0 outline-none;
 }
 /* [data-style='rokkit'] rk-toggle rk-icon {
-  @apply bg-neutral-base flex rounded p-0 leading-loose;
+  @apply bg-surface-z1 flex rounded p-0 leading-loose;
 } */
 
 [data-style='rokkit'] a.square {
@@ -43,7 +43,7 @@
   @apply p-0;
 }
 [data-style='rokkit'] rk-toggle rk-icon {
-  @apply bg-neutral-subtle h-full w-full rounded-md;
+  @apply bg-surface-z2 h-full w-full rounded-md;
 }
 
 /* [data-style='rokkit'] rk-toggle > button {
@@ -60,5 +60,5 @@
   @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;
+  @apply bg-surface-z1 text-surface hover:text-primary rounded-sm;
 } */