@filipgutica/ui 1.11.2 → 1.13.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 (19) hide show
  1. package/README.md +44 -6
  2. package/dist/components/UiSwitch.vue.d.ts +25 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +187 -115
  5. package/dist/site.js +65 -62
  6. package/package.json +7 -3
  7. package/src/components.css +112 -34
  8. package/src/fonts/OFL-IBM-Plex-Mono.txt +93 -0
  9. package/src/fonts/OFL-IBM-Plex-Sans.txt +93 -0
  10. package/src/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  11. package/src/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  12. package/src/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  13. package/src/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  14. package/src/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  15. package/src/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  16. package/src/fonts.css +55 -0
  17. package/src/site.css +132 -50
  18. package/src/theme.css +118 -89
  19. package/src/themes/graphite-indigo.css +62 -44
package/src/theme.css CHANGED
@@ -1,12 +1,15 @@
1
+ @import "./fonts.css";
2
+
1
3
  @custom-variant dark (&:where(.dark, .dark *));
2
4
 
3
5
  :root {
4
6
  color-scheme: light;
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
+ --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
8
+ --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
7
9
  --text-xs: 0.75rem;
8
10
  --text-sm: 0.8125rem;
9
11
  --text-md: 0.875rem;
12
+ --text-code: 0.84375rem;
10
13
  --text-lg: 1rem;
11
14
  --text-xl: 1.25rem;
12
15
  --text-2xl: 1.5rem;
@@ -14,7 +17,7 @@
14
17
  --weight-medium: 500;
15
18
  --weight-semibold: 600;
16
19
  --leading-tight: 1.25;
17
- --leading: 1.5;
20
+ --leading: 1.6;
18
21
  --space-1: 0.25rem;
19
22
  --space-2: 0.5rem;
20
23
  --space-3: 0.75rem;
@@ -30,106 +33,132 @@
30
33
  --measure: 68ch;
31
34
  --page-max: 60rem;
32
35
  --sidebar: 14rem;
33
- --color-bg: #fcfcfd;
34
- --color-surface: #f6f6f8;
35
- --color-surface-raised: #fff;
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;
42
- --color-border: #667085;
43
- --color-border-subtle: #e9e9ed;
44
- --color-button-bg: #3d63dd;
45
- --color-button-text: #fff;
46
- --color-button-hover: #3354c4;
47
- --color-input-bg: #fff;
48
- --color-input-text: #1b1b1f;
49
- --color-input-border: #667085;
50
- --color-input-placeholder: #667085;
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;
67
- --color-error: #c01048;
68
- --color-warning: #854a0e;
69
- --color-success: #067647;
36
+ --color-bg: #f4f5f6;
37
+ --color-surface: #e9ebed;
38
+ --color-surface-raised: #fbfbfc;
39
+ --color-surface-muted: #e2e5e8;
40
+ --color-text: #101315;
41
+ --color-muted: #50575e;
42
+ --color-link: #0b5f7c;
43
+ --color-accent: var(--color-project);
44
+ --color-focus: var(--color-link);
45
+ --color-border: #6d747b;
46
+ --color-border-subtle: #d3d8dd;
47
+ --color-button-bg: #101315;
48
+ --color-button-text: #f4f5f6;
49
+ --color-button-hover: #50575e;
50
+ --color-input-bg: #fbfbfc;
51
+ --color-input-text: #101315;
52
+ --color-input-border: #6d747b;
53
+ --color-input-placeholder: #50575e;
54
+ --color-row-hover: #e2e5e8;
55
+ --color-row-selected: var(--color-surface-raised);
56
+ --color-row-selected-text: #101315;
57
+ --color-code: var(--color-surface);
58
+ --color-code-text: var(--color-text);
59
+ --color-syntax-comment: #626772;
60
+ --color-syntax-keyword: #715b42;
61
+ --color-syntax-string: #346347;
62
+ --color-syntax-number: #86532e;
63
+ --color-syntax-function: #715b42;
64
+ --color-syntax-type: #86532e;
65
+ --color-syntax-variable: var(--color-text);
66
+ --color-syntax-operator: #50575e;
67
+ --color-syntax-punctuation: #50575e;
68
+ --color-syntax-tag: #715b42;
69
+ --color-syntax-attribute: #86532e;
70
+ --color-error: #bd342b;
71
+ --color-warning: #86532e;
72
+ --color-success: #157249;
70
73
  --color-info: #175cd3;
71
- --color-progress: #3d63dd;
74
+ --color-progress: var(--color-project);
72
75
  --color-shadow: rgb(16 24 40 / 10%);
73
76
  --color-overlay: rgb(0 0 0 / 42%);
74
- --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
75
- --color-warning-surface: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
76
- --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
77
- --color-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
78
- --radius-inline: 0.25rem;
79
- --radius-control: 0.375rem;
80
- --radius-panel: 0.5rem;
81
- --radius-pill: 999px;
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;
82
85
  --duration-fast: 120ms;
83
86
  --duration: 180ms;
84
87
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
85
88
  --shadow-control: none;
86
- --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%);
89
+ --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
90
+
91
+ --color-project: #4b45d1;
92
+ --color-accent-text: var(--color-bg);
93
+ --color-accent-hover: var(--color-text);
94
+ --color-project-dark: #a5a1ff;
95
+ --color-status-text: #101315;
96
+ --color-terminal: #0a0c0e;
97
+ --color-terminal-text: #e6e9eb;
98
+ --color-terminal-border: #2a3036;
99
+ --color-terminal-caption: #13171a;
100
+ --color-terminal-caption-text: #c9d0d6;
87
101
  }
