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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.54",
+  "version": "1.0.0-next.56",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -16,12 +16,12 @@
     "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "~0.34.6",
     "jsdom": "^22.1.0",
-    "svelte": "^4.2.1",
+    "svelte": "^4.2.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vitest": "~0.34.6",
-    "@rokkit/core": "1.0.0-next.54",
-    "shared-config": "1.0.0-next.54"
+    "@rokkit/core": "1.0.0-next.56",
+    "shared-config": "1.0.0-next.56"
   },
   "files": [
     "src"

package/src/base/atoms.css

@@ -49,7 +49,7 @@ summary p {
 
 /* Overlay styles */
 overlay {
-  @apply bg-skin-inset bg-opacity-50;
+  @apply bg-neutral-inset bg-opacity-50;
 }
 
 /* Checkbox styles */

package/src/base/molecules.css

@@ -3,7 +3,7 @@ input-range range-track {
   @apply h-1 mt-3 relative;
 }
 input-range range-track span {
-  @apply bg-skin-subtle border-skin-muted rounded-full;
+  @apply bg-neutral-subtle border-neutral-muted rounded-full;
 }
 input-range range-track selected {
   @apply top-0px bottom-0px;
@@ -38,7 +38,7 @@ input-range tick {
   @apply h-6;
 }
 input-range tick span {
-  @apply border-skin-500 h-full;
+  @apply border-neutral-500 h-full;
 }
 input-range tick p {
   @apply items-top;
@@ -93,7 +93,7 @@ input-field select,
 input-field > field > :not(icon) {
   @apply px-3;
   @apply flex-grow outline-none min-h-9 leading-loose;
-  @apply bg-skin-subtle text-skin-800;
+  @apply bg-neutral-subtle text-neutral-800;
 }
 input-field > label {
   @apply uppercase text-xs;
@@ -109,7 +109,7 @@ radio-group label {
 }
 /* Progress bar styles */
 progress-bar {
-  @apply bg-skin-muted border border-skin-subtle;
+  @apply bg-neutral-muted border border-neutral-subtle;
 }
 progress-bar value-bar {
   @apply bg-primary;

package/src/base/organisms.css

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

package/src/markdown.css

@@ -24,7 +24,7 @@
 .markdown-body h5 .octicon-link,
 .markdown-body h6 .octicon-link {
   /* color: #1b1f23; */
-  @apply text-skin-500;
+  @apply text-neutral-500;
   vertical-align: middle;
   visibility: hidden;
 }
@@ -260,7 +260,7 @@
 }
 .markdown-body ul li::before {
   content: '';
-  @apply absolute bg-skin-muted mt-2 -ml-5 w-1.5 h-1.5 rounded-sm;
+  @apply absolute bg-neutral-muted mt-2 -ml-5 w-1.5 h-1.5 rounded-sm;
   /* opacity: 0.7; */
 }
 
@@ -687,7 +687,7 @@
 .markdown-body h1,
 .markdown-body h2 {
   /* padding-bottom: 0.3em; */
-  @apply border-b border-skin-subtle mt-16;
+  @apply border-b border-neutral-subtle mt-16;
   /* border-bottom: 1px solid #eaecef; */
 }
 
@@ -714,7 +714,7 @@
 
 .markdown-body h6 {
   font-size: 0.85em;
-  @apply text-skin-500;
+  @apply text-neutral-500;
   /* color: #6a737d; */
 }
 
@@ -774,17 +774,17 @@
 .markdown-body table th {
   padding: 6px 13px;
   /* border: 1px solid #dfe2e5; */
-  @apply border border-skin-base;
+  @apply border border-neutral-base;
 }
 
 .markdown-body table tr {
   /* background-color: #fff; */
-  @apply border-t border-skin-subtle;
+  @apply border-t border-neutral-subtle;
   /* border-top: 1px solid #c6cbd1; */
 }
 
 .markdown-body table tr:nth-child(2n) {
-  @apply bg-skin-zebra;
+  @apply bg-neutral-zebra;
   /* background-color: #f6f8fa; */
 }
 

package/src/material/base.css

@@ -1,10 +1,10 @@
 @import '../base.css';
 
 .material icon[role='button'] {
-  @apply text-skin-muted focus:rounded hover:text-primary focus:outline-primary focus:m-1px;
+  @apply text-neutral-muted focus:rounded hover:text-primary focus:outline-primary focus:m-1px;
 }
 .material 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;
 }
 
 .material * {

package/src/material/form.css

@@ -4,7 +4,7 @@
 
 .material button,
 .material .button {
-  @apply py-2 px-4 rounded bg-skin-subtle uppercase;
+  @apply py-2 px-4 rounded bg-neutral-subtle uppercase;
 }
 .material button-group {
   @apply flex justify-center rounded-sm shadow;
@@ -14,9 +14,9 @@
 }
 
 .material button-group > button {
-  @apply border-skin-400 border-none rounded-none;
-  @apply bg-skin-subtle focus:outline-none;
-  @apply uppercase text-sm text-skin-800;
+  @apply border-neutral-400 border-none rounded-none;
+  @apply bg-neutral-subtle focus:outline-none;
+  @apply uppercase text-sm text-neutral-800;
 }
 .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;
 }
 .material input-field {
-  @apply box-border border border-skin-muted rounded;
-  @apply text-skin-800 leading-loose relative pb-0;
+  @apply box-border border border-neutral-muted rounded;
+  @apply text-neutral-800 leading-loose relative pb-0;
 }
 .material input-field.empty label {
   @apply absolute top-0 my-3.5 align-middle;
@@ -20,7 +20,7 @@
 
 .material input-field label,
 .material input-field:focus-within label {
-  @apply bg-skin-base absolute block z-1;
+  @apply bg-neutral-base absolute block z-1;
   @apply -top-2 left-3 my-0 px-1 leading-tight opacity-100;
 }
 
@@ -28,13 +28,13 @@
   @apply rounded cursor-pointer select-none;
 }
 .material input-select > selected-item {
-  @apply h-10 pl-4 pr-0 items-center bg-skin-base normal-case;
-  @apply rounded border border-skin-muted text-skin-800;
-  @apply hover:bg-skin-muted hover:border-secondary-600;
+  @apply h-10 pl-4 pr-0 items-center bg-neutral-base normal-case;
+  @apply rounded border border-neutral-muted text-neutral-800;
+  @apply hover:bg-neutral-muted hover:border-secondary-600;
 }
 
 .material input-select:hover square-icon {
-  @apply border-skin-500;
+  @apply border-neutral-500;
 }
 .material input-select scroll {
   @apply mt-2 shadow-lg;
@@ -51,7 +51,7 @@
 }
 
 .material rating {
-  @apply text-skin-600 text-xl focus:outline-none;
+  @apply text-neutral-600 text-xl focus:outline-none;
 }
 .material rating > icon {
   @apply w-8;

package/src/material/list.css

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

package/src/minimal/base.css

@@ -1,8 +1,8 @@
 /* @import '../base.css'; */
 
 .minimal icon[role='button'] {
-  @apply text-skin-muted focus:rounded hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px;
+  @apply text-neutral-muted focus:rounded hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px;
 }
 .minimal 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/minimal/form.css

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

package/src/minimal/input.css

@@ -3,14 +3,14 @@
 .minimal textarea,
 .minimal select,
 .minimal fieldset {
-  @apply rounded leading-loose px-2 border border-skin-muted outline-none;
+  @apply rounded leading-loose px-2 border border-neutral-muted outline-none;
 }
 
 .minimal fieldset {
   @apply p-4 pt-2 gap-2 rounded-md;
 }
 .minimal fieldset legend {
-  @apply px-2 border-l border-r rounded-md leading-tight border-skin-muted hover:text-primary select-none;
+  @apply px-2 border-l border-r rounded-md leading-tight border-neutral-muted hover:text-primary select-none;
 }
 .minimal fieldset icon {
   @apply text-2xl;
@@ -21,14 +21,14 @@
 }
 
 .minimal input-field field {
-  @apply box-border border-b-1 border-skin-muted min-h-9 overflow-hidden;
+  @apply box-border border-b-1 border-neutral-muted min-h-9 overflow-hidden;
   @apply focus-within:border-b-secondary-600;
 }
 .minimal input-field:focus-within label {
   @apply text-secondary-600;
 }
 .minimal 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;
 }
 .minimal input-field input,
 .minimal input-field textarea,
@@ -38,10 +38,10 @@
 }
 
 .minimal input-field label {
-  @apply leading-6 w-full uppercase text-sm text-skin-500;
+  @apply leading-6 w-full uppercase text-sm text-neutral-500;
 }
 .minimal input-field message {
-  @apply px-2 py-1 bg-skin-base rounded;
+  @apply px-2 py-1 bg-neutral-base rounded;
 }
 
 .minimal input-field.fail {
@@ -52,7 +52,7 @@
   @apply h-1 mt-3 relative;
 }
 .minimal input-range range-track span {
-  @apply bg-skin-subtle box-border border-skin-muted rounded-full;
+  @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;
@@ -82,7 +82,7 @@
   @apply h-6;
 }
 .minimal tick span {
-  @apply border-skin-500 h-full;
+  @apply border-neutral-500 h-full;
 }
 .minimal tick p {
   @apply items-top;

package/src/minimal/list.css

@@ -10,14 +10,14 @@
 }
 .minimal list,
 .minimal accordion summary {
-  @apply border-l-2px border-l-skin-muted;
+  @apply border-l-2px border-l-neutral-muted;
 }
 .minimal :not(accordion > div) list:focus-within {
   @apply outline outline-offset-3 outline-secondary-700;
 }
 .minimal list > item,
 .minimal accordion summary {
-  @apply px-2 text-skin-700 bg-skin-base items-center leading-8;
+  @apply px-2 text-neutral-700 bg-neutral-base items-center leading-8;
 }
 
 .minimal item > a {
@@ -25,16 +25,16 @@
 }
 
 .minimal list item:hover {
-  @apply -m-l-2px border-l-2px border-l-skin-subtle;
+  @apply -m-l-2px border-l-2px border-l-neutral-subtle;
 }
 .minimal accordion summary:hover {
-  @apply border-l-skin-subtle;
+  @apply border-l-neutral-subtle;
 }
 .minimal list item.is-selected {
-  @apply -m-l-2px border-l-2px border-l-secondary-600 text-secondary-600 bg-skin-subtle;
+  @apply -m-l-2px border-l-2px border-l-secondary-600 text-secondary-600 bg-neutral-subtle;
 }
 .minimal accordion .is-selected summary {
-  @apply border-l-2px border-l-secondary-600 bg-skin-subtle;
+  @apply border-l-2px border-l-secondary-600 bg-neutral-subtle;
 }
 
 .minimal accordion .is-expanded summary {
@@ -100,11 +100,11 @@
 }
 
 .minimal .folder-tree {
-  @apply h-full bg-skin-inset min-w-40;
+  @apply h-full bg-neutral-inset min-w-40;
 }
 
 .minimal node > span > i {
-  @apply border-skin-muted;
+  @apply border-neutral-muted;
 }
 
 .minimal crumbs {
@@ -116,7 +116,7 @@
 
 .minimal toggle-switch {
   @apply min-w-12 min-h-6 rounded mx-auto;
-  @apply bg-skin-subtle border border-skin-muted;
+  @apply bg-neutral-subtle border border-neutral-muted;
   @apply leading-loose p-2px;
 }
 .minimal toggle-switch item {
@@ -130,5 +130,5 @@
   @apply px-0 gap-0 rounded-full;
 }
 .minimal toggle-switch item[aria-selected='true'] {
-  @apply bg-secondary text-skin-800;
+  @apply bg-secondary text-neutral-800;
 }

package/src/minimal/tabs.css

@@ -2,7 +2,7 @@
   @apply outline-none;
 }
 .minimal tabs {
-  @apply box-border px-2 gap-2 border-b-2 border-skin-subtle cursor-pointer select-none;
+  @apply box-border px-2 gap-2 border-b-2 border-neutral-subtle cursor-pointer select-none;
 }
 .minimal tabs .tab {
   @apply leading-8 text-base px-2;

package/src/mixins/palette.scss

@@ -4,7 +4,7 @@ $theme-colors: (
   primary: #fb923c,
   secondary: #ef5da8,
   accent: #eb479c,
-  skin: #262730
+  neutral: #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%;
-    --skin-hue: 233;
-    --skin-saturation: 11.9%;
+    --neutral-hue: 233;
+    --neutral-saturation: 11.9%;
 
     --tab-size: 2;
   }