@ikonai/sdk-react-ui 1.6.0 → 1.8.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.
- package/auth/auth-service.d.ts +9 -0
- package/index.js +771 -750
- package/package.json +1 -1
- package/theme/ikon-app.css +259 -250
- package/theme/ikon-auth.css +290 -271
- package/theme/ikon-surface.css +107 -94
- package/theme/ikon-tokens.css +97 -95
package/theme/ikon-surface.css
CHANGED
|
@@ -1,112 +1,125 @@
|
|
|
1
1
|
/* Ikon surface primitives: page background, typography baseline and buttons.
|
|
2
2
|
|
|
3
|
-
Override any of
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
.ikon-surface {
|
|
7
|
-
position: relative;
|
|
8
|
-
min-height: 100dvh;
|
|
9
|
-
margin: 0;
|
|
10
|
-
background-color: var(--ikon-bg-background);
|
|
11
|
-
color: var(--ikon-text-primary);
|
|
12
|
-
font-family: var(--ikon-font-body);
|
|
13
|
-
font-size: 16px;
|
|
14
|
-
line-height: 1.6;
|
|
15
|
-
-webkit-font-smoothing: antialiased;
|
|
16
|
-
-moz-osx-font-smoothing: grayscale;
|
|
17
|
-
text-rendering: optimizeLegibility;
|
|
18
|
-
}
|
|
3
|
+
Override any of them from your own CSS, which loads after this sheet: at equal specificity
|
|
4
|
+
yours wins, with no `!important`. Not every rule here is a single class — a descendant or a
|
|
5
|
+
`:hover` / `:focus` state is more specific, so match that shape to override one of those.
|
|
19
6
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
7
|
+
Deliberately not wrapped in a cascade layer: an older browser discards a `@layer` block whole,
|
|
8
|
+
and with it every rule inside. */
|
|
9
|
+
.ikon-surface {
|
|
10
|
+
position: relative;
|
|
11
|
+
/* Fallback first — older browsers ignore the dvh line and keep this one. */
|
|
12
|
+
min-height: 100vh;
|
|
13
|
+
min-height: 100dvh;
|
|
14
|
+
margin: 0;
|
|
15
|
+
background-color: var(--ikon-bg-background);
|
|
16
|
+
color: var(--ikon-text-primary);
|
|
17
|
+
font-family: var(--ikon-font-body);
|
|
18
|
+
font-size: 16px;
|
|
19
|
+
line-height: 1.6;
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
|
+
-moz-osx-font-smoothing: grayscale;
|
|
22
|
+
text-rendering: optimizeLegibility;
|
|
23
|
+
}
|
|
32
24
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
25
|
+
/* A fine dot field, faded out by a radial mask. */
|
|
26
|
+
.ikon-surface::before {
|
|
27
|
+
content: '';
|
|
28
|
+
position: fixed;
|
|
29
|
+
/* Longhands first, for browsers without the `inset` shorthand. */
|
|
30
|
+
top: 0;
|
|
31
|
+
right: 0;
|
|
32
|
+
bottom: 0;
|
|
33
|
+
left: 0;
|
|
34
|
+
inset: 0;
|
|
35
|
+
z-index: 0;
|
|
36
|
+
pointer-events: none;
|
|
37
|
+
background-image: radial-gradient(circle at center, var(--ikon-grid-dot) 1px, transparent 1.5px);
|
|
38
|
+
background-size: 24px 24px;
|
|
39
|
+
-webkit-mask-image: radial-gradient(115% 85% at 50% 0%, #000 0%, transparent 72%);
|
|
40
|
+
mask-image: radial-gradient(115% 85% at 50% 0%, #000 0%, transparent 72%);
|
|
41
|
+
}
|
|
38
42
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
44
|
+
.ikon-surface > * {
|
|
45
|
+
animation: ikon-rise 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
|
|
42
46
|
}
|
|
47
|
+
}
|
|
43
48
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
49
|
+
@keyframes ikon-rise {
|
|
50
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
51
|
+
to { opacity: 1; transform: none; }
|
|
52
|
+
}
|
|
47
53
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
height: auto;
|
|
52
|
-
color: var(--ikon-text-primary);
|
|
53
|
-
}
|
|
54
|
+
@keyframes ikon-spin {
|
|
55
|
+
to { transform: rotate(360deg); }
|
|
56
|
+
}
|
|
54
57
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
min-height: 40px;
|
|
62
|
-
padding: 0 16px;
|
|
63
|
-
border: 1px solid transparent;
|
|
64
|
-
border-radius: var(--ikon-radius-md);
|
|
65
|
-
font-family: inherit;
|
|
66
|
-
font-size: 15px;
|
|
67
|
-
font-weight: 500;
|
|
68
|
-
line-height: 1;
|
|
69
|
-
text-decoration: none;
|
|
70
|
-
cursor: pointer;
|
|
71
|
-
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
72
|
-
}
|
|
58
|
+
.ikon-mark {
|
|
59
|
+
display: block;
|
|
60
|
+
width: 74px;
|
|
61
|
+
height: auto;
|
|
62
|
+
color: var(--ikon-text-primary);
|
|
63
|
+
}
|
|
73
64
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
65
|
+
.ikon-button {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
gap: 8px;
|
|
70
|
+
box-sizing: border-box;
|
|
71
|
+
min-height: 40px;
|
|
72
|
+
padding: 0 16px;
|
|
73
|
+
border: 1px solid transparent;
|
|
74
|
+
border-radius: var(--ikon-radius-md);
|
|
75
|
+
font-family: inherit;
|
|
76
|
+
font-size: 15px;
|
|
77
|
+
font-weight: 500;
|
|
78
|
+
line-height: 1;
|
|
79
|
+
text-decoration: none;
|
|
80
|
+
cursor: pointer;
|
|
81
|
+
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
82
|
+
}
|
|
78
83
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
84
|
+
.ikon-button:focus {
|
|
85
|
+
outline: 2px solid var(--ikon-focus-ring);
|
|
86
|
+
outline-offset: 2px;
|
|
87
|
+
}
|
|
83
88
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
.ikon-button:focus:not(:focus-visible) {
|
|
90
|
+
outline: none;
|
|
91
|
+
}
|
|
87
92
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
+
.ikon-button--primary {
|
|
94
|
+
background: var(--ikon-bg-solid);
|
|
95
|
+
color: var(--ikon-text-on-solid);
|
|
96
|
+
}
|
|
93
97
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
98
|
+
.ikon-button--primary:hover:not(:disabled) {
|
|
99
|
+
background: var(--ikon-bg-solid-hover);
|
|
100
|
+
}
|
|
97
101
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
+
.ikon-button--secondary {
|
|
103
|
+
background: transparent;
|
|
104
|
+
border-color: var(--ikon-border-primary);
|
|
105
|
+
color: var(--ikon-text-primary);
|
|
106
|
+
}
|
|
102
107
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
108
|
+
.ikon-button--secondary:hover:not(:disabled) {
|
|
109
|
+
background: var(--ikon-bg-hover);
|
|
110
|
+
}
|
|
107
111
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
+
.ikon-button--ghost {
|
|
113
|
+
background: transparent;
|
|
114
|
+
color: var(--ikon-text-tertiary);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.ikon-button--ghost:hover:not(:disabled) {
|
|
118
|
+
background: var(--ikon-bg-hover);
|
|
119
|
+
color: var(--ikon-text-primary);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.ikon-button:disabled {
|
|
123
|
+
cursor: not-allowed;
|
|
124
|
+
opacity: 0.55;
|
|
112
125
|
}
|
package/theme/ikon-tokens.css
CHANGED
|
@@ -3,102 +3,71 @@
|
|
|
3
3
|
Light is the default, dark follows the browser's `prefers-color-scheme`, and `data-theme` on the
|
|
4
4
|
root element overrides the preference in either direction.
|
|
5
5
|
|
|
6
|
-
Override any of
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
--ikon-bg-background: #0b0b0d;
|
|
69
|
-
--ikon-bg-card: #161618;
|
|
70
|
-
--ikon-bg-subtle: #1c1c1f;
|
|
71
|
-
--ikon-bg-hover: #242427;
|
|
72
|
-
--ikon-bg-solid: #f4f4f5;
|
|
73
|
-
--ikon-bg-solid-hover: #ffffff;
|
|
74
|
-
--ikon-text-on-solid: #0b0b0d;
|
|
75
|
-
|
|
76
|
-
--ikon-text-primary: #f7f7f7;
|
|
77
|
-
--ikon-text-secondary: #d3d5d9;
|
|
78
|
-
--ikon-text-tertiary: #aeb2b8;
|
|
79
|
-
--ikon-text-quaternary: #82868d;
|
|
80
|
-
|
|
81
|
-
--ikon-border-primary: #38383c;
|
|
82
|
-
--ikon-border-secondary: #2f2f33;
|
|
83
|
-
|
|
84
|
-
--ikon-status-neutral: #6e6e74;
|
|
85
|
-
--ikon-status-error: #f97066;
|
|
86
|
-
--ikon-status-warning: #fcb022;
|
|
87
|
-
--ikon-status-success: #38d3bd;
|
|
88
|
-
|
|
89
|
-
--ikon-error-surface: #2a1614;
|
|
90
|
-
--ikon-error-border: #5b241e;
|
|
91
|
-
--ikon-error-text: #fca19b;
|
|
92
|
-
|
|
93
|
-
--ikon-grid-dot: rgba(255, 255, 255, 0.16);
|
|
94
|
-
|
|
95
|
-
--ikon-overlay-scrim: rgba(11, 11, 13, 0.72);
|
|
96
|
-
--ikon-focus-ring: var(--ikon-brand-400);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
6
|
+
Override any of them from your own CSS, which loads after this sheet: at equal specificity
|
|
7
|
+
yours wins, with no `!important`. Not every rule here is a single class — a descendant or a
|
|
8
|
+
`:hover` / `:focus` state is more specific, so match that shape to override one of those.
|
|
9
|
+
|
|
10
|
+
Deliberately not wrapped in a cascade layer: an older browser discards a `@layer` block whole,
|
|
11
|
+
and with it every rule inside. */
|
|
12
|
+
:root {
|
|
13
|
+
color-scheme: light dark;
|
|
14
|
+
|
|
15
|
+
/* Inter and Poppins ship with the SDK. The fallbacks matter: these tokens are also used by
|
|
16
|
+
standalone documents that load no webfont at all. */
|
|
17
|
+
--ikon-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
18
|
+
--ikon-font-display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
19
|
+
--ikon-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
20
|
+
|
|
21
|
+
--ikon-radius-base: 0.25rem;
|
|
22
|
+
--ikon-radius-sm: calc(var(--ikon-radius-base) * 0.667);
|
|
23
|
+
--ikon-radius-md: var(--ikon-radius-base);
|
|
24
|
+
--ikon-radius-lg: calc(var(--ikon-radius-base) * 1.5);
|
|
25
|
+
--ikon-radius-xl: calc(var(--ikon-radius-base) * 2);
|
|
26
|
+
--ikon-radius-2xl: calc(var(--ikon-radius-base) * 3);
|
|
27
|
+
--ikon-radius-full: 9999px;
|
|
28
|
+
|
|
29
|
+
--ikon-brand-300: #ff5ba0;
|
|
30
|
+
--ikon-brand-400: #ff3d8f;
|
|
31
|
+
--ikon-brand-500: #f5277f;
|
|
32
|
+
--ikon-brand-600: #db176e;
|
|
33
|
+
--ikon-brand-700: #b3105a;
|
|
34
|
+
|
|
35
|
+
--ikon-bg-background: #fcfcfc;
|
|
36
|
+
--ikon-bg-card: #ffffff;
|
|
37
|
+
--ikon-bg-subtle: #f4f4f5;
|
|
38
|
+
--ikon-bg-hover: #f4f4f5;
|
|
39
|
+
--ikon-bg-solid: #161618;
|
|
40
|
+
--ikon-bg-solid-hover: #38383c;
|
|
41
|
+
--ikon-text-on-solid: #ffffff;
|
|
42
|
+
|
|
43
|
+
--ikon-text-primary: #161618;
|
|
44
|
+
--ikon-text-secondary: #4c4c51;
|
|
45
|
+
--ikon-text-tertiary: #6e6e74;
|
|
46
|
+
--ikon-text-quaternary: #9a9aa0;
|
|
47
|
+
|
|
48
|
+
--ikon-border-primary: #d4d4d7;
|
|
49
|
+
--ikon-border-secondary: #e8e8ea;
|
|
50
|
+
|
|
51
|
+
--ikon-status-neutral: #9a9aa0;
|
|
52
|
+
--ikon-status-error: #d92c20;
|
|
53
|
+
--ikon-status-warning: #db6803;
|
|
54
|
+
--ikon-status-success: #0a7d76;
|
|
55
|
+
|
|
56
|
+
/* Tinted fills for the in-app message banners. Kept faint so a banner reads as information
|
|
57
|
+
rather than as an alarm. */
|
|
58
|
+
--ikon-error-surface: #fef2f1;
|
|
59
|
+
--ikon-error-border: #fecdc9;
|
|
60
|
+
--ikon-error-text: #b32218;
|
|
61
|
+
|
|
62
|
+
/* The dot field drawn by .ikon-surface. One hairline value, faded by a radial mask. */
|
|
63
|
+
--ikon-grid-dot: rgba(22, 22, 24, 0.09);
|
|
64
|
+
|
|
65
|
+
--ikon-overlay-scrim: rgba(252, 252, 252, 0.72);
|
|
66
|
+
--ikon-focus-ring: var(--ikon-brand-500);
|
|
67
|
+
}
|
|
99
68
|
|
|
100
|
-
|
|
101
|
-
:root[data-theme='
|
|
69
|
+
@media (prefers-color-scheme: dark) {
|
|
70
|
+
:root:not([data-theme='light']) {
|
|
102
71
|
--ikon-bg-background: #0b0b0d;
|
|
103
72
|
--ikon-bg-card: #161618;
|
|
104
73
|
--ikon-bg-subtle: #1c1c1f;
|
|
@@ -130,3 +99,36 @@
|
|
|
130
99
|
--ikon-focus-ring: var(--ikon-brand-400);
|
|
131
100
|
}
|
|
132
101
|
}
|
|
102
|
+
|
|
103
|
+
/* An explicit data-theme wins over the OS preference in both directions. */
|
|
104
|
+
:root[data-theme='dark'] {
|
|
105
|
+
--ikon-bg-background: #0b0b0d;
|
|
106
|
+
--ikon-bg-card: #161618;
|
|
107
|
+
--ikon-bg-subtle: #1c1c1f;
|
|
108
|
+
--ikon-bg-hover: #242427;
|
|
109
|
+
--ikon-bg-solid: #f4f4f5;
|
|
110
|
+
--ikon-bg-solid-hover: #ffffff;
|
|
111
|
+
--ikon-text-on-solid: #0b0b0d;
|
|
112
|
+
|
|
113
|
+
--ikon-text-primary: #f7f7f7;
|
|
114
|
+
--ikon-text-secondary: #d3d5d9;
|
|
115
|
+
--ikon-text-tertiary: #aeb2b8;
|
|
116
|
+
--ikon-text-quaternary: #82868d;
|
|
117
|
+
|
|
118
|
+
--ikon-border-primary: #38383c;
|
|
119
|
+
--ikon-border-secondary: #2f2f33;
|
|
120
|
+
|
|
121
|
+
--ikon-status-neutral: #6e6e74;
|
|
122
|
+
--ikon-status-error: #f97066;
|
|
123
|
+
--ikon-status-warning: #fcb022;
|
|
124
|
+
--ikon-status-success: #38d3bd;
|
|
125
|
+
|
|
126
|
+
--ikon-error-surface: #2a1614;
|
|
127
|
+
--ikon-error-border: #5b241e;
|
|
128
|
+
--ikon-error-text: #fca19b;
|
|
129
|
+
|
|
130
|
+
--ikon-grid-dot: rgba(255, 255, 255, 0.16);
|
|
131
|
+
|
|
132
|
+
--ikon-overlay-scrim: rgba(11, 11, 13, 0.72);
|
|
133
|
+
--ikon-focus-ring: var(--ikon-brand-400);
|
|
134
|
+
}
|