@c15t/browser 3.0.0-alpha.0 → 3.0.0-alpha.1

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.
package/dist/c15t.iab.css CHANGED
@@ -1,114 +1,8 @@
1
1
  /* default theme tokens (generated from defaultTheme) */
2
- :root, :host, .c15t-theme-root {
3
- --c15t-border: hsl(0, 0%, 90%);
4
- --c15t-border-hover: hsl(0, 0%, 85%);
5
- --c15t-duration-fast: 80ms;
6
- --c15t-duration-normal: 150ms;
7
- --c15t-duration-slow: 200ms;
8
- --c15t-easing: cubic-bezier(0.4, 0, 0.2, 1);
9
- --c15t-easing-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
10
- --c15t-easing-out: cubic-bezier(0.215, 0.61, 0.355, 1);
11
- --c15t-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
12
- --c15t-font-family: system-ui, -apple-system, sans-serif;
13
- --c15t-font-size-base: 1rem;
14
- --c15t-font-size-lg: 1.125rem;
15
- --c15t-font-size-sm: 0.875rem;
16
- --c15t-font-weight-medium: 500;
17
- --c15t-font-weight-normal: 400;
18
- --c15t-font-weight-semibold: 600;
19
- --c15t-line-height-normal: 1.5;
20
- --c15t-line-height-relaxed: 1.75;
21
- --c15t-line-height-tight: 1.25;
22
- --c15t-overlay: hsla(0, 0%, 0%, 0.5);
23
- --c15t-primary: hsl(228, 100%, 60%);
24
- --c15t-primary-hover: hsl(228, 100%, 55%);
25
- --c15t-radius-full: 9999px;
26
- --c15t-radius-lg: 0.75rem;
27
- --c15t-radius-md: 0.5rem;
28
- --c15t-radius-sm: 0.25rem;
29
- --c15t-shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.12);
30
- --c15t-shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
31
- --c15t-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
32
- --c15t-space-lg: 1.5rem;
33
- --c15t-space-md: 1rem;
34
- --c15t-space-sm: 0.5rem;
35
- --c15t-space-xl: 2rem;
36
- --c15t-space-xs: 0.25rem;
37
- --c15t-surface: hsl(0, 0%, 100%);
38
- --c15t-surface-hover: hsl(0, 0%, 98%);
39
- --c15t-switch-thumb: hsl(0, 0%, 100%);
40
- --c15t-switch-track: hsl(0, 0%, 85%);
41
- --c15t-switch-track-active: hsl(228, 100%, 60%);
42
- --c15t-text: hsl(0, 0%, 10%);
43
- --c15t-text-muted: hsl(0, 0%, 40%);
44
- --c15t-text-on-primary: hsl(0, 0%, 100%);
45
- }
46
-
47
- :root.dark, :host(.dark), .dark .c15t-theme-root, :root.c15t-dark, :host(.c15t-dark), .c15t-dark .c15t-theme-root {
48
- --c15t-border: hsl(0, 0%, 20%);
49
- --c15t-border-hover: hsl(0, 0%, 25%);
50
- --c15t-duration-fast: 80ms;
51
- --c15t-duration-normal: 150ms;
52
- --c15t-duration-slow: 200ms;
53
- --c15t-easing: cubic-bezier(0.4, 0, 0.2, 1);
54
- --c15t-easing-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
55
- --c15t-easing-out: cubic-bezier(0.215, 0.61, 0.355, 1);
56
- --c15t-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
57
- --c15t-font-family: system-ui, -apple-system, sans-serif;
58
- --c15t-font-size-base: 1rem;
59
- --c15t-font-size-lg: 1.125rem;
60
- --c15t-font-size-sm: 0.875rem;
61
- --c15t-font-weight-medium: 500;
62
- --c15t-font-weight-normal: 400;
63
- --c15t-font-weight-semibold: 600;
64
- --c15t-line-height-normal: 1.5;
65
- --c15t-line-height-relaxed: 1.75;
66
- --c15t-line-height-tight: 1.25;
67
- --c15t-overlay: hsla(0, 0%, 0%, 0.7);
68
- --c15t-primary: hsl(228, 100%, 70%);
69
- --c15t-primary-hover: hsl(228, 100%, 65%);
70
- --c15t-radius-full: 9999px;
71
- --c15t-radius-lg: 0.75rem;
72
- --c15t-radius-md: 0.5rem;
73
- --c15t-radius-sm: 0.25rem;
74
- --c15t-shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.12);
75
- --c15t-shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
76
- --c15t-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
77
- --c15t-space-lg: 1.5rem;
78
- --c15t-space-md: 1rem;
79
- --c15t-space-sm: 0.5rem;
80
- --c15t-space-xl: 2rem;
81
- --c15t-space-xs: 0.25rem;
82
- --c15t-surface: hsl(0, 0%, 7%);
83
- --c15t-surface-hover: hsl(0, 0%, 10%);
84
- --c15t-switch-thumb: hsl(0, 0%, 93%);
85
- --c15t-switch-track: hsl(0, 0%, 25%);
86
- --c15t-switch-track-active: hsl(228, 100%, 70%);
87
- --c15t-text: hsl(0, 0%, 93%);
88
- --c15t-text-muted: hsl(0, 0%, 60%);
89
- --c15t-text-on-primary: hsl(0, 0%, 100%);
90
- }
2
+ :root,:host,.c15t-theme-root{--c15t-border: hsl(0, 0%, 90%);--c15t-border-hover: hsl(0, 0%, 85%);--c15t-duration-fast: 80ms;--c15t-duration-normal: 150ms;--c15t-duration-slow: 200ms;--c15t-easing: cubic-bezier(0.4, 0, 0.2, 1);--c15t-easing-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);--c15t-easing-out: cubic-bezier(0.215, 0.61, 0.355, 1);--c15t-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);--c15t-font-family: system-ui, -apple-system, sans-serif;--c15t-font-size-base: 1rem;--c15t-font-size-lg: 1.125rem;--c15t-font-size-sm: 0.875rem;--c15t-font-weight-medium: 500;--c15t-font-weight-normal: 400;--c15t-font-weight-semibold: 600;--c15t-line-height-normal: 1.5;--c15t-line-height-relaxed: 1.75;--c15t-line-height-tight: 1.25;--c15t-overlay: hsla(0, 0%, 0%, 0.5);--c15t-primary: hsl(228, 100%, 60%);--c15t-primary-hover: hsl(228, 100%, 55%);--c15t-radius-full: 9999px;--c15t-radius-lg: 0.75rem;--c15t-radius-md: 0.5rem;--c15t-radius-sm: 0.25rem;--c15t-shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.12);--c15t-shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);--c15t-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);--c15t-space-lg: 1.5rem;--c15t-space-md: 1rem;--c15t-space-sm: 0.5rem;--c15t-space-xl: 2rem;--c15t-space-xs: 0.25rem;--c15t-surface: hsl(0, 0%, 100%);--c15t-surface-hover: hsl(0, 0%, 98%);--c15t-switch-thumb: hsl(0, 0%, 100%);--c15t-switch-track: hsl(0, 0%, 85%);--c15t-switch-track-active: hsl(228, 100%, 60%);--c15t-text: hsl(0, 0%, 10%);--c15t-text-muted: hsl(0, 0%, 40%);--c15t-text-on-primary: hsl(0, 0%, 100%);}
91
3
 
