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