@primer/css 20.0.0-rc.b5fee637 → 20.0.0-rc.f7fbc78b

package/utilities/visibility-display.scss

@@ -14,19 +14,19 @@
 
 // Hide utilities for each breakpoint
 // Each hide utility only applies to one breakpoint range.
-@media (max-width: $width-sm - 1px) {
+@media (max-width: $width-sm - 0.02px) {
   .hide-sm {
     display: none !important;
   }
 }
 
-@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
+@media (min-width: $width-sm) and (max-width: $width-md - 0.02px) {
   .hide-md {
     display: none !important;
   }
 }
 
-@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
+@media (min-width: $width-md) and (max-width: $width-lg - 0.02px) {
   .hide-lg {
     display: none !important;
   }
@@ -38,6 +38,55 @@
   }
 }
 
+// Show/Hide Viewport range utilities
+
+.show-whenNarrow,
+.show-whenRegular,
+.show-whenWide,
+.show-whenRegular.hide-whenWide {
+  display: none !important;
+}
+
+.hide-whenNarrow,
+.hide-whenRegular,
+.hide-whenWide {
+  display: block !important;
+}
+
+@media (max-width: $width-md - 0.02px) {
+  .show-whenNarrow {
+    display: block !important;
+  }
+
+  .hide-whenNarrow {
+    display: none !important;
+  }
+}
+
+@media (min-width: $width-md) {
+  .show-whenRegular,
+  .show-whenRegular.hide-whenWide {
+    display: block !important;
+  }
+
+  .hide-whenRegular {
+    display: none !important;
+  }
+}
+
+// The width of a `wide` viewport range may change as we're finalizing
+// the Primer primitives viewport ranges proposal
+@media (min-width: $width-xl) {
+  .show-whenWide {
+    display: block !important;
+  }
+
+  .hide-whenWide,
+  .show-whenRegular.hide-whenWide {
+    display: none !important;
+  }
+}
+
 /* Set the table-layout to fixed */
 .table-fixed { table-layout: fixed !important; }
 

package/table-object/README.md

@@ -1,25 +0,0 @@
----
-bundle: "table-object"
-generated: true
----
-
-# Primer CSS: `table-object` bundle
-
-## Usage
-
-Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
-
-```scss
-@import "@primer/css/table-object/index.scss";
-```
-
-## Build
-
-The `@primer/css` npm package includes a standalone CSS build of this module in `dist/table-object.css`.
-
-## License
-
-[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
-
-
-[scss]: https://sass-lang.com/documentation/syntax#scss