Theme: fix media query is not working in sm-only, md-only, lg-only (#14611)

packages/theme-chalk/src/common/var.scss

@@ -880,13 +880,13 @@ $--breakpoints: (
 $--breakpoints-spec: (
   'xs-only' : (max-width: $--sm - 1),
   'sm-and-up' : (min-width: $--sm),
-  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
+  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
   'sm-and-down': (max-width: $--md - 1),
   'md-and-up' : (min-width: $--md),
-  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
+  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
   'md-and-down': (max-width: $--lg - 1),
   'lg-and-up' : (min-width: $--lg),
-  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
+  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
   'lg-and-down': (max-width: $--xl - 1),
   'xl-only' : (min-width: $--xl),
 );