@deque/cauldron-styles 6.4.2-canary.443249a1 → 6.4.2-canary.49a2ec0b

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 (2) hide show
  1. package/dist/index.css +84 -10
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1399,6 +1399,10 @@ button.Link {
1399
1399
  color: var(--accent-light);
1400
1400
  }
1401
1401
 
1402
+ .cauldron--theme-dark .Button--tertiary:is(:hover, :active, :focus) {
1403
+ border: 2px solid var(--accent-light);
1404
+ }
1405
+
1402
1406
  .cauldron--theme-dark .Button--tertiary:not(:hover, :focus) {
1403
1407
  color: #fff;
1404
1408
  }
@@ -4535,17 +4539,20 @@ fieldset.Panel {
4535
4539
  }
4536
4540
 
4537
4541
  .Breadcrumb__Link {
4538
- font-weight: 400;
4539
4542
  padding: 0;
4540
4543
  display: inline;
4541
4544
  }
4542
4545
 
4543
4546
  .Breadcrumb__Item {
4544
- font-weight: 500;
4547
+ font-weight: var(--font-weight-medium);
4545
4548
  color: var(--link-text-color);
4546
4549
  display: inline;
4547
4550
  }
4548
4551
 
4552
+ .Breadcrumb__Item:last-child {
4553
+ font-weight: var(--font-weight-normal);
4554
+ }
4555
+
4549
4556
  :root {
4550
4557
  --two-column-panel-border-color: var(--gray-40);
4551
4558
  --two-column-panel-background-color: #fff;
@@ -4934,7 +4941,7 @@ button.Accordion__trigger {
4934
4941
  --notice-background-color: var(--notice-info-color);
4935
4942
  --notice-border-color: var(--accent-dark);
4936
4943
  --notice-link-hover-color: var(--accent-medium);
4937
- --notice-icon-size: 1.2em;
4944
+ --notice-icon-size: 1rem;
4938
4945
  }
4939
4946
 
4940
4947
  .Notice--info {
@@ -4950,20 +4957,35 @@ button.Accordion__trigger {
4950
4957
  }
4951
4958
 
4952
4959
  .Notice {
4953
- display: block;
4954
- padding: var(--space-smaller) var(--space-small);
4960
+ display: grid;
4961
+ grid-template-columns: auto 1fr;
4962
+ gap: var(--space-small);
4963
+ padding: var(--space-large);
4964
+ align-items: start;
4965
+ border-radius: 4px;
4955
4966
  border: 1px solid var(--notice-border-color);
4956
4967
  background-color: var(--notice-background-color);
4957
4968
  color: var(--notice-text-color);
4958
- width: 100%;
4959
- font-size: var(--text-size-smaller);
4969
+ }
4970
+
4971
+ .Notice--condensed {
4972
+ grid-template-columns: 1fr;
4973
+ padding: var(--space-small);
4974
+ gap: var(--space-smallest);
4975
+ }
4976
+
4977
+ .Notice__content {
4978
+ grid-column: 2;
4979
+ }
4980
+
4981
+ .Notice--condensed .Notice__content {
4982
+ grid-column: 1;
4960
4983
  }
4961
4984
 
4962
4985
  .Notice .Notice__title,
4963
4986
  .Notice .Notice__title > :is(h1, h2, h3, h4, h5, h6) {
4964
4987
  display: flex;
4965
4988
  align-items: flex-start;
4966
- font-size: var(--text-size-small);
4967
4989
  font-weight: var(--notice-title-font-weight);
4968
4990
  margin: 0;
4969
4991
  padding: 0;
@@ -4971,7 +4993,7 @@ button.Accordion__trigger {
4971
4993
  color: var(--notice-title-text-color);
4972
4994
  }
4973
4995
 
4974
- .Notice .Notice__title + .Notice__content {
4996
+ .Notice .Notice__content {
4975
4997
  margin-top: var(--space-smallest);
4976
4998
  }
4977
4999
 
@@ -4990,7 +5012,6 @@ button.Accordion__trigger {
4990
5012
  .Notice button.Link,
4991
5013
  .Notice a.Link {
4992
5014
  color: var(--accent-dark);
4993
- font-size: var(--text-size-small);
4994
5015
  font-weight: var(--font-weight-light);
4995
5016
  text-decoration: underline;
4996
5017
  }
@@ -5011,6 +5032,15 @@ button.Accordion__trigger {
5011
5032
  margin-bottom: var(--space-smallest);
5012
5033
  }
5013
5034
 
5035
+ .Notice ul {
5036
+ margin: var(--space-smallest) 0;
5037
+ padding-left: var(--space-small);
5038
+ }
5039
+
5040
+ .Notice li {
5041
+ margin-bottom: var(--space-smallest);
5042
+ }
5043
+
5014
5044
  :root {
5015
5045
  --combobox-listbox-border-color: var(--gray-40);
5016
5046
  --combobox-listbox-background-color: #fff;
@@ -5454,3 +5484,47 @@ button.Accordion__trigger {
5454
5484
  -webkit-box-orient: vertical;
5455
5485
  white-space: normal;
5456
5486
  }
5487
+
5488
+ :root {
5489
+ --badge-text-color: var(--gray-90);
5490
+ --badge-background-color: transparent;
5491
+ --badge-border-color: var(--gray-30);
5492
+
5493
+ --badge-height: var(--button-height);
5494
+ --badge-small-height: 1.5rem;
5495
+
5496
+ --badge-font-size: 1rem;
5497
+ }
5498
+
5499
+ .cauldron--theme-dark {
5500
+ --badge-text-color: var(--white);
5501
+ --badge-background-color: var(--accent-medium);
5502
+ --badge-border-color: var(--stroke-dark);
5503
+ }
5504
+
5505
+ .Badge {
5506
+ color: var(--badge-text-color);
5507
+ background-color: var(--badge-background-color);
5508
+ border: 1px solid var(--badge-border-color);
5509
+ display: inline-flex;
5510
+ justify-content: center;
5511
+ align-items: center;
5512
+ padding: 0 var(--space-small) 0 var(--space-smaller);
5513
+ min-height: var(--badge-height);
5514
+ border-radius: var(--badge-height);
5515
+ font-size: var(--badge-font-size);
5516
+ }
5517
+
5518
+ .Badge--small {
5519
+ border-radius: var(--badge-small-height);
5520
+ min-height: var(--badge-small-height);
5521
+ }
5522
+
5523
+ .Badge__Label {
5524
+ margin-right: 3px;
5525
+ font-weight: var(--font-weight-medium);
5526
+ }
5527
+
5528
+ .Badge .Icon {
5529
+ margin: 0 var(--space-half) 0 -4px;
5530
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-styles",
3
- "version": "6.4.2-canary.443249a1",
3
+ "version": "6.4.2-canary.49a2ec0b",
4
4
  "license": "MPL-2.0",
5
5
  "description": "deque cauldron pattern library styles",
6
6
  "repository": "https://github.com/dequelabs/cauldron",