@i-cell/ids-styles 0.0.56 → 0.0.58

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.
@@ -7207,160 +7207,160 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7207
7207
  width: inherit;
7208
7208
  }
7209
7209
  .ids-message.ids-message-compact {
7210
- gap: var(--ids-comp-forms-message-size-gap-compact);
7211
- padding: var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);
7212
- font-family: var(--ids-comp-forms-message-typography-font-family-compact);
7213
- font-size: var(--ids-comp-forms-message-typography-font-size-compact);
7214
- font-weight: var(--ids-comp-forms-message-typography-font-weight-compact);
7215
- letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-compact);
7216
- line-height: var(--ids-comp-forms-message-typography-line-height-compact);
7210
+ gap: var(--ids-comp-message-size-gap-compact);
7211
+ padding: var(--ids-comp-message-size-padding-y-compact) var(--ids-comp-message-size-padding-x-compact);
7212
+ font-family: var(--ids-comp-message-typography-font-family-compact);
7213
+ font-size: var(--ids-comp-message-typography-font-size-compact);
7214
+ font-weight: var(--ids-comp-message-typography-font-weight-compact);
7215
+ letter-spacing: var(--ids-comp-message-typography-letter-spacing-compact);
7216
+ line-height: var(--ids-comp-message-typography-line-height-compact);
7217
7217
  }
7218
7218
  .ids-message.ids-message-compact .ids-message__prefix {
7219
- height: var(--ids-comp-forms-message-size-icon-height-compact);
7220
- width: var(--ids-comp-forms-message-size-icon-width-compact);
7219
+ height: var(--ids-comp-message-size-icon-height-compact);
7220
+ width: var(--ids-comp-message-size-icon-width-compact);
7221
7221
  }
7222
7222
  .ids-message.ids-message-compact .ids-message__prefix > .ids-icon {
7223
- font-size: var(--ids-comp-forms-message-icon-typography-font-size-compact);
7224
- font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-compact);
7225
- line-height: var(--ids-comp-forms-message-icon-typography-line-height-compact);
7223
+ font-size: var(--ids-comp-message-icon-typography-font-size-compact);
7224
+ font-weight: var(--ids-comp-message-icon-typography-font-weight-compact);
7225
+ line-height: var(--ids-comp-message-icon-typography-line-height-compact);
7226
7226
  }
7227
7227
  .ids-message.ids-message-comfortable {
7228
- gap: var(--ids-comp-forms-message-size-gap-comfortable);
7229
- padding: var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable);
7230
- font-family: var(--ids-comp-forms-message-typography-font-family-comfortable);
7231
- font-size: var(--ids-comp-forms-message-typography-font-size-comfortable);
7232
- font-weight: var(--ids-comp-forms-message-typography-font-weight-comfortable);
7233
- letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-comfortable);
7234
- line-height: var(--ids-comp-forms-message-typography-line-height-comfortable);
7228
+ gap: var(--ids-comp-message-size-gap-comfortable);
7229
+ padding: var(--ids-comp-message-size-padding-y-comfortable) var(--ids-comp-message-size-padding-x-comfortable);
7230
+ font-family: var(--ids-comp-message-typography-font-family-comfortable);
7231
+ font-size: var(--ids-comp-message-typography-font-size-comfortable);
7232
+ font-weight: var(--ids-comp-message-typography-font-weight-comfortable);
7233
+ letter-spacing: var(--ids-comp-message-typography-letter-spacing-comfortable);
7234
+ line-height: var(--ids-comp-message-typography-line-height-comfortable);
7235
7235
  }
7236
7236
  .ids-message.ids-message-comfortable .ids-message__prefix {
7237
- height: var(--ids-comp-forms-message-size-icon-height-comfortable);
7238
- width: var(--ids-comp-forms-message-size-icon-width-comfortable);
7237
+ height: var(--ids-comp-message-size-icon-height-comfortable);
7238
+ width: var(--ids-comp-message-size-icon-width-comfortable);
7239
7239
  }
7240
7240
  .ids-message.ids-message-comfortable .ids-message__prefix > .ids-icon {
7241
- font-size: var(--ids-comp-forms-message-icon-typography-font-size-comfortable);
7242
- font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-comfortable);
7243
- line-height: var(--ids-comp-forms-message-icon-typography-line-height-comfortable);
7241
+ font-size: var(--ids-comp-message-icon-typography-font-size-comfortable);
7242
+ font-weight: var(--ids-comp-message-icon-typography-font-weight-comfortable);
7243
+ line-height: var(--ids-comp-message-icon-typography-line-height-comfortable);
7244
7244
  }
