@dataengineeringformachinelearning/viking-ui 4.0.2 → 4.0.4
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/README.md +7 -5
- package/dist/README.md +7 -5
- package/dist/deml-components.css +23 -0
- package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs +211 -23
- package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs.map +1 -1
- package/dist/package.json +7 -1
- package/dist/src/web/card/viking-card-wc.ts +2 -1
- package/dist/src/web/core/styles.ts +125 -2
- package/dist/src/web/search-palette/viking-search-palette-wc.ts +1 -0
- package/dist/src/web/suite-header/viking-suite-header-wc.ts +15 -0
- package/dist/types/dataengineeringformachinelearning-viking-ui.d.ts +3 -2
- package/dist/viking-components.css +425 -31
- package/dist/viking-ui-elements.js +180 -42
- package/dist/viking-ui.css +1 -1
- package/dist/web-components.js +143 -3
- package/package.json +7 -1
- package/src/index.ts +1 -1
- package/src/lib/button/button.scss +23 -0
- package/src/lib/card/card.ts +35 -5
- package/src/lib/footer/footer.scss +8 -1
- package/src/lib/site-drakkar/site-footer.ts +5 -1
- package/src/lib/site-drakkar/site-navbar.ts +23 -4
- package/src/lib/theme-toggle/theme-toggle.ts +1 -0
- package/src/styles/_buttons.scss +92 -7
- package/src/styles/_layout-enforcement.scss +66 -3
- package/src/styles/components/footer.scss +26 -13
- package/src/styles/components/icon-inline.scss +23 -0
- package/src/styles/components.scss +276 -9
- package/src/styles/static-navbar.scss +110 -36
- package/src/styles/surfaces/docs-showcase.scss +64 -1
- package/src/styles/surfaces/marketing-landing.scss +247 -6
- package/src/styles/surfaces/swagger-ui.scss +92 -1
- package/src/styles/viking-ui.scss +2 -0
- package/src/web/card/viking-card-wc.ts +2 -1
- package/src/web/core/styles.ts +125 -2
- package/src/web/search-palette/viking-search-palette-wc.ts +1 -0
- package/src/web/suite-header/viking-suite-header-wc.ts +15 -0
package/src/styles/_buttons.scss
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
gap: var(--viking-space-1);
|
|
16
16
|
min-height: var(--viking-control-height);
|
|
17
17
|
padding: 0 var(--viking-control-padding-x);
|
|
18
|
-
border-radius: var(--viking-radius);
|
|
18
|
+
border-radius: var(--viking-radius-lg);
|
|
19
19
|
border: 1px solid transparent;
|
|
20
20
|
cursor: pointer;
|
|
21
21
|
text-decoration: none;
|
|
@@ -24,8 +24,12 @@
|
|
|
24
24
|
min-width: var(--viking-btn-min-width, 120px);
|
|
25
25
|
white-space: nowrap;
|
|
26
26
|
position: relative;
|
|
27
|
+
background-clip: padding-box;
|
|
28
|
+
isolation: isolate;
|
|
27
29
|
user-select: none;
|
|
28
30
|
-webkit-tap-highlight-color: transparent;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
box-shadow: var(--viking-shadow-sm);
|
|
29
33
|
|
|
30
34
|
&:focus-visible {
|
|
31
35
|
outline: var(--viking-ring-width) solid var(--viking-ring);
|
|
@@ -33,6 +37,46 @@
|
|
|
33
37
|
z-index: 1;
|
|
34
38
|
}
|
|
35
39
|
|
|
40
|
+
&::before {
|
|
41
|
+
content: "";
|
|
42
|
+
position: absolute;
|
|
43
|
+
inset: 1px 1px auto 1px;
|
|
44
|
+
height: 1px;
|
|
45
|
+
background: linear-gradient(
|
|
46
|
+
90deg,
|
|
47
|
+
transparent,
|
|
48
|
+
color-mix(
|
|
49
|
+
in srgb,
|
|
50
|
+
var(--viking-metallic-100) 45%,
|
|
51
|
+
transparent
|
|
52
|
+
),
|
|
53
|
+
transparent
|
|
54
|
+
);
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
opacity: 0.82;
|
|
57
|
+
transition: var(--viking-transition-interactive);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&::after {
|
|
61
|
+
content: "";
|
|
62
|
+
position: absolute;
|
|
63
|
+
inset: auto 0 0 0;
|
|
64
|
+
height: 1px;
|
|
65
|
+
background: linear-gradient(
|
|
66
|
+
90deg,
|
|
67
|
+
transparent,
|
|
68
|
+
color-mix(
|
|
69
|
+
in srgb,
|
|
70
|
+
var(--viking-metallic-100) 18%,
|
|
71
|
+
transparent
|
|
72
|
+
),
|
|
73
|
+
transparent
|
|
74
|
+
);
|
|
75
|
+
pointer-events: none;
|
|
76
|
+
opacity: 0.45;
|
|
77
|
+
transition: var(--viking-transition-interactive);
|
|
78
|
+
}
|
|
79
|
+
|
|
36
80
|
&:disabled,
|
|
37
81
|
&[aria-busy='true'] {
|
|
38
82
|
opacity: var(--viking-state-disabled-opacity);
|
|
@@ -41,14 +85,35 @@
|
|
|
41
85
|
box-shadow: none !important;
|
|
42
86
|
}
|
|
43
87
|
|
|
88
|
+
&[aria-busy='true']::before,
|
|
44
89
|
&[aria-busy='true'] .viking-btn-label {
|
|
45
90
|
opacity: 0.85;
|
|
91
|
+
transform: translateY(1px);
|
|
46
92
|
}
|
|
47
93
|
|
|
48
94
|
viking-icon,
|
|
49
|
-
.viking-icon
|
|
95
|
+
.viking-icon,
|
|
96
|
+
[data-viking-icon] {
|
|
50
97
|
flex-shrink: 0;
|
|
98
|
+
display: inline-flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
width: var(--viking-icon-size-md);
|
|
102
|
+
height: var(--viking-icon-size-md);
|
|
103
|
+
line-height: 1;
|
|
51
104
|
pointer-events: none;
|
|
105
|
+
flex: 0 0 auto;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.viking-btn-label {
|
|
109
|
+
display: inline-flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
gap: var(--viking-space-1);
|
|
112
|
+
line-height: 1.2;
|
|
113
|
+
min-width: 0;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
text-align: center;
|
|
116
|
+
white-space: nowrap;
|
|
52
117
|
}
|
|
53
118
|
}
|
|
54
119
|
|
|
@@ -68,7 +133,10 @@
|
|
|
68
133
|
|
|
69
134
|
&:active:not(:disabled):not([aria-busy='true']) {
|
|
70
135
|
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
71
|
-
|
|
136
|
+
border-color: var(--viking-border-strong);
|
|
137
|
+
box-shadow: inset 0 1px 2px
|
|
138
|
+
color-mix(in srgb, var(--viking-black) 28%, transparent),
|
|
139
|
+
var(--viking-shadow-sm);
|
|
72
140
|
}
|
|
73
141
|
}
|
|
74
142
|
|
|
@@ -88,7 +156,10 @@
|
|
|
88
156
|
|
|
89
157
|
&:active:not(:disabled):not([aria-busy='true']) {
|
|
90
158
|
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
91
|
-
|
|
159
|
+
border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
|
|
160
|
+
box-shadow: inset 0 1px 2px
|
|
161
|
+
color-mix(in srgb, var(--viking-black) 28%, transparent),
|
|
162
|
+
var(--viking-shadow-sm);
|
|
92
163
|
}
|
|
93
164
|
}
|
|
94
165
|
|
|
@@ -108,7 +179,10 @@
|
|
|
108
179
|
|
|
109
180
|
&:active:not(:disabled):not([aria-busy='true']) {
|
|
110
181
|
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
111
|
-
|
|
182
|
+
border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
|
|
183
|
+
box-shadow: inset 0 1px 2px
|
|
184
|
+
color-mix(in srgb, var(--viking-black) 28%, transparent),
|
|
185
|
+
var(--viking-shadow-sm);
|
|
112
186
|
}
|
|
113
187
|
}
|
|
114
188
|
|
|
@@ -127,6 +201,9 @@
|
|
|
127
201
|
|
|
128
202
|
&:active:not(:disabled):not([aria-busy='true']) {
|
|
129
203
|
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
204
|
+
box-shadow: var(--viking-shadow-sm);
|
|
205
|
+
border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
|
|
206
|
+
background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
|
|
130
207
|
}
|
|
131
208
|
}
|
|
132
209
|
|
|
@@ -146,6 +223,8 @@
|
|
|
146
223
|
|
|
147
224
|
&:active:not(:disabled):not([aria-busy='true']) {
|
|
148
225
|
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
226
|
+
border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
|
|
227
|
+
background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
|
|
149
228
|
box-shadow: var(--viking-shadow-sm);
|
|
150
229
|
}
|
|
151
230
|
}
|
|
@@ -163,7 +242,9 @@
|
|
|
163
242
|
}
|
|
164
243
|
|
|
165
244
|
&:active:not(:disabled):not([aria-busy='true']) {
|
|
166
|
-
transform: scale(var(--viking-state-active-scale));
|
|
245
|
+
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
246
|
+
background: var(--viking-accent-soft);
|
|
247
|
+
color: var(--viking-accent-strong);
|
|
167
248
|
}
|
|
168
249
|
}
|
|
169
250
|
|
|
@@ -181,7 +262,11 @@
|
|
|
181
262
|
}
|
|
182
263
|
|
|
183
264
|
&:active:not(:disabled):not([aria-busy='true']) {
|
|
184
|
-
transform: scale(var(--viking-state-active-scale));
|
|
265
|
+
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
266
|
+
border-color: var(--viking-border);
|
|
267
|
+
background: color-mix(in srgb, var(--viking-accent-soft) 70%, var(--viking-surface));
|
|
268
|
+
box-shadow: inset 0 1px 2px
|
|
269
|
+
color-mix(in srgb, var(--viking-black) 24%, transparent);
|
|
185
270
|
}
|
|
186
271
|
}
|
|
187
272
|
|
|
@@ -53,7 +53,11 @@
|
|
|
53
53
|
background: var(--viking-surface-recipe, var(--viking-surface));
|
|
54
54
|
border: 1px solid var(--viking-border);
|
|
55
55
|
border-radius: var(--viking-radius-lg);
|
|
56
|
-
box-shadow: var(--viking-shadow-sm)
|
|
56
|
+
box-shadow: var(--viking-shadow-sm), inset 0 1px 0 color-mix(
|
|
57
|
+
in srgb,
|
|
58
|
+
var(--viking-white-pure) 6%,
|
|
59
|
+
transparent
|
|
60
|
+
);
|
|
57
61
|
padding: var(--viking-card-padding);
|
|
58
62
|
color: var(--viking-text);
|
|
59
63
|
min-width: var(--viking-card-min-width);
|
|
@@ -63,6 +67,21 @@
|
|
|
63
67
|
overflow: hidden;
|
|
64
68
|
transition: var(--viking-transition-interactive);
|
|
65
69
|
|
|
70
|
+
&::after {
|
|
71
|
+
content: '';
|
|
72
|
+
position: absolute;
|
|
73
|
+
inset: 0 auto auto 0;
|
|
74
|
+
right: 0;
|
|
75
|
+
width: 1px;
|
|
76
|
+
height: 28px;
|
|
77
|
+
background: linear-gradient(
|
|
78
|
+
180deg,
|
|
79
|
+
color-mix(in srgb, var(--viking-metallic-100) 22%, transparent),
|
|
80
|
+
transparent
|
|
81
|
+
);
|
|
82
|
+
pointer-events: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
66
85
|
@include viking-surface-hairline;
|
|
67
86
|
|
|
68
87
|
&.viking-card-compact,
|
|
@@ -70,11 +89,55 @@
|
|
|
70
89
|
padding: var(--viking-card-padding-compact);
|
|
71
90
|
}
|
|
72
91
|
|
|
73
|
-
&.viking-card-interactive:hover
|
|
92
|
+
&.viking-card-interactive:hover,
|
|
93
|
+
&[data-interactive='true']:hover {
|
|
74
94
|
border-color: var(--viking-accent-strong);
|
|
75
|
-
box-shadow: var(--viking-shadow-hover)
|
|
95
|
+
box-shadow: var(--viking-shadow-hover),
|
|
96
|
+
inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 6%, transparent);
|
|
76
97
|
transform: translateY(var(--viking-state-hover-lift));
|
|
77
98
|
}
|
|
99
|
+
|
|
100
|
+
&.viking-card-interactive:active,
|
|
101
|
+
&[data-interactive='true']:active {
|
|
102
|
+
transform: translateY(0) scale(var(--viking-state-active-scale));
|
|
103
|
+
box-shadow: inset 0 1px 2px
|
|
104
|
+
color-mix(in srgb, var(--viking-black) 24%, transparent),
|
|
105
|
+
var(--viking-shadow-sm);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&.viking-card-interactive:focus-visible,
|
|
109
|
+
&[data-interactive='true']:focus-visible {
|
|
110
|
+
outline: var(--viking-ring-width) solid var(--viking-ring);
|
|
111
|
+
outline-offset: var(--viking-ring-offset);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.viking-card-loading {
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.viking-card-header {
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: space-between;
|
|
123
|
+
gap: var(--viking-space-2);
|
|
124
|
+
margin-bottom: var(--viking-space-2);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.viking-card-footer {
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: flex-end;
|
|
131
|
+
gap: var(--viking-space-2);
|
|
132
|
+
margin-top: var(--viking-space-2);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.viking-card-title {
|
|
136
|
+
display: inline-flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
gap: var(--viking-space-1);
|
|
139
|
+
flex: 1 1 auto;
|
|
140
|
+
min-width: 0;
|
|
78
141
|
}
|
|
79
142
|
|
|
80
143
|
// ── Form width constraints ──────────────────────────────────────────────────
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
.viking-footer,
|
|
2
2
|
.mega-footer {
|
|
3
|
-
background-color: var(--viking-surface, var(--
|
|
4
|
-
border-top: 1px solid
|
|
3
|
+
background-color: var(--viking-surface, var(--card-bg, #05070f));
|
|
4
|
+
border-top: 1px solid
|
|
5
|
+
var(--viking-border-strong, var(--border-layout, var(--border, #243246)));
|
|
5
6
|
padding: calc(var(--viking-space-2) * 2) var(--viking-space-2);
|
|
6
7
|
font-family: var(--viking-font-family);
|
|
7
|
-
color: var(--viking-text-muted);
|
|
8
|
+
color: var(--viking-text-muted, var(--text-muted, #9aa5b1));
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
.viking-footer-content,
|
|
@@ -19,7 +20,8 @@
|
|
|
19
20
|
grid-template-columns: 1fr;
|
|
20
21
|
gap: calc(var(--viking-space-2) * 1.75);
|
|
21
22
|
padding-bottom: calc(var(--viking-space-2) * 2);
|
|
22
|
-
border-bottom: 1px solid
|
|
23
|
+
border-bottom: 1px solid
|
|
24
|
+
var(--viking-border-strong, var(--border-layout, var(--border, #243246)));
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
@media (min-width: 600px) {
|
|
@@ -40,7 +42,7 @@
|
|
|
40
42
|
.footer-column-title {
|
|
41
43
|
font-size: var(--viking-font-size);
|
|
42
44
|
font-weight: 700;
|
|
43
|
-
color: var(--viking-text);
|
|
45
|
+
color: var(--viking-text, var(--text-color, #e5edf5));
|
|
44
46
|
margin: 0 0 var(--viking-space-2);
|
|
45
47
|
letter-spacing: 0.05em;
|
|
46
48
|
}
|
|
@@ -58,7 +60,7 @@
|
|
|
58
60
|
.viking-footer-list a,
|
|
59
61
|
.footer-list a {
|
|
60
62
|
font-size: var(--viking-font-size);
|
|
61
|
-
color: var(--viking-text-muted);
|
|
63
|
+
color: var(--viking-text-muted, var(--text-muted, #a4b0be));
|
|
62
64
|
text-decoration: none !important;
|
|
63
65
|
border-bottom: 1px solid transparent;
|
|
64
66
|
transition: color 0.2s ease, border-color 0.2s ease;
|
|
@@ -66,7 +68,7 @@
|
|
|
66
68
|
|
|
67
69
|
.viking-footer-list a:hover,
|
|
68
70
|
.footer-list a:hover {
|
|
69
|
-
color: var(--viking-text);
|
|
71
|
+
color: var(--viking-text, var(--text-color, #e5edf5));
|
|
70
72
|
border-bottom-color: var(--viking-text);
|
|
71
73
|
}
|
|
72
74
|
|
|
@@ -126,19 +128,30 @@
|
|
|
126
128
|
padding: var(--viking-space-1) var(--viking-space-2);
|
|
127
129
|
border-radius: var(--viking-radius-pill);
|
|
128
130
|
background-color: transparent;
|
|
129
|
-
border: 1px solid var(--viking-border);
|
|
130
|
-
cursor:
|
|
131
|
+
border: 1px solid var(--viking-border, var(--border, #243246));
|
|
132
|
+
cursor: pointer;
|
|
131
133
|
transition: var(--viking-transition-colors);
|
|
132
134
|
font-size: var(--viking-font-size);
|
|
133
135
|
font-weight: 500;
|
|
134
|
-
color: var(--viking-text-muted);
|
|
136
|
+
color: var(--viking-text-muted, var(--text-muted, #9aa5b1));
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.viking-usa-badge:focus-visible,
|
|
140
|
+
.usa-badge:focus-visible {
|
|
141
|
+
outline: var(--viking-ring-width, 2px) solid
|
|
142
|
+
var(--viking-ring, var(--focus-ring-color, #38e6f7));
|
|
143
|
+
outline-offset: var(--viking-ring-offset, 2px);
|
|
135
144
|
}
|
|
136
145
|
|
|
137
146
|
.viking-usa-badge:hover,
|
|
138
147
|
.usa-badge:hover {
|
|
139
|
-
background-color: color-mix(
|
|
140
|
-
|
|
141
|
-
|
|
148
|
+
background-color: color-mix(
|
|
149
|
+
in srgb,
|
|
150
|
+
var(--viking-surface, var(--card-bg, #05070f)) 95%,
|
|
151
|
+
var(--viking-accent, var(--color-primary, #12a3a8)) 5%
|
|
152
|
+
);
|
|
153
|
+
border-color: var(--viking-border-strong, var(--viking-border, var(--border, #243246)));
|
|
154
|
+
color: var(--viking-text, var(--text-color, #e5edf5));
|
|
142
155
|
box-shadow: var(--viking-shadow-sm);
|
|
143
156
|
}
|
|
144
157
|
|
|
@@ -12,6 +12,19 @@ viking-icon,
|
|
|
12
12
|
vertical-align: middle;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
[data-viking-icon] {
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
line-height: 1;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[data-viking-icon] svg {
|
|
24
|
+
display: inline-block;
|
|
25
|
+
line-height: 1;
|
|
26
|
+
}
|
|
27
|
+
|
|
15
28
|
.nav-btn,
|
|
16
29
|
.mobile-nav-btn,
|
|
17
30
|
.auth-btn,
|
|
@@ -35,6 +48,8 @@ viking-icon,
|
|
|
35
48
|
.nav-btn viking-app-icon,
|
|
36
49
|
.nav-btn viking-icon,
|
|
37
50
|
.mobile-nav-btn viking-app-icon,
|
|
51
|
+
.nav-btn [data-viking-icon],
|
|
52
|
+
.mobile-nav-btn [data-viking-icon],
|
|
38
53
|
.auth-btn viking-app-icon,
|
|
39
54
|
.mobile-auth-btn viking-app-icon {
|
|
40
55
|
width: var(--viking-icon-size-md, var(--base-font-size));
|
|
@@ -42,6 +57,14 @@ viking-icon,
|
|
|
42
57
|
align-self: center;
|
|
43
58
|
}
|
|
44
59
|
|
|
60
|
+
.nav-btn [data-viking-icon] svg,
|
|
61
|
+
.mobile-nav-btn [data-viking-icon] svg,
|
|
62
|
+
.auth-btn [data-viking-icon] svg,
|
|
63
|
+
.mobile-auth-btn [data-viking-icon] svg {
|
|
64
|
+
width: var(--viking-icon-size-md, var(--base-font-size));
|
|
65
|
+
height: var(--viking-icon-size-md, var(--base-font-size));
|
|
66
|
+
}
|
|
67
|
+
|
|
45
68
|
.theme-toggle-btn viking-app-icon,
|
|
46
69
|
.theme-toggle-btn viking-icon,
|
|
47
70
|
.menu-toggle-btn viking-app-icon,
|