@deque/cauldron-styles 4.2.1 → 4.3.0-canary.2f072027

package/dist/index.css

@@ -181,7 +181,6 @@ button,
   display: inline-block;
   zoom: 1;
   line-height: normal;
-  white-space: nowrap;
   vertical-align: middle;
   text-align: center;
   -moz-user-select: none;
@@ -2716,21 +2715,19 @@ button.TooltipTabstop {
 }
 
 :root {
-  --skip-link-background-color: rgba(11, 14, 17, 0.9);
+  --skip-link-background-color: rgba(255, 255, 255, 0.95);
+  --skip-link-focus-color: var(--focus-light);
+  --skip-link-text-color: var(--text-color-base);
 }
 
 .SkipLink {
-  min-width: 173px;
-  height: 58px;
-  background-color: var(--skip-link-background-color);
   position: absolute;
   box-sizing: border-box;
-  padding: var(--space-half);
+  padding: var(--space-smallest);
   top: -999px;
   left: 11px;
   opacity: 0;
   transition: 250ms opacity;
-  border-radius: 2px;
   z-index: var(--z-index-skip-container);
 }
 
@@ -2744,10 +2741,13 @@ button.TooltipTabstop {
 }
 
 .SkipLink a {
+  min-width: 13rem;
+  background-color: var(--skip-link-background-color);
   display: block;
-  color: var(--text-color-light);
+  color: var(--skip-link-text-color);
   text-decoration: none;
-  padding: var(--space-three-quarters);
+  padding: 12px;
+  border-radius: 2px;
 }
 
 .SkipLink span {
@@ -2757,13 +2757,16 @@ button.TooltipTabstop {
 .SkipLink .SkipLink__item--first {
   font-size: var(--text-size-small);
   font-weight: var(--font-weight-light);
-  color: var(--text-color-light);
+  margin-bottom: var(--space-three-quarters);
 }
 
 .SkipLink .SkipLink__item--second {
   font-size: var(--text-size-normal);
   font-weight: var(--font-weight-medium);
-  color: var(--text-color-light);
+}
+
+.SkipLink .Icon--triangle-right {
+  color: var(--skip-link-focus-color);
 }
 
 .SkipLink ul {
@@ -2810,6 +2813,14 @@ button.TooltipTabstop {
   color: var(--text-color-light);
 }
 
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --skip-link-background-color: rgba(11, 14, 17, 0.95);
+  --skip-link-focus-color: var(--focus-dark);
+  --skip-link-text-color: var(--text-color-light);
+}
+
 :root {
   --loader-ring-size: 104px;
   --loader-ring-thickness: 10px;
@@ -4285,4 +4296,8 @@ fieldset.Panel {
   .TwoColumnPanel--hide .TwoColumnPanel__Left {
     transform: translateX(-10vw);
   }
+
+  .TwoColumnPanel > .SkipLink {
+    display: none;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "4.2.1",
+  "version": "4.3.0-canary.2f072027",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -22,4 +22,4 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1"
   }
-}
+}