origam 2.8.1 → 2.10.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.
Files changed (50) hide show
  1. package/dist/src/assets/css/main.css +1 -1
  2. package/dist/src/assets/css/tokens/dark.css +38 -4
  3. package/dist/src/assets/css/tokens/light.css +19 -2
  4. package/dist/src/assets/scss/tokens/_dark.scss +19 -2
  5. package/dist/src/assets/scss/tokens/_light.scss +19 -2
  6. package/dist/src/components/Alert/OrigamAlert.vue +4 -2
  7. package/dist/src/components/App/OrigamApp.vue +7 -6
  8. package/dist/src/components/Avatar/OrigamAvatarGroup.vue +31 -12
  9. package/dist/src/components/Btn/OrigamBtn.vue +11 -2
  10. package/dist/src/components/Btn/OrigamBtnGroup.vue +204 -22
  11. package/dist/src/components/Btn/OrigamBtnToggle.vue +5 -1
  12. package/dist/src/components/Card/OrigamCard.vue +5 -2
  13. package/dist/src/components/Checkbox/OrigamCheckbox.vue +3 -1
  14. package/dist/src/components/Chip/OrigamChip.vue +2 -0
  15. package/dist/src/components/Code/OrigamCode.vue +4 -2
  16. package/dist/src/components/ColorPicker/OrigamColorPickerPreview.vue +1 -1
  17. package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue +52 -2
  18. package/dist/src/components/DatePickerField/OrigamDatePickerField.vue +32 -2
  19. package/dist/src/components/Dialog/OrigamDialog.vue +1 -1
  20. package/dist/src/components/Field/OrigamField.vue +39 -3
  21. package/dist/src/components/Layout/OrigamLayout.vue +10 -1
  22. package/dist/src/components/Menu/OrigamMenu.vue +3 -1
  23. package/dist/src/components/NumberField/OrigamNumberField.vue +3 -2
  24. package/dist/src/components/Overlay/OrigamOverlayScrim.vue +2 -0
  25. package/dist/src/components/Radio/OrigamRadio.vue +3 -1
  26. package/dist/src/components/Select/OrigamSelect.vue +3 -1
  27. package/dist/src/components/SelectionControl/OrigamSelectionControl.vue +2 -0
  28. package/dist/src/components/SliderField/OrigamSliderField.vue +26 -13
  29. package/dist/src/components/Snackbar/OrigamSnackbar.vue +3 -1
  30. package/dist/src/components/Snackbar/OrigamSnackbarItem.vue +2 -0
  31. package/dist/src/components/Switch/OrigamSwitch.vue +42 -1
  32. package/dist/src/components/Switch/OrigamSwitchTrack.vue +35 -2
  33. package/dist/src/components/Table/OrigamTable.vue +4 -2
  34. package/dist/src/components/Tabs/OrigamTabs.vue +3 -1
  35. package/dist/src/components/Tooltip/OrigamTooltip.vue +2 -0
  36. package/dist/src/composables/Commons/defaults.composable.cjs +10 -6
  37. package/dist/src/composables/Commons/defaults.composable.d.ts +30 -0
  38. package/dist/src/composables/Commons/defaults.composable.js +9 -6
  39. package/dist/src/composables/Theme/theme.composable.cjs +49 -30
  40. package/dist/src/composables/Theme/theme.composable.js +41 -22
  41. package/dist/src/interfaces/App/app.interface.d.ts +1 -1
  42. package/dist/src/interfaces/Btn/btn-group.interface.d.ts +2 -2
  43. package/dist/src/interfaces/Switch/switch-track.interface.d.ts +23 -6
  44. package/dist/src/themes/origam.theme.cjs +2 -4
  45. package/dist/src/themes/origam.theme.js +2 -2
  46. package/dist/src/types/tokens.type.d.ts +1 -1
  47. package/dist/src/utils/Commons/commons.util.cjs +10 -0
  48. package/dist/src/utils/Commons/commons.util.d.ts +18 -0
  49. package/dist/src/utils/Commons/commons.util.js +9 -0
  50. package/package.json +1 -1
package/dist/src/assets/css/tokens/dark.css CHANGED
@@ -128,6 +128,7 @@
128
128
  --origam-card---z-index: var(--origam-zIndex---base);
