nve-designsystem 0.1.76 → 0.1.78
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/components/nve-button/nve-button.styles.js +37 -31
- package/css/nve.css +1 -1
- package/css/nve_dark.css +3 -3
- package/css/varsom.css +1 -1
- package/css/varsom_dark.css +3 -3
- package/custom-elements.json +72 -72
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { i as t } from "../../chunks/lit-element.js";
|
|
2
|
-
const
|
|
2
|
+
const n = t`
|
|
3
3
|
/* kan ikke bruke gap fordi den lager rom mellom slots selv om de er tomme */
|
|
4
4
|
/* derfor setter margin på ::part(label) og substraherer margin verdi i horizontal padding i selve .button klassen */
|
|
5
5
|
.button {
|
|
@@ -7,7 +7,7 @@ const a = t`
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
position: relative;
|
|
10
|
-
border:none;
|
|
10
|
+
border: none;
|
|
11
11
|
min-width: 119px;
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -102,57 +102,63 @@ const a = t`
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
/* PRIMARY */
|
|
105
|
-
.button--standard.button
|
|
106
|
-
background-color:
|
|
107
|
-
border-color: var(--interactive-primary-background-default);
|
|
105
|
+
:host([variant='primary']) .button--standard.button {
|
|
106
|
+
background-color: var(--interactive-primary-background-default);
|
|
108
107
|
color: var(--interactive-primary-foreground-default);
|
|
108
|
+
border: none;
|
|
109
109
|
}
|
|
110
|
-
.button--standard.button
|
|
111
|
-
.button--standard.button
|
|
112
|
-
|
|
113
|
-
background: var(--interactive-primary-background-hover, #3C3F44);
|
|
110
|
+
:host([variant='primary']) .button--standard.button:hover:not(.button--disabled),
|
|
111
|
+
:host([variant='primary']) .button--standard.button:active:not(.button--disabled) {
|
|
112
|
+
background: var(--interactive-primary-background-hover);
|
|
114
113
|
color: var(--interactive-primary-foreground-default);
|
|
115
114
|
}
|
|
116
115
|
|
|
117
|
-
/* SECONDARY */
|
|
118
|
-
.button--standard.button
|
|
119
|
-
|
|
116
|
+
/* DEFAULT, aka SECONDARY */
|
|
117
|
+
:host:not([variant]) .button--standard.button,
|
|
118
|
+
:host([variant='secondary']) .button--standard.button,
|
|
119
|
+
:host([variant='default']) .button--standard.button {
|
|
120
120
|
background: var(--interactive-secondary-background-default);
|
|
121
121
|
color: var(--interactive-secondary-foreground-default);
|
|
122
|
-
border: none
|
|
122
|
+
border: none;
|
|
123
123
|
}
|
|
124
|
-
.button--standard.button
|
|
125
|
-
|
|
124
|
+
:host:not([variant]) .button--standard.button:hover:not(.button--disabled),
|
|
125
|
+
:host([variant='secondary']) .button--standard.button:hover:not(.button--disabled),
|
|
126
|
+
:host([variant='default']) .button--standard.button:hover:not(.button--disabled) {
|
|
126
127
|
background: var(--interactive-secondary-background-hover);
|
|
127
|
-
color: var(--
|
|
128
|
+
color: var(--interactive-secondary-foreground-hover);
|
|
128
129
|
}
|
|
129
130
|
|
|
130
|
-
/* GHOST */
|
|
131
|
-
.button
|
|
132
|
-
.button
|
|
131
|
+
/* TEXT aka GHOST */
|
|
132
|
+
:host([variant='text']) .button.button--standard,
|
|
133
|
+
:host([variant='ghost']) .button.button--standard {
|
|
133
134
|
color: var(--interactive-ghost-foreground-default);
|
|
134
135
|
background-color: transparent;
|
|
135
|
-
}
|
|
136
|
-
.button--standard.button--neutral {
|
|
137
136
|
border-radius: var(--border-radius-small, 4px);
|
|
138
|
-
border:
|
|
137
|
+
border: none;
|
|
139
138
|
}
|
|
140
|
-
.button
|
|
141
|
-
|
|
139
|
+
:host([variant='text']) .button.button--standard:hover:not(.button--disabled),
|
|
140
|
+
:host([variant='ghost']) .button.button--standard:hover:not(.button--disabled) {
|
|
141
|
+
background-color: var(--interactive-ghost-background-hover);
|
|
142
142
|
color: var(--interactive-ghost-foreground-hover);
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
/* OUTLINE */
|
|
146
|
-
.button
|
|
147
|
-
|
|
145
|
+
/* NEUTRAL, aka OUTLINE */
|
|
146
|
+
:host([variant='neutral']) .button.button--standard,
|
|
147
|
+
:host([variant='outline']) .button.button--standard,
|
|
148
|
+
:host([outline]) .button.button {
|
|
148
149
|
color: var(--interactive-outlined-foreground-default);
|
|
149
150
|
border-color: var(--interactive-outlined-border-default);
|
|
151
|
+
border-width: var(--border-width-default);
|
|
152
|
+
border-style: solid;
|
|
150
153
|
background-color: transparent;
|
|
151
154
|
}
|
|
152
|
-
.button
|
|
153
|
-
|
|
155
|
+
:host([variant='neutral']) .button.button--standard:hover:not(.button--disabled),
|
|
156
|
+
:host([variant='outline']) .button.button--standard:hover:not(.button--disabled),
|
|
157
|
+
:host([outline]) .button.button:hover:not(.button--disabled) {
|
|
154
158
|
border-color: var(--interactive-outlined-border-hover);
|
|
155
|
-
color: var(--interactive-outlined-foreground-
|
|
159
|
+
color: var(--interactive-outlined-foreground-hover);
|
|
160
|
+
border-width: var(--border-width-default);
|
|
161
|
+
border-style: solid;
|
|
156
162
|
background-color: transparent;
|
|
157
163
|
}
|
|
158
164
|
|
|
@@ -164,5 +170,5 @@ const a = t`
|
|
|
164
170
|
}
|
|
165
171
|
`;
|
|
166
172
|
export {
|
|
167
|
-
|
|
173
|
+
n as default
|
|
168
174
|
};
|
package/css/nve.css
CHANGED
package/css/nve_dark.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 16 Jul 2024 11:27:10 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@import './global.css';
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
--neutrals-background-primary-contrast: var(--grey-850);
|
|
110
110
|
--brand-deep: var(--nve-brand-700);
|
|
111
111
|
--brand-light: var(--nve-brand-500);
|
|
112
|
-
--brand-primary: var(--nve-brand-300);
|
|
113
|
-
}
|
|
112
|
+
--brand-primary: var(--nve-brand-300);
|
|
113
|
+
}
|
|
114
114
|
|
|
115
115
|
}
|
package/css/varsom.css
CHANGED
package/css/varsom_dark.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 16 Jul 2024 11:27:10 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@import './global.css';
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
--neutrals-background-primary-contrast: var(--varsom-blue-950);
|
|
110
110
|
--brand-deep: var(--varsom-brand-600);
|
|
111
111
|
--brand-light: var(--varsom-brand-000);
|
|
112
|
-
--brand-primary: var(--varsom-brand-500);
|
|
113
|
-
}
|
|
112
|
+
--brand-primary: var(--varsom-brand-500);
|
|
113
|
+
}
|
|
114
114
|
|
|
115
115
|
}
|
package/custom-elements.json
CHANGED
|
@@ -343,77 +343,6 @@
|
|
|
343
343
|
}
|
|
344
344
|
]
|
|
345
345
|
},
|
|
346
|
-
{
|
|
347
|
-
"kind": "javascript-module",
|
|
348
|
-
"path": "components/nve-badge/nve-badge.js",
|
|
349
|
-
"declarations": [
|
|
350
|
-
{
|
|
351
|
-
"kind": "class",
|
|
352
|
-
"description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
|
|
353
|
-
"name": "NveBadge",
|
|
354
|
-
"members": [
|
|
355
|
-
{
|
|
356
|
-
"kind": "field",
|
|
357
|
-
"name": "styles",
|
|
358
|
-
"type": {
|
|
359
|
-
"text": "array"
|
|
360
|
-
},
|
|
361
|
-
"static": true,
|
|
362
|
-
"default": "[styles]"
|
|
363
|
-
},
|
|
364
|
-
{
|
|
365
|
-
"kind": "field",
|
|
366
|
-
"name": "variant",
|
|
367
|
-
"type": {
|
|
368
|
-
"text": "string"
|
|
369
|
-
},
|
|
370
|
-
"default": "'primary'",
|
|
371
|
-
"description": "= primary, success, neutral, warning, danger, brand"
|
|
372
|
-
},
|
|
373
|
-
{
|
|
374
|
-
"kind": "field",
|
|
375
|
-
"name": "size",
|
|
376
|
-
"type": {
|
|
377
|
-
"text": "string"
|
|
378
|
-
},
|
|
379
|
-
"default": "'medium'",
|
|
380
|
-
"description": "= small, medium eller large"
|
|
381
|
-
},
|
|
382
|
-
{
|
|
383
|
-
"kind": "field",
|
|
384
|
-
"name": "low",
|
|
385
|
-
"type": {
|
|
386
|
-
"text": "boolean"
|
|
387
|
-
},
|
|
388
|
-
"default": "false",
|
|
389
|
-
"description": "= gir lysere bakgrunnsfarge"
|
|
390
|
-
},
|
|
391
|
-
{
|
|
392
|
-
"kind": "method",
|
|
393
|
-
"name": "render"
|
|
394
|
-
}
|
|
395
|
-
],
|
|
396
|
-
"superclass": {
|
|
397
|
-
"name": "LitElement",
|
|
398
|
-
"package": "lit"
|
|
399
|
-
},
|
|
400
|
-
"tagNameWithoutPrefix": "badge",
|
|
401
|
-
"tagName": "nve-badge",
|
|
402
|
-
"customElement": true,
|
|
403
|
-
"jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {boolean} low = gir lysere bakgrunnsfarge\n */"
|
|
404
|
-
}
|
|
405
|
-
],
|
|
406
|
-
"exports": [
|
|
407
|
-
{
|
|
408
|
-
"kind": "js",
|
|
409
|
-
"name": "default",
|
|
410
|
-
"declaration": {
|
|
411
|
-
"name": "NveBadge",
|
|
412
|
-
"module": "components/nve-badge/nve-badge.js"
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
]
|
|
416
|
-
},
|
|
417
346
|
{
|
|
418
347
|
"kind": "javascript-module",
|
|
419
348
|
"path": "components/nve-button/nve-button.js",
|
|
@@ -1230,6 +1159,77 @@
|
|
|
1230
1159
|
}
|
|
1231
1160
|
]
|
|
1232
1161
|
},
|
|
1162
|
+
{
|
|
1163
|
+
"kind": "javascript-module",
|
|
1164
|
+
"path": "components/nve-badge/nve-badge.js",
|
|
1165
|
+
"declarations": [
|
|
1166
|
+
{
|
|
1167
|
+
"kind": "class",
|
|
1168
|
+
"description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
|
|
1169
|
+
"name": "NveBadge",
|
|
1170
|
+
"members": [
|
|
1171
|
+
{
|
|
1172
|
+
"kind": "field",
|
|
1173
|
+
"name": "styles",
|
|
1174
|
+
"type": {
|
|
1175
|
+
"text": "array"
|
|
1176
|
+
},
|
|
1177
|
+
"static": true,
|
|
1178
|
+
"default": "[styles]"
|
|
1179
|
+
},
|
|
1180
|
+
{
|
|
1181
|
+
"kind": "field",
|
|
1182
|
+
"name": "variant",
|
|
1183
|
+
"type": {
|
|
1184
|
+
"text": "string"
|
|
1185
|
+
},
|
|
1186
|
+
"default": "'primary'",
|
|
1187
|
+
"description": "= primary, success, neutral, warning, danger, brand"
|
|
1188
|
+
},
|
|
1189
|
+
{
|
|
1190
|
+
"kind": "field",
|
|
1191
|
+
"name": "size",
|
|
1192
|
+
"type": {
|
|
1193
|
+
"text": "string"
|
|
1194
|
+
},
|
|
1195
|
+
"default": "'medium'",
|
|
1196
|
+
"description": "= small, medium eller large"
|
|
1197
|
+
},
|
|
1198
|
+
{
|
|
1199
|
+
"kind": "field",
|
|
1200
|
+
"name": "low",
|
|
1201
|
+
"type": {
|
|
1202
|
+
"text": "boolean"
|
|
1203
|
+
},
|
|
1204
|
+
"default": "false",
|
|
1205
|
+
"description": "= gir lysere bakgrunnsfarge"
|
|
1206
|
+
},
|
|
1207
|
+
{
|
|
1208
|
+
"kind": "method",
|
|
1209
|
+
"name": "render"
|
|
1210
|
+
}
|
|
1211
|
+
],
|
|
1212
|
+
"superclass": {
|
|
1213
|
+
"name": "LitElement",
|
|
1214
|
+
"package": "lit"
|
|
1215
|
+
},
|
|
1216
|
+
"tagNameWithoutPrefix": "badge",
|
|
1217
|
+
"tagName": "nve-badge",
|
|
1218
|
+
"customElement": true,
|
|
1219
|
+
"jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {boolean} low = gir lysere bakgrunnsfarge\n */"
|
|
1220
|
+
}
|
|
1221
|
+
],
|
|
1222
|
+
"exports": [
|
|
1223
|
+
{
|
|
1224
|
+
"kind": "js",
|
|
1225
|
+
"name": "default",
|
|
1226
|
+
"declaration": {
|
|
1227
|
+
"name": "NveBadge",
|
|
1228
|
+
"module": "components/nve-badge/nve-badge.js"
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
]
|
|
1232
|
+
},
|
|
1233
1233
|
{
|
|
1234
1234
|
"kind": "javascript-module",
|
|
1235
1235
|
"path": "components/nve-checkbox/nve-checkbox.js",
|
|
@@ -9651,7 +9651,7 @@
|
|
|
9651
9651
|
"package": {
|
|
9652
9652
|
"name": "nve-designsystem",
|
|
9653
9653
|
"description": "Designsystem for NVE",
|
|
9654
|
-
"version": "0.1.
|
|
9654
|
+
"version": "0.1.77",
|
|
9655
9655
|
"author": {
|
|
9656
9656
|
"name": "NVE",
|
|
9657
9657
|
"email": "nve@nve.no"
|