@filipgutica/ui 1.13.0 → 1.14.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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components.css +16 -13
  3. package/src/site.css +5 -3
  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.0",
3
+ "version": "1.14.0",
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
@@ -554,8 +554,10 @@
554
554
  font-size: var(--text-sm);
555
555
  }
556
556
  .fg-site-facts { font-family: var(--font-mono); }
557
- .fg-site-facts > div { display: flex; gap: var(--space-2); }
558
- .fg-site-facts dd { margin: 0; color: var(--color-text); }
557
+ /* A label and a long value, such as a repository path, wrap at large text sizes instead of
558
+ * widening the page. */
559
+ .fg-site-facts > div { display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
560
+ .fg-site-facts dd { min-width: 0; margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
559
561
  .fg-site-definitions {
560
562
  display: grid;
561
563
  grid-template-columns: 9rem minmax(0, 1fr);
@@ -718,7 +720,7 @@
718
720
  * moves a full target below the one before it, so their targets never overlap. */
719
721
  .fg-site-facts { row-gap: var(--space-2); }
720
722
  .fg-site-facts > div:has(a) ~ div:has(a) { margin-top: calc(var(--control-lg) - 1lh - var(--space-2)); }
721
- .fg-site-facts a { position: relative; display: inline-block; }
723
+ .fg-site-facts a { position: relative; display: inline-block; max-width: 100%; }
722
724
  .fg-site-facts a::after {
723
725
  content: '';
724
726
  position: absolute;
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;