@adecore/ui 0.35.1 → 0.35.2

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 (7) hide show
  1. package/dist/Slider.js +1 -1
  2. package/dist/Switch.js +1 -1
  3. package/dist/theme.css +15 -1
  4. package/package.json +1 -1
  5. package/src/Slider.tsx +1 -1
  6. package/src/Switch.tsx +1 -1
  7. package/src/theme.css +15 -1
package/dist/Slider.js CHANGED
@@ -133,7 +133,7 @@ export function Slider(t0) {
133
133
  className: "relative h-1 w-full rounded-full bg-border-strong",
134
134
  children: [t12, /*#__PURE__*/_jsx(BaseSlider.Thumb, {
135
135
  getAriaValueText: () => `${reading}${unit ?? ""}`,
136
- className: "block size-4 rounded-full bg-surface-raised shadow-raised outline-offset-2 outline-accent has-focus-visible:outline-2"
136
+ className: "block size-4 rounded-full bg-thumb shadow-thumb outline-offset-2 outline-accent has-focus-visible:outline-2"
137
137
  })]
138
138
  })
139
139
  });
package/dist/Switch.js CHANGED
@@ -32,7 +32,7 @@ export function Switch(t0) {
32
32
  let t3;
33
33
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
34
34
  t3 = /*#__PURE__*/_jsx(BaseSwitch.Thumb, {
35
- className: "block h-4 w-4 rounded-full bg-surface-raised shadow-raised transition-transform data-checked:translate-x-4"
35
+ className: "block h-4 w-4 rounded-full bg-thumb shadow-thumb transition-transform data-checked:translate-x-4"
36
36
  });
37
37
  $[4] = t3;
38
38
  } else {
package/dist/theme.css CHANGED
@@ -46,12 +46,19 @@
46
46
  0 3px 6px -2px rgb(0 0 0 / 0.07),
47
47
  0 8px 16px -8px rgb(0 0 0 / 0.1),
48
48
  0 16px 28px -14px rgb(0 0 0 / 0.1);
49
- /* The small lift of a thumb or a picked segment off the track it sits in: close to the surface
49
+ /* The small lift of a picked segment off the track it sits in: close to the surface
50
50
  rather than a haze around it. Not named `--shadow-*`, since the theme maps that name onto this. */
51
51
  --raised-shadow:
52
52
  0 1px 2px rgb(0 0 0 / 0.05),
53
53
  0 2px 4px -1px rgb(0 0 0 / 0.05),
54
54
  0 6px 12px -6px rgb(0 0 0 / 0.08);
55
+ /* The knob of a slider or switch. A white knob on a white surface needs an edge of its own,
56
+ or a disabled slider, whose track has faded, shows no knob at all. */
57
+ --thumb: #ffffff;
58
+ --thumb-shadow:
59
+ 0 0 0 1px rgb(0 0 0 / 0.08),
60
+ 0 1px 2px rgb(0 0 0 / 0.1),
61
+ 0 2px 4px -1px rgb(0 0 0 / 0.06);
55
62
  --status-running: #2563eb;
56
63
  --status-needs-you: #d97706;
57
64
  --status-idle: #16a34a;
@@ -122,6 +129,11 @@
122
129
  0 1px 2px rgb(0 0 0 / 0.3),
123
130
  0 2px 4px rgb(0 0 0 / 0.2),
124
131
  0 4px 8px rgb(0 0 0 / 0.12);
132
+ /* Light rather than raised: a gray knob on a dark track barely stands apart from it. */
133
+ --thumb: #ececf1;
134
+ --thumb-shadow:
135
+ 0 1px 2px rgb(0 0 0 / 0.5),
136
+ 0 2px 4px -1px rgb(0 0 0 / 0.4);
125
137
  --status-running: #60a5fa;
126
138
  --status-needs-you: #fbbf24;
127
139
  --status-idle: #4ade80;
@@ -232,6 +244,7 @@
232
244
  --color-accent: var(--accent);
233
245
  --color-accent-soft: var(--accent-soft);
234
246
  --color-accent-text: var(--accent-text);
247
+ --color-thumb: var(--thumb);
235
248
  --color-status-running: var(--status-running);
236
249
  --color-status-needs-you: var(--status-needs-you);
237
250
  --color-status-idle: var(--status-idle);
@@ -242,6 +255,7 @@
242
255
  --color-media-handle-text: var(--media-handle-text);
243
256
  --shadow-float: var(--float-shadow);
244
257
  --shadow-raised: var(--raised-shadow);
258
+ --shadow-thumb: var(--thumb-shadow);
245
259
  --shadow-media-handle-edge: var(--media-handle-edge);
246
260
  --shadow-media-handle: var(--media-handle-shadow);
247
261
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adecore/ui",
3
- "version": "0.35.1",
3
+ "version": "0.35.2",
4
4
  "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
5
5
  "license": "FSL-1.1-MIT",
6
6
  "author": "Bas Milius",
package/src/Slider.tsx CHANGED
@@ -59,7 +59,7 @@ export function Slider({ value, onValueChange, min, max, step = 1, decimals = pl
59
59
  <BaseSlider.Indicator className="rounded-full bg-accent" />
60
60
  <BaseSlider.Thumb
61
61
  getAriaValueText={() => `${reading}${unit ?? ''}`}
62
- className="block size-4 rounded-full bg-surface-raised shadow-raised outline-offset-2 outline-accent has-focus-visible:outline-2"
62
+ className="block size-4 rounded-full bg-thumb shadow-thumb outline-offset-2 outline-accent has-focus-visible:outline-2"
63
63
  />
64
64
  </BaseSlider.Track>
65
65
  </BaseSlider.Control>
package/src/Switch.tsx CHANGED
@@ -27,7 +27,7 @@ export function Switch({ checked, onCheckedChange, label, disabled, className, r
27
27
  className
28
28
  )}
29
29
  >
30
- <BaseSwitch.Thumb className="block h-4 w-4 rounded-full bg-surface-raised shadow-raised transition-transform data-checked:translate-x-4" />
30
+ <BaseSwitch.Thumb className="block h-4 w-4 rounded-full bg-thumb shadow-thumb transition-transform data-checked:translate-x-4" />
31
31
  </BaseSwitch.Root>
32
32
  );
33
33
  }
package/src/theme.css CHANGED
@@ -46,12 +46,19 @@
46
46
  0 3px 6px -2px rgb(0 0 0 / 0.07),
47
47
  0 8px 16px -8px rgb(0 0 0 / 0.1),
48
48
  0 16px 28px -14px rgb(0 0 0 / 0.1);
49
- /* The small lift of a thumb or a picked segment off the track it sits in: close to the surface
49
+ /* The small lift of a picked segment off the track it sits in: close to the surface
50
50
  rather than a haze around it. Not named `--shadow-*`, since the theme maps that name onto this. */
51
51
  --raised-shadow:
52
52
  0 1px 2px rgb(0 0 0 / 0.05),
53
53
  0 2px 4px -1px rgb(0 0 0 / 0.05),
54
54
  0 6px 12px -6px rgb(0 0 0 / 0.08);
55
+ /* The knob of a slider or switch. A white knob on a white surface needs an edge of its own,
56
+ or a disabled slider, whose track has faded, shows no knob at all. */
57
+ --thumb: #ffffff;
58
+ --thumb-shadow:
59
+ 0 0 0 1px rgb(0 0 0 / 0.08),
60
+ 0 1px 2px rgb(0 0 0 / 0.1),
61
+ 0 2px 4px -1px rgb(0 0 0 / 0.06);
55
62
  --status-running: #2563eb;
56
63
  --status-needs-you: #d97706;
57
64
  --status-idle: #16a34a;
@@ -122,6 +129,11 @@
122
129
  0 1px 2px rgb(0 0 0 / 0.3),
123
130
  0 2px 4px rgb(0 0 0 / 0.2),
124
131
  0 4px 8px rgb(0 0 0 / 0.12);
132
+ /* Light rather than raised: a gray knob on a dark track barely stands apart from it. */
133
+ --thumb: #ececf1;
134
+ --thumb-shadow:
135
+ 0 1px 2px rgb(0 0 0 / 0.5),
136
+ 0 2px 4px -1px rgb(0 0 0 / 0.4);
125
137
  --status-running: #60a5fa;
126
138
  --status-needs-you: #fbbf24;
127
139
  --status-idle: #4ade80;
@@ -232,6 +244,7 @@
232
244
  --color-accent: var(--accent);
233
245
  --color-accent-soft: var(--accent-soft);
234
246
  --color-accent-text: var(--accent-text);
247
+ --color-thumb: var(--thumb);
235
248
  --color-status-running: var(--status-running);
236
249
  --color-status-needs-you: var(--status-needs-you);
237
250
  --color-status-idle: var(--status-idle);
@@ -242,6 +255,7 @@
242
255
  --color-media-handle-text: var(--media-handle-text);
243
256
  --shadow-float: var(--float-shadow);
244
257
  --shadow-raised: var(--raised-shadow);
258
+ --shadow-thumb: var(--thumb-shadow);
245
259
  --shadow-media-handle-edge: var(--media-handle-edge);
246
260
  --shadow-media-handle: var(--media-handle-shadow);
247
261
  }