@filipgutica/ui 1.13.1 → 1.14.1

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components.css +16 -13
  3. package/src/site.css +2 -4
  4. package/src/theme.css +12 -12
  5. package/src/themes/graphite-indigo.css +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@filipgutica/ui",
3
- "version": "1.13.1",
3
+ "version": "1.14.1",
4
4
  "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
5
5
  "type": "module",
6
6
  "sideEffects": [
package/src/components.css CHANGED
@@ -548,8 +548,8 @@
548
548
  align-items: center;
549
549
  width: fit-content;
550
550
  border: 1px solid var(--color-border-subtle);
551
- border-radius: var(--radius-inline);
552
- padding: 0.18rem 0.48rem;
551
+ border-radius: var(--radius-pill);
552
+ padding: 0.18rem 0.56rem;
553
553
  color: var(--color-muted);
554
554
  background: var(--color-surface-muted);
555
555
  font-size: var(--text-xs);
@@ -557,11 +557,14 @@
557
557
  line-height: 1.25;
558
558
  }
559
559
 
560
- .fg-badge[data-tone="info"] { border-color: var(--color-info); color: var(--color-status-text, var(--color-info)); background: var(--color-info-surface); }
561
- .fg-badge[data-tone="success"] { border-color: var(--color-success); color: var(--color-status-text, var(--color-success)); background: var(--color-success-surface); }
562
- .fg-badge[data-tone="warning"] { border-color: var(--color-warning); color: var(--color-status-text, var(--color-warning)); background: var(--color-warning-surface); }
560
+ /* A tone badge is a tinted pill whose text carries the status colour, darkened toward the text
561
+ * colour so it reads at small sizes on the tint. */
562
+ .fg-badge[data-tone]:not([data-tone="neutral"]) { border-color: transparent; }
563
+ .fg-badge[data-tone="info"] { color: color-mix(in srgb, var(--color-info) 80%, var(--color-text)); background: var(--color-info-surface); }
564
+ .fg-badge[data-tone="success"] { color: color-mix(in srgb, var(--color-success) 80%, var(--color-text)); background: var(--color-success-surface); }
565
+ .fg-badge[data-tone="warning"] { color: color-mix(in srgb, var(--color-warning) 80%, var(--color-text)); background: var(--color-warning-surface); }
563
566
  .fg-badge[data-tone="danger"],
564
- .fg-badge[data-tone="error"] { border-color: var(--color-error); color: var(--color-status-text, var(--color-error)); background: var(--color-error-surface); }
567
+ .fg-badge[data-tone="error"] { color: color-mix(in srgb, var(--color-error) 80%, var(--color-text)); background: var(--color-error-surface); }
565
568
 
566
569
  .fg-alert {
567
570
  display: flex;
@@ -569,17 +572,17 @@
569
572
  gap: var(--space-3);
570
573
  padding: var(--space-3) var(--space-4);
571
574
  border: 1px solid var(--color-border-subtle);
572
- border-radius: var(--radius-control);
575
+ border-radius: var(--radius-panel);
573
576
  color: var(--color-text);
574
577
  background: var(--color-surface);
575
578
  }
576
579
 
577
- .fg-alert[data-tone="info"] { border-color: var(--color-info); background: var(--color-info-surface); }
578
- .fg-alert[data-tone="success"] { border-color: var(--color-success); background: var(--color-success-surface); }
579
- .fg-alert[data-tone="warning"] { border-color: var(--color-warning); background: var(--color-warning-surface); }
580
+ .fg-alert[data-tone="info"] { border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-border-subtle)); background: var(--color-info-surface); }
581
+ .fg-alert[data-tone="success"] { border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border-subtle)); background: var(--color-success-surface); }
582
+ .fg-alert[data-tone="warning"] { border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border-subtle)); background: var(--color-warning-surface); }
580
583
  .fg-alert[data-tone="danger"],
581
584
  .fg-alert[data-tone="error"] {
582
- border-color: var(--color-error);
585
+ border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-border-subtle));
583
586
  color: var(--color-status-text, var(--color-error));
584
587
  background: var(--color-error-surface);
585
588
  }
@@ -752,7 +755,7 @@
752
755
  width: 1.75rem;
753
756
  height: 1rem;
754
757
  border: 1px solid var(--color-border);
755
- border-radius: var(--radius-inline);
758
+ border-radius: var(--radius-pill);
756
759
  background: var(--color-surface-muted);
757
760
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
758
761
  }
@@ -764,7 +767,7 @@
764
767
  left: 0.125rem;
765
768
  width: 0.625rem;
766
769
  height: 0.625rem;
767
- border-radius: var(--radius-inline);
770
+ border-radius: var(--radius-pill);
768
771
  background: var(--color-border);
769
772
  content: "";
770
773
  transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
