@deque/cauldron-styles 5.2.0 → 5.3.0-canary.14d052ed

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 +50 -19
  2. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -31,6 +31,7 @@
31
31
  --accent-warning: #ffdd75;
32
32
  --accent-warning-light: #ffa1a1;
33
33
  --accent-caution: #ffe69f;
34
+ --accent-warning-dark: #b88a00;
34
35
  --accent-info: #6cdaf2;
35
36
  --accent-info-light: #83e4fa;
36
37
  --accent-primary: #3c7aae;
@@ -564,7 +565,6 @@ button.Link {
564
565
  min-height: var(--button-thin-height);
565
566
  min-width: 100px;
566
567
  font-size: var(--text-size-smallest);
567
- line-height: var(--text-size-smallest);
568
568
  padding: 0 16px;
569
569
  }
570
570
 
@@ -1633,6 +1633,13 @@ textarea.Field--has-error:focus:hover,
1633
1633
  flex-wrap: wrap;
1634
1634
  }
1635
1635
 
1636
+ .Radio--inline {
1637
+ display: flex;
1638
+ align-items: baseline;
1639
+ flex-wrap: wrap;
1640
+ gap: var(--space-small);
1641
+ }
1642
+
1636
1643
  .Checkbox {
1637
1644
  margin-bottom: var(--space-smallest);
1638
1645
  }