129
129
  --origam-card---background: var(--origam-color__surface---raised);
130
130
  --origam-card---color: var(--origam-color__text---primary);
131
+ --origam-card---backdrop-filter: none;
131
132
  --origam-card---box-shadow: var(--origam-shadow---sm);
132
133
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
133
134
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -203,6 +204,7 @@
203
204
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
204
205
  --origam-chip---background-color: var(--origam-color__surface---overlay);
205
206
  --origam-chip---color: var(--origam-color__text---primary);
207
+ --origam-chip---backdrop-filter: none;
206
208
  --origam-chip---border-color: currentColor;
207
209
  --origam-chip---border-style: solid;
208
210
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -348,6 +350,9 @@
348
350
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
349
351
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
353
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
354
+ --origam-avatar-group__item---outline-style: solid;
355
+ --origam-avatar-group__item---outline-width: 2px;
351
356
  --origam-badge__wrapper---display: flex;
352
357
  --origam-badge__wrapper---align-items: stretch;
353
358
  --origam-badge__wrapper---justify-content: start;
@@ -522,6 +527,7 @@
522
527
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
523
528
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
524
529
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
530
+ --origam-snackbar-item---backdrop-filter: none;
525
531
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
526
532
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -756,6 +762,7 @@
756
762
  --origam-sheet---box-sizing: border-box;
757
763
  --origam-sheet---background: var(--origam-color__surface---default);
758
764
  --origam-sheet---color: var(--origam-color__text---primary);
765
+ --origam-sheet---backdrop-filter: none;
759
766
  --origam-sheet---box-shadow: var(--origam-shadow---none);
760
767
  --origam-sheet---border-style: solid;
761
768
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -852,11 +859,15 @@
852
859
  --origam-field---border-opacity-outlined: 0.38;
853
860
  --origam-field---background-color: rgba(0, 0, 0, 0);
854
861
  --origam-field---color: var(--origam-color__text---primary);
862
+ --origam-field---backdrop-filter: none;
855
863
  --origam-field---opacity-disabled: var(--origam-opacity---50);
856
864
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
857
865
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
858
866
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
859
867
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
868
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
869
+ --origam-field---focus-ring-width: 0px;
870
+ --origam-field---focus-ring-offset: 0px;
860
871
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
861
872
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
862
873
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -869,8 +880,8 @@
869
880
  --origam-field__input---padding-block-xl: 14px;
870
881
  --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
871
882
  --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
872
- --origam-field__input---padding-start: var(--origam-space---4);
873
- --origam-field__input---padding-end: var(--origam-space---4);
883
+ --origam-field__input---padding-start: 0;
884
+ --origam-field__input---padding-end: 0;
874
885
  --origam-field__input---opacity: 0.7;
875
886
  --origam-field__label---font-size: 0.75em;
876
887
  --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1047,6 +1058,7 @@
1047
1058
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1048
1059
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-background-color: currentColor;
1061
+ --origam-selection-control__input---backdrop-filter: none;
1050
1062
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1051
1063
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1052
1064
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1274,6 +1286,7 @@
1274
1286
  --origam-overlay__absolute---position: absolute;
1275
1287
  --origam-overlay__contained---scrim-position: absolute;
1276
1288
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1289
+ --origam-overlay-scrim---backdrop-filter: none;
1277
1290
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1278
1291
  --origam-overlay-scrim---pointer-events: auto;
1279
1292
  --origam-overlay-scrim---border-radius: inherit;
@@ -1396,6 +1409,7 @@
1396
1409
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1397
1410
  --origam-menu---background: var(--origam-color__surface---raised);
1398
1411
  --origam-menu---color: var(--origam-color__text---primary);
1412
+ --origam-menu---backdrop-filter: none;
1399
1413
  --origam-menu---border-radius: var(--origam-radius---md);
1400
1414
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1401
1415
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1411,6 +1425,7 @@
1411
1425
  --origam-menu---offset-right: var(--origam-space---0);
1412
1426
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1413
1427
  --origam-tooltip---color: var(--origam-color__text---inverse);
