@filipgutica/ui 0.2.2 → 1.0.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 (26) hide show
  1. package/README.md +91 -8
  2. package/dist/code-highlight-BuTmXL3w.js +85 -0
  3. package/dist/code-highlight.d.ts +6 -0
  4. package/dist/components/UiAlert.vue.d.ts +1 -3
  5. package/dist/components/UiBadge.vue.d.ts +2 -4
  6. package/dist/components/UiButton.vue.d.ts +3 -8
  7. package/dist/components/UiCard.vue.d.ts +19 -0
  8. package/dist/components/UiCheckbox.vue.d.ts +3 -4
  9. package/dist/components/UiCodeBlock.vue.d.ts +20 -0
  10. package/dist/components/UiInput.vue.d.ts +3 -6
  11. package/dist/components/UiRadioCard.vue.d.ts +17 -0
  12. package/dist/components/UiRadioCardGroup.vue.d.ts +27 -0
  13. package/dist/components/UiSelect.vue.d.ts +3 -5
  14. package/dist/components/UiSlider.vue.d.ts +18 -0
  15. package/dist/components/UiSurface.vue.d.ts +1 -4
  16. package/dist/control.d.ts +1 -0
  17. package/dist/index.d.ts +12 -0
  18. package/dist/index.js +409 -96
  19. package/dist/open-vsx.js +130 -128
  20. package/dist/theme/index.d.ts +3 -0
  21. package/dist/theme/syntax.d.ts +5 -0
  22. package/dist/theme-CIwueiir.js +462 -0
  23. package/dist/theme.js +2 -375
  24. package/package.json +22 -4
  25. package/src/components.css +375 -29
  26. package/src/theme.css +73 -59
package/src/theme.css CHANGED
@@ -2,78 +2,92 @@
2
2
 
3
3
  :root {
4
4
  color-scheme: light;
5
- --color-bg: #eff1f5;
6
- --color-surface: #e6e9ef;
5
+ --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6
+ --font-mono: 'SFMono-Regular', Consolas, monospace;
7
+ --color-bg: #ffffff;
8
+ --color-surface: #f7f8fa;
7
9
  --color-surface-raised: #fff;
8
- --color-surface-muted: #dce0e8;
9
- --color-text: #4c4f69;
10
- --color-muted: #6c6f85;
11
- --color-link: #1e66f5;
12
- --color-accent: #8839ef;
13
- --color-focus: #1e66f5;
14
- --color-border: #acb0be;
15
- --color-border-subtle: #ccd0da;
16
- --color-button-bg: #1e66f5;
10
+ --color-surface-muted: #eef1f5;
11
+ --color-text: #101828;
12
+ --color-muted: #5d6979;
13
+ --color-link: #155eef;
14
+ --color-accent: #4d7c0f;
15
+ --color-focus: #155eef;
16
+ --color-border: #667085;
17
+ --color-border-subtle: #d8dee8;
18
+ --color-button-bg: #155eef;
17
19
  --color-button-text: #fff;
18
- --color-button-hover: #1a5ad7;
20
+ --color-button-hover: #004eeb;
19
21
  --color-input-bg: #fff;
20
- --color-input-text: #4c4f69;
21
- --color-input-border: #9ca0b0;
22
- --color-input-placeholder: #7c7f93;
23
- --color-row-hover: #dce0e8;
24
- --color-row-selected: #d9e2fa;
25
- --color-row-selected-text: #4c4f69;
26
- --color-code: #e6e9ef;
27
- --color-code-text: #4c4f69;
28
- --color-error: #d20f39;
29
- --color-warning: #8a5600;
30
- --color-success: #287d3c;
31
- --color-info: #176b87;
32
- --color-progress: #8839ef;
33
- --color-shadow: rgb(0 0 0 / 8%);
22
+ --color-input-text: #101828;
23
+ --color-input-border: #667085;
24
+ --color-input-placeholder: #667085;
25
+ --color-row-hover: #f2f4f7;
26
+ --color-row-selected: #eaf1ff;
27
+ --color-row-selected-text: #143d8f;
28
+ --color-code: #0c1426;
29
+ --color-code-text: #edf2ff;
30
+ --color-syntax-comment: #a8b3c7;
31
+ --color-syntax-keyword: #cba6f7;
32
+ --color-syntax-string: #a6e3a1;
33
+ --color-syntax-number: #fab387;
34
+ --color-syntax-function: #89b4fa;
35
+ --color-syntax-type: #f9e2af;
36
+ --color-syntax-variable: #edf2ff;
37
+ --color-syntax-operator: #89dceb;
38
+ --color-syntax-punctuation: #cdd6f4;
39
+ --color-syntax-tag: #89b4fa;
40
+ --color-syntax-attribute: #f9e2af;
41
+ --color-error: #c01048;
42
+ --color-warning: #854a0e;
43
+ --color-success: #067647;
44
+ --color-info: #175cd3;
45
+ --color-progress: #155eef;
46
+ --color-shadow: rgb(16 24 40 / 10%);
34
47
  --color-overlay: rgb(0 0 0 / 42%);
35
48
  --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
36
49
  --color-warning-surface: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
37
50
  --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
38
51
  --color-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
39
- --radius-control: 0.55rem;
40
- --radius-panel: 0.75rem;
52
+ --radius-control: 0.375rem;
53
+ --radius-panel: 0.5rem;
41
54
  --radius-pill: 999px;
42
- --duration-fast: 180ms;
43
- --shadow-dialog: 0 20px 64px rgb(0 0 0 / 24%);
55
+ --duration-fast: 140ms;
56
+ --shadow-control: 0 1px 2px rgb(16 24 40 / 8%);
57
+ --shadow-dialog: 0 24px 80px rgb(5 12 24 / 28%);
44
58
  }
