@db-ux/core-foundations 2.0.8 → 2.0.10-popover-d7e8b9a

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 (73) hide show
  1. package/build/styles/absolute.css +660 -24
  2. package/build/styles/colors/_default-color-mappings.scss +392 -0
  3. package/build/styles/colors/_variables.additional-palette.scss +84 -0
  4. package/build/styles/colors/_variables.additional-speaking-colors.scss +2 -0
  5. package/build/styles/colors/_variables.additional.scss +1 -1
  6. package/build/styles/colors/classes/all.css +314 -0
  7. package/build/styles/colors/classes/blue.css +4 -0
  8. package/build/styles/colors/classes/brand.css +4 -0
  9. package/build/styles/colors/classes/burgundy.css +189 -0
  10. package/build/styles/colors/classes/burgundy.scss +6 -0
  11. package/build/styles/colors/classes/critical.css +4 -0
  12. package/build/styles/colors/classes/cyan.css +4 -0
  13. package/build/styles/colors/classes/green.css +4 -0
  14. package/build/styles/colors/classes/informational.css +4 -0
  15. package/build/styles/colors/classes/light-green.css +189 -0
  16. package/build/styles/colors/classes/light-green.scss +6 -0
  17. package/build/styles/colors/classes/neutral.css +4 -0
  18. package/build/styles/colors/classes/orange.css +4 -0
  19. package/build/styles/colors/classes/pink.css +4 -0
  20. package/build/styles/colors/classes/red.css +4 -0
  21. package/build/styles/colors/classes/successful.css +4 -0
  22. package/build/styles/colors/classes/turquoise.css +4 -0
  23. package/build/styles/colors/classes/violet.css +4 -0
  24. package/build/styles/colors/classes/warning.css +4 -0
  25. package/build/styles/colors/classes/yellow.css +4 -0
  26. package/build/styles/colors/speaking-colors/additional/_burgundy.speaking-colors.scss +140 -0
  27. package/build/styles/colors/speaking-colors/additional/_light-green.speaking-colors.scss +152 -0
  28. package/build/styles/defaults/_default-properties.scss +312 -24
  29. package/build/styles/defaults/_default-variables.scss +72 -24
  30. package/build/styles/defaults/default-code.css +1 -1
  31. package/build/styles/defaults/default-elevation.css +1 -1
  32. package/build/styles/defaults/default-fonts.css +1 -1
  33. package/build/styles/defaults/default-icons.css +1 -1
  34. package/build/styles/defaults/default-required.css +1 -1
  35. package/build/styles/defaults/default-root.css +1 -1
  36. package/build/styles/defaults/default-theme.css +1 -1
  37. package/build/styles/density/classes/all.css +4 -0
  38. package/build/styles/density/classes/expressive.css +4 -0
  39. package/build/styles/density/classes/functional.css +4 -0
  40. package/build/styles/density/classes/regular.css +4 -0
  41. package/build/styles/fonts/classes/all.css +4 -0
  42. package/build/styles/fonts/classes/body/2xl.css +4 -0
  43. package/build/styles/fonts/classes/body/2xs.css +4 -0
  44. package/build/styles/fonts/classes/body/3xl.css +4 -0
  45. package/build/styles/fonts/classes/body/3xs.css +4 -0
  46. package/build/styles/fonts/classes/body/all.css +4 -0
  47. package/build/styles/fonts/classes/body/lg.css +4 -0
  48. package/build/styles/fonts/classes/body/md.css +4 -0
  49. package/build/styles/fonts/classes/body/sm.css +4 -0
  50. package/build/styles/fonts/classes/body/xl.css +4 -0
  51. package/build/styles/fonts/classes/body/xs.css +4 -0
  52. package/build/styles/fonts/classes/headline/2xl.css +4 -0
  53. package/build/styles/fonts/classes/headline/2xs.css +4 -0
  54. package/build/styles/fonts/classes/headline/3xl.css +4 -0
  55. package/build/styles/fonts/classes/headline/3xs.css +4 -0
  56. package/build/styles/fonts/classes/headline/all.css +4 -0
  57. package/build/styles/fonts/classes/headline/lg.css +4 -0
  58. package/build/styles/fonts/classes/headline/md.css +4 -0
  59. package/build/styles/fonts/classes/headline/sm.css +4 -0
  60. package/build/styles/fonts/classes/headline/xl.css +4 -0
  61. package/build/styles/fonts/classes/headline/xs.css +4 -0
  62. package/build/styles/helpers/classes/all.css +4 -0
  63. package/build/styles/helpers/classes/divider.css +4 -0
  64. package/build/styles/helpers/classes/focus.css +4 -0
  65. package/build/styles/icons/absolute.css +1 -1
  66. package/build/styles/icons/relative.css +1 -1
  67. package/build/styles/icons/rollup.css +1 -1
  68. package/build/styles/icons/webpack.css +1 -1
  69. package/build/styles/index.css +396 -0
  70. package/build/styles/relative.css +660 -24
  71. package/build/styles/rollup.css +660 -24
  72. package/build/styles/webpack.css +660 -24
  73. package/package.json +1 -1