1428
+ --origam-tooltip---backdrop-filter: none;
1414
1429
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1415
1430
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1416
1431
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2198,6 +2213,7 @@
2198
2213
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2199
2214
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2200
2215
  --origam-switch__track---border-width: var(--origam-border__width---0);
2216
+ --origam-switch__track---backdrop-filter: none;
2201
2217
  --origam-switch__thumb---size: 20px;
2202
2218
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2203
2219
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
@@ -2239,6 +2255,7 @@
2239
2255
  --origam-slider-field---padding-block: var(--origam-space---2);
2240
2256
  --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
2241
2257
  --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
2258
+ --origam-slider-field---border-radius: var(--origam-radius---full);
2242
2259
  --origam-slider-field__track---height: 4px;
2243
2260
  --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
2244
2261
  --origam-slider-field__track---border-radius: var(--origam-radius---full);
@@ -2883,6 +2900,7 @@
2883
2900
  --origam-card---z-index: var(--origam-zIndex---base);
2884
2901
  --origam-card---background: var(--origam-color__surface---raised);
2885
2902
  --origam-card---color: var(--origam-color__text---primary);
2903
+ --origam-card---backdrop-filter: none;
2886
2904
  --origam-card---box-shadow: var(--origam-shadow---sm);
2887
2905
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
2888
2906
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -2958,6 +2976,7 @@
2958
2976
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
2959
2977
  --origam-chip---background-color: var(--origam-color__surface---overlay);
2960
2978
  --origam-chip---color: var(--origam-color__text---primary);
2979
+ --origam-chip---backdrop-filter: none;
2961
2980
  --origam-chip---border-color: currentColor;
2962
2981
  --origam-chip---border-style: solid;
2963
2982
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -3103,6 +3122,9 @@
3103
3122
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
3104
3123
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
3105
3124
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
3125
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
3126
+ --origam-avatar-group__item---outline-style: solid;
3127
+ --origam-avatar-group__item---outline-width: 2px;
3106
3128
  --origam-badge__wrapper---display: flex;
3107
3129
  --origam-badge__wrapper---align-items: stretch;
3108
3130
  --origam-badge__wrapper---justify-content: start;
@@ -3277,6 +3299,7 @@
3277
3299
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
3278
3300
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
3279
3301
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
3302
+ --origam-snackbar-item---backdrop-filter: none;
3280
3303
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
3281
3304
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
3282
3305
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -3511,6 +3534,7 @@
3511
3534
  --origam-sheet---box-sizing: border-box;
3512
3535
  --origam-sheet---background: var(--origam-color__surface---default);
3513
3536
  --origam-sheet---color: var(--origam-color__text---primary);
3537
+ --origam-sheet---backdrop-filter: none;
3514
3538
  --origam-sheet---box-shadow: var(--origam-shadow---none);
3515
3539
  --origam-sheet---border-style: solid;
3516
3540
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -3607,11 +3631,15 @@
3607
3631
  --origam-field---border-opacity-outlined: 0.38;
3608
3632
  --origam-field---background-color: rgba(0, 0, 0, 0);
3609
3633
  --origam-field---color: var(--origam-color__text---primary);
3634
+ --origam-field---backdrop-filter: none;
3610
3635
  --origam-field---opacity-disabled: var(--origam-opacity---50);
3611
3636
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
3612
3637
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
3613
3638
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
3614
3639
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
3640
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
3641
+ --origam-field---focus-ring-width: 0px;
3642
+ --origam-field---focus-ring-offset: 0px;
3615
3643
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
3616
3644
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
3617
3645
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -3624,8 +3652,8 @@
3624
3652
  --origam-field__input---padding-block-xl: 14px;
3625
3653
  --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
3626
3654
  --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
3627
- --origam-field__input---padding-start: var(--origam-space---4);
3628
- --origam-field__input---padding-end: var(--origam-space---4);
3655
+ --origam-field__input---padding-start: 0;
3656
+ --origam-field__input---padding-end: 0;
3629
3657
  --origam-field__input---opacity: 0.7;
3630
3658
  --origam-field__label---font-size: 0.75em;
3631
3659
  --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -3802,6 +3830,7 @@
3802
3830
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
3803
3831
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
3804
3832
  --origam-selection-control__input---overlay-background-color: currentColor;