7245
7245
  .ids-message.ids-message-spacious {
7246
- gap: var(--ids-comp-forms-message-size-gap-spacious);
7247
- padding: var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious);
7248
- font-family: var(--ids-comp-forms-message-typography-font-family-spacious);
7249
- font-size: var(--ids-comp-forms-message-typography-font-size-spacious);
7250
- font-weight: var(--ids-comp-forms-message-typography-font-weight-spacious);
7251
- letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-spacious);
7252
- line-height: var(--ids-comp-forms-message-typography-line-height-spacious);
7246
+ gap: var(--ids-comp-message-size-gap-spacious);
7247
+ padding: var(--ids-comp-message-size-padding-y-spacious) var(--ids-comp-message-size-padding-x-spacious);
7248
+ font-family: var(--ids-comp-message-typography-font-family-spacious);
7249
+ font-size: var(--ids-comp-message-typography-font-size-spacious);
7250
+ font-weight: var(--ids-comp-message-typography-font-weight-spacious);
7251
+ letter-spacing: var(--ids-comp-message-typography-letter-spacing-spacious);
7252
+ line-height: var(--ids-comp-message-typography-line-height-spacious);
7253
7253
  }
7254
7254
  .ids-message.ids-message-spacious .ids-message__prefix {
7255
- height: var(--ids-comp-forms-message-size-icon-height-spacious);
7256
- width: var(--ids-comp-forms-message-size-icon-width-spacious);
7255
+ height: var(--ids-comp-message-size-icon-height-spacious);
7256
+ width: var(--ids-comp-message-size-icon-width-spacious);
7257
7257
  }
7258
7258
  .ids-message.ids-message-spacious .ids-message__prefix > .ids-icon {
7259
- font-size: var(--ids-comp-forms-message-icon-typography-font-size-spacious);
7260
- font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-spacious);
7261
- line-height: var(--ids-comp-forms-message-icon-typography-line-height-spacious);
7259
+ font-size: var(--ids-comp-message-icon-typography-font-size-spacious);
7260
+ font-weight: var(--ids-comp-message-icon-typography-font-weight-spacious);
7261
+ line-height: var(--ids-comp-message-icon-typography-line-height-spacious);
7262
7262
  }
7263
7263
  .ids-message.ids-message-dense {
7264
- gap: var(--ids-comp-forms-message-size-gap-dense);
7265
- padding: var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense);
7266
- font-family: var(--ids-comp-forms-message-typography-font-family-dense);
7267
- font-size: var(--ids-comp-forms-message-typography-font-size-dense);
7268
- font-weight: var(--ids-comp-forms-message-typography-font-weight-dense);
7269
- letter-spacing: var(--ids-comp-forms-message-typography-letter-spacing-dense);
7270
- line-height: var(--ids-comp-forms-message-typography-line-height-dense);
7264
+ gap: var(--ids-comp-message-size-gap-dense);
7265
+ padding: var(--ids-comp-message-size-padding-y-dense) var(--ids-comp-message-size-padding-x-dense);
7266
+ font-family: var(--ids-comp-message-typography-font-family-dense);
7267
+ font-size: var(--ids-comp-message-typography-font-size-dense);
7268
+ font-weight: var(--ids-comp-message-typography-font-weight-dense);
7269
+ letter-spacing: var(--ids-comp-message-typography-letter-spacing-dense);
7270
+ line-height: var(--ids-comp-message-typography-line-height-dense);
7271
7271
  }
7272
7272
  .ids-message.ids-message-dense .ids-message__prefix {
7273
- height: var(--ids-comp-forms-message-size-icon-height-dense);
7274
- width: var(--ids-comp-forms-message-size-icon-width-dense);
7273
+ height: var(--ids-comp-message-size-icon-height-dense);
7274
+ width: var(--ids-comp-message-size-icon-width-dense);
7275
7275
  }
