@filipgutica/ui 0.3.0 → 1.1.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 +98 -12
  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 +27 -42
  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 +16 -4
  25. package/src/components.css +400 -38
  26. package/src/theme.css +96 -43
package/src/theme.css CHANGED
@@ -2,34 +2,73 @@
2
2
 
3
3
  :root {
4
4
  color-scheme: light;
5
- --color-bg: #ffffff;
6
- --color-surface: #f7f8fa;
5
+ --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
6
+ --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
7
+ --text-xs: 0.75rem;
8
+ --text-sm: 0.8125rem;
9
+ --text-md: 0.875rem;
10
+ --text-lg: 1rem;
11
+ --text-xl: 1.25rem;
12
+ --text-2xl: 1.5rem;
13
+ --weight-regular: 400;
14
+ --weight-medium: 500;
15
+ --weight-semibold: 600;
16
+ --leading-tight: 1.25;
17
+ --leading: 1.5;
18
+ --space-1: 0.25rem;
19
+ --space-2: 0.5rem;
20
+ --space-3: 0.75rem;
21
+ --space-4: 1rem;
22
+ --space-5: 1.25rem;
23
+ --space-6: 1.5rem;
24
+ --space-8: 2rem;
25
+ --space-12: 3rem;
26
+ --space-16: 4rem;
27
+ --control-sm: 2rem;
28
+ --control-md: 2.25rem;
29
+ --control-lg: 2.75rem;
30
+ --measure: 68ch;
31
+ --page-max: 60rem;
32
+ --sidebar: 14rem;
33
+ --color-bg: #fcfcfd;
34
+ --color-surface: #f6f6f8;
7
35
  --color-surface-raised: #fff;
8
- --color-surface-muted: #eef1f5;
9
- --color-text: #101828;
10
- --color-muted: #5d6979;
11
- --color-link: #155eef;
12
- --color-accent: #4d7c0f;
13
- --color-focus: #155eef;
36
+ --color-surface-muted: #efeff2;
37
+ --color-text: #1b1b1f;
38
+ --color-muted: #62626d;
39
+ --color-link: #3d63dd;
40
+ --color-accent: #3d63dd;
41
+ --color-focus: #3d63dd;
14
42
  --color-border: #667085;
15
- --color-border-subtle: #d8dee8;
16
- --color-button-bg: #155eef;
43
+ --color-border-subtle: #e9e9ed;
44
+ --color-button-bg: #3d63dd;
17
45
  --color-button-text: #fff;
18
- --color-button-hover: #004eeb;
46
+ --color-button-hover: #3354c4;
19
47
  --color-input-bg: #fff;
20
- --color-input-text: #101828;
48
+ --color-input-text: #1b1b1f;
21
49
  --color-input-border: #667085;
22
50
  --color-input-placeholder: #667085;
23
- --color-row-hover: #f2f4f7;
24
- --color-row-selected: #eaf1ff;
25
- --color-row-selected-text: #143d8f;
26
- --color-code: #0c1426;
27
- --color-code-text: #edf2ff;
51
+ --color-row-hover: #efeff2;
52
+ --color-row-selected: #e9ebf8;
53
+ --color-row-selected-text: #3354c4;
54
+ --color-code: #f6f6f8;
55
+ --color-code-text: #1b1b1f;
56
+ --color-syntax-comment: #62626d;
57
+ --color-syntax-keyword: #3d63dd;
58
+ --color-syntax-string: #1f7a52;
59
+ --color-syntax-number: #854a0e;
60
+ --color-syntax-function: #3d63dd;
61
+ --color-syntax-type: #854a0e;
62
+ --color-syntax-variable: #1b1b1f;
63
+ --color-syntax-operator: #62626d;
64
+ --color-syntax-punctuation: #62626d;
65
+ --color-syntax-tag: #3d63dd;
66
+ --color-syntax-attribute: #854a0e;
28
67
  --color-error: #c01048;
29
68
  --color-warning: #854a0e;
30
69
  --color-success: #067647;
31
70
  --color-info: #175cd3;
32
- --color-progress: #155eef;
71
+ --color-progress: #3d63dd;
33
72
  --color-shadow: rgb(16 24 40 / 10%);
34
73
  --color-overlay: rgb(0 0 0 / 42%);
35
74
  --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
@@ -39,43 +78,57 @@
39
78
  --radius-control: 0.375rem;
40
79
  --radius-panel: 0.5rem;
41
80
  --radius-pill: 999px;
42
- --duration-fast: 140ms;
43
- --shadow-control: 0 1px 2px rgb(16 24 40 / 8%);
44
- --shadow-dialog: 0 24px 80px rgb(5 12 24 / 28%);
81
+ --duration-fast: 120ms;
82
+ --duration: 180ms;
83
+ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
84
+ --shadow-control: none;
85
+ --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%);
45
86
  }