3833
+ --origam-selection-control__input---backdrop-filter: none;
3805
3834
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
3806
3835
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
3807
3836
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -4029,6 +4058,7 @@
4029
4058
  --origam-overlay__absolute---position: absolute;
4030
4059
  --origam-overlay__contained---scrim-position: absolute;
4031
4060
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
4061
+ --origam-overlay-scrim---backdrop-filter: none;
4032
4062
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
4033
4063
  --origam-overlay-scrim---pointer-events: auto;
4034
4064
  --origam-overlay-scrim---border-radius: inherit;
@@ -4151,6 +4181,7 @@
4151
4181
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
4152
4182
  --origam-menu---background: var(--origam-color__surface---raised);
4153
4183
  --origam-menu---color: var(--origam-color__text---primary);
4184
+ --origam-menu---backdrop-filter: none;
4154
4185
  --origam-menu---border-radius: var(--origam-radius---md);
4155
4186
  --origam-menu---box-shadow: var(--origam-shadow---lg);
4156
4187
  --origam-menu---max-height: calc(100vh - 32px);
@@ -4166,6 +4197,7 @@
4166
4197
  --origam-menu---offset-right: var(--origam-space---0);
4167
4198
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
4168
4199
  --origam-tooltip---color: var(--origam-color__text---inverse);
4200
+ --origam-tooltip---backdrop-filter: none;
4169
4201
  --origam-tooltip---font-size: var(--origam-font__size---sm);
4170
4202
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
4171
4203
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -4953,6 +4985,7 @@
4953
4985
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
4954
4986
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
4955
4987
  --origam-switch__track---border-width: var(--origam-border__width---0);
4988
+ --origam-switch__track---backdrop-filter: none;
4956
4989
  --origam-switch__thumb---size: 20px;
4957
4990
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
4958
4991
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
@@ -4994,6 +5027,7 @@
4994
5027
  --origam-slider-field---padding-block: var(--origam-space---2);
4995
5028
  --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
4996
5029
  --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
5030
+ --origam-slider-field---border-radius: var(--origam-radius---full);
4997
5031
  --origam-slider-field__track---height: 4px;
4998
5032
  --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
4999
5033
  --origam-slider-field__track---border-radius: var(--origam-radius---full);
package/dist/src/assets/css/tokens/light.css CHANGED
@@ -129,6 +129,7 @@
129
129
  --origam-card---z-index: var(--origam-zIndex---base);
130
130
  --origam-card---background: var(--origam-color__surface---raised);
131
131
  --origam-card---color: var(--origam-color__text---primary);
132
+ --origam-card---backdrop-filter: none;
132
133
  --origam-card---box-shadow: var(--origam-shadow---sm);
133
134
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
134
135
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -204,6 +205,7 @@
204
205
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
205
206
  --origam-chip---background-color: var(--origam-color__surface---overlay);
206
207
  --origam-chip---color: var(--origam-color__text---primary);
208
+ --origam-chip---backdrop-filter: none;
207
209
  --origam-chip---border-color: currentColor;
208
210
  --origam-chip---border-style: solid;
209
211
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -349,6 +351,9 @@
349
351
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
351
353
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
354
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
355
+ --origam-avatar-group__item---outline-style: solid;
356
+ --origam-avatar-group__item---outline-width: 2px;
352
357
  --origam-badge__wrapper---display: flex;
353
358
  --origam-badge__wrapper---align-items: stretch;
354
359
  --origam-badge__wrapper---justify-content: start;
@@ -523,6 +528,7 @@
523
528
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
524
529
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
525
530
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
531
+ --origam-snackbar-item---backdrop-filter: none;
526
532
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
528
534
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -757,6 +763,7 @@
757
763
  --origam-sheet---box-sizing: border-box;
758
764
  --origam-sheet---background: var(--origam-color__surface---default);
759
765
  --origam-sheet---color: var(--origam-color__text---primary);
766
+ --origam-sheet---backdrop-filter: none;
760
767
  --origam-sheet---box-shadow: var(--origam-shadow---none);
761
768
  --origam-sheet---border-style: solid;
762
769
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -853,11 +860,15 @@
853
860
  --origam-field---border-opacity-outlined: 0.38;
