contain-css-svelte 1.2.1 → 1.2.2

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 (24) hide show
  1. package/dist/Card.svelte +156 -156
  2. package/dist/controls/Button.svelte +6 -0
  3. package/dist/controls/ButtonLink.svelte +1 -0
  4. package/dist/controls/Checkbox.svelte +1 -0
  5. package/dist/controls/CircleButton.svelte +1 -0
  6. package/dist/controls/RadioButton.svelte +1 -0
  7. package/dist/controls/Toggle.svelte +1 -0
  8. package/dist/dropdowns/DropdownMenu.svelte +2 -0
  9. package/dist/layout/Accordion.svelte +1 -0
  10. package/dist/layout/Container.svelte +156 -156
  11. package/dist/layout/DataListItem.svelte +160 -179
  12. package/dist/layout/Form.svelte +156 -156
  13. package/dist/layout/Hero.svelte +156 -156
  14. package/dist/layout/MenuList.svelte +5 -0
  15. package/dist/layout/Sidebar.svelte +1 -0
  16. package/dist/layout/Table.svelte +157 -156
  17. package/dist/layout/Tile.svelte +157 -156
  18. package/dist/misc/Progress.svelte +156 -156
  19. package/dist/overlays/Dialog.svelte +156 -156
  20. package/dist/overlays/Tooltip.svelte +156 -156
  21. package/dist/sass/_affordances.scss +7 -2
  22. package/dist/sass/_typography.scss +15 -12
  23. package/dist/typography/TextLayout.svelte +156 -156
  24. package/package.json +1 -1
package/dist/controls/Button.svelte CHANGED
@@ -185,6 +185,7 @@ button {
185
185
  button:hover {
186
186
  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
187
187
  transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
188
+ color: var(--_color);
188
189
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
189
190
  box-shadow: var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
190
191
  }
@@ -317,6 +318,7 @@ button.primary {
317
318
  button.primary:hover {
318
319
  filter: var(--primary-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
319
320
  transform: var(--primary-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
321
+ color: var(--_color);
320
322
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
321
323
  box-shadow: var(--primary-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
322
324
  }
@@ -439,6 +441,7 @@ button.warning {
439
441
  button.warning:hover {
440
442
  filter: var(--warning-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
441
443
  transform: var(--warning-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
444
+ color: var(--_color);
442
445
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
443
446
  box-shadow: var(--warning-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
444
447
  }
@@ -561,6 +564,7 @@ button.danger {
561
564
  button.danger:hover {
562
565
  filter: var(--danger-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
563
566
  transform: var(--danger-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
567
+ color: var(--_color);
564
568
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
565
569
  box-shadow: var(--danger-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
566
570
  }
@@ -683,6 +687,7 @@ button.success {
683
687
  button.success:hover {
684
688
  filter: var(--success-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
685
689
  transform: var(--success-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
690
+ color: var(--_color);
686
691
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
687
692
  box-shadow: var(--success-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
688
693
  }
@@ -805,6 +810,7 @@ button.info {
805
810
  button.info:hover {
806
811
  filter: var(--info-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05)))));
807
812
  transform: var(--info-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
813
+ color: var(--_color);
808
814
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
809
815
  box-shadow: var(--info-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
810
816
  }
package/dist/controls/ButtonLink.svelte CHANGED
@@ -188,6 +188,7 @@ a[role=button] {
188
188
  a[role=button]:hover {
189
189
  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
190
190
  transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
191
+ color: var(--_color);
191
192
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
192
193
  box-shadow: var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
193
194
  }
package/dist/controls/Checkbox.svelte CHANGED
@@ -268,6 +268,7 @@ label::before {
268
268
  label:hover::before {
269
269
  filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
270
270
  transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
271
+ color: var(--_color);
271
272
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
272
273
  box-shadow: var(--checkbox-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
273
274
  }
package/dist/controls/CircleButton.svelte CHANGED
@@ -246,6 +246,7 @@ button {
246
246
  button:hover {
247
247
  filter: var(--circle-button-hover-filter, var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))))));
248
248
  transform: var(--circle-button-hover-transform, var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)))));
249
+ color: var(--_color);
249
250
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
250
251
  box-shadow: var(--circle-button-hover-box-shadow, var(--mini-button-hover-box-shadow, var(--button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
251
252
  }
package/dist/controls/RadioButton.svelte CHANGED
@@ -247,6 +247,7 @@ label.radio-item::before {
247
247
  label.radio-item:hover::before {
248
248
  filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
249
249
  transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
250
+ color: var(--_color);
250
251
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
251
252
  box-shadow: var(--radio-button-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
252
253
  }
package/dist/controls/Toggle.svelte CHANGED
@@ -222,6 +222,7 @@ input[type=checkbox] {
222
222
  .toggle:hover .toggle-track {
223
223
  filter: var(--toggle-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
224
224
  transform: var(--toggle-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
225
+ color: var(--_color);
225
226
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
226
227
  box-shadow: var(--toggle-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
227
228
  }
package/dist/dropdowns/DropdownMenu.svelte CHANGED
@@ -406,6 +406,7 @@ button {
406
406
  button:hover {
407
407
  filter: var(--menu-trigger-hover-filter, var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05))))));
408
408
  transform: var(--menu-trigger-hover-transform, var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none)))));
409
+ color: var(--_color);
409
410
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
410
411
  box-shadow: var(--menu-trigger-hover-box-shadow, var(--menu-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
411
412
  }
@@ -544,6 +545,7 @@ button {
544
545
  .dropdown-content :global(.menu):hover {
545
546
  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));
546
547
  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
548
+ color: var(--_color);
547
549
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
548
550
  box-shadow: var(--menu-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
549
551
  }
package/dist/layout/Accordion.svelte CHANGED
@@ -291,6 +291,7 @@ div :global(details > summary) {
291
291
  div :global(details > summary):hover {
292
292
  filter: var(--accordion-hover-filter, var(--hover-filter, brightness(1.05)));
293
293
  transform: var(--accordion-hover-transform, var(--hover-transform, none));
294
+ color: var(--_color);
294
295
  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
295
296
  box-shadow: var(--accordion-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)));
296
297
  }