46
87
 
47
88
  :root.dark {
48
89
  color-scheme: dark;
49
- --color-bg: #0b1020;
50
- --color-surface: #111827;
51
- --color-surface-raised: #151d2f;
52
- --color-surface-muted: #202a3d;
53
- --color-text: #f4f7ff;
54
- --color-muted: #a8b3c7;
55
- --color-link: #8fb4ff;
56
- --color-accent: #b7ef53;
57
- --color-focus: #8fb4ff;
90
+ --color-bg: #0f0f11;
91
+ --color-surface: #151518;
92
+ --color-surface-raised: #1a1a1e;
93
+ --color-surface-muted: #1f1f24;
94
+ --color-text: #ececf0;
95
+ --color-muted: #a0a0ab;
96
+ --color-link: #7d97ff;
97
+ --color-accent: #7d97ff;
98
+ --color-focus: #7d97ff;
58
99
  --color-border: #647189;
59
- --color-border-subtle: #2d384d;
60
- --color-button-bg: #6e9cff;
61
- --color-button-text: #071126;
62
- --color-button-hover: #8fb4ff;
63
- --color-input-bg: #0d1526;
64
- --color-input-text: #f4f7ff;
100
+ --color-border-subtle: #222227;
101
+ --color-button-bg: #7d97ff;
102
+ --color-button-text: #0d1020;
103
+ --color-button-hover: #97acff;
104
+ --color-input-bg: #151518;
105
+ --color-input-text: #ececf0;
65
106
  --color-input-border: #647189;
66
- --color-input-placeholder: #8995aa;
67
- --color-row-hover: #1b2538;
68
- --color-row-selected: #1b315b;
69
- --color-row-selected-text: #dbe7ff;
70
- --color-code: #070d19;
71
- --color-code-text: #edf2ff;
107
+ --color-input-placeholder: #a0a0ab;
108
+ --color-row-hover: #1f1f24;
109
+ --color-row-selected: #1f2233;
110
+ --color-row-selected-text: #ececf0;
111
+ --color-code: #151518;
112
+ --color-code-text: #ececf0;
113
+ --color-syntax-comment: #a0a0ab;
114
+ --color-syntax-keyword: #97acff;
115
+ --color-syntax-string: #6fd3a0;
116
+ --color-syntax-number: #e8b56a;
117
+ --color-syntax-function: #97acff;
118
+ --color-syntax-type: #e8b56a;
119
+ --color-syntax-variable: #ececf0;
120
+ --color-syntax-operator: #a0a0ab;
121
+ --color-syntax-punctuation: #a0a0ab;
122
+ --color-syntax-tag: #97acff;
123
+ --color-syntax-attribute: #e8b56a;
72
124
  --color-error: #ff8aad;
73
125
  --color-warning: #f8c477;
74
126
  --color-success: #75e0a7;
75
127
  --color-info: #84adff;
76
- --color-progress: #8fb4ff;
128
+ --color-progress: #7d97ff;
77
129
  --color-shadow: rgb(0 0 0 / 32%);
78
130
  --color-overlay: rgb(0 0 0 / 62%);
131
+ --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%);
79
132
  }
80
133
 
81
134
  @theme inline {