package/build/styles/index.css CHANGED
@@ -194,6 +194,10 @@ blockquote:not([class])::before, blockquote:not([class])::after {
194
194
 
195
195
  @layer variables {}
196
196
 
197
+ @layer variables {}
198
+
199
+ @layer variables {}
200
+
197
201
  /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
198
202
  /* Use fixed spacings for all kind of distances (margin, padding, ...) */
199
203
  /* The primary use-case for responsive spacings are
@@ -3877,6 +3881,398 @@ strong {
3877
3881
  var(--db-green-10),
3878
3882
  var(--db-green-10)
3879
3883
  );
3884
+ --db-light-green-origin-default: light-dark(
3885
+ var(--db-light-green-origin-light-default),
3886
+ var(--db-light-green-origin-dark-default)
3887
+ );
3888
+ --db-light-green-origin-hovered: light-dark(
3889
+ var(--db-light-green-origin-light-hovered),
3890
+ var(--db-light-green-origin-dark-hovered)
3891
+ );
3892
+ --db-light-green-origin-pressed: light-dark(
3893
+ var(--db-light-green-origin-light-pressed),
3894
+ var(--db-light-green-origin-dark-pressed)
3895
+ );
3896
+ --db-light-green-on-origin-default: light-dark(
3897
+ var(--db-light-green-on-origin-light-default),
3898
+ var(--db-light-green-on-origin-dark-default)
3899
+ );
3900
+ --db-light-green-on-bg-basic-emphasis-50-default: light-dark(
3901
+ var(--db-light-green-9),
3902
+ var(--db-light-green-5)
3903
+ );
3904
+ --db-light-green-on-bg-basic-emphasis-60-default: light-dark(
3905
+ var(--db-light-green-10),
3906
+ var(--db-light-green-6)
3907
+ );
3908
+ --db-light-green-on-bg-basic-emphasis-70-default: light-dark(
3909
+ var(--db-light-green-7),
3910
+ var(--db-light-green-8)
3911
+ );
3912
+ --db-light-green-on-bg-basic-emphasis-70-hovered: light-dark(
3913
+ var(--db-light-green-4),
3914
+ var(--db-light-green-10)
3915
+ );
3916
+ --db-light-green-on-bg-basic-emphasis-70-pressed: light-dark(
3917
+ var(--db-light-green-6),
3918
+ var(--db-light-green-9)
3919
+ );
3920
+ --db-light-green-on-bg-basic-emphasis-80-default: light-dark(
3921
+ var(--db-light-green-6),
3922
+ var(--db-light-green-9)
3923
+ );
3924
+ --db-light-green-on-bg-basic-emphasis-80-hovered: light-dark(
3925
+ var(--db-light-green-3),
3926
+ var(--db-light-green-12)
3927
+ );
3928
+ --db-light-green-on-bg-basic-emphasis-80-pressed: light-dark(
3929
+ var(--db-light-green-5),
3930
+ var(--db-light-green-10)
3931
+ );
3932
+ --db-light-green-on-bg-basic-emphasis-90-default: light-dark(
3933
+ var(--db-light-green-4),
3934
+ var(--db-light-green-10)
3935
+ );
3936
+ --db-light-green-on-bg-basic-emphasis-90-hovered: light-dark(
3937
+ var(--db-light-green-0),
3938
+ var(--db-light-green-14)
3939
+ );
3940
+ --db-light-green-on-bg-basic-emphasis-90-pressed: light-dark(
3941
+ var(--db-light-green-3),
3942
+ var(--db-light-green-11)
3943
+ );
3944
+ --db-light-green-on-bg-basic-emphasis-100-default: light-dark(
3945
+ var(--db-light-green-1),
3946
+ var(--db-light-green-12)
3947
+ );
3948
+ --db-light-green-on-bg-basic-emphasis-100-hovered: light-dark(
3949
+ var(--db-light-green-5),
3950
+ var(--db-light-green-9)
3951
+ );
3952
+ --db-light-green-on-bg-basic-emphasis-100-pressed: light-dark(
3953
+ var(--db-light-green-2),
3954
+ var(--db-light-green-11)
3955
+ );
3956
+ --db-light-green-on-bg-inverted-default: light-dark(
3957
+ var(--db-light-green-14),
3958
+ var(--db-light-green-3)
3959
+ );
3960
+ --db-light-green-on-bg-inverted-hovered: light-dark(
3961
+ var(--db-light-green-11),
3962
+ var(--db-light-green-0)
3963
+ );
3964
+ --db-light-green-on-bg-inverted-pressed: light-dark(
3965
+ var(--db-light-green-13),
3966
+ var(--db-light-green-2)
3967
+ );
3968
+ --db-light-green-on-bg-vibrant-default: light-dark(
3969
+ var(--db-light-green-1),
3970
+ var(--db-light-green-1)
3971
+ );
3972
+ --db-light-green-on-bg-vibrant-hovered: light-dark(
3973
+ var(--db-light-green-4),
3974
+ var(--db-light-green-4)
3975
+ );
3976
+ --db-light-green-on-bg-vibrant-pressed: light-dark(
3977
+ var(--db-light-green-2),
3978
+ var(--db-light-green-2)
3979
+ );
3980
+ --db-light-green-bg-basic-level-1-default: light-dark(
3981
+ var(--db-light-green-14),
3982
+ var(--db-light-green-1)
3983
+ );
3984
+ --db-light-green-bg-basic-level-1-hovered: light-dark(
3985
+ var(--db-light-green-13),
3986
+ var(--db-light-green-3)
3987
+ );
3988
+ --db-light-green-bg-basic-level-1-pressed: light-dark(
3989
+ var(--db-light-green-12),
3990
+ var(--db-light-green-4)
3991
+ );
3992
+ --db-light-green-bg-basic-level-2-default: light-dark(
3993
+ var(--db-light-green-13),
3994
+ var(--db-light-green-2)
3995
+ );
3996
+ --db-light-green-bg-basic-level-2-hovered: light-dark(
3997
+ var(--db-light-green-12),
3998
+ var(--db-light-green-4)
3999
+ );
4000
+ --db-light-green-bg-basic-level-2-pressed: light-dark(
4001
+ var(--db-light-green-11),
4002
+ var(--db-light-green-5)
4003
+ );
4004
+ --db-light-green-bg-basic-level-3-default: light-dark(
4005
+ var(--db-light-green-12),
4006
+ var(--db-light-green-3)
4007
+ );
4008
+ --db-light-green-bg-basic-level-3-hovered: light-dark(
4009
+ var(--db-light-green-11),
4010
+ var(--db-light-green-1)
4011
+ );
4012
+ --db-light-green-bg-basic-level-3-pressed: light-dark(
4013
+ var(--db-light-green-10),
4014
+ var(--db-light-green-0)
4015
+ );
4016
+ --db-light-green-bg-basic-transparent-full-default: light-dark(
4017
+ color-mix(in srgb, transparent 100%, var(--db-light-green-6)),
4018
+ color-mix(in srgb, transparent 100%, var(--db-light-green-9))
4019
+ );
4020
+ --db-light-green-bg-basic-transparent-semi-default: light-dark(
4021
+ color-mix(in srgb, transparent 92%, var(--db-light-green-6)),
4022
+ color-mix(in srgb, transparent 84%, var(--db-light-green-9))
4023
+ );
4024
+ --db-light-green-bg-basic-transparent-hovered: light-dark(
4025
+ color-mix(in srgb, transparent 76%, var(--db-light-green-6)),
4026
+ color-mix(in srgb, transparent 76%, var(--db-light-green-9))
4027
+ );
4028
+ --db-light-green-bg-basic-transparent-pressed: light-dark(
4029
+ color-mix(in srgb, transparent 68%, var(--db-light-green-6)),
4030
+ color-mix(in srgb, transparent 68%, var(--db-light-green-9))
4031
+ );
4032
+ --db-light-green-bg-inverted-contrast-max-default: light-dark(
4033
+ var(--db-light-green-1),
4034
+ var(--db-light-green-12)
4035
+ );
4036
+ --db-light-green-bg-inverted-contrast-max-hovered: light-dark(
4037
+ var(--db-light-green-5),
4038
+ var(--db-light-green-9)
4039
+ );
4040
+ --db-light-green-bg-inverted-contrast-max-pressed: light-dark(
4041
+ var(--db-light-green-2),
4042
+ var(--db-light-green-11)
4043
+ );
4044
+ --db-light-green-bg-inverted-contrast-high-default: light-dark(
4045
+ var(--db-light-green-6),
4046
+ var(--db-light-green-9)
4047
+ );
4048
+ --db-light-green-bg-inverted-contrast-high-hovered: light-dark(
4049
+ var(--db-light-green-2),
4050
+ var(--db-light-green-12)
4051
+ );
4052
+ --db-light-green-bg-inverted-contrast-high-pressed: light-dark(
4053
+ var(--db-light-green-5),
4054
+ var(--db-light-green-10)
4055
+ );
4056
+ --db-light-green-bg-inverted-contrast-low-default: light-dark(
4057
+ var(--db-light-green-7),
4058
+ var(--db-light-green-8)
4059
+ );
4060
+ --db-light-green-bg-inverted-contrast-low-hovered: light-dark(
4061
+ var(--db-light-green-3),
4062
+ var(--db-light-green-12)
4063
+ );
4064
+ --db-light-green-bg-inverted-contrast-low-pressed: light-dark(
4065
+ var(--db-light-green-6),
4066
+ var(--db-light-green-9)
4067
+ );
4068
+ --db-light-green-bg-vibrant-default: light-dark(
4069
+ var(--db-light-green-9),
4070
+ var(--db-light-green-9)
4071
+ );
4072
+ --db-light-green-bg-vibrant-hovered: light-dark(
4073
+ var(--db-light-green-12),
4074
+ var(--db-light-green-12)
4075
+ );
4076
+ --db-light-green-bg-vibrant-pressed: light-dark(
4077
+ var(--db-light-green-10),
4078
+ var(--db-light-green-10)
4079
+ );
4080
+ --db-burgundy-origin-default: light-dark(
4081
+ var(--db-burgundy-origin-light-default),
4082
+ var(--db-burgundy-origin-dark-default)
4083
+ );
4084
+ --db-burgundy-origin-hovered: light-dark(
4085
+ var(--db-burgundy-origin-light-hovered),
4086
+ var(--db-burgundy-origin-dark-hovered)
4087
+ );
4088
+ --db-burgundy-origin-pressed: light-dark(
4089
+ var(--db-burgundy-origin-light-pressed),
4090
+ var(--db-burgundy-origin-dark-pressed)
4091
+ );
4092
+ --db-burgundy-on-origin-default: light-dark(
4093
+ var(--db-burgundy-on-origin-light-default),
4094
+ var(--db-burgundy-on-origin-dark-default)
4095
+ );
4096
+ --db-burgundy-on-bg-basic-emphasis-50-default: light-dark(
4097
+ var(--db-burgundy-9),
4098
+ var(--db-burgundy-5)
4099
+ );
4100
+ --db-burgundy-on-bg-basic-emphasis-60-default: light-dark(
4101
+ var(--db-burgundy-10),
4102
+ var(--db-burgundy-6)
4103
+ );
4104
+ --db-burgundy-on-bg-basic-emphasis-70-default: light-dark(
4105
+ var(--db-burgundy-7),
4106
+ var(--db-burgundy-8)
4107
+ );
4108
+ --db-burgundy-on-bg-basic-emphasis-70-hovered: light-dark(
4109
+ var(--db-burgundy-4),
4110
+ var(--db-burgundy-10)
4111
+ );
4112
+ --db-burgundy-on-bg-basic-emphasis-70-pressed: light-dark(
4113
+ var(--db-burgundy-6),
4114
+ var(--db-burgundy-9)
4115
+ );
4116
+ --db-burgundy-on-bg-basic-emphasis-80-default: light-dark(
4117
+ var(--db-burgundy-6),
4118
+ var(--db-burgundy-9)
4119
+ );
4120
+ --db-burgundy-on-bg-basic-emphasis-80-hovered: light-dark(
4121
+ var(--db-burgundy-3),
4122
+ var(--db-burgundy-12)
4123
+ );
4124
+ --db-burgundy-on-bg-basic-emphasis-80-pressed: light-dark(
4125
+ var(--db-burgundy-5),
4126
+ var(--db-burgundy-10)
4127
+ );
4128
+ --db-burgundy-on-bg-basic-emphasis-90-default: light-dark(
4129
+ var(--db-burgundy-4),
4130
+ var(--db-burgundy-10)
4131
+ );
4132
+ --db-burgundy-on-bg-basic-emphasis-90-hovered: light-dark(
4133
+ var(--db-burgundy-0),
4134
+ var(--db-burgundy-14)
4135
+ );
4136
+ --db-burgundy-on-bg-basic-emphasis-90-pressed: light-dark(
4137
+ var(--db-burgundy-3),
4138
+ var(--db-burgundy-11)
4139
+ );
4140
+ --db-burgundy-on-bg-basic-emphasis-100-default: light-dark(
4141
+ var(--db-burgundy-1),
4142
+ var(--db-burgundy-12)
4143
+ );
4144
+ --db-burgundy-on-bg-basic-emphasis-100-hovered: light-dark(
4145
+ var(--db-burgundy-5),
4146
+ var(--db-burgundy-9)
4147
+ );
4148
+ --db-burgundy-on-bg-basic-emphasis-100-pressed: light-dark(
4149
+ var(--db-burgundy-2),
4150
+ var(--db-burgundy-11)
4151
+ );
4152
+ --db-burgundy-on-bg-inverted-default: light-dark(
4153
+ var(--db-burgundy-14),
4154
+ var(--db-burgundy-3)
4155
+ );
4156
+ --db-burgundy-on-bg-inverted-hovered: light-dark(
4157
+ var(--db-burgundy-11),
4158
+ var(--db-burgundy-0)
4159
+ );
4160
+ --db-burgundy-on-bg-inverted-pressed: light-dark(
4161
+ var(--db-burgundy-13),
4162
+ var(--db-burgundy-2)
4163
+ );
4164
+ --db-burgundy-on-bg-vibrant-default: light-dark(
4165
+ var(--db-burgundy-1),
4166
+ var(--db-burgundy-1)
4167
+ );
4168
+ --db-burgundy-on-bg-vibrant-hovered: light-dark(
4169
+ var(--db-burgundy-4),
4170
+ var(--db-burgundy-4)
4171
+ );
4172
+ --db-burgundy-on-bg-vibrant-pressed: light-dark(
4173
+ var(--db-burgundy-2),
4174
+ var(--db-burgundy-2)
4175
+ );
4176
+ --db-burgundy-bg-basic-level-1-default: light-dark(
4177
+ var(--db-burgundy-14),
4178
+ var(--db-burgundy-1)
4179
+ );
4180
+ --db-burgundy-bg-basic-level-1-hovered: light-dark(
4181
+ var(--db-burgundy-13),
4182
+ var(--db-burgundy-3)
4183
+ );
4184
+ --db-burgundy-bg-basic-level-1-pressed: light-dark(
4185
+ var(--db-burgundy-12),
4186
+ var(--db-burgundy-4)
4187
+ );
4188
+ --db-burgundy-bg-basic-level-2-default: light-dark(
4189
+ var(--db-burgundy-13),
4190
+ var(--db-burgundy-2)
4191
+ );
4192
+ --db-burgundy-bg-basic-level-2-hovered: light-dark(
4193
+ var(--db-burgundy-12),
4194
+ var(--db-burgundy-4)
4195
+ );
4196
+ --db-burgundy-bg-basic-level-2-pressed: light-dark(
4197
+ var(--db-burgundy-11),
4198
+ var(--db-burgundy-5)
4199
+ );
4200
+ --db-burgundy-bg-basic-level-3-default: light-dark(
4201
+ var(--db-burgundy-12),
4202
+ var(--db-burgundy-3)
4203
+ );
4204
+ --db-burgundy-bg-basic-level-3-hovered: light-dark(
4205
+ var(--db-burgundy-11),
4206
+ var(--db-burgundy-1)
4207
+ );
4208
+ --db-burgundy-bg-basic-level-3-pressed: light-dark(
4209
+ var(--db-burgundy-10),
4210
+ var(--db-burgundy-0)
4211
+ );
4212
+ --db-burgundy-bg-basic-transparent-full-default: light-dark(
4213
+ color-mix(in srgb, transparent 100%, var(--db-burgundy-6)),
4214
+ color-mix(in srgb, transparent 100%, var(--db-burgundy-9))
4215
+ );
4216
+ --db-burgundy-bg-basic-transparent-semi-default: light-dark(
4217
+ color-mix(in srgb, transparent 92%, var(--db-burgundy-6)),
4218
+ color-mix(in srgb, transparent 84%, var(--db-burgundy-9))
4219
+ );
4220
+ --db-burgundy-bg-basic-transparent-hovered: light-dark(
4221
+ color-mix(in srgb, transparent 76%, var(--db-burgundy-6)),
4222
+ color-mix(in srgb, transparent 76%, var(--db-burgundy-9))
4223
+ );
4224
+ --db-burgundy-bg-basic-transparent-pressed: light-dark(
4225
+ color-mix(in srgb, transparent 68%, var(--db-burgundy-6)),
4226
+ color-mix(in srgb, transparent 68%, var(--db-burgundy-9))
4227
+ );
4228
+ --db-burgundy-bg-inverted-contrast-max-default: light-dark(
4229
+ var(--db-burgundy-1),
4230
+ var(--db-burgundy-12)
4231
+ );
4232
+ --db-burgundy-bg-inverted-contrast-max-hovered: light-dark(
4233
+ var(--db-burgundy-5),
4234
+ var(--db-burgundy-9)
4235
+ );
4236
+ --db-burgundy-bg-inverted-contrast-max-pressed: light-dark(
4237
+ var(--db-burgundy-2),
4238
+ var(--db-burgundy-11)
4239
+ );
4240
+ --db-burgundy-bg-inverted-contrast-high-default: light-dark(
4241
+ var(--db-burgundy-6),
4242
+ var(--db-burgundy-9)
4243
+ );
4244
+ --db-burgundy-bg-inverted-contrast-high-hovered: light-dark(
4245
+ var(--db-burgundy-2),
4246
+ var(--db-burgundy-12)
4247
+ );
4248
+ --db-burgundy-bg-inverted-contrast-high-pressed: light-dark(
4249
+ var(--db-burgundy-5),
4250
+ var(--db-burgundy-10)
4251
+ );
4252
+ --db-burgundy-bg-inverted-contrast-low-default: light-dark(
4253
+ var(--db-burgundy-7),
4254
+ var(--db-burgundy-8)
4255
+ );
4256
+ --db-burgundy-bg-inverted-contrast-low-hovered: light-dark(
4257
+ var(--db-burgundy-3),
4258
+ var(--db-burgundy-12)
4259
+ );
4260
+ --db-burgundy-bg-inverted-contrast-low-pressed: light-dark(
4261
+ var(--db-burgundy-6),
4262
+ var(--db-burgundy-9)
4263
+ );
4264
+ --db-burgundy-bg-vibrant-default: light-dark(
4265
+ var(--db-burgundy-9),
4266
+ var(--db-burgundy-9)
4267
+ );
4268
+ --db-burgundy-bg-vibrant-hovered: light-dark(
4269
+ var(--db-burgundy-12),
4270
+ var(--db-burgundy-12)
4271
+ );
4272
+ --db-burgundy-bg-vibrant-pressed: light-dark(
4273
+ var(--db-burgundy-10),
4274
+ var(--db-burgundy-10)
4275
+ );
3880
4276
  }
3881
4277
  }
3882
4278
  /* Document