@deque/cauldron-styles 7.1.0 → 7.2.0-canary.22ddc1b0

package/dist/index.css

@@ -1,6 +1,6 @@
 /*
  * variable naming convention:
- * --{component name (if applicable)}-{style property}-{...modifiers (if applicable, hypen separated)}
+ * --{component name (if applicable)}-{style property}-{...modifiers (if applicable, hyphen separated)}
  * example: --foo-background-color-light
  */
 
@@ -51,6 +51,9 @@
   --issue-moderate: #f0c4f8;
   --issue-minor: var(--gray-20);
 
+  /* radius */
+  --radius-16: 16px;
+
   /* text colours */
   --text-color-base: var(--gray-60);
   --text-color-light: var(--white);
@@ -501,7 +504,7 @@ ul.semantic-only {
   --field-icon-active-color: rgba(60, 122, 174, 0.25);
   --field-icon-error-active-color: rgba(217, 50, 81, 0.25);
   --field-icon-checked-color: var(--accent-primary);
-  --field-icon-checked-disabled-color: var(--accent-primary-dsiabled, #78a6d8);
+  --field-icon-checked-disabled-color: var(--accent-primary-disabled, #78a6d8);
   --field-icon-unchecked-disabled-color: var(--gray-40);
   --field-icon-focus-color: var(--focus-light);
   --field-error-text-color: var(--error);
@@ -1086,7 +1089,8 @@ textarea.Field--has-error:focus:hover,
 
 .TextFieldWrapper:focus-within {
   border: 1px solid var(--text-field-wrapper-border-focus-color);
-  box-shadow: 0 0 0 1px var(--text-field-wrapper-border-focus-color),
+  box-shadow:
+    0 0 0 1px var(--text-field-wrapper-border-focus-color),
     0 0 5px var(--text-field-wrapper-border-focus-glow-color),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -1098,21 +1102,24 @@ textarea.Field--has-error:focus:hover,
 
 .TextFieldWrapper--error:focus-within {
   border: 1px solid var(--text-field-wrapper-error-border-color);
-  box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
+  box-shadow:
+    0 0 0 1px var(--text-field-wrapper-error-border-color),
     0 0 5px var(--field-border-color-error-focus-glow),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .TextFieldWrapper--error:focus-within:hover {
   border: 1px solid var(--text-field-wrapper-error-border-color);
-  box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
+  box-shadow:
+    0 0 0 1px var(--text-field-wrapper-error-border-color),
     0 0 5px var(--field-border-color-error-focus-glow),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .TextFieldWrapper--error:hover {
   border: 1px solid var(--text-field-wrapper-error-border-color);
-  box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
+  box-shadow:
+    0 0 0 1px var(--text-field-wrapper-error-border-color),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
@@ -2438,8 +2445,7 @@ a.IconButton {
   font-style: normal;
   font-size: var(--text-size-small);
   color: var(--field-content-color);
-  -webkit-text-decoration: rgb(102, 102, 102);
-          text-decoration: rgb(102, 102, 102);
+  text-decoration: rgb(102, 102, 102);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -2628,7 +2634,9 @@ a.IconButton {
 
 .RadioCard__overlay.RadioCard__overlay--focused {
   border: 1px solid var(--focus);
-  box-shadow: inset 0 0 0 1px var(--focus), 0 0 4px 2px var(--focus-glow);
+  box-shadow:
+    inset 0 0 0 1px var(--focus),
+    0 0 4px 2px var(--focus-glow);
 }
 
 .RadioCard__overlay--checked.RadioCard__overlay--checked {
@@ -3443,6 +3451,7 @@ button.TooltipTabstop {
   --code-text-color: var(--accent-light);
   --code-background-color: var(--accent-dark);
   --code-border-color: var(--stroke-dark);
+  --code-border: 1px solid var(--code-border-color);
 }
 
 .Code__Header {
@@ -3860,8 +3869,7 @@ button.TooltipTabstop {
 
 :root {
   --table-header-text-color: var(--gray-90);
-  --table-header-background-color: var(--gray-20);
-  --table-header-sorting-background-color: #caddec;
+  --table-header-background-color: var(--white);
   --table-header-background-color-hover: #dddddd;
   /* --table-header-sorting-text-color will be deprecated */
   --table-header-sorting-text-color: var(--gray-90);
@@ -3871,21 +3879,22 @@ button.TooltipTabstop {
   --table-space: var(--space-small);
   --table-header-sorting-border-color: var(--gray-90);
   --table-box-shadow: var(--drop-shadow-raised);
+  /* --table-odd-row-background will be deprecated */
   --table-odd-row-background: var(--gray-10);
   --table-sort-hover-focus-ring-color: var(--gray-90);
 }
 
 .cauldron--theme-dark {
   --table-header-text-color: var(--white);
-  --table-header-background-color: var(--accent-medium);
+  --table-header-background-color: var(--accent-dark);
   /* --table-header-sorting-text-color will be deprecated */
   --table-header-sorting-text-color: var(--white);
-  --table-header-sorting-background-color: #53636e;
   --table-header-background-color-hover: #53636e;
   --table-cell-text-color: var(--accent-light);
-  --table-cell-background-color: var(--accent-medium);
+  --table-cell-background-color: var(--accent-dark);
   --table-row-border-color: #5d676f;
   --table-header-sorting-border-color: var(--accent-info);
+  /* --table-odd-row-background will be deprecated */
   --table-odd-row-background: var(--gray-90);
   --table-sort-hover-focus-ring-color: var(--accent-light);
 }
@@ -3927,10 +3936,6 @@ button.TooltipTabstop {
   border-bottom: none;
 }
 
-.TableBody .TableRow:nth-child(odd) .TableCell {
-  background: var(--table-odd-row-background);
-}
-
 .TableHeader[aria-sort] {
   padding: 0;
 }
@@ -4318,12 +4323,14 @@ button.TooltipTabstop {
 
 :root {
   --panel-border-color: var(--gray-40);
+  --panel-border-radius: var(--radius-16);
+  --panel-border-width: 1px;
   --panel-background-color: var(--white);
   --panel-heading-color: var(--gray-90);
   --panel-padding: var(--space-small);
   --panel-divider-border-color: var(--gray-40);
   --panel-content-color: var(--gray-80);
-  --panel-border: 1px solid var(--panel-border-color);
+  --panel-border: var(--panel-border-width) solid var(--panel-border-color);
   --panel-box-shadow: var(--drop-shadow-raised);
 }
 
@@ -4331,7 +4338,7 @@ button.TooltipTabstop {
   padding: var(--panel-padding);
   margin: 0;
   border: var(--panel-border);
-  border-radius: 3px;
+  border-radius: var(--panel-border-radius);
   box-shadow: var(--panel-box-shadow);
   background-color: var(--panel-background-color);
   word-break: break-word;
@@ -4366,6 +4373,14 @@ button.TooltipTabstop {
 .Panel__Header {
   margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 0
     calc(var(--panel-padding) * -1);
+  border-start-start-radius: max(
+    0px,
+    calc(var(--panel-border-radius) - var(--panel-border-width))
+  );
+  border-start-end-radius: max(
+    0px,
+    calc(var(--panel-border-radius) - var(--panel-border-width))
+  );
 }
 
 .Panel--no-padding > :is(.Panel__Heading, .Panel__Header, .Panel__Content) {
@@ -4390,7 +4405,7 @@ button.TooltipTabstop {
 
 .Panel
   :is(.Panel__Header + .Panel__Content, .Panel__Content + .Panel__Content) {
-  border-top: 1px solid var(--panel-divider-border-color);
+  border-top: var(--panel-border-width) solid var(--panel-divider-border-color);
 }
 
 .Panel__Content:last-child {
@@ -4402,7 +4417,8 @@ button.TooltipTabstop {
 }
 
 .Panel > .Panel__Heading {
-  border-bottom: 1px solid var(--panel-divider-border-color);
+  border-bottom: var(--panel-border-width) solid
+    var(--panel-divider-border-color);
 }
 
 .Panel > .Panel__Heading:is(h1, h2, h3, h4, h5, h6),
@@ -4442,6 +4458,7 @@ fieldset.Panel {
 
 .cauldron--theme-dark {
   --panel-border-color: var(--stroke-dark);
+  --panel-border: var(--panel-border-width) solid var(--panel-border-color);
   --panel-background-color: var(--accent-medium);
   --panel-heading-color: #fff;
   --panel-divider-border-color: var(--stroke-dark);
@@ -4691,12 +4708,14 @@ fieldset.Panel {
 }
 
 .NavBar.NavBar--collapsed > ul > .NavItem--active {
-  box-shadow: inset 0px -1px 0px var(--top-nav-box-shadow-color),
+  box-shadow:
+    inset 0px -1px 0px var(--top-nav-box-shadow-color),
     inset 6px 0px 0px var(--top-nav-active-shadow-color);
 }
 
 .NavBar.NavBar--collapsed > .NavBar__trigger--active {
-  box-shadow: inset 0px -1px 0px var(--top-nav-box-shadow-color),
+  box-shadow:
+    inset 0px -1px 0px var(--top-nav-box-shadow-color),
     inset 0px 4px 0px var(--top-nav-active-shadow-color);
   z-index: calc(var(--z-index-top-nav) + 1);
 }
@@ -5265,8 +5284,7 @@ button.Accordion__trigger {
   font-size: var(--text-size-small);
   margin-top: var(--space-small);
   color: var(--accordion-trigger-text-color);
-  -webkit-text-decoration: var(--accordion-trigger-text-decoration);
-          text-decoration: var(--accordion-trigger-text-decoration);
+  text-decoration: var(--accordion-trigger-text-decoration);
 }
 
 .Accordion__trigger[aria-expanded='true'] {
@@ -5279,8 +5297,7 @@ button.Accordion__trigger {
   box-shadow: inset 8px 0 0 -4px var(--accordion-trigger-box-shadow-hover);
   color: var(--accordion-trigger-text-color-hover);
   transition: all 0.2s ease-in-out;
-  -webkit-text-decoration: underline solid var(--accordion-trigger-text-color-hover);
-          text-decoration: underline solid var(--accordion-trigger-text-color-hover);
+  text-decoration: underline solid var(--accordion-trigger-text-color-hover);
 }
 
 .Accordion__trigger:hover .Icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "7.1.0",
+  "version": "7.2.0-canary.22ddc1b0",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -9,17 +9,17 @@
   "files": [
     "dist/"
   ],
-  "scripts": {
-    "build": "postcss index.css --dir ./dist",
-    "dev": "npm run build -- --watch",
-    "prepublishOnly": "NODE_ENV=production yarn build"
-  },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "autoprefixer": "^9.7.6",
-    "postcss-cli": "^7.1.1",
-    "postcss-import": "^12.0.1"
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.15",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1"
+  },
+  "scripts": {
+    "build": "postcss index.css --dir ./dist",
+    "dev": "pnpm run build --watch"
   }
-}
+}