@timlassiter11/yatl 1.2.2 → 1.2.3

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 (10) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +15 -5
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +15 -5
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/theme.css +40 -34
  8. package/dist/yatl.min.global.js +25 -20
  9. package/dist/yatl.min.global.js.map +1 -1
  10. package/package.json +3 -2
package/dist/theme.css CHANGED
@@ -1,48 +1,52 @@
1
+ @import "open-props/style";
2
+
1
3
  /* src/theme.css */
2
4
  :root {
3
5
  color-scheme: light dark;
4
- --yatl-font-family: var( --yatl-theme-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" );
5
- --yatl-font-size: var(--yatl-theme-font-size, 1rem);
6
- --yatl-line-height: var(--yatl-theme-line-height, 1.25rem);
7
- --yatl-spacing-xs: var(--yatl-theme-spacing-xs, 4px);
8
- --yatl-spacing-s: var(--yatl-theme-spacing-s, 8px);
9
- --yatl-spacing-m: var(--yatl-theme-spacing-m, 12px);
10
- --yatl-spacing-l: var(--yatl-theme-spacing-l, 16px);
11
- --yatl-radius-xs: var(--yatl-theme-radius-xs, 2px);
12
- --yatl-radius-s: var(--yatl-theme-radius-s, 4px);
13
- --yatl-radius-m: var(--yatl-theme-radius-m, 8px);
14
- --yatl-radius-l: var(--yatl-theme-radius-l, 12px);
15
- --yatl-border-color-light: var(--yatl-theme-border-color-light, #e2e8f0);
16
- --yatl-border-color-dark: var(--yatl-theme-border-color-dark, #404040);
6
+ --yatl-font-family: var(--font-sans);
7
+ --yatl-font-size: var(--font-size-2);
8
+ --yatl-line-height: var(--font-lineheight-2);
9
+ --yatl-spacing-xs: 4px;
10
+ --yatl-spacing-s: 8px;
11
+ --yatl-spacing-m: 12px;
12
+ --yatl-spacing-l: 16px;
13
+ --yatl-spacing-xl: 20px;
14
+ --yatl-radius-xs: 2px;
15
+ --yatl-radius-s: 4px;
16
+ --yatl-radius-m: 8px;
17
+ --yatl-radius-l: 12px;
18
+ --yatl-radius-xl: 16px;
19
+ --yatl-border-color-light: var(--gray-4);
20
+ --yatl-border-color-dark: var(--gray-7);
17
21
  --yatl-border-color: light-dark( var(--yatl-border-color-light), var(--yatl-border-color-dark) );
18
- --yatl-color-brand: var(--yatl-theme-brand, #7531ae);
19
- --yatl-color-danger: var(--yatl-theme-danger, #ef4444);
20
- --yatl-color-warning: var(--yatl-theme-warning, #9b5300);
21
- --yatl-color-success: var(--yatl-theme-success, #227931);
22
- --yatl-color-neutral-light: var(--yatl-theme-neutral-light, #2f323f);
23
- --yatl-color-neutral-dark: var(--yatl-theme-neutral-dark, #e4e5e9);
24
- --yatl-color-neutral: var( --yatl-theme-neutral, light-dark(var(--yatl-color-neutral-light), var(--yatl-color-neutral-dark)) );
22
+ --yatl-color-brand: #7531ae;
23
+ --yatl-color-danger: #ef4444;
24
+ --yatl-color-warning: #9b5300;
25
+ --yatl-color-success: #227931;
26
+ --yatl-color-neutral-light: #2f323f;
27
+ --yatl-color-neutral-dark: #e4e5e9;
28
+ --yatl-color-neutral: light-dark( var(--yatl-color-neutral-light), var(--yatl-color-neutral-dark) );
25
29
  --yatl-color-mix: light-dark(black, white);
26
- --yatl-surface-1-light: #f3f4f6;
27
- --yatl-surface-1-dark: #101219;
30
+ --yatl-surface-1-light: var(--gray-1);
31
+ --yatl-surface-1-dark: var(--gray-10);
28
32
  --yatl-surface-1: light-dark( var(--yatl-surface-1-light), var(--yatl-surface-1-dark) );
29
- --yatl-surface-2-light: #f7f7f7;
30
- --yatl-surface-2-dark: #1a1b1e;
33
+ --yatl-surface-2-light: var(--gray-2);
34
+ --yatl-surface-2-dark: var(--gray-9);
31
35
  --yatl-surface-2: light-dark( var(--yatl-surface-2-light), var(--yatl-surface-2-dark) );
32
- --yatl-surface-3-light: #f1f5f9;
33
- --yatl-surface-3-dark: #27272a;
36
+ --yatl-surface-3-light: var(--gray-3);
37
+ --yatl-surface-3-dark: var(--gray-8);
34
38
  --yatl-surface-3: light-dark( var(--yatl-surface-3-light), var(--yatl-surface-3-dark) );
35
- --yatl-surface-4-light: #e2e8f0;
36
- --yatl-surface-4-dark: #3f3f46;
39
+ --yatl-surface-4-light: var(--gray-4);
40
+ --yatl-surface-4-dark: var(--gray-7);
37
41
  --yatl-surface-4: light-dark( var(--yatl-surface-4-light), var(--yatl-surface-4-dark) );
38
- --yatl-text-1-light: #0f172a;
39
- --yatl-text-1-dark: #f1f5f9;
42
+ --yatl-text-1-light: var(--gray-10);
43
+ --yatl-text-1-dark: var(--gray-2);
40
44
  --yatl-text-1: light-dark(var(--yatl-text-1-light), var(--yatl-text-1-dark));
41
- --yatl-text-2-light: #475569;
42
- --yatl-text-2-dark: #cbd5e1;
45
+ --yatl-text-2-light: var(--gray-7);
46
+ --yatl-text-2-dark: var(--gray-5);
43
47
  --yatl-text-2: light-dark(var(--yatl-text-2-light), var(--yatl-text-2-dark));
44
- --yatl-text-3-light: #4d4d4d;
45
- --yatl-text-3-dark: #8a8a8a;
48
+ --yatl-text-3-light: var(--gray-6);
49
+ --yatl-text-3-dark: var(--gray-6);
46
50
  --yatl-text-3: light-dark(var(--yatl-text-3-light), var(--yatl-text-3-dark));
47
51
  --yatl-text-inverse: light-dark(white, black);
48
52
  --yatl-text-brand: white;
@@ -50,6 +54,8 @@
50
54
  font-size: var(--yatl-font-size);
51
55
  color: var(--yatl-text-1);
52
56
  background-color: var(--yatl-surface-1);
57
+ -webkit-font-smoothing: antialiased;
58
+ -moz-osx-font-smoothing: grayscale;
53
59
  }
54
60
  :root.light {
55
61
  color-scheme: light;