@navikt/aksel-stylelint 3.4.2 → 4.0.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/dist/deprecations.js +10 -0
- package/dist/index.css +461 -1
- package/dist/rules/aksel-design-token-exists/index.test.js +1 -1
- package/dist/rules/aksel-no-deprecated-classes/index.js +6 -1
- package/dist/rules/aksel-no-deprecated-classes/index.test.js +9 -0
- package/dist/tokens.json +42 -0
- package/dist/utils.js +0 -2
- package/package.json +4 -5
- package/dist/internal-tokens.json +0 -48
package/dist/deprecations.js
CHANGED
|
@@ -6,4 +6,14 @@ exports.deprecations = [
|
|
|
6
6
|
classes: ["navdsi-deprecated-example", "navdsi-other-deprecated-example"],
|
|
7
7
|
message: "Removed in vX.X.X, see documentation [link] for more information",
|
|
8
8
|
},
|
|
9
|
+
{
|
|
10
|
+
classes: [
|
|
11
|
+
"navdsi-dropdown",
|
|
12
|
+
"navdsi-copy-to-clipboard",
|
|
13
|
+
"navdsi-header",
|
|
14
|
+
"navdsi-timeline",
|
|
15
|
+
],
|
|
16
|
+
message: "Class were moved to '@navikt/ds-css' and renamed with 'navds'-prefix in v4.0.0. Docs: https://aksel.nav.no/grunnleggende/kode/endringslogg#h728704adeb59.",
|
|
17
|
+
deprecatePrefix: true,
|
|
18
|
+
},
|
|
9
19
|
];
|
package/dist/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/**
|
|
3
3
|
* Do not edit directly
|
|
4
|
-
* Generated on
|
|
4
|
+
* Generated on Mon, 05 Jun 2023 14:08:10 GMT
|
|
5
5
|
*/
|
|
6
6
|
:root, :host {
|
|
7
7
|
--a-spacing-05: 0.125rem;
|
|
@@ -2016,6 +2016,72 @@ body,
|
|
|
2016
2016
|
cursor: not-allowed;
|
|
2017
2017
|
opacity: 0.3;
|
|
2018
2018
|
}
|
|
2019
|
+
.navds-dropdown__menu {
|
|
2020
|
+
overflow: hidden;
|
|
2021
|
+
padding: var(--a-spacing-2) 0;
|
|
2022
|
+
color: var(--ac-dropdown-text, var(--a-text-default));
|
|
2023
|
+
width: 27ch;
|
|
2024
|
+
max-height: 616px;
|
|
2025
|
+
overflow-y: auto;
|
|
2026
|
+
}
|
|
2027
|
+
.navds-dropdown__divider {
|
|
2028
|
+
margin: var(--a-spacing-3) 0;
|
|
2029
|
+
border: none;
|
|
2030
|
+
border-bottom: 1px solid var(--a-border-divider);
|
|
2031
|
+
}
|
|
2032
|
+
.navds-dropdown__menu > :not(.navds-dropdown__divider):not(.navds-dropdown__list) {
|
|
2033
|
+
margin: 0 var(--a-spacing-4) var(--a-spacing-3);
|
|
2034
|
+
}
|
|
2035
|
+
.navds-dropdown__list {
|
|
2036
|
+
margin: 0;
|
|
2037
|
+
padding: 0;
|
|
2038
|
+
list-style: none;
|
|
2039
|
+
}
|
|
2040
|
+
.navds-dropdown__list-item {
|
|
2041
|
+
margin: 0;
|
|
2042
|
+
}
|
|
2043
|
+
.navds-dropdown__list-heading {
|
|
2044
|
+
margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
|
|
2045
|
+
}
|
|
2046
|
+
.navds-dropdown__item {
|
|
2047
|
+
border: none;
|
|
2048
|
+
margin: 0;
|
|
2049
|
+
overflow: visible;
|
|
2050
|
+
background: transparent;
|
|
2051
|
+
color: var(--ac-dropdown-item-text, var(--a-text-action));
|
|
2052
|
+
font: inherit;
|
|
2053
|
+
text-decoration: none;
|
|
2054
|
+
text-align: left;
|
|
2055
|
+
cursor: pointer;
|
|
2056
|
+
width: 100%;
|
|
2057
|
+
display: flex;
|
|
2058
|
+
align-items: center;
|
|
2059
|
+
gap: var(--a-spacing-2);
|
|
2060
|
+
padding: var(--a-spacing-1) var(--a-spacing-4);
|
|
2061
|
+
}
|
|
2062
|
+
.navds-dropdown__item:hover {
|
|
2063
|
+
background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
|
|
2064
|
+
}
|
|
2065
|
+
.navds-dropdown__item:active {
|
|
2066
|
+
background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
|
|
2067
|
+
color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
|
|
2068
|
+
}
|
|
2069
|
+
.navds-dropdown__item:focus-visible {
|
|
2070
|
+
outline: none;
|
|
2071
|
+
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
|
2072
|
+
}
|
|
2073
|
+
@supports not selector(:focus-visible) {
|
|
2074
|
+
.navds-dropdown__item:focus {
|
|
2075
|
+
outline: none;
|
|
2076
|
+
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
|
2077
|
+
}
|
|
2078
|
+
}
|
|
2079
|
+
.navds-dropdown__item:disabled {
|
|
2080
|
+
color: var(--ac-dropdown-item-text, var(--a-text-action));
|
|
2081
|
+
opacity: 0.3;
|
|
2082
|
+
background: transparent;
|
|
2083
|
+
cursor: not-allowed;
|
|
2084
|
+
}
|
|
2019
2085
|
.navds-expansioncard {
|
|
2020
2086
|
--__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
|
|
2021
2087
|
--__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
|
|
@@ -3144,6 +3210,82 @@ body,
|
|
|
3144
3210
|
display: inherit;
|
|
3145
3211
|
}
|
|
3146
3212
|
}
|
|
3213
|
+
.navds-internalheader {
|
|
3214
|
+
display: flex;
|
|
3215
|
+
align-self: stretch;
|
|
3216
|
+
background: var(--ac-internalheader-bg, var(--a-surface-inverted));
|
|
3217
|
+
min-height: var(--a-spacing-12);
|
|
3218
|
+
|
|
3219
|
+
--navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
|
|
3220
|
+
}
|
|
3221
|
+
.navds-internalheader__title {
|
|
3222
|
+
border: none;
|
|
3223
|
+
overflow: visible;
|
|
3224
|
+
background: transparent;
|
|
3225
|
+
font: inherit;
|
|
3226
|
+
font-weight: var(--a-font-weight-bold);
|
|
3227
|
+
line-height: normal;
|
|
3228
|
+
text-align: left;
|
|
3229
|
+
padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
|
|
3230
|
+
border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
|
|
3231
|
+
display: flex;
|
|
3232
|
+
align-items: center;
|
|
3233
|
+
text-decoration: none;
|
|
3234
|
+
margin: 0;
|
|
3235
|
+
color: var(--ac-internalheader-text, var(--a-text-on-inverted));
|
|
3236
|
+
}
|
|
3237
|
+
button.navds-internalheader__title {
|
|
3238
|
+
cursor: pointer;
|
|
3239
|
+
}
|
|
3240
|
+
.navds-internalheader__user {
|
|
3241
|
+
padding: 0 var(--a-spacing-5);
|
|
3242
|
+
border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
|
|
3243
|
+
display: flex;
|
|
3244
|
+
align-items: center;
|
|
3245
|
+
}
|
|
3246
|
+
.navds-internalheader__button {
|
|
3247
|
+
border: none;
|
|
3248
|
+
margin: 0;
|
|
3249
|
+
padding: 0 var(--a-spacing-3);
|
|
3250
|
+
overflow: visible;
|
|
3251
|
+
background: transparent;
|
|
3252
|
+
font: inherit;
|
|
3253
|
+
line-height: normal;
|
|
3254
|
+
cursor: pointer;
|
|
3255
|
+
text-align: left;
|
|
3256
|
+
display: flex;
|
|
3257
|
+
align-items: center;
|
|
3258
|
+
justify-self: center;
|
|
3259
|
+
gap: var(--a-spacing-2);
|
|
3260
|
+
border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
|
|
3261
|
+
color: var(--ac-internalheader-text, var(--a-text-on-inverted));
|
|
3262
|
+
}
|
|
3263
|
+
a.navds-internalheader__title:hover,
|
|
3264
|
+
button.navds-internalheader__title:hover,
|
|
3265
|
+
.navds-internalheader__button:hover {
|
|
3266
|
+
background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
|
|
3267
|
+
}
|
|
3268
|
+
.navds-internalheader__title:focus-visible,
|
|
3269
|
+
.navds-internalheader__button:focus-visible {
|
|
3270
|
+
box-shadow: var(--navds-internalheader-focus);
|
|
3271
|
+
outline: none;
|
|
3272
|
+
}
|
|
3273
|
+
@supports not selector(:focus-visible) {
|
|
3274
|
+
.navds-internalheader__title:focus,
|
|
3275
|
+
.navds-internalheader__button:focus {
|
|
3276
|
+
box-shadow: var(--navds-internalheader-focus);
|
|
3277
|
+
outline: none;
|
|
3278
|
+
}
|
|
3279
|
+
}
|
|
3280
|
+
a.navds-internalheader__title:active,
|
|
3281
|
+
button.navds-internalheader__title:active,
|
|
3282
|
+
.navds-internalheader__button:active {
|
|
3283
|
+
background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
|
|
3284
|
+
}
|
|
3285
|
+
.navds-internalheader__user-button {
|
|
3286
|
+
padding-left: var(--a-spacing-5);
|
|
3287
|
+
gap: var(--a-spacing-4);
|
|
3288
|
+
}
|
|
3147
3289
|
.navds-link {
|
|
3148
3290
|
color: var(--ac-link-text, var(--a-text-action));
|
|
3149
3291
|
text-decoration: underline;
|
|
@@ -3820,6 +3962,324 @@ body,
|
|
|
3820
3962
|
background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
|
|
3821
3963
|
color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
|
|
3822
3964
|
}
|
|
3965
|
+
.navds-timeline {
|
|
3966
|
+
position: relative;
|
|
3967
|
+
display: grid;
|
|
3968
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
3969
|
+
width: 100%;
|
|
3970
|
+
min-width: fit-content;
|
|
3971
|
+
align-items: center;
|
|
3972
|
+
}
|
|
3973
|
+
.navds-timeline__axislabels {
|
|
3974
|
+
position: relative;
|
|
3975
|
+
height: 1rem;
|
|
3976
|
+
box-sizing: content-box;
|
|
3977
|
+
grid-column: 2;
|
|
3978
|
+
}
|
|
3979
|
+
.navds-timeline__row-label {
|
|
3980
|
+
white-space: nowrap;
|
|
3981
|
+
width: auto;
|
|
3982
|
+
margin-right: var(--a-spacing-4);
|
|
3983
|
+
grid-column: 1;
|
|
3984
|
+
min-height: 1.5rem;
|
|
3985
|
+
display: flex;
|
|
3986
|
+
align-items: center;
|
|
3987
|
+
gap: var(--a-spacing-2);
|
|
3988
|
+
}
|
|
3989
|
+
.navds-timeline__row-label:where(:nth-last-child(2)) {
|
|
3990
|
+
align-self: flex-end;
|
|
3991
|
+
}
|
|
3992
|
+
.navds-timeline__axislabels-label {
|
|
3993
|
+
position: absolute;
|
|
3994
|
+
color: var(--ac-timeline-axislabel-text, var(--a-text-subtle));
|
|
3995
|
+
white-space: nowrap;
|
|
3996
|
+
}
|
|
3997
|
+
.navds-timeline__row {
|
|
3998
|
+
display: flex;
|
|
3999
|
+
background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
|
|
4000
|
+
margin: var(--a-spacing-4) 0;
|
|
4001
|
+
grid-column: 2;
|
|
4002
|
+
}
|
|
4003
|
+
.navds-timeline__row--active {
|
|
4004
|
+
background: var(--ac-timeline-row-active-bg, var(--a-surface-selected));
|
|
4005
|
+
}
|
|
4006
|
+
.navds-timeline__row:last-of-type {
|
|
4007
|
+
margin-bottom: 0;
|
|
4008
|
+
}
|
|
4009
|
+
.navds-timeline__row-periods {
|
|
4010
|
+
min-height: 1.5rem;
|
|
4011
|
+
position: relative;
|
|
4012
|
+
width: 100%;
|
|
4013
|
+
margin: 0;
|
|
4014
|
+
}
|
|
4015
|
+
.navds-timeline__row-periods > li {
|
|
4016
|
+
list-style-type: none;
|
|
4017
|
+
}
|
|
4018
|
+
.navds-timeline__period {
|
|
4019
|
+
height: 100%;
|
|
4020
|
+
border-radius: var(--a-border-radius-full);
|
|
4021
|
+
position: absolute;
|
|
4022
|
+
padding: 0;
|
|
4023
|
+
display: flex;
|
|
4024
|
+
align-items: center;
|
|
4025
|
+
z-index: 2;
|
|
4026
|
+
border: none;
|
|
4027
|
+
font-size: 1rem;
|
|
4028
|
+
}
|
|
4029
|
+
.navds-timeline__period--inner {
|
|
4030
|
+
margin: 0 var(--a-spacing-1);
|
|
4031
|
+
overflow: hidden;
|
|
4032
|
+
white-space: nowrap;
|
|
4033
|
+
text-overflow: clip;
|
|
4034
|
+
text-align: left;
|
|
4035
|
+
display: flex;
|
|
4036
|
+
align-items: center;
|
|
4037
|
+
}
|
|
4038
|
+
.navds-timeline__period--inner svg {
|
|
4039
|
+
flex-shrink: 0;
|
|
4040
|
+
}
|
|
4041
|
+
.navds-timeline__period--clickable {
|
|
4042
|
+
cursor: pointer;
|
|
4043
|
+
}
|
|
4044
|
+
.navds-timeline__period--success {
|
|
4045
|
+
background: var(--ac-timeline-period-success-bg, var(--a-surface-success-subtle));
|
|
4046
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-period-success-border, var(--a-border-success));
|
|
4047
|
+
}
|
|
4048
|
+
.navds-timeline__period--success.navds-timeline__period--clickable:hover {
|
|
4049
|
+
background: var(--a-surface-success-subtle-hover);
|
|
4050
|
+
background: var(--ac-timeline-period-success-bg-hover, var(--a-surface-success-subtle-hover));
|
|
4051
|
+
}
|
|
4052
|
+
.navds-timeline__period--warning {
|
|
4053
|
+
background: var(--ac-timeline-period-warning-bg, var(--a-surface-warning-subtle));
|
|
4054
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-period-warning-border, var(--a-border-warning));
|
|
4055
|
+
}
|
|
4056
|
+
.navds-timeline__period--warning.navds-timeline__period--clickable:hover {
|
|
4057
|
+
background: var(--ac-timeline-period-warning-bg-hover, var(--a-surface-warning-subtle-hover));
|
|
4058
|
+
}
|
|
4059
|
+
.navds-timeline__period--danger {
|
|
4060
|
+
background: var(--ac-timeline-period-danger-bg, var(--a-surface-danger-subtle));
|
|
4061
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-period-danger-border, var(--a-border-danger));
|
|
4062
|
+
}
|
|
4063
|
+
.navds-timeline__period--danger.navds-timeline__period--clickable:hover {
|
|
4064
|
+
background: var(--ac-timeline-period-danger-bg-hover, var(--a-surface-danger-subtle-hover));
|
|
4065
|
+
}
|
|
4066
|
+
.navds-timeline__period--info {
|
|
4067
|
+
background: var(--ac-timeline-period-info-bg, var(--a-surface-info-subtle));
|
|
4068
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-period-info-border, var(--a-border-info));
|
|
4069
|
+
}
|
|
4070
|
+
.navds-timeline__period--info.navds-timeline__period--clickable:hover {
|
|
4071
|
+
background: var(--ac-timeline-period-info-bg-hover, var(--a-surface-info-subtle-hover));
|
|
4072
|
+
}
|
|
4073
|
+
.navds-timeline__period--neutral {
|
|
4074
|
+
background: var(--ac-timeline-period-neutral-bg, var(--a-bg-subtle));
|
|
4075
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-period-neutral-border, var(--a-border-default));
|
|
4076
|
+
}
|
|
4077
|
+
.navds-timeline__period--neutral.navds-timeline__period--clickable:hover {
|
|
4078
|
+
background: var(--ac-timeline-period-neutral-bg-hover, var(--a-gray-200));
|
|
4079
|
+
}
|
|
4080
|
+
.navds-timeline__period--connected-both {
|
|
4081
|
+
border-radius: 0;
|
|
4082
|
+
}
|
|
4083
|
+
.navds-timeline__period--connected-right {
|
|
4084
|
+
border-bottom-right-radius: 0;
|
|
4085
|
+
border-top-right-radius: 0;
|
|
4086
|
+
}
|
|
4087
|
+
.navds-timeline__period--connected-left {
|
|
4088
|
+
border-bottom-left-radius: 0;
|
|
4089
|
+
border-top-left-radius: 0;
|
|
4090
|
+
}
|
|
4091
|
+
.navds-timeline__period--selected {
|
|
4092
|
+
box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected));
|
|
4093
|
+
z-index: 3;
|
|
4094
|
+
}
|
|
4095
|
+
.navds-timeline__pin-wrapper {
|
|
4096
|
+
position: absolute;
|
|
4097
|
+
grid-column: 2;
|
|
4098
|
+
top: 0;
|
|
4099
|
+
z-index: 1;
|
|
4100
|
+
height: 100%;
|
|
4101
|
+
display: flex;
|
|
4102
|
+
flex-direction: column-reverse;
|
|
4103
|
+
isolation: isolate;
|
|
4104
|
+
|
|
4105
|
+
--navdsc-timeline-pin-size: 0.9rem;
|
|
4106
|
+
}
|
|
4107
|
+
.navds-timeline__pin-button {
|
|
4108
|
+
border: none;
|
|
4109
|
+
cursor: pointer;
|
|
4110
|
+
background: var(--a-surface-default);
|
|
4111
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
4112
|
+
0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
|
|
4113
|
+
z-index: 2;
|
|
4114
|
+
border-radius: var(--a-border-radius-full);
|
|
4115
|
+
padding: 3.5px;
|
|
4116
|
+
position: relative;
|
|
4117
|
+
}
|
|
4118
|
+
.navds-timeline__pin-button::before {
|
|
4119
|
+
content: "";
|
|
4120
|
+
inset: 0;
|
|
4121
|
+
position: absolute;
|
|
4122
|
+
width: 25px;
|
|
4123
|
+
height: 25px;
|
|
4124
|
+
border-radius: var(--a-border-radius-full);
|
|
4125
|
+
left: calc(-12.5px + 3.5px);
|
|
4126
|
+
top: calc(-12.5px + 3.5px);
|
|
4127
|
+
}
|
|
4128
|
+
.navds-timeline__pin-button:focus-visible {
|
|
4129
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
4130
|
+
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
|
|
4131
|
+
0 0 0 6px var(--a-border-focus);
|
|
4132
|
+
outline: none;
|
|
4133
|
+
}
|
|
4134
|
+
.navds-timeline__pin-button:hover {
|
|
4135
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
4136
|
+
0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
|
|
4137
|
+
}
|
|
4138
|
+
.navds-timeline__pin-button:hover:focus-visible {
|
|
4139
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
4140
|
+
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
|
|
4141
|
+
0 0 0 6px var(--a-border-focus);
|
|
4142
|
+
}
|
|
4143
|
+
@supports not selector(:focus-visible) {
|
|
4144
|
+
.navds-timeline__pin-button:focus {
|
|
4145
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
|
4146
|
+
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
|
|
4147
|
+
0 0 0 6px var(--a-border-focus);
|
|
4148
|
+
outline: none;
|
|
4149
|
+
}
|
|
4150
|
+
|
|
4151
|
+
.navds-timeline__pin-button:hover:focus {
|
|
4152
|
+
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
|
4153
|
+
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
|
|
4154
|
+
0 0 0 6px var(--a-border-focus);
|
|
4155
|
+
}
|
|
4156
|
+
}
|
|
4157
|
+
.navds-timeline__pin-wrapper::before {
|
|
4158
|
+
content: "";
|
|
4159
|
+
top: var(--navdsc-timeline-pin-size);
|
|
4160
|
+
height: calc(94% - var(--navdsc-timeline-pin-size));
|
|
4161
|
+
width: 1px;
|
|
4162
|
+
margin: 0 auto;
|
|
4163
|
+
background: var(--a-surface-inverted);
|
|
4164
|
+
}
|
|
4165
|
+
.navds-timeline__zoom {
|
|
4166
|
+
margin-top: var(--a-spacing-6);
|
|
4167
|
+
float: right;
|
|
4168
|
+
display: flex;
|
|
4169
|
+
list-style-type: none;
|
|
4170
|
+
}
|
|
4171
|
+
.navds-timeline__zoom-button {
|
|
4172
|
+
all: unset;
|
|
4173
|
+
cursor: pointer;
|
|
4174
|
+
padding: 6px 9px 6px 8px;
|
|
4175
|
+
border: 1px solid var(--ac-timeline-zoom-border, var(--a-border-default));
|
|
4176
|
+
border-width: 1px 0 1px 1px;
|
|
4177
|
+
background: var(--ac-timeline-zoom-bg, var(--a-surface-default));
|
|
4178
|
+
}
|
|
4179
|
+
.navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
|
|
4180
|
+
border-radius: var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium);
|
|
4181
|
+
}
|
|
4182
|
+
.navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
|
|
4183
|
+
border-width: 1px;
|
|
4184
|
+
border-radius: 0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;
|
|
4185
|
+
}
|
|
4186
|
+
.navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
|
|
4187
|
+
border-radius: var(--a-border-radius-medium);
|
|
4188
|
+
}
|
|
4189
|
+
.navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
|
|
4190
|
+
background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
|
|
4191
|
+
}
|
|
4192
|
+
.navds-timeline__zoom-button[aria-pressed="true"] {
|
|
4193
|
+
background: var(--ac-timeline-zoom-selected-bg, var(--a-surface-inverted));
|
|
4194
|
+
color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
|
|
4195
|
+
}
|
|
4196
|
+
.navds-timeline__period:focus-visible {
|
|
4197
|
+
outline: none;
|
|
4198
|
+
z-index: 4;
|
|
4199
|
+
box-shadow: 0 0 0 2px var(--a-border-focus);
|
|
4200
|
+
}
|
|
4201
|
+
.navds-timeline__period--selected:focus-visible {
|
|
4202
|
+
box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
|
4203
|
+
0 0 0 2px var(--a-border-focus);
|
|
4204
|
+
z-index: 3;
|
|
4205
|
+
}
|
|
4206
|
+
.navds-timeline__zoom li:focus-within {
|
|
4207
|
+
z-index: var(--a-z-index-focus);
|
|
4208
|
+
}
|
|
4209
|
+
.navds-timeline__zoom-button:focus-visible {
|
|
4210
|
+
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
|
|
4211
|
+
border-width: 1px;
|
|
4212
|
+
}
|
|
4213
|
+
.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible {
|
|
4214
|
+
margin-right: 2px;
|
|
4215
|
+
padding-right: 6px;
|
|
4216
|
+
}
|
|
4217
|
+
@supports not selector(:focus-visible) {
|
|
4218
|
+
.navds-timeline__period:focus {
|
|
4219
|
+
outline: none;
|
|
4220
|
+
z-index: 4;
|
|
4221
|
+
box-shadow: 0 0 0 2px var(--a-border-focus);
|
|
4222
|
+
}
|
|
4223
|
+
|
|
4224
|
+
.navds-timeline__period--selected:focus {
|
|
4225
|
+
box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
|
4226
|
+
0 0 0 2px var(--a-border-focus);
|
|
4227
|
+
z-index: 3;
|
|
4228
|
+
}
|
|
4229
|
+
|
|
4230
|
+
.navds-timeline__zoom-button:focus {
|
|
4231
|
+
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
|
|
4232
|
+
border-width: 1px;
|
|
4233
|
+
}
|
|
4234
|
+
|
|
4235
|
+
.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus {
|
|
4236
|
+
margin-right: 2px;
|
|
4237
|
+
padding-right: 6px;
|
|
4238
|
+
}
|
|
4239
|
+
}
|
|
4240
|
+
/**
|
|
4241
|
+
* Timeline Popover
|
|
4242
|
+
*/
|
|
4243
|
+
.navds-timeline__popover {
|
|
4244
|
+
z-index: var(--a-z-index-popover);
|
|
4245
|
+
background-color: var(--ac-popover-bg, var(--a-surface-default));
|
|
4246
|
+
box-shadow: var(--a-shadow-medium);
|
|
4247
|
+
border: 1px solid;
|
|
4248
|
+
border-color: var(--ac-popover-border, var(--a-border-default));
|
|
4249
|
+
border-radius: var(--a-border-radius-medium);
|
|
4250
|
+
}
|
|
4251
|
+
.navds-timeline__popover:focus {
|
|
4252
|
+
outline: none;
|
|
4253
|
+
}
|
|
4254
|
+
.navds-timeline__popover-content {
|
|
4255
|
+
padding: var(--a-spacing-3);
|
|
4256
|
+
}
|
|
4257
|
+
.navds-timeline__popover-arrow {
|
|
4258
|
+
position: absolute;
|
|
4259
|
+
z-index: -1;
|
|
4260
|
+
transform: rotate(45deg);
|
|
4261
|
+
background-color: var(--ac-popover-bg, var(--a-surface-default));
|
|
4262
|
+
border: 1px solid;
|
|
4263
|
+
border-color: var(--ac-popover-border, var(--a-border-default));
|
|
4264
|
+
width: 1rem;
|
|
4265
|
+
height: 1rem;
|
|
4266
|
+
}
|
|
4267
|
+
.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
|
|
4268
|
+
border-left-color: transparent;
|
|
4269
|
+
border-top-color: transparent;
|
|
4270
|
+
}
|
|
4271
|
+
.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
|
|
4272
|
+
border-bottom-color: transparent;
|
|
4273
|
+
border-right-color: transparent;
|
|
4274
|
+
}
|
|
4275
|
+
.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
|
|
4276
|
+
border-left-color: transparent;
|
|
4277
|
+
border-bottom-color: transparent;
|
|
4278
|
+
}
|
|
4279
|
+
.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
|
|
4280
|
+
border-right-color: transparent;
|
|
4281
|
+
border-top-color: transparent;
|
|
4282
|
+
}
|
|
3823
4283
|
@keyframes tooltipFadeIn {
|
|
3824
4284
|
0% {
|
|
3825
4285
|
opacity: 0;
|
|
@@ -31,7 +31,7 @@ const _1 = __importStar(require("."));
|
|
|
31
31
|
config: true,
|
|
32
32
|
accept: [
|
|
33
33
|
{
|
|
34
|
-
code: ".foo { --ac-accordion-header-bg-hover: 1px; --ac-
|
|
34
|
+
code: ".foo { --ac-accordion-header-bg-hover: 1px; --ac-internalheader-bg: red; }",
|
|
35
35
|
description: "existing '--ac-' tokens overridden",
|
|
36
36
|
},
|
|
37
37
|
{
|
|
@@ -18,7 +18,12 @@ const ruleFunction = () => {
|
|
|
18
18
|
(0, postcss_selector_parser_1.default)((selectors) => {
|
|
19
19
|
selectors.walkClasses((className) => {
|
|
20
20
|
for (const deprecation of deprecations_1.deprecations) {
|
|
21
|
-
if (!deprecation.
|
|
21
|
+
if (!deprecation.deprecatePrefix &&
|
|
22
|
+
!deprecation.classes.includes(className.value)) {
|
|
23
|
+
continue;
|
|
24
|
+
}
|
|
25
|
+
else if (deprecation.deprecatePrefix &&
|
|
26
|
+
!deprecation.classes.some((x) => className.value.startsWith(x))) {
|
|
22
27
|
return;
|
|
23
28
|
}
|
|
24
29
|
stylelint_1.default.utils.report({
|
|
@@ -56,5 +56,14 @@ const deprecations_1 = require("../../deprecations");
|
|
|
56
56
|
column: 7,
|
|
57
57
|
endColumn: 38,
|
|
58
58
|
},
|
|
59
|
+
{
|
|
60
|
+
code: ".foo, \n .navdsi-dropdown-example \n .bar {}",
|
|
61
|
+
description: "selector with deprecated class name 1",
|
|
62
|
+
message: _1.messages.unexpected("navdsi-dropdown-example", deprecations_1.deprecations[1].message),
|
|
63
|
+
line: 2,
|
|
64
|
+
endLine: 2,
|
|
65
|
+
column: 3,
|
|
66
|
+
endColumn: 26,
|
|
67
|
+
},
|
|
59
68
|
],
|
|
60
69
|
});
|
package/dist/tokens.json
CHANGED
|
@@ -391,5 +391,47 @@
|
|
|
391
391
|
"--ac-textarea-counter-text": "--a-text-subtle",
|
|
392
392
|
"--ac-textarea-counter-error-text": "--a-text-danger",
|
|
393
393
|
"--ac-textarea-error-border": "--a-border-danger"
|
|
394
|
+
},
|
|
395
|
+
"dropdown": {
|
|
396
|
+
"--ac-dropdown-text": "--a-text-default",
|
|
397
|
+
"--ac-dropdown-item-text": "--a-text-action",
|
|
398
|
+
"--ac-dropdown-item-hover-bg": "--a-surface-action-subtle-hover",
|
|
399
|
+
"--ac-dropdown-item-active-bg": "--a-surface-action-active",
|
|
400
|
+
"--ac-dropdown-item-active-text": "--a-text-on-active"
|
|
401
|
+
},
|
|
402
|
+
"internalheader": {
|
|
403
|
+
"--ac-internalheader-bg": "--a-surface-inverted",
|
|
404
|
+
"--ac-internalheader-divider": "--a-gray-600",
|
|
405
|
+
"--ac-internalheader-text": "--a-text-on-inverted",
|
|
406
|
+
"--ac-internalheader-hover-bg": "--a-surface-inverted-hover",
|
|
407
|
+
"--ac-internalheader-active-bg": "--a-surface-inverted-active"
|
|
408
|
+
},
|
|
409
|
+
"timeline": {
|
|
410
|
+
"--ac-timeline-row-bg": "--a-surface-subtle",
|
|
411
|
+
"--ac-timeline-row-active-bg": "--a-surface-selected",
|
|
412
|
+
"--ac-timeline-period-success-bg": "--a-surface-success-subtle",
|
|
413
|
+
"--ac-timeline-period-success-border": "--a-border-success",
|
|
414
|
+
"--ac-timeline-period-success-bg-hover": "--a-surface-success-subtle-hover",
|
|
415
|
+
"--ac-timeline-period-warning-bg": "--a-surface-warning-subtle",
|
|
416
|
+
"--ac-timeline-period-warning-border": "--a-border-warning",
|
|
417
|
+
"--ac-timeline-period-warning-bg-hover": "--a-surface-warning-subtle-hover",
|
|
418
|
+
"--ac-timeline-period-danger-bg": "--a-surface-danger-subtle",
|
|
419
|
+
"--ac-timeline-period-danger-border": "--a-border-danger",
|
|
420
|
+
"--ac-timeline-period-danger-bg-hover": "--a-surface-danger-subtle-hover",
|
|
421
|
+
"--ac-timeline-period-info-bg": "--a-surface-info-subtle",
|
|
422
|
+
"--ac-timeline-period-info-border": "--a-border-info",
|
|
423
|
+
"--ac-timeline-period-info-bg-hover": "--a-surface-info-subtle-hover",
|
|
424
|
+
"--ac-timeline-period-neutral-bg": "--a-bg-subtle",
|
|
425
|
+
"--ac-timeline-period-neutral-border": "--a-border-default",
|
|
426
|
+
"--ac-timeline-period-neutral-bg-hover": "--a-gray-200",
|
|
427
|
+
"--ac-timeline-period-selected-border": "--a-border-action-selected",
|
|
428
|
+
"--ac-timeline-pin-bg": "--a-surface-danger",
|
|
429
|
+
"--ac-timeline-pin-bg-hover": "--a-surface-danger-hover",
|
|
430
|
+
"--ac-timeline-zoom-border": "--a-border-default",
|
|
431
|
+
"--ac-timeline-zoom-bg": "--a-surface-default",
|
|
432
|
+
"--ac-timeline-zoom-bg-hover": "--a-surface-action-subtle-hover",
|
|
433
|
+
"--ac-timeline-zoom-selected-bg": "--a-surface-inverted",
|
|
434
|
+
"--ac-timeline-zoom-selected-text": "--a-text-on-inverted",
|
|
435
|
+
"--ac-timeline-axislabel-text": "--a-text-subtle"
|
|
394
436
|
}
|
|
395
437
|
}
|
package/dist/utils.js
CHANGED
|
@@ -81,7 +81,6 @@ const flattenObject = (obj) => {
|
|
|
81
81
|
exports.flattenObject = flattenObject;
|
|
82
82
|
const tokenCSSFile = "./index.css";
|
|
83
83
|
const tokenJsonFile = "./tokens.json";
|
|
84
|
-
const internalTokensJSONFile = "./internal-tokens.json";
|
|
85
84
|
let allowedTokenNames = [];
|
|
86
85
|
const addTokens = (tokenJSONFile, allowedTokenNames) => {
|
|
87
86
|
const jsonFileBuffer = (0, node_fs_1.readFileSync)(`${__dirname}/${tokenJSONFile}`);
|
|
@@ -103,7 +102,6 @@ const tokenExists = (controlledPrefixes, inputToken) => {
|
|
|
103
102
|
}
|
|
104
103
|
});
|
|
105
104
|
(0, exports.addTokens)(tokenJsonFile, allowedTokenNames);
|
|
106
|
-
(0, exports.addTokens)(internalTokensJSONFile, allowedTokenNames);
|
|
107
105
|
}
|
|
108
106
|
return allowedTokenNames.includes(inputToken);
|
|
109
107
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/aksel-stylelint",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"author": "Aksel | NAV",
|
|
5
5
|
"homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
|
|
6
6
|
"repository": {
|
|
@@ -27,17 +27,16 @@
|
|
|
27
27
|
],
|
|
28
28
|
"scripts": {
|
|
29
29
|
"test": "jest",
|
|
30
|
-
"copy-internal-tokens": "node -e \"require('fs').copyFileSync('../internal/css/tokens.json','dist/internal-tokens.json')\"",
|
|
31
30
|
"copy-css": "node -e \"require('fs').copyFileSync('../core/css/dist/index.css','dist/index.css')\"",
|
|
32
31
|
"copy-tokens": "node -e \"require('fs').copyFileSync('../core/css/tokens.json','dist/tokens.json')\"",
|
|
33
|
-
"copy": "yarn copy-
|
|
32
|
+
"copy": "yarn copy-css && yarn copy-tokens",
|
|
34
33
|
"build": "tsc -p . && concurrently \"yarn:copy-*\"",
|
|
35
34
|
"watch:lint": "tsc --watch -p .",
|
|
36
35
|
"dev": "yarn watch:lint"
|
|
37
36
|
},
|
|
38
37
|
"devDependencies": {
|
|
39
|
-
"@navikt/ds-css": "^
|
|
40
|
-
"@navikt/ds-tokens": "^
|
|
38
|
+
"@navikt/ds-css": "^4.0.0",
|
|
39
|
+
"@navikt/ds-tokens": "^4.0.0",
|
|
41
40
|
"@types/jest": "^29.0.0",
|
|
42
41
|
"concurrently": "7.2.1",
|
|
43
42
|
"copyfiles": "2.4.1",
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"copytoclipboard": {
|
|
3
|
-
"--ac-copy-to-clipboard-text": "--a-text-default"
|
|
4
|
-
},
|
|
5
|
-
"dropdown": {
|
|
6
|
-
"--ac-dropdown-text": "--a-text-default",
|
|
7
|
-
"--ac-dropdown-border": "--a-border-default",
|
|
8
|
-
"--ac-dropdown-item-text": "--a-text-action",
|
|
9
|
-
"--ac-dropdown-item-hover-bg": "--a-surface-action-subtle-hover",
|
|
10
|
-
"--ac-dropdown-item-active-bg": "--a-surface-action-active",
|
|
11
|
-
"--ac-dropdown-item-active-text": "--a-text-on-active"
|
|
12
|
-
},
|
|
13
|
-
"header": {
|
|
14
|
-
"--ac-header-bg": "--a-surface-inverted",
|
|
15
|
-
"--ac-header-divider": "--a-gray-600",
|
|
16
|
-
"--ac-header-text": "--a-text-on-inverted",
|
|
17
|
-
"--ac-header-hover-bg": "--a-surface-inverted-hover",
|
|
18
|
-
"--ac-header-active-bg": "--a-surface-inverted-active"
|
|
19
|
-
},
|
|
20
|
-
"timeline": {
|
|
21
|
-
"--ac-timeline-row-bg": "--a-surface-subtle",
|
|
22
|
-
"--ac-timeline-row-active-bg": "--a-surface-selected",
|
|
23
|
-
"--ac-timeline-period-success-bg": "--a-surface-success-subtle",
|
|
24
|
-
"--ac-timeline-period-success-border": "--a-border-success",
|
|
25
|
-
"--ac-timeline-period-success-bg-hover": "--a-surface-success-subtle-hover",
|
|
26
|
-
"--ac-timeline-period-warning-bg": "--a-surface-warning-subtle",
|
|
27
|
-
"--ac-timeline-period-warning-border": "--a-border-warning",
|
|
28
|
-
"--ac-timeline-period-warning-bg-hover": "--a-surface-warning-subtle-hover",
|
|
29
|
-
"--ac-timeline-period-danger-bg": "--a-surface-danger-subtle",
|
|
30
|
-
"--ac-timeline-period-danger-border": "--a-border-danger",
|
|
31
|
-
"--ac-timeline-period-danger-bg-hover": "--a-surface-danger-subtle-hover",
|
|
32
|
-
"--ac-timeline-period-info-bg": "--a-surface-info-subtle",
|
|
33
|
-
"--ac-timeline-period-info-border": "--a-border-info",
|
|
34
|
-
"--ac-timeline-period-info-bg-hover": "--a-surface-info-subtle-hover",
|
|
35
|
-
"--ac-timeline-period-neutral-bg": "--a-bg-subtle",
|
|
36
|
-
"--ac-timeline-period-neutral-border": "--a-border-default",
|
|
37
|
-
"--ac-timeline-period-neutral-bg-hover": "--a-gray-200",
|
|
38
|
-
"--ac-timeline-period-selected-border": "--a-border-action-selected",
|
|
39
|
-
"--ac-timeline-pin-bg": "--a-surface-danger",
|
|
40
|
-
"--ac-timeline-pin-bg-hover": "--a-surface-danger-hover",
|
|
41
|
-
"--ac-timeline-zoom-border": "--a-border-default",
|
|
42
|
-
"--ac-timeline-zoom-bg": "--a-surface-default",
|
|
43
|
-
"--ac-timeline-zoom-bg-hover": "--a-surface-action-subtle-hover",
|
|
44
|
-
"--ac-timeline-zoom-selected-bg": "--a-surface-inverted",
|
|
45
|
-
"--ac-timeline-zoom-selected-text": "--a-text-on-inverted",
|
|
46
|
-
"--ac-timeline-axislabel-text": "--a-text-subtle"
|
|
47
|
-
}
|
|
48
|
-
}
|