7276
7276
  .ids-message.ids-message-dense .ids-message__prefix > .ids-icon {
7277
- font-size: var(--ids-comp-forms-message-icon-typography-font-size-dense);
7278
- font-weight: var(--ids-comp-forms-message-icon-typography-font-weight-dense);
7279
- line-height: var(--ids-comp-forms-message-icon-typography-line-height-dense);
7277
+ font-size: var(--ids-comp-message-icon-typography-font-size-dense);
7278
+ font-weight: var(--ids-comp-message-icon-typography-font-weight-dense);
7279
+ line-height: var(--ids-comp-message-icon-typography-line-height-dense);
7280
7280
  }
7281
7281
  .ids-message.ids-message-light .ids-message__prefix {
7282
- color: var(--ids-comp-forms-message-color-fg-icon-light-default);
7282
+ color: var(--ids-comp-message-color-fg-icon-light-default);
7283
7283
  }
7284
7284
  .ids-message.ids-message-light .ids-message__text,
7285
7285
  .ids-message.ids-message-light .ids-message__suffix {
7286
- color: var(--ids-comp-forms-message-color-fg-text-light-default);
7286
+ color: var(--ids-comp-message-color-fg-text-light-default);
7287
7287
  }
7288
7288
  .ids-message.ids-message-light.ids-message-disabled .ids-message__prefix .ids-icon {
7289
- color: var(--ids-comp-forms-message-color-fg-icon-light-disabled);
7289
+ color: var(--ids-comp-message-color-fg-icon-light-disabled);
7290
7290
  }
7291
7291
  .ids-message.ids-message-light.ids-message-disabled .ids-message__text,
7292
7292
  .ids-message.ids-message-light.ids-message-disabled .ids-message__suffix {
7293
- color: var(--ids-comp-forms-message-color-fg-text-light-disabled);
7293
+ color: var(--ids-comp-message-color-fg-text-light-disabled) !important;
7294
7294
  }
7295
7295
  .ids-message.ids-message-light.ids-error-message .ids-message__prefix {
7296
- color: var(--ids-comp-forms-message-color-fg-icon-light-error-default);
7296
+ color: var(--ids-comp-message-color-fg-icon-light-error-default);
7297
7297
  }
7298
7298
  .ids-message.ids-message-light.ids-error-message .ids-message__text,
7299
7299
  .ids-message.ids-message-light.ids-error-message .ids-message__suffix {
7300
- color: var(--ids-comp-forms-message-color-fg-text-light-error-default);
7300
+ color: var(--ids-comp-message-color-fg-text-light-error-default);
7301
7301
  }
7302
7302
  .ids-message.ids-success-message .ids-message__prefix {
7303
- color: var(--ids-comp-forms-message-color-fg-icon-light-success-default);
7303
+ color: var(--ids-comp-message-color-fg-icon-light-success-default);
7304
7304
  }
7305
7305
  .ids-message.ids-success-message .ids-message__text,
7306
7306
  .ids-message.ids-success-message .ids-message__suffix {
7307
- color: var(--ids-comp-forms-message-color-fg-text-light-success-default);
7307
+ color: var(--ids-comp-message-color-fg-text-light-success-default);
7308
7308
  }
7309
7309
  .ids-message.ids-message-dark .ids-message__prefix {
7310
- color: var(--ids-comp-forms-message-color-fg-icon-dark-default);
7310
+ color: var(--ids-comp-message-color-fg-icon-dark-default);
7311
7311
  }
7312
7312
  .ids-message.ids-message-dark .ids-message__text,
7313
7313
  .ids-message.ids-message-dark .ids-message__suffix {
7314
- color: var(--ids-comp-forms-message-color-fg-text-dark-default);
7314
+ color: var(--ids-comp-message-color-fg-text-dark-default);
7315
7315
  }
7316
7316
  .ids-message.ids-message-dark.ids-message-disabled .ids-message__prefix .ids-icon {
7317
- color: var(--ids-comp-forms-message-color-fg-icon-dark-disabled);
7317
+ color: var(--ids-comp-message-color-fg-icon-dark-disabled);
7318
7318
  }
7319
7319
  .ids-message.ids-message-dark.ids-message-disabled .ids-message__text,
7320
7320
  .ids-message.ids-message-dark.ids-message-disabled .ids-message__suffix {
7321
- color: var(--ids-comp-forms-message-color-fg-text-dark-disabled);
7321
+ color: var(--ids-comp-message-color-fg-text-dark-disabled) !important;
7322
7322
  }
