@neumorphism-ui/tokens 1.0.0-next.1 → 1.0.0-next.2

package/neu.css

@@ -1 +1 @@
-@layer neu{:root,[data-neu-theme=light]{color-scheme:light;--neu-bg: #e0e5ec;--neu-accent: #6d5dfc;--_neu-shade: 18%;--_neu-light: 100%;--_neu-ink: black;--_neu-fg-mix: 32%;--_neu-fg-muted-mix: 18%}@media(prefers-color-scheme:dark){:root:not([data-neu-theme=light]){color-scheme:dark;--neu-bg: #2b2f36;--neu-accent: #8b7dff;--_neu-shade: 45%;--_neu-light: 6%;--_neu-ink: white;--_neu-fg-mix: 42%;--_neu-fg-muted-mix: 24%}}[data-neu-theme=dark]{color-scheme:dark;--neu-bg: #2b2f36;--neu-accent: #8b7dff;--_neu-shade: 45%;--_neu-light: 6%;--_neu-ink: white;--_neu-fg-mix: 42%;--_neu-fg-muted-mix: 24%}:root{--neu-distance: 6px;--neu-intensity: 1;--neu-radius: 12px;--neu-success: #3bb273;--neu-warning: #e6a23c;--neu-danger: #e5484d;--neu-duration: .15s}@media(prefers-reduced-motion:reduce){:root{--neu-duration: 0ms}}:root,[data-neu-theme],.neu-surface,neu-surface{--_neu-sd: var( --neu-shadow-dark, color-mix( in oklab, var(--neu-bg), black min(100%, calc(var(--_neu-shade) * var(--neu-intensity))) ) );--_neu-sl: var( --neu-shadow-light, color-mix( in oklab, var(--neu-bg), white min(100%, calc(var(--_neu-light) * var(--neu-intensity))) ) );--_neu-fg: var( --neu-fg, color-mix(in oklab, var(--neu-bg), var(--_neu-ink) var(--_neu-fg-mix)) );--_neu-fg-muted: var( --neu-fg-muted, color-mix(in oklab, var(--neu-bg), var(--_neu-ink) var(--_neu-fg-muted-mix)) );--_neu-accent-soft: color-mix(in oklab, var(--neu-accent) 25%, var(--neu-bg));--_neu-focus: 0 0 0 3px color-mix(in oklab, var(--neu-accent) 45%, transparent);--neu-shadow-raised-sm: calc(var(--neu-distance) * .5) calc(var(--neu-distance) * .5) var(--neu-distance) var(--_neu-sd), calc(var(--neu-distance) * -.5) calc(var(--neu-distance) * -.5) var(--neu-distance) var(--_neu-sl);--neu-shadow-raised-md: var(--neu-distance) var(--neu-distance) calc(var(--neu-distance) * 2) var(--_neu-sd), calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) calc(var(--neu-distance) * 2) var(--_neu-sl);--neu-shadow-raised-lg: calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 4) var(--_neu-sd), calc(var(--neu-distance) * -2) calc(var(--neu-distance) * -2) calc(var(--neu-distance) * 4) var(--_neu-sl);--neu-shadow-inset-sm: inset calc(var(--neu-distance) * .5) calc(var(--neu-distance) * .5) var(--neu-distance) var(--_neu-sd), inset calc(var(--neu-distance) * -.5) calc(var(--neu-distance) * -.5) var(--neu-distance) var(--_neu-sl);--neu-shadow-inset-md: inset var(--neu-distance) var(--neu-distance) calc(var(--neu-distance) * 2) var(--_neu-sd), inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) calc(var(--neu-distance) * 2) var(--_neu-sl);--neu-shadow-inset-lg: inset calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 4) var(--_neu-sd), inset calc(var(--neu-distance) * -2) calc(var(--neu-distance) * -2) calc(var(--neu-distance) * 4) var(--_neu-sl);color:var(--_neu-fg)}:is(:root,[data-neu-theme],.neu-surface):not(neu-surface){background-color:var(--neu-bg)}.neu-raised,.neu-inset,.neu-flat,.neu-convex,.neu-concave{background-color:var(--neu-bg);border-radius:var(--neu-radius)}.neu-raised{box-shadow:var(--neu-shadow-raised-md)}.neu-inset{box-shadow:var(--neu-shadow-inset-md)}.neu-flat{box-shadow:none}.neu-convex{box-shadow:var(--neu-shadow-raised-md);background-image:linear-gradient(145deg,color-mix(in oklab,var(--neu-bg),white 8%),color-mix(in oklab,var(--neu-bg),black 6%))}.neu-concave{box-shadow:var(--neu-shadow-raised-md);background-image:linear-gradient(145deg,color-mix(in oklab,var(--neu-bg),black 6%),color-mix(in oklab,var(--neu-bg),white 8%))}neu-avatar:not(:defined),neu-badge:not(:defined),neu-button:not(:defined),neu-divider:not(:defined),neu-icon:not(:defined),neu-icon-button:not(:defined),neu-spinner:not(:defined),neu-switch:not(:defined),neu-text-field:not(:defined){visibility:hidden}neu-avatar:not(:defined){display:inline-block;inline-size:2.5rem;block-size:2.5rem}neu-badge:not(:defined){display:inline-block;min-block-size:1.25rem}neu-button:not(:defined){display:inline-block;min-block-size:2.5rem}neu-button-group:not(:defined){display:inline-flex}neu-surface:not(:defined){display:block}neu-divider:not(:defined){display:block;min-block-size:2px}neu-icon-button:not(:defined){display:inline-block;inline-size:2.5rem;block-size:2.5rem}neu-icon:not(:defined){display:inline-block;inline-size:1em;block-size:1em}neu-spinner:not(:defined){display:inline-block;inline-size:1.5rem;block-size:1.5rem}neu-switch:not(:defined){display:inline-flex;min-block-size:1.625rem}neu-text-field:not(:defined){display:block;min-block-size:2.75rem}neu-text-field[label]:not(:defined){min-block-size:4.125rem}}
+@layer neu{:root,[data-neu-theme=light]{color-scheme:light;--neu-bg: #e0e5ec;--neu-accent: #6d5dfc;--_neu-shade: 18%;--_neu-light: 100%;--_neu-ink: black;--_neu-fg-mix: 32%;--_neu-fg-muted-mix: 18%}@media(prefers-color-scheme:dark){:root:not([data-neu-theme=light]){color-scheme:dark;--neu-bg: #2b2f36;--neu-accent: #8b7dff;--_neu-shade: 45%;--_neu-light: 6%;--_neu-ink: white;--_neu-fg-mix: 42%;--_neu-fg-muted-mix: 24%}}[data-neu-theme=dark]{color-scheme:dark;--neu-bg: #2b2f36;--neu-accent: #8b7dff;--_neu-shade: 45%;--_neu-light: 6%;--_neu-ink: white;--_neu-fg-mix: 42%;--_neu-fg-muted-mix: 24%}:root{--neu-distance: 6px;--neu-intensity: 1;--neu-radius: 12px;--neu-success: #3bb273;--neu-warning: #e6a23c;--neu-danger: #e5484d;--neu-duration: .15s}@media(prefers-reduced-motion:reduce){:root{--neu-duration: 0ms}}:root,[data-neu-theme],.neu-surface,neu-surface{--_neu-sd: var( --neu-shadow-dark, color-mix( in oklab, var(--neu-bg), black min(100%, calc(var(--_neu-shade) * var(--neu-intensity))) ) );--_neu-sl: var( --neu-shadow-light, color-mix( in oklab, var(--neu-bg), white min(100%, calc(var(--_neu-light) * var(--neu-intensity))) ) );--_neu-fg: var( --neu-fg, color-mix(in oklab, var(--neu-bg), var(--_neu-ink) var(--_neu-fg-mix)) );--_neu-fg-muted: var( --neu-fg-muted, color-mix(in oklab, var(--neu-bg), var(--_neu-ink) var(--_neu-fg-muted-mix)) );--_neu-accent-soft: color-mix(in oklab, var(--neu-accent) 25%, var(--neu-bg));--_neu-focus: 0 0 0 3px color-mix(in oklab, var(--neu-accent) 45%, transparent);--neu-shadow-raised-sm: calc(var(--neu-distance) * .5) calc(var(--neu-distance) * .5) var(--neu-distance) var(--_neu-sd), calc(var(--neu-distance) * -.5) calc(var(--neu-distance) * -.5) var(--neu-distance) var(--_neu-sl);--neu-shadow-raised-md: var(--neu-distance) var(--neu-distance) calc(var(--neu-distance) * 2) var(--_neu-sd), calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) calc(var(--neu-distance) * 2) var(--_neu-sl);--neu-shadow-raised-lg: calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 4) var(--_neu-sd), calc(var(--neu-distance) * -2) calc(var(--neu-distance) * -2) calc(var(--neu-distance) * 4) var(--_neu-sl);--neu-shadow-inset-sm: inset calc(var(--neu-distance) * .5) calc(var(--neu-distance) * .5) var(--neu-distance) var(--_neu-sd), inset calc(var(--neu-distance) * -.5) calc(var(--neu-distance) * -.5) var(--neu-distance) var(--_neu-sl);--neu-shadow-inset-md: inset var(--neu-distance) var(--neu-distance) calc(var(--neu-distance) * 2) var(--_neu-sd), inset calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) calc(var(--neu-distance) * 2) var(--_neu-sl);--neu-shadow-inset-lg: inset calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 2) calc(var(--neu-distance) * 4) var(--_neu-sd), inset calc(var(--neu-distance) * -2) calc(var(--neu-distance) * -2) calc(var(--neu-distance) * 4) var(--_neu-sl);color:var(--_neu-fg)}:is(:root,[data-neu-theme],.neu-surface):not(neu-surface){background-color:var(--neu-bg)}.neu-raised,.neu-inset,.neu-flat,.neu-convex,.neu-concave{background-color:var(--neu-bg);border-radius:var(--neu-radius)}.neu-raised{box-shadow:var(--neu-shadow-raised-md)}.neu-inset{box-shadow:var(--neu-shadow-inset-md)}.neu-flat{box-shadow:none}.neu-convex{box-shadow:var(--neu-shadow-raised-md);background-image:linear-gradient(145deg,color-mix(in oklab,var(--neu-bg),white 8%),color-mix(in oklab,var(--neu-bg),black 6%))}.neu-concave{box-shadow:var(--neu-shadow-raised-md);background-image:linear-gradient(145deg,color-mix(in oklab,var(--neu-bg),black 6%),color-mix(in oklab,var(--neu-bg),white 8%))}neu-avatar:not(:defined),neu-badge:not(:defined),neu-button:not(:defined),neu-checkbox:not(:defined),neu-divider:not(:defined),neu-icon:not(:defined),neu-icon-button:not(:defined),neu-number-field:not(:defined),neu-radio:not(:defined),neu-select:not(:defined),neu-slider:not(:defined),neu-spinner:not(:defined),neu-switch:not(:defined),neu-text-field:not(:defined),neu-textarea:not(:defined){visibility:hidden}neu-avatar:not(:defined){display:inline-block;inline-size:2.5rem;block-size:2.5rem}neu-badge:not(:defined){display:inline-block;min-block-size:1.25rem}neu-button:not(:defined){display:inline-block;min-block-size:2.5rem}neu-checkbox:not(:defined){display:inline-flex;min-block-size:1.25rem}neu-button-group:not(:defined){display:inline-flex}neu-radio:not(:defined){display:inline-flex;min-block-size:1.25rem}neu-radio-group:not(:defined){display:block}neu-select:not(:defined){display:block;min-block-size:2.75rem}neu-select[label]:not(:defined){min-block-size:4.125rem}neu-option:not(:defined){display:none}neu-slider:not(:defined){display:block;min-block-size:1.25rem}neu-surface:not(:defined){display:block}neu-divider:not(:defined){display:block;min-block-size:2px}neu-icon-button:not(:defined){display:inline-block;inline-size:2.5rem;block-size:2.5rem}neu-icon:not(:defined){display:inline-block;inline-size:1em;block-size:1em}neu-spinner:not(:defined){display:inline-block;inline-size:1.5rem;block-size:1.5rem}neu-switch:not(:defined){display:inline-flex;min-block-size:1.625rem}neu-text-field:not(:defined){display:block;min-block-size:2.75rem}neu-text-field[label]:not(:defined){min-block-size:4.125rem}neu-number-field:not(:defined){display:block;min-block-size:2.75rem}neu-number-field[label]:not(:defined){min-block-size:4.125rem}neu-textarea:not(:defined){display:block;min-block-size:5.1875rem}neu-textarea[label]:not(:defined){min-block-size:6.5625rem}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neumorphism-ui/tokens",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.2",
   "description": "Theme tokens for neumorphism-ui",
   "license": "MIT",
   "type": "module",

package/src/neu.css

@@ -163,12 +163,18 @@
   neu-avatar:not(:defined),
   neu-badge:not(:defined),
   neu-button:not(:defined),
+  neu-checkbox:not(:defined),
   neu-divider:not(:defined),
   neu-icon:not(:defined),
   neu-icon-button:not(:defined),
+  neu-number-field:not(:defined),
+  neu-radio:not(:defined),
+  neu-select:not(:defined),
+  neu-slider:not(:defined),
   neu-spinner:not(:defined),
   neu-switch:not(:defined),
-  neu-text-field:not(:defined) {
+  neu-text-field:not(:defined),
+  neu-textarea:not(:defined) {
     visibility: hidden;
   }
   neu-avatar:not(:defined) {
@@ -184,9 +190,35 @@
     display: inline-block;
     min-block-size: 2.5rem;
   }
+  neu-checkbox:not(:defined) {
+    display: inline-flex;
+    min-block-size: 1.25rem;
+  }
   neu-button-group:not(:defined) {
     display: inline-flex;
   }
+  neu-radio:not(:defined) {
+    display: inline-flex;
+    min-block-size: 1.25rem;
+  }
+  neu-radio-group:not(:defined) {
+    display: block;
+  }
+  neu-select:not(:defined) {
+    display: block;
+    min-block-size: 2.75rem;
+  }
+  neu-select[label]:not(:defined) {
+    min-block-size: 4.125rem;
+  }
+  /* Options are data for their select; before it is defined their text would show. */
+  neu-option:not(:defined) {
+    display: none;
+  }
+  neu-slider:not(:defined) {
+    display: block;
+    min-block-size: 1.25rem;
+  }
   neu-surface:not(:defined) {
     display: block;
   }
@@ -220,4 +252,18 @@
   neu-text-field[label]:not(:defined) {
     min-block-size: 4.125rem;
   }
+  neu-number-field:not(:defined) {
+    display: block;
+    min-block-size: 2.75rem;
+  }
+  neu-number-field[label]:not(:defined) {
+    min-block-size: 4.125rem;
+  }
+  neu-textarea:not(:defined) {
+    display: block;
+    min-block-size: 5.1875rem;
+  }
+  neu-textarea[label]:not(:defined) {
+    min-block-size: 6.5625rem;
+  }
 }