@carbon/styles 1.22.0 → 1.23.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "f4c904ce641392046ad21e6c77394a53f6cf0f30"
+  "gitHead": "6234f2b1304e340345fff3935342f80a1e36e08e"
 }

package/scss/components/combo-box/_combo-box.scss

@@ -8,6 +8,7 @@
 @use '../list-box';
 @use '../../config' as *;
 @use '../../theme' as *;
+@use '../../utilities/focus-outline' as *;
 
 /// Combo box styles
 /// @access public
@@ -31,6 +32,10 @@
     border-bottom-color: $border-subtle;
   }
 
+  .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
+    @include focus-outline('outline');
+  }
+
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field,

package/scss/components/form/_form.scss

@@ -59,6 +59,10 @@ $input-label-weight: 400 !default;
     vertical-align: baseline;
   }
 
+  .#{$prefix}--label .#{$prefix}--toggletip-label {
+    @include type-style('label-01');
+  }
+
   .#{$prefix}--label--no-margin {
     margin-bottom: 0;
   }

package/scss/components/toggle/_toggle.scss

@@ -79,7 +79,8 @@
     .#{$prefix}--toggle__switch,
   .#{$prefix}--toggle__button:not(:disabled):active
     + .#{$prefix}--toggle__label
-    .#{$prefix}--toggle__switch {
+    .#{$prefix}--toggle__switch,
+  .#{$prefix}--toggle:active .#{$prefix}--toggle__switch {
     box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
   }
 
@@ -193,7 +194,8 @@
     .#{$prefix}--toggle__switch,
   .#{$prefix}--toggle__button:not(:disabled):active
     + .#{$prefix}--toggle__label
-    .#{$prefix}--toggle__switch {
+    .#{$prefix}--toggle__switch,
+  .#{$prefix}--toggle:active .#{$prefix}--toggle__switch {
     @include high-contrast-mode('focus');
   }
 }

package/scss/components/toggletip/_toggletip.scss

@@ -16,7 +16,7 @@
 
 @mixin toggletip() {
   .#{$prefix}--toggletip-label {
-    @include type.type-style('label-01');
+    @include type.type-style('body-01');
 
     margin-right: spacing.$spacing-03;
     color: theme.$text-secondary;

package/scss/utilities/_hide-at-breakpoint.scss

@@ -4,40 +4,30 @@
 // Mixins that can be used to hide elements only at specific breakpoints.
 // Helpful for when you would like to hide elements outside of a Grid context
 @mixin hide-at-sm {
-  padding: 2rem 1rem;
-  background: #8a3ffc;
   @include breakpoint-between('sm', 'md') {
     display: none;
   }
 }
 
 @mixin hide-at-md {
-  padding: 2rem 1rem;
-  background: #4589ff;
   @include breakpoint-between('md', 'lg') {
     display: none;
   }
 }
 
 @mixin hide-at-lg {
-  padding: 2rem 1rem;
-  background: #42be65;
   @include breakpoint-between('lg', 'xlg') {
     display: none;
   }
 }
 
 @mixin hide-at-xlg {
-  padding: 2rem 1rem;
-  background: #f1c21b;
   @include breakpoint-between('xlg', 'max') {
     display: none;
   }
 }
 
 @mixin hide-at-max {
-  padding: 2rem 1rem;
-  background: #da1e28;
   @include breakpoint-up('max') {
     display: none;
   }