7323
7323
  .ids-message.ids-message-dark.ids-error-message .ids-message__prefix {
7324
- color: var(--ids-comp-forms-message-color-fg-icon-dark-error-default);
7324
+ color: var(--ids-comp-message-color-fg-icon-dark-error-default);
7325
7325
  }
7326
7326
  .ids-message.ids-message-dark.ids-error-message .ids-message__text,
7327
7327
  .ids-message.ids-message-dark.ids-error-message .ids-message__suffix {
7328
- color: var(--ids-comp-forms-message-color-fg-text-dark-error-default);
7328
+ color: var(--ids-comp-message-color-fg-text-dark-error-default);
7329
7329
  }
7330
7330
  .ids-message.ids-success-message .ids-message__prefix {
7331
- color: var(--ids-comp-forms-message-color-fg-icon-dark-success-default);
7331
+ color: var(--ids-comp-message-color-fg-icon-dark-success-default);
7332
7332
  }
7333
7333
  .ids-message.ids-success-message .ids-message__text,
7334
7334
  .ids-message.ids-success-message .ids-message__suffix {
7335
- color: var(--ids-comp-forms-message-color-fg-text-dark-success-default);
7335
+ color: var(--ids-comp-message-color-fg-text-dark-success-default);
7336
7336
  }
7337
7337
  .ids-message.ids-message-surface .ids-message__prefix {
7338
- color: var(--ids-comp-forms-message-color-fg-icon-surface-default);
7338
+ color: var(--ids-comp-message-color-fg-icon-surface-default);
7339
7339
  }
7340
7340
  .ids-message.ids-message-surface .ids-message__text,
7341
7341
  .ids-message.ids-message-surface .ids-message__suffix {
7342
- color: var(--ids-comp-forms-message-color-fg-text-surface-default);
7342
+ color: var(--ids-comp-message-color-fg-text-surface-default);
7343
7343
  }
7344
7344
  .ids-message.ids-message-surface.ids-message-disabled .ids-message__prefix .ids-icon {
7345
- color: var(--ids-comp-forms-message-color-fg-icon-surface-disabled);
7345
+ color: var(--ids-comp-message-color-fg-icon-surface-disabled);
7346
7346
  }
7347
7347
  .ids-message.ids-message-surface.ids-message-disabled .ids-message__text,
7348
7348
  .ids-message.ids-message-surface.ids-message-disabled .ids-message__suffix {
7349
- color: var(--ids-comp-forms-message-color-fg-text-surface-disabled);
7349
+ color: var(--ids-comp-message-color-fg-text-surface-disabled) !important;
7350
7350
  }
7351
7351
  .ids-message.ids-message-surface.ids-error-message .ids-message__prefix {
7352
- color: var(--ids-comp-forms-message-color-fg-icon-surface-error-default);
7352
+ color: var(--ids-comp-message-color-fg-icon-surface-error-default);
7353
7353
  }
7354
7354
  .ids-message.ids-message-surface.ids-error-message .ids-message__text,
7355
7355
  .ids-message.ids-message-surface.ids-error-message .ids-message__suffix {
7356
- color: var(--ids-comp-forms-message-color-fg-text-surface-error-default);
7356
+ color: var(--ids-comp-message-color-fg-text-surface-error-default);
7357
7357
  }
7358
7358
  .ids-message.ids-success-message .ids-message__prefix {
7359
- color: var(--ids-comp-forms-message-color-fg-icon-surface-success-default);
7359
+ color: var(--ids-comp-message-color-fg-icon-surface-success-default);
7360
7360
  }
7361
7361
  .ids-message.ids-success-message .ids-message__text,
7362
7362
  .ids-message.ids-success-message .ids-message__suffix {
7363
- color: var(--ids-comp-forms-message-color-fg-text-surface-success-default);
7363
+ color: var(--ids-comp-message-color-fg-text-surface-success-default);
7364
7364
  }
7365
7365
 
7366
7366
  .ids-form-field__required-marker::after {
@@ -7376,7 +7376,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7376
7376
  border-style: none;
7377
7377
  border-color: transparent;
7378
7378
  line-height: 1.5;
7379
- font-family: "IDS Icons";
7380
7379
  display: inline-flex;
7381
7380
  text-transform: none;
7382
7381
  letter-spacing: normal;
@@ -7388,6 +7387,10 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7388
7387
  fill: currentColor;
7389
7388
  align-items: center;
7390
7389
  justify-content: center;
7390
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-compact);
7391
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-comfortable);
7392
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-spacious);
7393
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-dense);
7391
7394
  }