854
861
  --origam-field---background-color: rgba(0, 0, 0, 0);
855
862
  --origam-field---color: var(--origam-color__text---primary);
863
+ --origam-field---backdrop-filter: none;
856
864
  --origam-field---opacity-disabled: var(--origam-opacity---50);
857
865
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
858
866
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
859
867
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
860
868
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
869
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
870
+ --origam-field---focus-ring-width: 0px;
871
+ --origam-field---focus-ring-offset: 0px;
861
872
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
862
873
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
863
874
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -870,8 +881,8 @@
870
881
  --origam-field__input---padding-block-xl: 14px;
871
882
  --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
872
883
  --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
873
- --origam-field__input---padding-start: var(--origam-space---4);
874
- --origam-field__input---padding-end: var(--origam-space---4);
884
+ --origam-field__input---padding-start: 0;
885
+ --origam-field__input---padding-end: 0;
875
886
  --origam-field__input---opacity: 0.7;
876
887
  --origam-field__label---font-size: 0.75em;
877
888
  --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1048,6 +1059,7 @@
1048
1059
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1050
1061
  --origam-selection-control__input---overlay-background-color: currentColor;
1062
+ --origam-selection-control__input---backdrop-filter: none;
1051
1063
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1052
1064
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1053
1065
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1275,6 +1287,7 @@
1275
1287
  --origam-overlay__absolute---position: absolute;
1276
1288
  --origam-overlay__contained---scrim-position: absolute;
1277
1289
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1290
+ --origam-overlay-scrim---backdrop-filter: none;
1278
1291
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1279
1292
  --origam-overlay-scrim---pointer-events: auto;
1280
1293
  --origam-overlay-scrim---border-radius: inherit;
@@ -1397,6 +1410,7 @@
1397
1410
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1398
1411
  --origam-menu---background: var(--origam-color__surface---raised);
1399
1412
  --origam-menu---color: var(--origam-color__text---primary);
1413
+ --origam-menu---backdrop-filter: none;
1400
1414
  --origam-menu---border-radius: var(--origam-radius---md);
1401
1415
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1402
1416
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1412,6 +1426,7 @@
1412
1426
  --origam-menu---offset-right: var(--origam-space---0);
1413
1427
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1414
1428
  --origam-tooltip---color: var(--origam-color__text---inverse);
1429
+ --origam-tooltip---backdrop-filter: none;
1415
1430
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1416
1431
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1417
1432
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2199,6 +2214,7 @@
2199
2214
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2200
2215
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2201
2216
  --origam-switch__track---border-width: var(--origam-border__width---0);
2217
+ --origam-switch__track---backdrop-filter: none;
2202
2218
  --origam-switch__thumb---size: 20px;
2203
2219
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2204
2220
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
@@ -2240,6 +2256,7 @@
2240
2256
  --origam-slider-field---padding-block: var(--origam-space---2);
2241
2257
  --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
2242
2258
  --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
2259
+ --origam-slider-field---border-radius: var(--origam-radius---full);
2243
2260
  --origam-slider-field__track---height: 4px;
2244
2261
  --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
2245
2262
  --origam-slider-field__track---border-radius: var(--origam-radius---full);
package/dist/src/assets/scss/tokens/_dark.scss CHANGED
@@ -128,6 +128,7 @@
128
128
  --origam-card---z-index: var(--origam-zIndex---base);
129
129
  --origam-card---background: var(--origam-color__surface---raised);
130
130
  --origam-card---color: var(--origam-color__text---primary);
131
+ --origam-card---backdrop-filter: none;
131
132
  --origam-card---box-shadow: var(--origam-shadow---sm);
132
133
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
133
134
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -203,6 +204,7 @@
203
204
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
204
205
  --origam-chip---background-color: var(--origam-color__surface---overlay);
205
206
  --origam-chip---color: var(--origam-color__text---primary);
207
+ --origam-chip---backdrop-filter: none;
206
208
  --origam-chip---border-color: currentColor;
207
209
  --origam-chip---border-style: solid;
208
210
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -348,6 +350,9 @@
348
350
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
349
351
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
353
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
354
+ --origam-avatar-group__item---outline-style: solid;
355
+ --origam-avatar-group__item---outline-width: 2px;
351
356
  --origam-badge__wrapper---display: flex;