92
- /*
93
- * Utility class to disable transitions during theme switching.
94
- * Apply this class to the root element before switching themes,
95
- * then remove it after a short delay to prevent flash of
96
- * animated content during the color scheme change.
97
- *
98
- * Example usage:
99
- * document.documentElement.classList.add('c15t-no-transitions');
100
- * // Switch theme...
101
- * requestAnimationFrame(() => {
102
- * document.documentElement.classList.remove('c15t-no-transitions');
103
- * });
104
- */
105
- .c15t-no-transitions,
106
- .c15t-no-transitions *,
107
- .c15t-no-transitions *::before,
108
- .c15t-no-transitions *::after {
109
- transition: none !important;
110
- animation: none !important;
111
- }
4
+ :root.dark,:host(.dark),.dark .c15t-theme-root,:root.c15t-dark,:host(.c15t-dark),.c15t-dark .c15t-theme-root{--c15t-border: hsl(0, 0%, 20%);--c15t-border-hover: hsl(0, 0%, 25%);--c15t-duration-fast: 80ms;--c15t-duration-normal: 150ms;--c15t-duration-slow: 200ms;--c15t-easing: cubic-bezier(0.4, 0, 0.2, 1);--c15t-easing-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);--c15t-easing-out: cubic-bezier(0.215, 0.61, 0.355, 1);--c15t-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);--c15t-font-family: system-ui, -apple-system, sans-serif;--c15t-font-size-base: 1rem;--c15t-font-size-lg: 1.125rem;--c15t-font-size-sm: 0.875rem;--c15t-font-weight-medium: 500;--c15t-font-weight-normal: 400;--c15t-font-weight-semibold: 600;--c15t-line-height-normal: 1.5;--c15t-line-height-relaxed: 1.75;--c15t-line-height-tight: 1.25;--c15t-overlay: hsla(0, 0%, 0%, 0.7);--c15t-primary: hsl(228, 100%, 70%);--c15t-primary-hover: hsl(228, 100%, 65%);--c15t-radius-full: 9999px;--c15t-radius-lg: 0.75rem;--c15t-radius-md: 0.5rem;--c15t-radius-sm: 0.25rem;--c15t-shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.12);--c15t-shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);--c15t-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);--c15t-space-lg: 1.5rem;--c15t-space-md: 1rem;--c15t-space-sm: 0.5rem;--c15t-space-xl: 2rem;--c15t-space-xs: 0.25rem;--c15t-surface: hsl(0, 0%, 7%);--c15t-surface-hover: hsl(0, 0%, 10%);--c15t-switch-thumb: hsl(0, 0%, 93%);--c15t-switch-track: hsl(0, 0%, 25%);--c15t-switch-track-active: hsl(228, 100%, 70%);--c15t-text: hsl(0, 0%, 93%);--c15t-text-muted: hsl(0, 0%, 60%);--c15t-text-on-primary: hsl(0, 0%, 100%);}
5
+ .c15t-no-transitions,.c15t-no-transitions *,.c15t-no-transitions *::before,.c15t-no-transitions *::after{transition: none !important;animation: none !important;}
112
6
 