7392
7395
  .ids-icon::before, .ids-icon::after, .ids-icon *, .ids-icon ::before, .ids-icon ::after {
7393
7396
  box-sizing: border-box;
@@ -7396,48 +7399,56 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7396
7399
  border-color: transparent;
7397
7400
  }
7398
7401
  .ids-icon.ids-icon-smallcollection-compact {
7402
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-compact);
7399
7403
  height: var(--ids-comp-icon-size-smallcollection-height-compact);
7400
7404
  width: var(--ids-comp-icon-size-smallcollection-width-compact);
7401
7405
  font-size: var(--ids-comp-icon-typography-smallcollection-font-size-compact);
7402
7406
  line-height: var(--ids-comp-icon-typography-smallcollection-line-height-compact);
7403
7407
  }
7404
7408
  .ids-icon.ids-icon-smallcollection-comfortable {
7409
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-comfortable);
7405
7410
  height: var(--ids-comp-icon-size-smallcollection-height-comfortable);
7406
7411
  width: var(--ids-comp-icon-size-smallcollection-width-comfortable);
7407
7412
  font-size: var(--ids-comp-icon-typography-smallcollection-font-size-comfortable);
7408
7413
  line-height: var(--ids-comp-icon-typography-smallcollection-line-height-comfortable);
7409
7414
  }
7410
7415
  .ids-icon.ids-icon-smallcollection-spacious {
7416
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-spacious);
7411
7417
  height: var(--ids-comp-icon-size-smallcollection-height-spacious);
7412
7418
  width: var(--ids-comp-icon-size-smallcollection-width-spacious);
7413
7419
  font-size: var(--ids-comp-icon-typography-smallcollection-font-size-spacious);
7414
7420
  line-height: var(--ids-comp-icon-typography-smallcollection-line-height-spacious);
7415
7421
  }
7416
7422
  .ids-icon.ids-icon-smallcollection-dense {
7423
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-dense);
7417
7424
  height: var(--ids-comp-icon-size-smallcollection-height-dense);
7418
7425
  width: var(--ids-comp-icon-size-smallcollection-width-dense);
7419
7426
  font-size: var(--ids-comp-icon-typography-smallcollection-font-size-dense);
7420
7427
  line-height: var(--ids-comp-icon-typography-smallcollection-line-height-dense);
7421
7428
  }
7422
7429
  .ids-icon.ids-icon-bigcollection-compact {
7430
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-compact);
7423
7431
  height: var(--ids-comp-icon-size-bigcollection-height-compact);
7424
7432
  width: var(--ids-comp-icon-size-bigcollection-width-compact);
7425
7433
  font-size: var(--ids-comp-icon-typography-bigcollection-font-size-compact);
7426
7434
  line-height: var(--ids-comp-icon-typography-bigcollection-line-height-compact);
7427
7435
  }
7428
7436
  .ids-icon.ids-icon-bigcollection-comfortable {
7437
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-comfortable);
7429
7438
  height: var(--ids-comp-icon-size-bigcollection-height-comfortable);
7430
7439
  width: var(--ids-comp-icon-size-bigcollection-width-comfortable);
7431
7440
  font-size: var(--ids-comp-icon-typography-bigcollection-font-size-comfortable);
7432
7441
  line-height: var(--ids-comp-icon-typography-bigcollection-line-height-comfortable);
7433
7442
  }
7434
7443
  .ids-icon.ids-icon-bigcollection-spacious {
7444
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-spacious);
7435
7445
  height: var(--ids-comp-icon-size-bigcollection-height-spacious);
7436
7446
  width: var(--ids-comp-icon-size-bigcollection-width-spacious);
7437
7447
  font-size: var(--ids-comp-icon-typography-bigcollection-font-size-spacious);
7438
7448
  line-height: var(--ids-comp-icon-typography-bigcollection-line-height-spacious);
7439
7449
  }
7440
7450
  .ids-icon.ids-icon-bigcollection-dense {
7451
+ font-family: var(--ids-comp-icon-typography-font-family-font-family-default-dense);
7441
7452
  height: var(--ids-comp-icon-size-bigcollection-height-dense);
7442
7453
  width: var(--ids-comp-icon-size-bigcollection-width-dense);
7443
7454
  font-size: var(--ids-comp-icon-typography-bigcollection-font-size-dense);