352
357
  --origam-badge__wrapper---align-items: stretch;
353
358
  --origam-badge__wrapper---justify-content: start;
@@ -522,6 +527,7 @@
522
527
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
523
528
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
524
529
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
530
+ --origam-snackbar-item---backdrop-filter: none;
525
531
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
526
532
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -756,6 +762,7 @@
756
762
  --origam-sheet---box-sizing: border-box;
757
763
  --origam-sheet---background: var(--origam-color__surface---default);
758
764
  --origam-sheet---color: var(--origam-color__text---primary);
765
+ --origam-sheet---backdrop-filter: none;
759
766
  --origam-sheet---box-shadow: var(--origam-shadow---none);
760
767
  --origam-sheet---border-style: solid;
761
768
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -852,11 +859,15 @@
852
859
  --origam-field---border-opacity-outlined: 0.38;
853
860
  --origam-field---background-color: rgba(0, 0, 0, 0);
854
861
  --origam-field---color: var(--origam-color__text---primary);
862
+ --origam-field---backdrop-filter: none;
855
863
  --origam-field---opacity-disabled: var(--origam-opacity---50);
856
864
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
857
865
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
858
866
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
859
867
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
868
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
869
+ --origam-field---focus-ring-width: 0px;
870
+ --origam-field---focus-ring-offset: 0px;
860
871
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
861
872
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
862
873
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -869,8 +880,8 @@
869
880
  --origam-field__input---padding-block-xl: 14px;
870
881
  --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
871
882
  --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
872
- --origam-field__input---padding-start: var(--origam-space---4);
873
- --origam-field__input---padding-end: var(--origam-space---4);
883
+ --origam-field__input---padding-start: 0;
884
+ --origam-field__input---padding-end: 0;
874
885
  --origam-field__input---opacity: 0.7;
875
886
  --origam-field__label---font-size: 0.75em;
876
887
  --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1047,6 +1058,7 @@
1047
1058
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1048
1059
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-background-color: currentColor;
1061
+ --origam-selection-control__input---backdrop-filter: none;
1050
1062
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1051
1063
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1052
1064
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1274,6 +1286,7 @@
1274
1286
  --origam-overlay__absolute---position: absolute;
1275
1287
  --origam-overlay__contained---scrim-position: absolute;
1276
1288
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1289
+ --origam-overlay-scrim---backdrop-filter: none;
1277
1290
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1278
1291
  --origam-overlay-scrim---pointer-events: auto;
1279
1292
  --origam-overlay-scrim---border-radius: inherit;
@@ -1396,6 +1409,7 @@
1396
1409
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1397
1410
  --origam-menu---background: var(--origam-color__surface---raised);
1398
1411
  --origam-menu---color: var(--origam-color__text---primary);
1412
+ --origam-menu---backdrop-filter: none;
1399
1413
  --origam-menu---border-radius: var(--origam-radius---md);
1400
1414
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1401
1415
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1411,6 +1425,7 @@
1411
1425
  --origam-menu---offset-right: var(--origam-space---0);
1412
1426
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1413
1427
  --origam-tooltip---color: var(--origam-color__text---inverse);
1428
+ --origam-tooltip---backdrop-filter: none;
1414
1429
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1415
1430
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1416
1431
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2198,6 +2213,7 @@
2198
2213
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2199
2214
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2200
2215
  --origam-switch__track---border-width: var(--origam-border__width---0);
2216
+ --origam-switch__track---backdrop-filter: none;
2201
2217
  --origam-switch__thumb---size: 20px;
2202
2218
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2203
2219
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
@@ -2239,6 +2255,7 @@
2239
2255
  --origam-slider-field---padding-block: var(--origam-space---2);
2240
2256
  --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
2241
2257
  --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
2258
+ --origam-slider-field---border-radius: var(--origam-radius---full);
2242
2259
  --origam-slider-field__track---height: 4px;
2243
2260
  --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
2244
2261
  --origam-slider-field__track---border-radius: var(--origam-radius---full);
