feat: add additional resets to normalize.css

packages/raystack/normalize.css

@@ -28,27 +28,81 @@ Use a better box model (opinionated).
 
 html {
   /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
-  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+  font-family:
+    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji";
   line-height: 1.15; /* 1. Correct the line height in all browsers. */
   -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
   tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
+  -webkit-font-feature-settings: normal; /* 4 */
+  font-feature-settings: normal; /* 4 */
+  font-variation-settings: normal; /* 5 */
 }
 
 /*
 Sections
 ========
 */
 
+/*
+  1. Remove the margin in all browsers.
+  2. Inherit line-height from 'html' so users can set them as a class directly on the 'html' element.
+*/
+
 body {
-  margin: 0; /* Remove the margin in all browsers. */
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
 }
 
 /*
 Text-level semantics
 ====================
 */
 
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+/**
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/**
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
 /**
 Add the correct font weight in Chrome and Safari.
 */
@@ -67,8 +121,8 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
-    monospace; /* 1 */
+  font-family:
+    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -106,11 +160,15 @@ Tabular data
 */
 
 /**
-Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
 */
 
 table {
-  border-color: currentcolor;
+  text-indent: 0; /* 1 */
+  border-color: currentcolor; /* 2 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -129,20 +187,54 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  -webkit-font-feature-settings: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
   line-height: 1.15; /* 1 */
+  color: inherit; /* 1 */
   margin: 0; /* 2 */
 }
 
 /**
-Correct the inability to style clickable types in iOS and Safari.
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
 */
 
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
+  appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+/**
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
 }
 
 /**
@@ -198,6 +290,14 @@ Remove the inner padding in Chrome and Safari on macOS.
   font: inherit; /* 2 */
 }
 
+/**
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
 /*
 Interactive
 ===========
@@ -210,3 +310,35 @@ Add the correct display in Chrome and Safari.
 summary {
   display: list-item;
 }
+
+/**
+1. Make replaced elements 'display: block' by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add 'vertical-align: middle' to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/**
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}

packages/raystack/styles/reset.css → packages/raystack/styles/global.css

@@ -1,15 +1,3 @@
-/* Resets for button */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-  appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
-
 /* Global native scrollbar styling — uses the Baseline standard scrollbar
    properties (scrollbar-width / scrollbar-color), supported across Chrome,
    Safari and Firefox. Note: scrollbar-width is keyword-only (no exact px) and

packages/raystack/styles/index.css

@@ -1,11 +1,10 @@
-@import './reset.css';
-@import './primitives/gray.css';
-@import './primitives/accent.css';
-@import './primitives/appearance.css';
-@import './primitives/z-index.css';
-@import './colors.css';
-@import './radius.css';
-@import './spacing.css';
-@import './effects.css';
-@import './typography.css';
-
+@import "./global.css";
+@import "./primitives/gray.css";
+@import "./primitives/accent.css";
+@import "./primitives/appearance.css";
+@import "./primitives/z-index.css";
+@import "./colors.css";
+@import "./radius.css";
+@import "./spacing.css";
+@import "./effects.css";
+@import "./typography.css";