88
102
 
89
103
  :root.dark {
90
104
  color-scheme: dark;
91
- --color-bg: #0f0f11;
92
- --color-surface: #151518;
93
- --color-surface-raised: #1a1a1e;
94
- --color-surface-muted: #1f1f24;
95
- --color-text: #ececf0;
96
- --color-muted: #a0a0ab;
97
- --color-link: #7d97ff;
98
- --color-accent: #7d97ff;
99
- --color-focus: #7d97ff;
100
- --color-border: #647189;
101
- --color-border-subtle: #222227;
102
- --color-button-bg: #7d97ff;
103
- --color-button-text: #0d1020;
104
- --color-button-hover: #97acff;
105
- --color-input-bg: #151518;
106
- --color-input-text: #ececf0;
107
- --color-input-border: #647189;
108
- --color-input-placeholder: #a0a0ab;
109
- --color-row-hover: #1f1f24;
110
- --color-row-selected: #1f2233;
111
- --color-row-selected-text: #ececf0;
112
- --color-code: #151518;
113
- --color-code-text: #ececf0;
114
- --color-syntax-comment: #a0a0ab;
115
- --color-syntax-keyword: #97acff;
116
- --color-syntax-string: #6fd3a0;
117
- --color-syntax-number: #e8b56a;
118
- --color-syntax-function: #97acff;
119
- --color-syntax-type: #e8b56a;
120
- --color-syntax-variable: #ececf0;
121
- --color-syntax-operator: #a0a0ab;
122
- --color-syntax-punctuation: #a0a0ab;
123
- --color-syntax-tag: #97acff;
124
- --color-syntax-attribute: #e8b56a;
125
- --color-error: #ff8aad;
126
- --color-warning: #f8c477;
127
- --color-success: #75e0a7;
105
+ --color-bg: #0d1012;
106
+ --color-surface: #13171a;
107
+ --color-surface-raised: #181d21;
108
+ --color-surface-muted: #20262b;
109
+ --color-text: #e6e9eb;
110
+ --color-muted: #9aa3ab;
111
+ --color-link: #67c1df;
112
+ --color-accent: var(--color-project);
113
+ --color-focus: var(--color-link);
114
+ --color-border: #78818a;
115
+ --color-border-subtle: #262d33;
116
+ --color-button-bg: #e6e9eb;
117
+ --color-button-text: #0d1012;
118
+ --color-button-hover: #9aa3ab;
119
+ --color-input-bg: #181d21;
120
+ --color-input-text: #e6e9eb;
121
+ --color-input-border: #78818a;
122
+ --color-input-placeholder: #9aa3ab;
123
+ --color-row-hover: #20262b;
124
+ --color-row-selected: var(--color-surface-raised);
125
+ --color-row-selected-text: #e6e9eb;
126
+ --color-code: var(--color-surface);
127
+ --color-code-text: var(--color-text);
128
+ --color-syntax-comment: #a0a6b1;
129
+ --color-syntax-keyword: #d8c2a5;
130
+ --color-syntax-string: #a8bd9c;
131
+ --color-syntax-number: #d5b98c;
132
+ --color-syntax-function: #d8c2a5;
133
+ --color-syntax-type: #d5b98c;
134
+ --color-syntax-variable: var(--color-text);
135
+ --color-syntax-operator: #9aa3ab;
136
+ --color-syntax-punctuation: #9aa3ab;
137
+ --color-syntax-tag: #d8c2a5;
138
+ --color-syntax-attribute: #d5b98c;
139
+ --color-error: #f0776c;
140
+ --color-warning: #e2a54b;
141
+ --color-success: #4cc38a;
128
142
  --color-info: #84adff;
129
- --color-progress: #7d97ff;
143
+ --color-progress: var(--color-project);
130
144
  --color-shadow: rgb(0 0 0 / 32%);
131
145
  --color-overlay: rgb(0 0 0 / 62%);
132
- --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%);
146
+ --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
147
+
148
+ --color-project: #a5a1ff;
149
+ --color-accent-text: var(--color-bg);
150
+ --color-accent-hover: var(--color-text);
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);
156
+ --color-status-text: #e6e9eb;
157
+ --color-terminal: #0a0c0e;
158
+ --color-terminal-text: #e6e9eb;
159
+ --color-terminal-border: #2a3036;
160
+ --color-terminal-caption: #13171a;
161
+ --color-terminal-caption-text: #c9d0d6;
133
162
  }