package/dist/src/assets/scss/tokens/_light.scss CHANGED
@@ -129,6 +129,7 @@
129
129
  --origam-card---z-index: var(--origam-zIndex---base);
130
130
  --origam-card---background: var(--origam-color__surface---raised);
131
131
  --origam-card---color: var(--origam-color__text---primary);
132
+ --origam-card---backdrop-filter: none;
132
133
  --origam-card---box-shadow: var(--origam-shadow---sm);
133
134
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
134
135
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -204,6 +205,7 @@
204
205
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
205
206
  --origam-chip---background-color: var(--origam-color__surface---overlay);
206
207
  --origam-chip---color: var(--origam-color__text---primary);
208
+ --origam-chip---backdrop-filter: none;
207
209
  --origam-chip---border-color: currentColor;
208
210
  --origam-chip---border-style: solid;
209
211
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -349,6 +351,9 @@
349
351
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
351
353
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
354
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
355
+ --origam-avatar-group__item---outline-style: solid;
356
+ --origam-avatar-group__item---outline-width: 2px;
352
357
  --origam-badge__wrapper---display: flex;
353
358
  --origam-badge__wrapper---align-items: stretch;
354
359
  --origam-badge__wrapper---justify-content: start;
@@ -523,6 +528,7 @@
523
528
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
524
529
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
525
530
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
531
+ --origam-snackbar-item---backdrop-filter: none;
526
532
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
528
534
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -757,6 +763,7 @@
757
763
  --origam-sheet---box-sizing: border-box;
758
764
  --origam-sheet---background: var(--origam-color__surface---default);
759
765
  --origam-sheet---color: var(--origam-color__text---primary);
766
+ --origam-sheet---backdrop-filter: none;
760
767
  --origam-sheet---box-shadow: var(--origam-shadow---none);
761
768
  --origam-sheet---border-style: solid;
762
769
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -853,11 +860,15 @@
853
860
  --origam-field---border-opacity-outlined: 0.38;
854
861
  --origam-field---background-color: rgba(0, 0, 0, 0);
855
862
  --origam-field---color: var(--origam-color__text---primary);
863
+ --origam-field---backdrop-filter: none;
856
864
  --origam-field---opacity-disabled: var(--origam-opacity---50);
857
865
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
858
866
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
859
867
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
860
868
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
869
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
870
+ --origam-field---focus-ring-width: 0px;
871
+ --origam-field---focus-ring-offset: 0px;
861
872
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
862
873
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
863
874
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -870,8 +881,8 @@
870
881
  --origam-field__input---padding-block-xl: 14px;
871
882
  --origam-field__input---padding-top: var(--origam-field__input---padding-block-md);
872
883
  --origam-field__input---padding-bottom: var(--origam-field__input---padding-block-md);
873
- --origam-field__input---padding-start: var(--origam-space---4);
874
- --origam-field__input---padding-end: var(--origam-space---4);
884
+ --origam-field__input---padding-start: 0;
885
+ --origam-field__input---padding-end: 0;
875
886
  --origam-field__input---opacity: 0.7;
876
887
  --origam-field__label---font-size: 0.75em;
877
888
  --origam-field__label---transition-duration: var(--origam-motion__duration---normal);
@@ -1048,6 +1059,7 @@
1048
1059
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1050
1061
  --origam-selection-control__input---overlay-background-color: currentColor;
1062
+ --origam-selection-control__input---backdrop-filter: none;
1051
1063
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1052
1064
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1053
1065
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1275,6 +1287,7 @@
1275
1287
  --origam-overlay__absolute---position: absolute;
1276
1288
  --origam-overlay__contained---scrim-position: absolute;
1277
1289
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1290
+ --origam-overlay-scrim---backdrop-filter: none;
1278
1291
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1279
1292
  --origam-overlay-scrim---pointer-events: auto;
1280
1293
  --origam-overlay-scrim---border-radius: inherit;
@@ -1397,6 +1410,7 @@
1397
1410
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1398
1411
  --origam-menu---background: var(--origam-color__surface---raised);
1399
1412
  --origam-menu---color: var(--origam-color__text---primary);
1413
+ --origam-menu---backdrop-filter: none;
1400
1414
  --origam-menu---border-radius: var(--origam-radius---md);