@@ -2063,6 +2070,7 @@ p .Link {
2063
2070
  width: 100%;
2064
2071
  min-height: var(--select-min-height);
2065
2072
  padding: var(--space-three-quarters) var(--space-smallest);
2073
+ padding-right: var(--space-large);
2066
2074
  border: 1px solid var(--field-border-color);
2067
2075
  font-family: Roboto;
2068
2076
  font-weight: normal;
@@ -2431,7 +2439,7 @@ p .Link {
2431
2439
  align-items: center;
2432
2440
  box-sizing: border-box;
2433
2441
  display: flex;
2434
- padding: 4px 15px;
2442
+ padding: var(--space-smallest) var(--space-small);
2435
2443
  }
2436
2444
 
2437
2445
  .Toast.Toast--non-dismissible {
@@ -2491,7 +2499,8 @@ p .Link {
2491
2499
  margin-right: 3px;
2492
2500
  }
2493
2501
 
2494
- .Toast__message .Link {
2502
+ .Toast__message .Link,
2503
+ .Toast__message button.Link {
2495
2504
  color: var(--accent-dark);
2496
2505
  font-size: var(--text-size-small);
2497
2506
  font-weight: var(--font-weight-light);
@@ -2680,7 +2689,7 @@ button.TooltipTabstop {
2680
2689
  --top-bar-accent-error: var(--accent-danger);
2681
2690
  --top-bar-accent-success: #62e86b;
2682
2691
  --top-bar-accent-warning-other: var(--accent-danger-light);
2683
- --top-bar-height: 69px;
2692
+ --top-bar-height: 70px;
2684
2693
  --top-bar-height-thin: 43px;
2685
2694
  }
2686
2695
 
@@ -3133,7 +3142,7 @@ button.TooltipTabstop {
3133
3142
  }
3134
3143
 
3135
3144
  .Code .hljs-quote {
3136
- color: #969896;
3145
+ color: #666666;
3137
3146
  font-style: italic;
3138
3147
  }
3139
3148
 
@@ -3193,11 +3202,11 @@ button.TooltipTabstop {
3193
3202
  .Code .hljs-subst,
3194
3203
  .Code .hljs-meta,
3195
3204
  .Code .hljs-link {
3196
- color: #f99157;
3205
+ color: #8a3500;
3197
3206
  }
3198
3207
 
3199
3208
  .Code .hljs-deletion {
3200
- color: #dc322f;
3209
+ color: #c92e40;
3201
3210
  }
3202
3211
 
3203
3212
  .Code .hljs-formula {
@@ -3228,6 +3237,14 @@ button.TooltipTabstop {
3228
3237
  color: #cc99cc;
3229
3238
  }
3230
3239
 
3240
+ .cauldron--theme-dark .Code .hljs-symbol,
3241
+ .cauldron--theme-dark .Code .hljs-bullet,
3242
+ .cauldron--theme-dark .Code .hljs-subst,
3243
+ .cauldron--theme-dark .Code .hljs-meta,
3244
+ .cauldron--theme-dark .Code .hljs-link {
3245
+ color: #f99157;
3246
+ }
3247
+
3231
3248
  .cauldron--theme-dark .Code .hljs-comment {
3232
3249
  color: #9f9f9f;
3233
3250
  }
@@ -3241,6 +3258,11 @@ button.TooltipTabstop {
3241
3258
  color: var(--accent-primary-active);
3242
3259
  }
3243
3260
 
3261
+ .cauldron--theme-dark .Code .hljs-name,
3262
+ .cauldron--theme-dark .Code .hljs-section {
3263
+ color: #79a7d9;
3264
+ }
3265
+
3244
3266
  .cauldron--theme-dark .Code .hljs-variable,
3245
3267
  .cauldron--theme-dark .Code .hljs-template-variable,
3246
3268
  .cauldron--theme-dark .Code .hljs-tag,
@@ -3473,7 +3495,7 @@ button.TooltipTabstop {
3473
3495
  font-size: var(--text-size-small);
3474
3496
  border-collapse: collapse;
3475
3497
  text-align: left;
3476
- width: 100%;
3498
+ width: var(--table-width, 100%);
3477
3499
  overflow-wrap: break-word;
3478
3500
  }
3479
3501
 
@@ -3826,16 +3848,6 @@ button.TooltipTabstop {
3826
3848
  --panel-content-color: var(--gray-80);
3827
3849
  }
3828
3850
 
3829
- /* Resets aggressive Chrome user agent styles */
3830
-
3831
- .Panel > :is(.Panel__Header, .Panel__Content, .Panel__Heading) > *,
3832
- .Panel:first-child > :not(.Panel__Header, .Panel__Heading, .Panel__Content) {
3833
- -webkit-margin-before: 0;
3834
- -webkit-margin-after: 0;
3835
- margin-block-start: 0;
3836
- margin-block-end: 0;
3837
- }
3838
-
3839
3851
  .Panel {
3840
3852
  padding: var(--panel-padding);
3841
3853
  margin: 0;
@@ -3868,6 +3880,10 @@ button.TooltipTabstop {
3868
3880
  var(--space-small) calc(var(--panel-padding) * -1);
3869
3881
  }
3870
3882
 
3883
+ .Panel__Heading + .Panel__Content {
3884
+ margin-top: calc(var(--panel-padding) * -1);
3885
+ }
3886
+
3871
3887
  .Panel__Header {
3872
3888
  margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 0
3873
3889
  calc(var(--panel-padding) * -1);
@@ -3882,6 +3898,17 @@ button.TooltipTabstop {
3882
3898
  margin: 0 calc(var(--panel-padding) * -1);
3883
3899
  }
3884
3900
 
3901
+ .Panel > :not(.Panel__Heading, .Panel__Header, .Panel__Content):first-child,
3902
+ .Panel > :is(.Panel__Heading, .Panel__Header) + :not(.Panel__Content),
3903
+ .Panel__Content > :first-child {
3904
+ margin-top: 0;
3905
+ }
3906
+
3907
+ .Panel > :not(.Panel__Heading, .Panel__Header, .Panel__Content):last-child,
3908
+ .Panel__Content > :last-child {
3909
+ margin-bottom: 0;
3910
+ }
3911
+
3885
3912
  .Panel
3886
3913
  :is(.Panel__Header + .Panel__Content, .Panel__Content + .Panel__Content) {
3887
3914
  border-top: 1px solid var(--panel-divider-border-color);
@@ -3907,12 +3934,16 @@ button.TooltipTabstop {
3907
3934
  color: var(--panel-heading-color);
3908
3935
  }
3909
3936
 
3937
+ .Panel > :is(.Panel__Header, .Panel__Heading) > :is(h1, h2, h3, h4, h5, h6) {
3938
+ margin: 0;
3939
+ }
3940
+
3910
3941
  .Panel--collapsed {
3911
3942
  --panel-padding: 12px;
3912
3943
  }
3913
3944
 
3914
3945
  .Panel--collapsed .Panel__Heading {
3915
- margin: 0 0 12px 0;
3946
+ margin: 0 0 var(--panel-padding) 0;
3916
3947
  font-size: var(--text-size-normal);
3917
3948
  }
3918
3949
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deque/cauldron-styles",
3
- "version": "5.2.0",
3
+ "version": "5.3.0-canary.14d052ed",
4
4
  "license": "MPL-2.0",
5
5
  "description": "deque cauldron pattern library styles",
6
6
  "repository": "https://github.com/dequelabs/cauldron",
@@ -22,4 +22,4 @@
22
22
  "postcss-cli": "^7.1.1",
23
23
  "postcss-import": "^12.0.1"
24
24
  }
25
- }
25
+ }