diff --git a/packages/raystack/normalize.css b/packages/raystack/normalize.css index 25260afc3..b4c81a0b9 100644 --- a/packages/raystack/normalize.css +++ b/packages/raystack/normalize.css @@ -28,11 +28,15 @@ 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 */ } /* @@ -40,8 +44,26 @@ 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 */ } /* @@ -49,6 +71,38 @@ 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,13 +187,28 @@ 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, @@ -143,6 +216,25 @@ 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; +} diff --git a/packages/raystack/styles/reset.css b/packages/raystack/styles/global.css similarity index 71% rename from packages/raystack/styles/reset.css rename to packages/raystack/styles/global.css index 93a83486a..b5e9b5c64 100644 --- a/packages/raystack/styles/reset.css +++ b/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 diff --git a/packages/raystack/styles/index.css b/packages/raystack/styles/index.css index 7e5adc469..27ffad9cc 100644 --- a/packages/raystack/styles/index.css +++ b/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";