@i-cell/ids-styles 0.0.60 → 0.0.62

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.
Files changed (13) hide show
  1. package/dist/components.css +385 -4
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +49 -4
  4. package/dist/menu-item/menu-item.css +356 -0
  5. package/dist/menu-item/menu-item.min.css +1 -1
  6. package/dist/menu-item/menu-item.plugin.js +20 -0
  7. package/dist/overlay-panel/overlay-panel.css +0 -3
  8. package/dist/overlay-panel/overlay-panel.min.css +1 -1
  9. package/dist/overlay-panel/overlay-panel.plugin.js +0 -3
  10. package/dist/paginator/paginator.css +29 -1
  11. package/dist/paginator/paginator.min.css +1 -1
  12. package/dist/paginator/paginator.plugin.js +29 -1
  13. package/package.json +1 -1
package/dist/components.plugin.js CHANGED
@@ -8016,9 +8016,14 @@ module.exports = function ComponentsPlugin() {
8016
8016
  {
8017
8017
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-focused)',
8018
8018
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-focused)',
8019
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
8020
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
8021
+ outlineOffset: '2px',
8022
+ outlineStyle: 'solid',
8019
8023
  },
8020
8024
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active': {
8021
8025
  background: 'var(--ids-comp-menu-item-text-color-bg-surface-pressed)',
8026
+ outlineStyle: 'none',
8022
8027
  },
8023
8028
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
8024
8029
  color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-disabled)',
@@ -8039,9 +8044,14 @@ module.exports = function ComponentsPlugin() {
8039
8044
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible': {
8040
8045
  color: 'var(--ids-comp-menu-item-text-color-fg-label-light-focused)',
8041
8046
  background: 'var(--ids-comp-menu-item-text-color-bg-light-focused)',
8047
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
8048
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
8049
+ outlineOffset: '2px',
8050
+ outlineStyle: 'solid',
8042
8051
  },
8043
8052
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:active': {
8044
8053
  background: 'var(--ids-comp-menu-item-text-color-bg-light-pressed)',
8054
+ outlineStyle: 'none',
8045
8055
  },
8046
8056
  '.ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
8047
8057
  color: 'var(--ids-comp-menu-item-text-color-fg-label-light-disabled)',
@@ -8063,9 +8073,14 @@ module.exports = function ComponentsPlugin() {
8063
8073
  {
8064
8074
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-focused)',
8065
8075
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-focused)',
8076
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-dark-focused)',
8077
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
8078
+ outlineOffset: '2px',
8079
+ outlineStyle: 'solid',
8066
8080
  },
8067
8081
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active': {
8068
8082
  background: 'var(--ids-comp-menu-item-filled-color-bg-surface-pressed)',
8083
+ outlineStyle: 'none',
8069
8084
  },
8070
8085
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled,.ids-menu-item-disabled)': {
8071
8086
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled)',
@@ -8087,9 +8102,14 @@ module.exports = function ComponentsPlugin() {
8087
8102
  {
8088
8103
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-focused)',
8089
8104
  background: 'var(--ids-comp-menu-item-filled-color-bg-light-focused)',
8105
+ outlineColor: 'var(--ids-comp-button-focused-outline-color-light-focused)',
8106
+ outlineWidth: 'var(--ids-comp-button-focused-outline-size-outline-dense)',
8107
+ outlineOffset: '2px',
8108
+ outlineStyle: 'solid',
8090
8109
  },
8091
8110
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active': {
8092
8111
  background: 'var(--ids-comp-menu-item-filled-color-bg-light-pressed)',
8112
+ outlineStyle: 'none',
8093
8113
  },
