@navikt/aksel-stylelint 3.4.1 → 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.
@@ -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 Wed, 31 May 2023 13:06:18 GMT
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-header-bg: red; }",
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.classes.includes(className.value)) {
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.4.1",
3
+ "version": "4.0.0",
4
4
  "author": "Aksel | NAV",
5
5
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
6
6
  "repository": {
@@ -27,22 +27,23 @@
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-internal-tokens && yarn copy-css && yarn copy-tokens",
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": "^3.4.1",
40
- "@navikt/ds-tokens": "^3.4.1",
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",
44
43
  "jest": "^29.0.0",
45
44
  "jest-preset-stylelint": "^6.1.0",
45
+ "postcss-selector-parser": "^6.0.13",
46
+ "postcss-value-parser": "^4.2.0",
46
47
  "stylelint": "^14.8.5",
47
48
  "typescript": "^4.8.0"
48
49
  },
@@ -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
- }