@masmarino/gabarit 1.1.0 → 1.2.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/ACCESSIBILITY.md +55 -22
- package/README.md +295 -60
- package/fesm2022/masmarino-gabarit.mjs +7263 -2907
- package/fesm2022/masmarino-gabarit.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/tokens/_semantic.scss +16 -5
- package/src/lib/tokens/_utilities.scss +54 -15
- package/types/masmarino-gabarit.d.ts +1671 -193
package/package.json
CHANGED
|
@@ -5,8 +5,11 @@
|
|
|
5
5
|
--bg-principal: #ffffff;
|
|
6
6
|
--bg-panel: #f5f5f7;
|
|
7
7
|
--bg-hover: rgba(0, 0, 0, 0.05);
|
|
8
|
+
--bg-track: var(--grey-200);
|
|
8
9
|
|
|
9
10
|
--border-color: #7798b3;
|
|
11
|
+
--gbt-hairline: color-mix(in srgb, var(--border-color) 45%, transparent);
|
|
12
|
+
--gbt-card-border: color-mix(in srgb, var(--border-color) 60%, transparent);
|
|
10
13
|
|
|
11
14
|
--text-primary: var(--grey-900);
|
|
12
15
|
--text-secondary: var(--grey-700);
|
|
@@ -18,20 +21,20 @@
|
|
|
18
21
|
--text-on-error: #ffffff;
|
|
19
22
|
|
|
20
23
|
--color-success-base: var(--green-500);
|
|
21
|
-
--color-success-text: #
|
|
24
|
+
--color-success-text: #195e48;
|
|
22
25
|
--color-success-hover: var(--green-700);
|
|
23
26
|
--color-success-bg: var(--green-100);
|
|
24
27
|
--color-success-bg-text: var(--green-800);
|
|
25
28
|
|
|
26
29
|
--color-warning-base: #c38927;
|
|
27
|
-
--color-warning-text: #
|
|
30
|
+
--color-warning-text: #6f4d16;
|
|
28
31
|
--color-warning-hover: var(--amber-600);
|
|
29
32
|
--color-warning-bg: var(--amber-100);
|
|
30
33
|
--color-warning-bg-text: var(--amber-800);
|
|
31
34
|
|
|
32
35
|
--color-error-base: var(--red-500);
|
|
33
36
|
--color-error-fill: #a82727;
|
|
34
|
-
--color-error-text: #
|
|
37
|
+
--color-error-text: #9e2525;
|
|
35
38
|
--color-error-hover: #8f2121;
|
|
36
39
|
--color-error-bg: var(--red-100);
|
|
37
40
|
--color-error-bg-text: var(--red-800);
|
|
@@ -58,6 +61,10 @@
|
|
|
58
61
|
--site-border-radius-sm: 10px;
|
|
59
62
|
--site-border-radius-lg: 24px;
|
|
60
63
|
|
|
64
|
+
--gbt-control-height-sm: 2rem;
|
|
65
|
+
--gbt-control-height-md: 2.375rem;
|
|
66
|
+
--gbt-control-height-lg: 2.75rem;
|
|
67
|
+
|
|
61
68
|
--site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.06);
|
|
62
69
|
--site-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
63
70
|
--site-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
@@ -66,6 +73,7 @@
|
|
|
66
73
|
--site-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
67
74
|
|
|
68
75
|
--font-family: 'Inter', sans-serif;
|
|
76
|
+
--gbt-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
|
|
69
77
|
}
|
|
70
78
|
|
|
71
79
|
@mixin dark-tokens {
|
|
@@ -76,7 +84,10 @@
|
|
|
76
84
|
--bg-principal: var(--grey-900);
|
|
77
85
|
--bg-panel: #0f1c26;
|
|
78
86
|
--bg-hover: rgba(255, 255, 255, 0.06);
|
|
87
|
+
--bg-track: var(--grey-800);
|
|
79
88
|
--border-color: #436a80;
|
|
89
|
+
--gbt-hairline: color-mix(in srgb, var(--border-color) 45%, transparent);
|
|
90
|
+
--gbt-card-border: color-mix(in srgb, var(--border-color) 60%, transparent);
|
|
80
91
|
|
|
81
92
|
--text-primary: var(--grey-50);
|
|
82
93
|
|
|
@@ -88,7 +99,7 @@
|
|
|
88
99
|
--text-on-error: var(--grey-900);
|
|
89
100
|
|
|
90
101
|
--color-success-base: var(--green-400);
|
|
91
|
-
--color-success-text: #
|
|
102
|
+
--color-success-text: #56b693;
|
|
92
103
|
--color-success-hover: var(--green-500);
|
|
93
104
|
--color-success-bg: var(--green-900);
|
|
94
105
|
--color-success-bg-text: var(--green-100);
|
|
@@ -101,7 +112,7 @@
|
|
|
101
112
|
|
|
102
113
|
--color-error-base: var(--red-400);
|
|
103
114
|
--color-error-fill: #e98989;
|
|
104
|
-
--color-error-text: #
|
|
115
|
+
--color-error-text: #e98b8b;
|
|
105
116
|
--color-error-hover: #eea3a3;
|
|
106
117
|
--color-error-bg: var(--red-900);
|
|
107
118
|
--color-error-bg-text: var(--red-100);
|
|
@@ -123,33 +123,56 @@
|
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
+
@mixin flyout {
|
|
127
|
+
position: absolute;
|
|
128
|
+
left: calc(100% + 1.25rem);
|
|
129
|
+
top: 50%;
|
|
130
|
+
transform: translateY(-50%);
|
|
131
|
+
width: auto;
|
|
132
|
+
overflow: visible;
|
|
133
|
+
opacity: 1;
|
|
134
|
+
z-index: 1015;
|
|
135
|
+
padding: 0.375rem 0.625rem;
|
|
136
|
+
background: var(--bg-principal);
|
|
137
|
+
color: var(--text-primary);
|
|
138
|
+
border: 1px solid var(--border-color);
|
|
139
|
+
border-radius: var(--site-border-radius-sm);
|
|
140
|
+
box-shadow: var(--site-shadow-md);
|
|
141
|
+
|
|
142
|
+
&::before {
|
|
143
|
+
content: '';
|
|
144
|
+
position: absolute;
|
|
145
|
+
top: 0;
|
|
146
|
+
bottom: 0;
|
|
147
|
+
right: 100%;
|
|
148
|
+
width: 1.5rem;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
126
152
|
@media (min-width: 769px) {
|
|
127
153
|
.gbt-app-shell__nav--collapsed {
|
|
128
154
|
.gbt-app-shell__link {
|
|
155
|
+
overflow: visible;
|
|
156
|
+
|
|
129
157
|
> span {
|
|
130
158
|
display: inline-block;
|
|
131
159
|
width: 0;
|
|
132
160
|
overflow: hidden;
|
|
133
161
|
white-space: nowrap;
|
|
134
162
|
opacity: 0;
|
|
135
|
-
transition:
|
|
163
|
+
transition:
|
|
164
|
+
opacity 0.15s ease,
|
|
165
|
+
width 0.2s ease;
|
|
136
166
|
}
|
|
137
167
|
|
|
138
|
-
&:hover > span,
|
|
139
168
|
&:focus-visible > span {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
margin-left: 0.625rem;
|
|
148
|
-
padding: 0.375rem 0.625rem;
|
|
149
|
-
background: var(--bg-principal);
|
|
150
|
-
border: 1px solid var(--border-color);
|
|
151
|
-
border-radius: var(--site-border-radius-sm);
|
|
152
|
-
box-shadow: var(--site-shadow-md);
|
|
169
|
+
@include flyout;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@media (hover: hover) {
|
|
173
|
+
&:hover > span {
|
|
174
|
+
@include flyout;
|
|
175
|
+
}
|
|
153
176
|
}
|
|
154
177
|
|
|
155
178
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -169,6 +192,22 @@
|
|
|
169
192
|
padding-inline: 1.5rem;
|
|
170
193
|
}
|
|
171
194
|
|
|
195
|
+
.gbt-app-shell-nav-group__panel .gbt-app-shell__link {
|
|
196
|
+
padding-left: 2rem;
|
|
197
|
+
font-size: 0.8125rem;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.gbt-app-shell-nav-group:has(.gbt-app-shell__link[aria-current]) > .gbt-app-shell__link {
|
|
201
|
+
color: var(--text-primary);
|
|
202
|
+
font-weight: 600;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
@media (min-width: 769px) {
|
|
206
|
+
.gbt-app-shell__nav--collapsed .gbt-app-shell-nav-group__panel .gbt-app-shell__link {
|
|
207
|
+
padding-left: 0.75rem;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
172
211
|
.gbt-menu__item {
|
|
173
212
|
box-sizing: border-box;
|
|
174
213
|
display: flex;
|