8094
8114
  '.ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled,.ids-menu-item-disabled)': {
8095
8115
  color: 'var(--ids-comp-menu-item-filled-color-fg-label-light-disabled)',
@@ -8954,9 +8974,6 @@ module.exports = function ComponentsPlugin() {
8954
8974
  borderColor: 'var(--ids-comp-overlay-panel-elevated-color-border-surface-default)',
8955
8975
  },
8956
8976
  '.ids-overlay-panel.ids-overlay-panel-has-menu button:hover': { borderColor: 'rgba(0,0,0,0)' },
8957
- '.ids-overlay-panel.ids-overlay-panel-has-menu button:focus,.ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible': {
8958
- outlineStyle: 'none !important',
8959
- },
8960
8977
  '.ids-paginator': {
8961
8978
  boxSizing: 'border-box',
8962
8979
  borderWidth: '0',
@@ -8997,7 +9014,7 @@ module.exports = function ComponentsPlugin() {
8997
9014
  justifyContent: 'center',
8998
9015
  alignItems: 'center',
8999
9016
  fontStyle: 'normal',
9000
- borderStyle: 'none',
9017
+ borderStyle: 'solid',
9001
9018
  },
9002
9019
  '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible':
9003
9020
  { outlineOffset: '2px', outlineStyle: 'solid' },
@@ -9022,6 +9039,7 @@ module.exports = function ComponentsPlugin() {
9022
9039
  '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button': {
9023
9040
  height: 'var(--ids-comp-paginator-page-links-size-height-compact)',
9024
9041
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-compact)',
9042
+ borderWidth: 'var(--ids-comp-paginator-page-links-size-border-width-compact)',
9025
9043
  padding: 'var(--ids-comp-paginator-page-links-size-padding-y-compact) var(--ids-comp-paginator-page-links-size-padding-x-compact)',
9026
9044
  fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-compact)',
9027
9045
  fontSize: 'var(--ids-comp-paginator-page-links-label-typography-font-size-compact)',
@@ -9067,6 +9085,7 @@ module.exports = function ComponentsPlugin() {
9067
9085
  '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button': {
9068
9086
  height: 'var(--ids-comp-paginator-page-links-size-height-comfortable)',
9069
9087
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-comfortable)',
9088
+ borderWidth: 'var(--ids-comp-paginator-page-links-size-border-width-comfortable)',
9070
9089
  padding:
9071
9090
  'var(--ids-comp-paginator-page-links-size-padding-y-comfortable) var(--ids-comp-paginator-page-links-size-padding-x-comfortable)',
9072
9091
  fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-comfortable)',
@@ -9111,6 +9130,7 @@ module.exports = function ComponentsPlugin() {
9111
9130
  '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button': {
9112
9131
  height: 'var(--ids-comp-paginator-page-links-size-height-spacious)',
9113
9132
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-spacious)',
9133
+ borderWidth: 'var(--ids-comp-paginator-page-links-size-border-width-spacious)',
9114
9134
  padding:
9115
9135
  'var(--ids-comp-paginator-page-links-size-padding-y-spacious) var(--ids-comp-paginator-page-links-size-padding-x-spacious)',
9116
9136
  fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-spacious)',
@@ -9155,6 +9175,7 @@ module.exports = function ComponentsPlugin() {
9155
9175
  '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button': {
9156
9176
  height: 'var(--ids-comp-paginator-page-links-size-height-dense)',
9157
9177
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-dense)',
9178
+ borderWidth: 'var(--ids-comp-paginator-page-links-size-border-width-dense)',
9158
9179
  padding: 'var(--ids-comp-paginator-page-links-size-padding-y-dense) var(--ids-comp-paginator-page-links-size-padding-x-dense)',
9159
9180
  fontFamily: 'var(--ids-comp-paginator-page-links-label-typography-font-family-dense)',
9160
9181
  fontSize: 'var(--ids-comp-paginator-page-links-label-typography-font-size-dense)',
@@ -9200,31 +9221,37 @@ module.exports = function ComponentsPlugin() {
9200
9221
  {
9201
9222
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-default)',
9202
9223
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-default)',
9224
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-primary-default)',
9203
9225
  },
9204
9226
  '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
9205
9227
  {
9206
9228
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-active)',
9207
9229
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-active)',
9230
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-primary-active)',
9208
9231
  },
9209
9232
  '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus,.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible':
9210
9233
  {
9211
9234
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-focused)',
9212
9235
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-focused)',
9236
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-primary-focused)',
9213
9237
  },
9214
9238
  '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
9215
9239
  {
9216
9240
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-hovered)',
9217
9241
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-hovered)',
9242
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-primary-hovered)',
9218
9243
  },
9219
9244
  '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
