@salmexio/ui 0.3.1 → 0.4.0

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.
@@ -176,10 +176,14 @@ function handleTaskbarClick(windowId: string) {
176
176
  position: relative;
177
177
  display: flex;
178
178
  flex-direction: column;
179
- border: 3px solid rgb(var(--salmex-button-dark-edge));
179
+ border: 2px solid rgb(var(--salmex-button-dark-edge));
180
+ border-radius: var(--salmex-radius-md);
180
181
  overflow: hidden;
181
182
  background: rgb(var(--salmex-bg-tertiary));
182
- box-shadow: var(--salmex-shadow-lg);
183
+ box-shadow:
184
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
185
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
186
+ var(--salmex-shadow-lg);
183
187
  }
184
188
 
185
189
  .salmex-wm-taskbar-top {
@@ -235,6 +239,13 @@ function handleTaskbarClick(windowId: string) {
235
239
  );
236
240
  }
237
241
 
242
+ :global([data-theme='dark']) .salmex-wm {
243
+ box-shadow:
244
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
245
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
246
+ 4px 4px 3px rgb(0 0 0 / 0.5);
247
+ }
248
+
238
249
  /* ========================================
239
250
  DESKTOP AREA
240
251
  ======================================== */
@@ -270,7 +281,8 @@ function handleTaskbarClick(windowId: string) {
270
281
  gap: 2px;
271
282
  padding: 2px var(--salmex-space-1);
272
283
  background: rgb(var(--salmex-window-surface));
273
- border-top: 2px solid rgb(var(--salmex-button-highlight));
284
+ border-top: 1px solid rgb(var(--salmex-button-highlight));
285
+ border-radius: 0 0 calc(var(--salmex-radius-md) - 2px) calc(var(--salmex-radius-md) - 2px);
274
286
  min-height: 36px;
275
287
  flex-shrink: 0;
276
288
  /* 3D raised taskbar */
@@ -281,7 +293,8 @@ function handleTaskbarClick(windowId: string) {
281
293
 
282
294
  .salmex-wm-taskbar-top .salmex-wm-taskbar {
283
295
  border-top: none;
284
- border-bottom: 2px solid rgb(var(--salmex-button-shadow));
296
+ border-bottom: 1px solid rgb(var(--salmex-button-shadow));
297
+ border-radius: calc(var(--salmex-radius-md) - 2px) calc(var(--salmex-radius-md) - 2px) 0 0;
285
298
  }
286
299
 
287
300
  /* Start button */
@@ -320,7 +333,8 @@ function handleTaskbarClick(windowId: string) {
320
333
  min-width: 0;
321
334
  max-width: 160px;
322
335
  background: rgb(var(--salmex-button-face));
323
- border: 2px solid rgb(var(--salmex-button-dark-edge));
336
+ border: 1px solid rgb(var(--salmex-button-dark-edge));
337
+ border-radius: var(--salmex-radius-sm);
324
338
  cursor: pointer;
325
339
  font-family: var(--salmex-font-system);
326
340
  font-size: var(--salmex-font-size-xs);
@@ -334,7 +348,7 @@ function handleTaskbarClick(windowId: string) {
334
348
  transition: all var(--salmex-transition-fast);
335
349
  white-space: nowrap;
336
350
  overflow: hidden;
337
- height: 26px;
351
+ height: 24px;
338
352
  }
339
353
 
340
354
  .salmex-wm-taskbar-btn:hover {
@@ -361,14 +375,14 @@ function handleTaskbarClick(windowId: string) {
361
375
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
362
376
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
363
377
  0 0 0 2px rgb(var(--salmex-midnight-black)),
364
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
378
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
365
379
  }
366
380
 
367
381
  :global([data-theme='dark']) .salmex-wm-taskbar-btn:focus-visible {
368
382
  box-shadow:
369
383
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
370
384
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
371
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
385
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
372
386
  }
373
387
 
374
388
  .salmex-wm-taskbar-btn-text {
@@ -384,6 +398,7 @@ function handleTaskbarClick(windowId: string) {
384
398
  padding: 0 var(--salmex-space-2);
385
399
  margin-left: auto;
386
400
  border-left: 1px solid rgb(var(--salmex-button-shadow));
401
+ border-radius: var(--salmex-radius-sm);
387
402
  /* Sunken inset */
388
403
  box-shadow:
389
404
  inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salmexio/ui",
3
- "version": "0.3.1",
3
+ "version": "0.4.0",
4
4
  "description": "Salmex I/O Design System — Win2K-inspired UI component library for Salmex and Salmex I/O products",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",