113
7
  /* primitives/button vars */
114
8
  :root, :host{--button-primary:var(--c15t-primary);--button-primary-dark:var(--c15t-primary);--button-primary-hover:var(--c15t-primary-hover);--button-primary-hover-dark:var(--c15t-primary-hover);--button-neutral:var(--c15t-text-muted);--button-neutral-dark:var(--c15t-text-muted);--button-neutral-hover:var(--c15t-text);--button-neutral-hover-dark:var(--c15t-text);--button-neutral-soft:var(--c15t-surface-hover);--button-neutral-soft-dark:var(--c15t-surface-hover);--button-focus-ring:var(--c15t-primary);--button-focus-ring-dark:var(--c15t-primary);--button-text:var(--c15t-text);--button-text-dark:var(--c15t-text);--button-text-hover:var(--c15t-text);--button-text-hover-dark:var(--c15t-text);--button-background-color:var(--c15t-surface);--button-background-color-dark:var(--c15t-surface);--button-border:var(--c15t-border);--button-border-dark:var(--c15t-border);--button-hover-overlay:var(--c15t-surface-hover);--button-hover-overlay-dark:var(--c15t-surface-hover);--button-primary-hover-tint:color-mix(in srgb, var(--c15t-primary) 10%, transparent);--button-neutral-hover-tint:color-mix(in srgb, var(--c15t-text) 10%, transparent);--button-font:var(--c15t-font-family);--button-border-width:1px;--button-border-style:solid;--button-border-color:var(--c15t-border);--button-border-radius:var(--c15t-radius-md);--button-font-weight:var(--c15t-font-weight-medium);--button-font-size:var(--c15t-font-size-sm);--button-line-height:var(--c15t-line-height-tight);--button-transition:opacity var(--c15t-duration-fast) var(--c15t-easing), transform var(--c15t-duration-fast) var(--c15t-easing);--button-hover-transition-color:background-color var(--c15t-duration-fast) var(--c15t-easing);--button-hover-transition-full:background-color var(--c15t-duration-fast) var(--c15t-easing), box-shadow var(--c15t-duration-fast) var(--c15t-easing), color var(--c15t-duration-fast) var(--c15t-easing);--button-cursor:pointer;--button-shadow:var(--c15t-shadow-sm);--button-shadow-dark:var(--c15t-shadow-sm);--button-shadow-primary-focus:0 0 0 2px var(--button-focus-ring);--button-shadow-neutral-focus:0 0 0 2px var(--button-focus-ring);--button-shadow-primary-focus-dark:0 0 0 2px var(--button-focus-ring-dark);--button-shadow-neutral-focus-dark:0 0 0 2px var(--button-focus-ring-dark);--button-shadow-primary:var(--button-shadow), inset 0 0 0 1px var(--button-primary);--button-shadow-primary-dark:var(--button-shadow-dark), inset 0 0 0 1px var(--button-primary-dark);--button-shadow-primary-hover:none;--button-shadow-primary-hover-dark:none;--button-shadow-neutral:var(--button-shadow), inset 0 0 0 1px var(--button-neutral-soft);--button-shadow-neutral-dark:var(--button-shadow-dark), inset 0 0 0 1px var(--button-neutral-soft-dark);--button-shadow-neutral-hover:none;--button-shadow-neutral-hover-dark:none}