@deque/cauldron-styles 6.4.2-canary.c0101d73 → 6.4.2-canary.d80fe1ac

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