@descope/web-components-ui 1.0.92 → 1.0.93
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +134 -125
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-container/Container.js +1 -0
- package/src/components/descope-email-field/EmailField.js +1 -0
- package/src/theme/components/container.js +3 -0
- package/src/theme/components/divider.js +5 -4
- package/src/theme/globals.js +10 -6
package/dist/index.esm.js
CHANGED
@@ -1679,6 +1679,7 @@ const Container = compose(
|
|
1679
1679
|
flexWrap: {},
|
1680
1680
|
|
1681
1681
|
backgroundColor: {},
|
1682
|
+
color: {},
|
1682
1683
|
borderRadius: {},
|
1683
1684
|
|
1684
1685
|
borderColor: {},
|
@@ -1913,6 +1914,7 @@ overrides$4 = `
|
|
1913
1914
|
vaadin-email-field {
|
1914
1915
|
margin: 0;
|
1915
1916
|
padding: 0;
|
1917
|
+
width: 100%;
|
1916
1918
|
}
|
1917
1919
|
vaadin-email-field::part(input-field) {
|
1918
1920
|
overflow: hidden;
|
@@ -5050,15 +5052,19 @@ const spacing = {
|
|
5050
5052
|
};
|
5051
5053
|
|
5052
5054
|
const border = {
|
5053
|
-
|
5054
|
-
|
5055
|
-
|
5055
|
+
xs: '1px',
|
5056
|
+
sm: '2px',
|
5057
|
+
md: '3px',
|
5058
|
+
lg: '4px',
|
5059
|
+
xl: '5px'
|
5056
5060
|
};
|
5057
5061
|
|
5058
5062
|
const radius = {
|
5059
|
-
|
5060
|
-
|
5061
|
-
|
5063
|
+
xs: '5px',
|
5064
|
+
sm: '10px',
|
5065
|
+
md: '15px',
|
5066
|
+
lg: '20px',
|
5067
|
+
xl: '25px'
|
5062
5068
|
};
|
5063
5069
|
|
5064
5070
|
const shadow = {
|
@@ -5088,15 +5094,15 @@ var globals = {
|
|
5088
5094
|
fonts
|
5089
5095
|
};
|
5090
5096
|
|
5091
|
-
const globalRefs$
|
5097
|
+
const globalRefs$f = getThemeRefs(globals);
|
5092
5098
|
const vars$g = Button.cssVarList;
|
5093
5099
|
|
5094
5100
|
const mode = {
|
5095
|
-
primary: globalRefs$
|
5096
|
-
secondary: globalRefs$
|
5097
|
-
success: globalRefs$
|
5098
|
-
error: globalRefs$
|
5099
|
-
surface: globalRefs$
|
5101
|
+
primary: globalRefs$f.colors.primary,
|
5102
|
+
secondary: globalRefs$f.colors.secondary,
|
5103
|
+
success: globalRefs$f.colors.success,
|
5104
|
+
error: globalRefs$f.colors.error,
|
5105
|
+
surface: globalRefs$f.colors.surface
|
5100
5106
|
};
|
5101
5107
|
|
5102
5108
|
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
|
@@ -5109,7 +5115,7 @@ const button = {
|
|
5109
5115
|
|
5110
5116
|
[vars$g.cursor]: 'pointer',
|
5111
5117
|
|
5112
|
-
[vars$g.borderRadius]: globalRefs$
|
5118
|
+
[vars$g.borderRadius]: globalRefs$f.radius.sm,
|
5113
5119
|
[vars$g.borderWidth]: '2px',
|
5114
5120
|
[vars$g.borderStyle]: 'solid',
|
5115
5121
|
[vars$g.borderColor]: 'transparent',
|
@@ -5172,7 +5178,7 @@ const button = {
|
|
5172
5178
|
}
|
5173
5179
|
};
|
5174
5180
|
|
5175
|
-
const globalRefs$
|
5181
|
+
const globalRefs$e = getThemeRefs(globals);
|
5176
5182
|
|
5177
5183
|
const vars$f = TextField.cssVarList;
|
5178
5184
|
|
@@ -5181,44 +5187,44 @@ const textField = (vars) => ({
|
|
5181
5187
|
xs: {
|
5182
5188
|
[vars.height]: '14px',
|
5183
5189
|
[vars.fontSize]: '8px',
|
5184
|
-
[vars.padding]: `0 ${globalRefs$
|
5190
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5185
5191
|
},
|
5186
5192
|
sm: {
|
5187
5193
|
[vars.height]: '20px',
|
5188
5194
|
[vars.fontSize]: '10px',
|
5189
|
-
[vars.padding]: `0 ${globalRefs$
|
5195
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5190
5196
|
},
|
5191
5197
|
md: {
|
5192
5198
|
[vars.height]: '30px',
|
5193
5199
|
[vars.fontSize]: '14px',
|
5194
|
-
[vars.padding]: `0 ${globalRefs$
|
5200
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.md}`
|
5195
5201
|
},
|
5196
5202
|
lg: {
|
5197
5203
|
[vars.height]: '40px',
|
5198
5204
|
[vars.fontSize]: '20px',
|
5199
|
-
[vars.padding]: `0 ${globalRefs$
|
5205
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5200
5206
|
},
|
5201
5207
|
xl: {
|
5202
5208
|
[vars.height]: '50px',
|
5203
5209
|
[vars.fontSize]: '25px',
|
5204
|
-
[vars.padding]: `0 ${globalRefs$
|
5210
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5205
5211
|
}
|
5206
5212
|
},
|
5207
5213
|
|
5208
|
-
[vars.color]: globalRefs$
|
5209
|
-
[vars.placeholderColor]: globalRefs$
|
5214
|
+
[vars.color]: globalRefs$e.colors.surface.contrast,
|
5215
|
+
[vars.placeholderColor]: globalRefs$e.colors.surface.main,
|
5210
5216
|
|
5211
|
-
[vars.backgroundColor]: globalRefs$
|
5217
|
+
[vars.backgroundColor]: globalRefs$e.colors.surface.light,
|
5212
5218
|
|
5213
5219
|
[vars.borderWidth]: '1px',
|
5214
5220
|
[vars.borderStyle]: 'solid',
|
5215
5221
|
[vars.borderColor]: 'transparent',
|
5216
|
-
[vars.borderRadius]: globalRefs$
|
5222
|
+
[vars.borderRadius]: globalRefs$e.radius.sm,
|
5217
5223
|
|
5218
5224
|
_disabled: {
|
5219
|
-
[vars.color]: globalRefs$
|
5220
|
-
[vars.placeholderColor]: globalRefs$
|
5221
|
-
[vars.backgroundColor]: globalRefs$
|
5225
|
+
[vars.color]: globalRefs$e.colors.surface.dark,
|
5226
|
+
[vars.placeholderColor]: globalRefs$e.colors.surface.light,
|
5227
|
+
[vars.backgroundColor]: globalRefs$e.colors.surface.main
|
5222
5228
|
},
|
5223
5229
|
|
5224
5230
|
_fullWidth: {
|
@@ -5228,24 +5234,24 @@ const textField = (vars) => ({
|
|
5228
5234
|
_focused: {
|
5229
5235
|
[vars.outlineWidth]: '2px',
|
5230
5236
|
[vars.outlineStyle]: 'solid',
|
5231
|
-
[vars.outlineColor]: globalRefs$
|
5237
|
+
[vars.outlineColor]: globalRefs$e.colors.surface.main
|
5232
5238
|
},
|
5233
5239
|
|
5234
5240
|
_bordered: {
|
5235
|
-
[vars.borderColor]: globalRefs$
|
5241
|
+
[vars.borderColor]: globalRefs$e.colors.surface.main
|
5236
5242
|
},
|
5237
5243
|
|
5238
5244
|
_invalid: {
|
5239
|
-
[vars.borderColor]: globalRefs$
|
5240
|
-
[vars.color]: globalRefs$
|
5241
|
-
[vars.outlineColor]: globalRefs$
|
5242
|
-
[vars.placeholderColor]: globalRefs$
|
5245
|
+
[vars.borderColor]: globalRefs$e.colors.error.main,
|
5246
|
+
[vars.color]: globalRefs$e.colors.error.main,
|
5247
|
+
[vars.outlineColor]: globalRefs$e.colors.error.light,
|
5248
|
+
[vars.placeholderColor]: globalRefs$e.colors.error.light
|
5243
5249
|
}
|
5244
5250
|
});
|
5245
5251
|
|
5246
5252
|
var textField$1 = textField(vars$f);
|
5247
5253
|
|
5248
|
-
const globalRefs$
|
5254
|
+
const globalRefs$d = getThemeRefs(globals);
|
5249
5255
|
|
5250
5256
|
const vars$e = PasswordField.cssVarList;
|
5251
5257
|
|
@@ -5253,11 +5259,11 @@ const passwordField = {
|
|
5253
5259
|
[vars$e.wrapperBorderStyle]: 'solid',
|
5254
5260
|
[vars$e.wrapperBorderWidth]: '1px',
|
5255
5261
|
[vars$e.wrapperBorderColor]: 'transparent',
|
5256
|
-
[vars$e.wrapperBorderRadius]: globalRefs$
|
5262
|
+
[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
|
5257
5263
|
|
5258
|
-
[vars$e.labelTextColor]: globalRefs$
|
5259
|
-
[vars$e.inputTextColor]: globalRefs$
|
5260
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5264
|
+
[vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
|
5265
|
+
[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
|
5266
|
+
[vars$e.placeholderTextColor]: globalRefs$d.colors.surface.main,
|
5261
5267
|
|
5262
5268
|
[vars$e.pointerCursor]: 'pointer',
|
5263
5269
|
|
@@ -5288,7 +5294,7 @@ const passwordField = {
|
|
5288
5294
|
|
5289
5295
|
_bordered: {
|
5290
5296
|
[vars$e.padding]: `0 0.5em`,
|
5291
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5297
|
+
[vars$e.wrapperBorderColor]: globalRefs$d.colors.surface.main
|
5292
5298
|
},
|
5293
5299
|
|
5294
5300
|
_fullWidth: {
|
@@ -5296,10 +5302,10 @@ const passwordField = {
|
|
5296
5302
|
},
|
5297
5303
|
|
5298
5304
|
_invalid: {
|
5299
|
-
[vars$e.labelTextColor]: globalRefs$
|
5300
|
-
[vars$e.inputTextColor]: globalRefs$
|
5301
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5302
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5305
|
+
[vars$e.labelTextColor]: globalRefs$d.colors.error.main,
|
5306
|
+
[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
|
5307
|
+
[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
|
5308
|
+
[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
|
5303
5309
|
},
|
5304
5310
|
};
|
5305
5311
|
|
@@ -5311,15 +5317,15 @@ const emailField = {
|
|
5311
5317
|
...textField(EmailField.cssVarList)
|
5312
5318
|
};
|
5313
5319
|
|
5314
|
-
const globalRefs$
|
5320
|
+
const globalRefs$c = getThemeRefs(globals);
|
5315
5321
|
const vars$d = TextArea.cssVarList;
|
5316
5322
|
|
5317
5323
|
const textArea = {
|
5318
|
-
[vars$d.color]: globalRefs$
|
5319
|
-
[vars$d.backgroundColor]: globalRefs$
|
5324
|
+
[vars$d.color]: globalRefs$c.colors.primary.main,
|
5325
|
+
[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
|
5320
5326
|
[vars$d.resize]: 'vertical',
|
5321
5327
|
|
5322
|
-
[vars$d.borderRadius]: globalRefs$
|
5328
|
+
[vars$d.borderRadius]: globalRefs$c.radius.sm,
|
5323
5329
|
[vars$d.borderWidth]: '1px',
|
5324
5330
|
[vars$d.borderStyle]: 'solid',
|
5325
5331
|
[vars$d.borderColor]: 'transparent',
|
@@ -5329,11 +5335,11 @@ const textArea = {
|
|
5329
5335
|
|
5330
5336
|
|
5331
5337
|
_bordered: {
|
5332
|
-
[vars$d.borderColor]: globalRefs$
|
5338
|
+
[vars$d.borderColor]: globalRefs$c.colors.surface.main
|
5333
5339
|
},
|
5334
5340
|
|
5335
5341
|
_focused: {
|
5336
|
-
[vars$d.outlineColor]: globalRefs$
|
5342
|
+
[vars$d.outlineColor]: globalRefs$c.colors.surface.main
|
5337
5343
|
},
|
5338
5344
|
|
5339
5345
|
_fullWidth: {
|
@@ -5345,26 +5351,26 @@ const textArea = {
|
|
5345
5351
|
},
|
5346
5352
|
|
5347
5353
|
_invalid: {
|
5348
|
-
[vars$d.outlineColor]: globalRefs$
|
5354
|
+
[vars$d.outlineColor]: globalRefs$c.colors.error.main
|
5349
5355
|
}
|
5350
5356
|
};
|
5351
5357
|
|
5352
|
-
const globalRefs$
|
5358
|
+
const globalRefs$b = getThemeRefs(globals);
|
5353
5359
|
const vars$c = Checkbox.cssVarList;
|
5354
5360
|
|
5355
5361
|
const checkbox = {
|
5356
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5362
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
|
5357
5363
|
|
5358
5364
|
[vars$c.labelFontSize]: '12px',
|
5359
5365
|
[vars$c.labelFontWeight]: '400',
|
5360
|
-
[vars$c.labelTextColor]: globalRefs$
|
5366
|
+
[vars$c.labelTextColor]: globalRefs$b.colors.surface.contrast,
|
5361
5367
|
[vars$c.cursor]: 'pointer',
|
5362
5368
|
|
5363
5369
|
[vars$c.checkboxWidth]: 'calc(1em - 2px)',
|
5364
5370
|
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5365
5371
|
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5366
5372
|
|
5367
|
-
[vars$c.checkboxRadius]: globalRefs$
|
5373
|
+
[vars$c.checkboxRadius]: globalRefs$b.radius.sm,
|
5368
5374
|
|
5369
5375
|
size: {
|
5370
5376
|
xs: {
|
@@ -5399,24 +5405,24 @@ const checkbox = {
|
|
5399
5405
|
},
|
5400
5406
|
|
5401
5407
|
_checked: {
|
5402
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5403
|
-
[vars$c.checkmarkTextColor]: globalRefs$
|
5408
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.primary.main,
|
5409
|
+
[vars$c.checkmarkTextColor]: globalRefs$b.colors.primary.contrast,
|
5404
5410
|
},
|
5405
5411
|
|
5406
5412
|
_disabled: {
|
5407
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5413
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
|
5408
5414
|
},
|
5409
5415
|
|
5410
5416
|
_focused: {
|
5411
5417
|
[vars$c.checkboxOutlineWidth]: '2px',
|
5412
5418
|
[vars$c.checkboxOutlineOffset]: '1px',
|
5413
|
-
[vars$c.checkboxOutlineColor]: globalRefs$
|
5419
|
+
[vars$c.checkboxOutlineColor]: globalRefs$b.colors.primary.main,
|
5414
5420
|
[vars$c.checkboxOutlineStyle]: 'solid'
|
5415
5421
|
},
|
5416
5422
|
|
5417
5423
|
_invalid: {
|
5418
|
-
[vars$c.checkboxOutlineColor]: globalRefs$
|
5419
|
-
[vars$c.labelTextColor]: globalRefs$
|
5424
|
+
[vars$c.checkboxOutlineColor]: globalRefs$b.colors.error.main,
|
5425
|
+
[vars$c.labelTextColor]: globalRefs$b.colors.error.main
|
5420
5426
|
},
|
5421
5427
|
|
5422
5428
|
};
|
@@ -5425,7 +5431,7 @@ const knobMargin = '2px';
|
|
5425
5431
|
const checkboxHeight = '1.25em';
|
5426
5432
|
const trackBorderWidth = '2px';
|
5427
5433
|
|
5428
|
-
const globalRefs$
|
5434
|
+
const globalRefs$a = getThemeRefs(globals);
|
5429
5435
|
const vars$b = SwitchToggle.cssVarList;
|
5430
5436
|
|
5431
5437
|
const switchToggle = {
|
@@ -5441,21 +5447,21 @@ const switchToggle = {
|
|
5441
5447
|
|
5442
5448
|
[vars$b.trackBorderStyle]: 'solid',
|
5443
5449
|
[vars$b.trackBorderWidth]: trackBorderWidth,
|
5444
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5450
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.surface.contrast,
|
5445
5451
|
|
5446
5452
|
[vars$b.trackBackgroundColor]: 'none',
|
5447
|
-
[vars$b.trackRadius]: globalRefs$
|
5453
|
+
[vars$b.trackRadius]: globalRefs$a.radius.md,
|
5448
5454
|
[vars$b.trackWidth]: '2.5em',
|
5449
5455
|
[vars$b.trackHeight]: checkboxHeight,
|
5450
5456
|
|
5451
5457
|
[vars$b.knobSize]: `calc(1em - ${knobMargin})`,
|
5452
5458
|
[vars$b.knobRadius]: '50%',
|
5453
5459
|
[vars$b.knobTopOffset]: '1px',
|
5454
|
-
[vars$b.knobColor]: globalRefs$
|
5460
|
+
[vars$b.knobColor]: globalRefs$a.colors.surface.contrast,
|
5455
5461
|
[vars$b.knobPosition]: knobMargin,
|
5456
5462
|
[vars$b.knobTransition]: '0.3s',
|
5457
5463
|
|
5458
|
-
[vars$b.labelTextColor]: globalRefs$
|
5464
|
+
[vars$b.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
5459
5465
|
[vars$b.labelFontWeight]: '400',
|
5460
5466
|
[vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
5461
5467
|
[vars$b.labelMargin]: '0.25em',
|
@@ -5465,35 +5471,35 @@ const switchToggle = {
|
|
5465
5471
|
},
|
5466
5472
|
|
5467
5473
|
_checked: {
|
5468
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5474
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.primary.main,
|
5469
5475
|
[vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
|
5470
|
-
[vars$b.knobColor]: globalRefs$
|
5471
|
-
[vars$b.knobTextColor]: globalRefs$
|
5476
|
+
[vars$b.knobColor]: globalRefs$a.colors.primary.main,
|
5477
|
+
[vars$b.knobTextColor]: globalRefs$a.colors.primary.contrast,
|
5472
5478
|
},
|
5473
5479
|
|
5474
5480
|
_disabled: {
|
5475
5481
|
[vars$b.cursor]: 'not-allowed', // todo: fix cursor
|
5476
|
-
[vars$b.knobColor]: globalRefs$
|
5477
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5478
|
-
[vars$b.trackBackgroundColor]: globalRefs$
|
5482
|
+
[vars$b.knobColor]: globalRefs$a.colors.surface.main,
|
5483
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.surface.main,
|
5484
|
+
[vars$b.trackBackgroundColor]: globalRefs$a.colors.surface.light,
|
5479
5485
|
},
|
5480
5486
|
|
5481
5487
|
_focused: {
|
5482
5488
|
[vars$b.switchOutlineWidth]: '2px',
|
5483
5489
|
[vars$b.switchOutlineOffset]: '1px',
|
5484
|
-
[vars$b.switchOutlineColor]: globalRefs$
|
5490
|
+
[vars$b.switchOutlineColor]: globalRefs$a.colors.primary.main,
|
5485
5491
|
[vars$b.switchOutlineStyle]: 'solid'
|
5486
5492
|
},
|
5487
5493
|
|
5488
5494
|
_invalid: {
|
5489
|
-
[vars$b.switchOutlineColor]: globalRefs$
|
5490
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5491
|
-
[vars$b.knobColor]: globalRefs$
|
5492
|
-
[vars$b.labelTextColor]: globalRefs$
|
5495
|
+
[vars$b.switchOutlineColor]: globalRefs$a.colors.error.main,
|
5496
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.error.main,
|
5497
|
+
[vars$b.knobColor]: globalRefs$a.colors.error.main,
|
5498
|
+
[vars$b.labelTextColor]: globalRefs$a.colors.error.main
|
5493
5499
|
},
|
5494
5500
|
};
|
5495
5501
|
|
5496
|
-
const globalRefs$
|
5502
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5497
5503
|
|
5498
5504
|
const vars$a = Container.cssVarList;
|
5499
5505
|
|
@@ -5519,6 +5525,9 @@ const [helperTheme$1, helperRefs$1, helperVars] =
|
|
5519
5525
|
const container = {
|
5520
5526
|
...helperTheme$1,
|
5521
5527
|
[vars$a.width]: '100%',
|
5528
|
+
[vars$a.boxShadow]: 'none',
|
5529
|
+
[vars$a.backgroundColor]: globalRefs$9.colors.surface.light,
|
5530
|
+
[vars$a.color]: globalRefs$9.colors.surface.contrast,
|
5522
5531
|
verticalPadding: {
|
5523
5532
|
sm: { [vars$a.verticalPadding]: '5px' },
|
5524
5533
|
md: { [vars$a.verticalPadding]: '10px' },
|
@@ -5564,32 +5573,32 @@ const container = {
|
|
5564
5573
|
|
5565
5574
|
shadow: {
|
5566
5575
|
sm: {
|
5567
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5576
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
|
5568
5577
|
},
|
5569
5578
|
md: {
|
5570
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5579
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.md} ${helperRefs$1.shadowColor}`
|
5571
5580
|
},
|
5572
5581
|
lg: {
|
5573
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5582
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
|
5574
5583
|
},
|
5575
5584
|
xl: {
|
5576
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5585
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
|
5577
5586
|
},
|
5578
5587
|
'2xl': {
|
5579
5588
|
[helperVars.shadowColor]: '#00000050',
|
5580
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5589
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
|
5581
5590
|
},
|
5582
5591
|
},
|
5583
5592
|
|
5584
5593
|
borderRadius: {
|
5585
5594
|
sm: {
|
5586
|
-
[vars$a.borderRadius]: globalRefs$
|
5595
|
+
[vars$a.borderRadius]: globalRefs$9.radius.sm
|
5587
5596
|
},
|
5588
5597
|
md: {
|
5589
|
-
[vars$a.borderRadius]: globalRefs$
|
5598
|
+
[vars$a.borderRadius]: globalRefs$9.radius.md
|
5590
5599
|
},
|
5591
5600
|
lg: {
|
5592
|
-
[vars$a.borderRadius]: globalRefs$
|
5601
|
+
[vars$a.borderRadius]: globalRefs$9.radius.lg
|
5593
5602
|
},
|
5594
5603
|
}
|
5595
5604
|
};
|
@@ -5600,7 +5609,7 @@ const logo = {
|
|
5600
5609
|
[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
5601
5610
|
};
|
5602
5611
|
|
5603
|
-
const globalRefs$
|
5612
|
+
const globalRefs$8 = getThemeRefs(globals);
|
5604
5613
|
|
5605
5614
|
const vars$8 = Text.cssVarList;
|
5606
5615
|
|
@@ -5608,56 +5617,56 @@ const text = {
|
|
5608
5617
|
[vars$8.lineHeight]: '1em',
|
5609
5618
|
[vars$8.display]: 'inline-block',
|
5610
5619
|
[vars$8.textAlign]: 'left',
|
5611
|
-
[vars$8.color]: globalRefs$
|
5620
|
+
[vars$8.color]: globalRefs$8.colors.surface.dark,
|
5612
5621
|
variant: {
|
5613
5622
|
h1: {
|
5614
|
-
[vars$8.fontSize]: globalRefs$
|
5615
|
-
[vars$8.fontWeight]: globalRefs$
|
5616
|
-
[vars$8.fontFamily]: globalRefs$
|
5623
|
+
[vars$8.fontSize]: globalRefs$8.typography.h1.size,
|
5624
|
+
[vars$8.fontWeight]: globalRefs$8.typography.h1.weight,
|
5625
|
+
[vars$8.fontFamily]: globalRefs$8.typography.h1.font
|
5617
5626
|
},
|
5618
5627
|
h2: {
|
5619
|
-
[vars$8.fontSize]: globalRefs$
|
5620
|
-
[vars$8.fontWeight]: globalRefs$
|
5621
|
-
[vars$8.fontFamily]: globalRefs$
|
5628
|
+
[vars$8.fontSize]: globalRefs$8.typography.h2.size,
|
5629
|
+
[vars$8.fontWeight]: globalRefs$8.typography.h2.weight,
|
5630
|
+
[vars$8.fontFamily]: globalRefs$8.typography.h2.font
|
5622
5631
|
},
|
5623
5632
|
h3: {
|
5624
|
-
[vars$8.fontSize]: globalRefs$
|
5625
|
-
[vars$8.fontWeight]: globalRefs$
|
5626
|
-
[vars$8.fontFamily]: globalRefs$
|
5633
|
+
[vars$8.fontSize]: globalRefs$8.typography.h3.size,
|
5634
|
+
[vars$8.fontWeight]: globalRefs$8.typography.h3.weight,
|
5635
|
+
[vars$8.fontFamily]: globalRefs$8.typography.h3.font
|
5627
5636
|
},
|
5628
5637
|
subtitle1: {
|
5629
|
-
[vars$8.fontSize]: globalRefs$
|
5630
|
-
[vars$8.fontWeight]: globalRefs$
|
5631
|
-
[vars$8.fontFamily]: globalRefs$
|
5638
|
+
[vars$8.fontSize]: globalRefs$8.typography.subtitle1.size,
|
5639
|
+
[vars$8.fontWeight]: globalRefs$8.typography.subtitle1.weight,
|
5640
|
+
[vars$8.fontFamily]: globalRefs$8.typography.subtitle1.font
|
5632
5641
|
},
|
5633
5642
|
subtitle2: {
|
5634
|
-
[vars$8.fontSize]: globalRefs$
|
5635
|
-
[vars$8.fontWeight]: globalRefs$
|
5636
|
-
[vars$8.fontFamily]: globalRefs$
|
5643
|
+
[vars$8.fontSize]: globalRefs$8.typography.subtitle2.size,
|
5644
|
+
[vars$8.fontWeight]: globalRefs$8.typography.subtitle2.weight,
|
5645
|
+
[vars$8.fontFamily]: globalRefs$8.typography.subtitle2.font
|
5637
5646
|
},
|
5638
5647
|
body1: {
|
5639
|
-
[vars$8.fontSize]: globalRefs$
|
5640
|
-
[vars$8.fontWeight]: globalRefs$
|
5641
|
-
[vars$8.fontFamily]: globalRefs$
|
5648
|
+
[vars$8.fontSize]: globalRefs$8.typography.body1.size,
|
5649
|
+
[vars$8.fontWeight]: globalRefs$8.typography.body1.weight,
|
5650
|
+
[vars$8.fontFamily]: globalRefs$8.typography.body1.font
|
5642
5651
|
},
|
5643
5652
|
body2: {
|
5644
|
-
[vars$8.fontSize]: globalRefs$
|
5645
|
-
[vars$8.fontWeight]: globalRefs$
|
5646
|
-
[vars$8.fontFamily]: globalRefs$
|
5653
|
+
[vars$8.fontSize]: globalRefs$8.typography.body2.size,
|
5654
|
+
[vars$8.fontWeight]: globalRefs$8.typography.body2.weight,
|
5655
|
+
[vars$8.fontFamily]: globalRefs$8.typography.body2.font
|
5647
5656
|
}
|
5648
5657
|
},
|
5649
5658
|
mode: {
|
5650
5659
|
primary: {
|
5651
|
-
[vars$8.color]: globalRefs$
|
5660
|
+
[vars$8.color]: globalRefs$8.colors.primary.main
|
5652
5661
|
},
|
5653
5662
|
secondary: {
|
5654
|
-
[vars$8.color]: globalRefs$
|
5663
|
+
[vars$8.color]: globalRefs$8.colors.secondary.main
|
5655
5664
|
},
|
5656
5665
|
error: {
|
5657
|
-
[vars$8.color]: globalRefs$
|
5666
|
+
[vars$8.color]: globalRefs$8.colors.error.main
|
5658
5667
|
},
|
5659
5668
|
success: {
|
5660
|
-
[vars$8.color]: globalRefs$
|
5669
|
+
[vars$8.color]: globalRefs$8.colors.success.main
|
5661
5670
|
}
|
5662
5671
|
},
|
5663
5672
|
textAlign: {
|
@@ -5680,7 +5689,7 @@ const text = {
|
|
5680
5689
|
}
|
5681
5690
|
};
|
5682
5691
|
|
5683
|
-
const globalRefs$
|
5692
|
+
const globalRefs$7 = getThemeRefs(globals);
|
5684
5693
|
const vars$7 = Link.cssVarList;
|
5685
5694
|
|
5686
5695
|
const link = {
|
@@ -5688,10 +5697,10 @@ const link = {
|
|
5688
5697
|
[vars$7.borderBottomWidth]: '2px',
|
5689
5698
|
[vars$7.borderBottomStyle]: 'solid',
|
5690
5699
|
[vars$7.borderBottomColor]: 'transparent',
|
5691
|
-
[vars$7.color]: globalRefs$
|
5700
|
+
[vars$7.color]: globalRefs$7.colors.primary.main,
|
5692
5701
|
|
5693
5702
|
_hover: {
|
5694
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5703
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
|
5695
5704
|
},
|
5696
5705
|
|
5697
5706
|
textAlign: {
|
@@ -5706,45 +5715,45 @@ const link = {
|
|
5706
5715
|
|
5707
5716
|
mode: {
|
5708
5717
|
primary: {
|
5709
|
-
[vars$7.color]: globalRefs$
|
5718
|
+
[vars$7.color]: globalRefs$7.colors.primary.main,
|
5710
5719
|
_hover: {
|
5711
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5720
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
|
5712
5721
|
}
|
5713
5722
|
},
|
5714
5723
|
secondary: {
|
5715
|
-
[vars$7.color]: globalRefs$
|
5724
|
+
[vars$7.color]: globalRefs$7.colors.secondary.main,
|
5716
5725
|
_hover: {
|
5717
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5726
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.secondary.main
|
5718
5727
|
}
|
5719
5728
|
},
|
5720
5729
|
error: {
|
5721
|
-
[vars$7.color]: globalRefs$
|
5730
|
+
[vars$7.color]: globalRefs$7.colors.error.main,
|
5722
5731
|
_hover: {
|
5723
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5732
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.error.main
|
5724
5733
|
}
|
5725
5734
|
},
|
5726
5735
|
success: {
|
5727
|
-
[vars$7.color]: globalRefs$
|
5736
|
+
[vars$7.color]: globalRefs$7.colors.success.main,
|
5728
5737
|
_hover: {
|
5729
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5738
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.success.main
|
5730
5739
|
}
|
5731
5740
|
}
|
5732
5741
|
}
|
5733
5742
|
};
|
5734
5743
|
|
5744
|
+
const globalRefs$6 = getThemeRefs(globals);
|
5745
|
+
|
5735
5746
|
const vars$6 = Divider.cssVarList;
|
5736
5747
|
|
5737
5748
|
const thickness = '2px';
|
5738
5749
|
const textPaddingSize = '10px';
|
5739
5750
|
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
|
5740
5751
|
|
5741
|
-
|
5742
5752
|
const divider = {
|
5743
5753
|
...helperTheme,
|
5744
5754
|
[vars$6.alignItems]: 'center',
|
5745
5755
|
[vars$6.dividerHeight]: helperRefs.thickness,
|
5746
|
-
[vars$6.backgroundColor]:
|
5747
|
-
[vars$6.opacity]: '0.2',
|
5756
|
+
[vars$6.backgroundColor]: globalRefs$6.colors.surface.main,
|
5748
5757
|
[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
|
5749
5758
|
[vars$6.width]: '100%',
|
5750
5759
|
[vars$6.flexDirection]: 'row',
|