45
59
 
46
60
  :root.dark {
47
61
  color-scheme: dark;
48
- --color-bg: #1e1e2e;
49
- --color-surface: #181825;
50
- --color-surface-raised: #242435;
51
- --color-surface-muted: #313244;
52
- --color-text: #cdd6f4;
53
- --color-muted: #a6adc8;
54
- --color-link: #89b4fa;
55
- --color-accent: #cba6f7;
56
- --color-focus: #89b4fa;
57
- --color-border: #585b70;
58
- --color-border-subtle: #45475a;
59
- --color-button-bg: #89b4fa;
60
- --color-button-text: #11111b;
61
- --color-button-hover: #b4befe;
62
- --color-input-bg: #11111b;
63
- --color-input-text: #cdd6f4;
64
- --color-input-border: #6c7086;
65
- --color-input-placeholder: #9399b2;
66
- --color-row-hover: #313244;
67
- --color-row-selected: #45475a;
68
- --color-row-selected-text: #cdd6f4;
69
- --color-code: #11111b;
70
- --color-code-text: #cdd6f4;
71
- --color-error: #f38ba8;
72
- --color-warning: #f9e2af;
73
- --color-success: #a6e3a1;
74
- --color-info: #89dceb;
75
- --color-progress: #cba6f7;
76
- --color-shadow: rgb(0 0 0 / 28%);
62
+ --color-bg: #0b1020;
63
+ --color-surface: #111827;
64
+ --color-surface-raised: #151d2f;
65
+ --color-surface-muted: #202a3d;
66
+ --color-text: #f4f7ff;
67
+ --color-muted: #a8b3c7;
68
+ --color-link: #8fb4ff;
69
+ --color-accent: #b7ef53;
70
+ --color-focus: #8fb4ff;
71
+ --color-border: #647189;
72
+ --color-border-subtle: #2d384d;
73
+ --color-button-bg: #6e9cff;
74
+ --color-button-text: #071126;
75
+ --color-button-hover: #8fb4ff;
76
+ --color-input-bg: #0d1526;
77
+ --color-input-text: #f4f7ff;
78
+ --color-input-border: #647189;
79
+ --color-input-placeholder: #8995aa;
80
+ --color-row-hover: #1b2538;
81
+ --color-row-selected: #1b315b;
82
+ --color-row-selected-text: #dbe7ff;
83
+ --color-code: #070d19;
84
+ --color-code-text: #edf2ff;
85
+ --color-error: #ff8aad;
86
+ --color-warning: #f8c477;
87
+ --color-success: #75e0a7;
88
+ --color-info: #84adff;
89
+ --color-progress: #8fb4ff;
90
+ --color-shadow: rgb(0 0 0 / 32%);
77
91
  --color-overlay: rgb(0 0 0 / 62%);
78
92
  }
79
93