134
163
 
135
164
  @theme inline {
package/src/themes/graphite-indigo.css CHANGED
@@ -5,26 +5,28 @@
5
5
 
6
6
  :root {
7
7
  color-scheme: light;
8
- --color-bg: #f8f9fb;
9
- --color-surface: #e7e8ec;
10
- --color-surface-raised: #ffffff;
11
- --color-surface-muted: #e4e6eb;
12
- --color-text: #222326;
13
- --color-muted: #5d626c;
14
- --color-link: #075fc7;
15
- --color-accent: #6359a7;
16
- --color-focus: #075fc7;
17
- --color-border: #777d88;
18
- --color-border-subtle: #d8dbe2;
19
- --color-button-bg: var(--color-accent);
20
- --color-button-text: #ffffff;
21
- --color-button-hover: #554b94;
8
+ --color-project: #4b45d1;
9
+ --color-project-dark: #a5a1ff;
10
+ --color-bg: #f4f5f6;
11
+ --color-surface: #e9ebed;
12
+ --color-surface-raised: #fbfbfc;
13
+ --color-surface-muted: #e2e5e8;
14
+ --color-text: #101315;
15
+ --color-muted: #50575e;
16
+ --color-link: #0b5f7c;
17
+ --color-accent: var(--color-project);
18
+ --color-focus: var(--color-link);
19
+ --color-border: #6d747b;
20
+ --color-border-subtle: #d3d8dd;
21
+ --color-button-bg: var(--color-text);
22
+ --color-button-text: var(--color-bg);
23
+ --color-button-hover: var(--color-muted);
22
24
  --color-input-bg: var(--color-surface-raised);
23
25
  --color-input-text: var(--color-text);
24
26
  --color-input-border: var(--color-border);
25
27
  --color-input-placeholder: var(--color-muted);
26
- --color-row-hover: #dfe1e7;
27
- --color-row-selected: #ffffff;
28
+ --color-row-hover: #e2e5e8;
29
+ --color-row-selected: var(--color-surface-raised);
28
30
  --color-row-selected-text: var(--color-text);
29
31
  --color-code: var(--color-surface);
30
32
  --color-code-text: var(--color-text);
@@ -39,22 +41,29 @@
39
41
  --color-syntax-punctuation: var(--color-muted);
40
42
  --color-syntax-tag: var(--color-syntax-keyword);
41
43
  --color-syntax-attribute: var(--color-syntax-number);
42
- --color-error: #c7372d;
44
+ --color-error: #bd342b;
43
45
  --color-warning: #86532e;
44
46
  --color-success: #157249;
45
47
  --color-info: #175cd3;
46
48
  --color-progress: var(--color-accent);
47
- --color-error-surface: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
48
- --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
49
- --color-success-surface: color-mix(in srgb, var(--color-success) 11%, var(--color-bg));
50
- --color-info-surface: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
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);
51
53
  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
52
54
  --color-status-text: var(--color-text);
53
- --text-3xl: 32px;
55
+ --color-terminal: #0a0c0e;
56
+ --color-terminal-text: #e6e9eb;
57
+ --color-terminal-border: #2a3036;
58
+ --color-terminal-caption: #13171a;
59
+ --color-terminal-caption-text: #c9d0d6;
60
+ --color-accent-text: var(--color-bg);
61
+ --color-accent-hover: var(--color-text);
62
+ --text-3xl: 44px;
54
63
  --text-reading: 16px;
55
64
  --text-display: 56px;
56
- --text-display-sm: 38px;
57
- --tracking-tight: -0.01em;
65
+ --text-display-sm: 34px;
66
+ --tracking-tight: -0.03em;
58
67
  --space-20: 80px;
59
68
  --space-24: 96px;
60
69
  --row: 36px;
@@ -63,26 +72,28 @@
63
72
 
64
73
  :root.dark {
65
74
  color-scheme: dark;
66
- --color-bg: #151619;
67
- --color-surface: #0e0f12;
68
- --color-surface-raised: #212226;
69
- --color-surface-muted: #303238;
70
- --color-text: #f4f5f8;
71
- --color-muted: #b0b5bf;
72
- --color-link: #58a6ff;
73
- --color-accent: #a99ce2;
74
- --color-focus: #58a6ff;
75
- --color-border: #818894;
76
- --color-border-subtle: #3b3e45;
77
- --color-button-bg: var(--color-accent);
78
- --color-button-text: #151619;
79
- --color-button-hover: #b7ace9;
75
+ --color-project: #a5a1ff;
76
+ --color-project-dark: #a5a1ff;
77
+ --color-bg: #0d1012;
78
+ --color-surface: #13171a;
79
+ --color-surface-raised: #181d21;
80
+ --color-surface-muted: #20262b;
81
+ --color-text: #e6e9eb;
82
+ --color-muted: #9aa3ab;
83
+ --color-link: #67c1df;
84
+ --color-accent: var(--color-project);
85
+ --color-focus: var(--color-link);
86
+ --color-border: #78818a;
87
+ --color-border-subtle: #262d33;
88
+ --color-button-bg: var(--color-text);
89
+ --color-button-text: var(--color-bg);
90
+ --color-button-hover: var(--color-muted);
80
91
  --color-input-bg: var(--color-surface-raised);
81
92
  --color-input-text: var(--color-text);
82
93
  --color-input-border: var(--color-border);
83
94
  --color-input-placeholder: var(--color-muted);
84
- --color-row-hover: #25272d;
85
- --color-row-selected: #38334f;
95
+ --color-row-hover: #20262b;
96
+ --color-row-selected: var(--color-surface-raised);
86
97
  --color-row-selected-text: var(--color-text);
87
98
  --color-code: var(--color-surface);
88
99
  --color-code-text: var(--color-text);
@@ -102,10 +113,17 @@
102
113
  --color-success: #4cc38a;
103
114
  --color-info: #84adff;
104
115
  --color-progress: var(--color-accent);
105
- --color-error-surface: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
106
- --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
107
- --color-success-surface: color-mix(in srgb, var(--color-success) 11%, var(--color-bg));
108
- --color-info-surface: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
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);
109
120
  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
110
121
  --color-status-text: var(--color-text);
122
+ --color-terminal: #0a0c0e;
123
+ --color-terminal-text: #e6e9eb;
124
+ --color-terminal-border: #2a3036;
125
+ --color-terminal-caption: #13171a;
126
+ --color-terminal-caption-text: #c9d0d6;
127
+ --color-accent-text: var(--color-bg);
128
+ --color-accent-hover: var(--color-text);
111
129
  }