@filipgutica/ui 1.11.2 → 1.12.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 (17) hide show
  1. package/README.md +44 -6
  2. package/dist/index.js +54 -45
  3. package/dist/site.js +65 -62
  4. package/package.json +7 -3
  5. package/src/components.css +54 -26
  6. package/src/fonts/OFL-IBM-Plex-Mono.txt +93 -0
  7. package/src/fonts/OFL-IBM-Plex-Sans.txt +93 -0
  8. package/src/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  9. package/src/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  10. package/src/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  11. package/src/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  12. package/src/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  13. package/src/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  14. package/src/fonts.css +55 -0
  15. package/src/site.css +132 -50
  16. package/src/theme.css +118 -89
  17. package/src/themes/graphite-indigo.css +62 -44
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
  }