package/src/site.css CHANGED
@@ -277,8 +277,6 @@
277
277
  top: var(--space-6);
278
278
  align-self: start;
279
279
  min-width: 0;
280
- max-height: calc(100svh - var(--space-12));
281
- overflow-y: auto;
282
280
  padding-block: var(--space-4);
283
281
  color: var(--color-text);
284
282
  font-family: var(--font-ui);
@@ -626,6 +624,8 @@
626
624
  /* No-JavaScript desktop: the rail's disclosure stays expanded. */
627
625
  @media (min-width: 801px) {
628
626
  .fg-site-rail { border-inline-end: 1px solid var(--color-border-subtle); padding-inline-end: var(--space-4); }
627
+ /* The links scroll, not the bordered rail, so an overlay scrollbar sits clear of the divider. */
628
+ .fg-site-rail__content { max-height: calc(100svh - var(--space-12) - var(--space-8)); overflow-y: auto; }
629
629
  .fg-site-rail__menu::details-content { content-visibility: visible; }
630
630
  .fg-site-rail__menu:not([open]) > .fg-site-rail__content { display: block; }
631
631
  }
@@ -655,8 +655,6 @@
655
655
  .fg-site-docs > main { gap: var(--space-8); padding-top: var(--space-6); }
656
656
  .fg-site-rail {
657
657
  position: static;
658
- max-height: none;
659
- overflow: visible;
660
658
  padding-block: var(--space-2);
661
659
  }
662
660
  .fg-site-rail__summary,
package/src/theme.css CHANGED
@@ -74,14 +74,14 @@
74
74
  --color-progress: var(--color-project);
75
75
  --color-shadow: rgb(16 24 40 / 10%);
76
76
  --color-overlay: rgb(0 0 0 / 42%);
77
- --color-error-surface: var(--color-surface-raised);
78
- --color-warning-surface: var(--color-surface-raised);
79
- --color-success-surface: var(--color-surface-raised);
80
- --color-info-surface: var(--color-surface-raised);
81
- --radius-inline: 2px;
82
- --radius-control: 2px;
83
- --radius-panel: 3px;
84
- --radius-pill: 2px;
77
+ --color-error-surface: #efe4e4;
78
+ --color-warning-surface: #e7e2de;
79
+ --color-success-surface: #d9e5e1;
80
+ --color-info-surface: #d9e3f2;
81
+ --radius-inline: 3px;
82
+ --radius-control: 4px;
83
+ --radius-panel: 6px;
84
+ --radius-pill: 999px;
85
85
  --duration-fast: 120ms;
86
86
  --duration: 180ms;
87
87
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -149,10 +149,10 @@
149
149
  --color-accent-text: var(--color-bg);
150
150
  --color-accent-hover: var(--color-text);
151
151
  --color-project-dark: #a5a1ff;
152
- --color-error-surface: var(--color-surface-raised);
153
- --color-warning-surface: var(--color-surface-raised);
154
- --color-success-surface: var(--color-surface-raised);
155
- --color-info-surface: var(--color-surface-raised);
152
+ --color-error-surface: #312020;
153
+ --color-warning-surface: #2f281b;
154
+ --color-success-surface: #172d25;
155
+ --color-info-surface: #202938;
156
156
  --color-status-text: #e6e9eb;
157
157
  --color-terminal: #0a0c0e;
158
158
  --color-terminal-text: #e6e9eb;
package/src/themes/graphite-indigo.css CHANGED
@@ -46,10 +46,10 @@
46
46
  --color-success: #157249;
47
47
  --color-info: #175cd3;
48
48
  --color-progress: var(--color-accent);
49
- --color-error-surface: var(--color-surface-raised);
50
- --color-warning-surface: var(--color-surface-raised);
51
- --color-success-surface: var(--color-surface-raised);
52
- --color-info-surface: var(--color-surface-raised);
49
+ --color-error-surface: #efe4e4;
50
+ --color-warning-surface: #e7e2de;
51
+ --color-success-surface: #d9e5e1;
52
+ --color-info-surface: #d9e3f2;
53
53
  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
54
54
  --color-status-text: var(--color-text);
55
55
  --color-terminal: #0a0c0e;
@@ -113,10 +113,10 @@
113
113
  --color-success: #4cc38a;
114
114
  --color-info: #84adff;
115
115
  --color-progress: var(--color-accent);
116
- --color-error-surface: var(--color-surface-raised);
117
- --color-warning-surface: var(--color-surface-raised);
118
- --color-success-surface: var(--color-surface-raised);
119
- --color-info-surface: var(--color-surface-raised);
116
+ --color-error-surface: #312020;
117
+ --color-warning-surface: #2f281b;
118
+ --color-success-surface: #172d25;
119
+ --color-info-surface: #202938;
120
120
  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
121
121
  --color-status-text: var(--color-text);
122
122
  --color-terminal: #0a0c0e;