1401
1415
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1402
1416
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1412,6 +1426,7 @@
1412
1426
  --origam-menu---offset-right: var(--origam-space---0);
1413
1427
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1414
1428
  --origam-tooltip---color: var(--origam-color__text---inverse);
1429
+ --origam-tooltip---backdrop-filter: none;
1415
1430
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1416
1431
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1417
1432
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2199,6 +2214,7 @@
2199
2214
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2200
2215
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2201
2216
  --origam-switch__track---border-width: var(--origam-border__width---0);
2217
+ --origam-switch__track---backdrop-filter: none;
2202
2218
  --origam-switch__thumb---size: 20px;
2203
2219
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2204
2220
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
@@ -2240,6 +2256,7 @@
2240
2256
  --origam-slider-field---padding-block: var(--origam-space---2);
2241
2257
  --origam-slider-field---transition-duration: var(--origam-motion__duration---fast);
2242
2258
  --origam-slider-field---transition-timing-function: var(--origam-motion__easing---standard);
2259
+ --origam-slider-field---border-radius: var(--origam-radius---full);
2243
2260
  --origam-slider-field__track---height: 4px;
2244
2261
  --origam-slider-field__track---background-color: var(--origam-color__surface---disabled);
2245
2262
  --origam-slider-field__track---border-radius: var(--origam-radius---full);
package/dist/src/components/Alert/OrigamAlert.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <component
3
- :is="tag"
3
+ :is="props.tag"
4
4
  :id="id"
5
5
  v-contrast
6
6
  :class="alertClasses"
@@ -118,6 +118,7 @@ import { vContrast } from "../../directives";
118
118
  import {
119
119
  useActive,
120
120
  useAdjacent,
121
+ useDefaults,
121
122
  useDensity,
122
123
  useDimension,
123
124
  useHover,
@@ -131,7 +132,7 @@ import {
131
132
  useTypography
132
133
  } from "../../composables";
133
134
  import { DENSITY, MDI_ICONS } from "../../enums";
134
- const props = defineProps({
135
+ const _props = defineProps({
135
136
  closable: { type: Boolean, required: false },
136
137
  closeIcon: { type: null, required: false, default: MDI_ICONS.CLOSE },
137
138
  closeLabel: { type: String, required: false, default: "origam.close" },
@@ -204,6 +205,7 @@ const props = defineProps({
204
205
  lineHeight: { type: String, required: false },
205
206
  letterSpacing: { type: String, required: false }
206
207
  });
208
+ const props = useDefaults(_props);
207
209
  const emits = defineEmits(["update:modelValue", "click:close", "update:hover"]);
208
210
  const { filterProps } = useProps(props);
209
211
  const { t } = useLocale();
package/dist/src/components/App/OrigamApp.vue CHANGED
@@ -4,10 +4,10 @@
4
4
  ref="origamAppRef"
5
5
  :class="appClasses"
6
6
  :style="appStyles"
7
- :color="color"
8
- :bg-color="bgColor"
9
- :full-height="fullHeight"
10
- :overlaps="overlaps"
7
+ :color="props.color"
8
+ :bg-color="props.bgColor"
9
+ :full-height="props.fullHeight"
10
+ :overlaps="props.overlaps"
11
11
  >
12
12
  <template #default>
13
13
  <slot name="default"/>
@@ -17,9 +17,9 @@
17
17
 
18
18
  <script lang="ts" setup>
19
19
  import { OrigamLayout } from "../../components";
20
- import { useProps, useRtl, useStyle } from "../../composables";
20
+ import { useDefaults, useProps, useRtl, useStyle } from "../../composables";
21
21
  import { computed, ref, StyleValue } from "vue";
22
- const props = defineProps({
22
+ const _props = defineProps({
23
23
  fullHeight: { type: Boolean, required: false, default: true },
24
24
  overlaps: { type: Array, required: false },
25
25
  id: { type: String, required: false },
@@ -28,6 +28,7 @@ const props = defineProps({
28
28
  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
29
29
  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
30
30
  });
31
+ const props = useDefaults(_props);
31
32
  const { filterProps } = useProps(props);
32
33
  const { rtlClasses } = useRtl();
33
34
  const origamAppRef = ref();