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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/neu.css +1 -1
  2. package/package.json +1 -1
  3. package/src/neu.css +50 -1
package/neu.css CHANGED
@@ -1 +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}}
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-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-radio-group[label]:not(:defined){min-block-size:2.75rem}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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neumorphism-ui/tokens",
3
- "version": "1.0.0-next.1",
3
+ "version": "1.0.0-next.3",
4
4
  "description": "Theme tokens for neumorphism-ui",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/neu.css CHANGED
@@ -163,12 +163,18 @@
163
163
  neu-avatar:not(:defined),
164
164
  neu-badge:not(:defined),
165
165
  neu-button:not(:defined),
166
+ neu-checkbox:not(:defined),
166
167
  neu-divider:not(:defined),
167
168
  neu-icon:not(:defined),
168
169
  neu-icon-button:not(:defined),
170
+ neu-number-field:not(:defined),
171
+ neu-radio:not(:defined),
172
+ neu-select:not(:defined),
173
+ neu-slider:not(:defined),
169
174
  neu-spinner:not(:defined),
170
175
  neu-switch:not(:defined),
171
- neu-text-field:not(:defined) {
176
+ neu-text-field:not(:defined),
177
+ neu-textarea:not(:defined) {
172
178
  visibility: hidden;
173
179
  }
174
180
  neu-avatar:not(:defined) {
@@ -184,9 +190,38 @@
184
190
  display: inline-block;
185
191
  min-block-size: 2.5rem;
186
192
  }
193
+ neu-checkbox:not(:defined) {
194
+ display: inline-flex;
195
+ min-block-size: 1.25rem;
196
+ }
187
197
  neu-button-group:not(:defined) {
188
198
  display: inline-flex;
189
199
  }
200
+ neu-radio:not(:defined) {
201
+ display: inline-flex;
202
+ min-block-size: 1.25rem;
203
+ }
204
+ neu-radio-group:not(:defined) {
205
+ display: block;
206
+ }
207
+ neu-radio-group[label]:not(:defined) {
208
+ min-block-size: 2.75rem;
209
+ }
210
+ neu-select:not(:defined) {
211
+ display: block;
212
+ min-block-size: 2.75rem;
213
+ }
214
+ neu-select[label]:not(:defined) {
215
+ min-block-size: 4.125rem;
216
+ }
217
+ /* Options are data for their select; before it is defined their text would show. */
218
+ neu-option:not(:defined) {
219
+ display: none;
220
+ }
221
+ neu-slider:not(:defined) {
222
+ display: block;
223
+ min-block-size: 1.25rem;
224
+ }
190
225
  neu-surface:not(:defined) {
191
226
  display: block;
192
227
  }
@@ -220,4 +255,18 @@
220
255
  neu-text-field[label]:not(:defined) {
221
256
  min-block-size: 4.125rem;
222
257
  }
258
+ neu-number-field:not(:defined) {
259
+ display: block;
260
+ min-block-size: 2.75rem;
261
+ }
262
+ neu-number-field[label]:not(:defined) {
263
+ min-block-size: 4.125rem;
264
+ }
265
+ neu-textarea:not(:defined) {
266
+ display: block;
267
+ min-block-size: 5.1875rem;
268
+ }
269
+ neu-textarea[label]:not(:defined) {
270
+ min-block-size: 6.5625rem;
271
+ }
223
272
  }