9220
9245
  {
9221
9246
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-pressed)',
9222
9247
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-pressed)',
9248
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-primary-pressed)',
9223
9249
  },
9224
9250
  '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
9225
9251
  {
9226
9252
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-primary-disabled)',
9227
9253
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-disabled)',
9254
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-primary-disabled)',
9228
9255
  },
9229
9256
  '.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow':
9230
9257
  { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default)' },
@@ -9249,31 +9276,37 @@ module.exports = function ComponentsPlugin() {
9249
9276
  {
9250
9277
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-default)',
9251
9278
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-default)',
9279
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-secondary-default)',
9252
9280
  },
9253
9281
  '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
9254
9282
  {
9255
9283
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-active)',
9256
9284
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-active)',
9285
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-secondary-active)',
9257
9286
  },
9258
9287
  '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus,.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible':
9259
9288
  {
9260
9289
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-focused)',
9261
9290
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-focused)',
9291
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-secondary-focused)',
9262
9292
  },
9263
9293
  '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
9264
9294
  {
9265
9295
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-hovered)',
9266
9296
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-hovered)',
9297
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-secondary-hovered)',
9267
9298
  },
9268
9299
  '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
9269
9300
  {
9270
9301
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-pressed)',
9271
9302
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-pressed)',
9303
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-secondary-pressed)',
9272
9304
  },
9273
9305
  '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
9274
9306
  {
9275
9307
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-secondary-disabled)',
9276
9308
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-disabled)',
9309
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-secondary-disabled)',
9277
9310
  },
9278
9311
  '.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow':
9279
9312
  { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default)' },
@@ -9298,31 +9331,37 @@ module.exports = function ComponentsPlugin() {
9298
9331
  {
9299
9332
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-default)',
9300
9333
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-default)',
9334
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-light-default)',
9301
9335
  },
9302
9336
  '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
9303
9337
  {
9304
9338
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-active)',
9305
9339
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-active)',
9340
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-light-active)',
9306
9341
  },
9307
9342
  '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus,.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible':
9308
9343
  {
9309
9344
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-focused)',
9310
9345
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-focused)',
9346
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-light-focused)',
9311
9347
  },
9312
9348
  '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
9313
9349
  {
9314
9350
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-hovered)',
9315
9351
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-hovered)',
9352
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-light-hovered)',
9316
9353
  },
9317
9354
  '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
9318
9355
  {
9319
9356
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-pressed)',
9320
9357
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-pressed)',
9358
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-light-pressed)',
9321
9359
  },
9322
9360
  '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
9323
9361
  {
9324
9362
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-light-disabled)',
9325
9363
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-light-disabled)',
9364
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-light-disabled)',
9326
9365
  },
9327
9366
  '.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow':
9328
9367
  { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default)' },
@@ -9347,31 +9386,37 @@ module.exports = function ComponentsPlugin() {
9347
9386
  {
9348
9387
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-default)',
9349
9388
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-default)',
9389
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-surface-default)',
9350
9390
  },
9351
9391
  '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled)':
9352
9392
  {
9353
9393
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-active)',
9354
9394
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-active)',
9395
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-surface-active)',
9355
9396
  },
9356
9397
  '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus,.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible':
9357
9398
  {
9358
9399
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-focused)',
9359
9400
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-focused)',
9401
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-surface-focused)',
9360
9402
  },
9361
9403
  '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover':
9362
9404
  {
9363
9405
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-hovered)',
9364
9406
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-hovered)',
9407
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-surface-hovered)',
9365
9408
  },
9366
9409
  '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active':
9367
9410
  {
9368
9411
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-pressed)',
9369
9412
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-pressed)',
9413
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-surface-pressed)',
9370
9414
  },
9371
9415
  '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled':
9372
9416
  {
9373
9417
  background: 'var(--ids-comp-paginator-page-links-plain-color-bg-surface-disabled)',
9374
9418
  color: 'var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-disabled)',
9419
+ borderColor: 'var(--ids-comp-paginator-page-links-plain-color-border-surface-disabled)',
9375
9420
  },
9376
9421
  '.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow':
9377
9422
  { color: 'var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default)' },