katanakit-js 6.2.0 → 6.6.1

package/scss/_reset.scss

@@ -0,0 +1,275 @@
+// ============================================================
+//  RESET / PREFLIGHT
+//  Modern normalization in the spirit of Tailwind's preflight.
+//  Every reset rule reads its value from a custom property
+//  defined on :root, so themes can override the defaults without
+//  touching this file.
+// ============================================================
+
+// Defaults for every custom property consumed by the reset rules below.
+// Override any of them from your own theme to customize the preflight.
+:root {
+  --m-reset: 0;                  // default margin for all elements
+  --p-reset: 0;                  // default padding for all elements
+  --box-sizing: border-box;      // width/height include padding + border
+  --bg-repeat: no-repeat;        // default background-repeat
+  --bg-position: initial;        // default background-position
+  --min-w-reset: auto;           // default min-width for all elements
+  --text-size-adjust: 100%;      // disables mobile font-size inflation
+  --min-h-screen: 100vh;         // min-height applied to <html>
+  --border-default: 0 solid currentColor; // default border shorthand
+  --color-scheme: light dark;    // tells the browser which UA styles to use
+  --placeholder-color: #9ca3af;  // color of input/textarea ::placeholder
+  --root-font-size: 62.5%;       // 10px on a 16px browser → 1rem = 10px
+}
+
+// Universal reset: every element and pseudo-element starts with zero
+// margin/padding, border-box sizing and no border.
+*,
+*::before,
+*::after {
+  margin: var(--m-reset);
+  padding: var(--p-reset);
+  box-sizing: var(--box-sizing);
+  background-repeat: var(--bg-repeat);
+  background-position: var(--bg-position);
+  min-width: var(--min-w-reset);
+  border: var(--border-default);
+}
+
+// Root element: sets the rem baseline (10px by default), text scaling,
+// min-height, color-scheme and misc UA normalization.
+html {
+  font-size: var(--root-font-size);
+  -webkit-text-size-adjust: var(--text-size-adjust);
+  text-size-adjust: var(--text-size-adjust);
+  min-height: var(--min-h-screen);
+  color-scheme: var(--color-scheme);
+  tab-size: 4;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+
+// Body: full viewport height with a dvh fallback (better on mobile),
+// system font stack and smooth text rendering.
+body {
+  min-height: 100vh;
+  min-height: 100dvh;
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// === Base typography ===
+
+// Horizontal rule rendered as a thin top border instead of the
+// browser-default double rule; border color follows the text color.
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+// Abbreviations with a title attribute get a dotted underline.
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+// Headings inherit font-size/weight so they read as plain text
+// until styled explicitly.
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+// Bold text renders one step bolder than the inherited weight.
+b, strong {
+  font-weight: bolder;
+}
+
+// Code-like elements share a monospace stack and a 1em size.
+code, kbd, samp, pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 1em;
+}
+
+// <small> shrinks to 80% of the surrounding text.
+small {
+  font-size: 80%;
+}
+
+// Sub/superscripts: smaller and shifted vertically without
+// affecting line height.
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub { bottom: -0.25em; }
+sup { top: -0.5em; }
+
+// Tables: remove text indent, inherit border color, collapse cell borders.
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+// === Media ===
+
+// Block-level, responsive media: never wider than its container.
+img,
+picture,
+video,
+canvas,
+svg,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+// === Forms ===
+
+// Form controls inherit typography and drop default spacing.
+input,
+button,
+textarea,
+select,
+optgroup {
+  font: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+// Undo the uppercase text-transform some UAs apply to these controls.
+button,
+select {
+  text-transform: none;
+}
+
+// Buttons render with the native button appearance but no default
+// background, letting utilities control their look.
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+// Interactive elements show a pointer cursor.
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+// Disabled controls fall back to the default arrow cursor.
+:disabled {
+  cursor: default;
+}
+
+// Remove Firefox's inner focus border on buttons.
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+// Progress bars align to the text baseline.
+progress {
+  vertical-align: baseline;
+}
+
+// <summary> keeps its disclosure marker and pointer cursor.
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+// Fieldsets and legends drop their default margin/padding.
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+// Textareas can only be resized vertically by default.
+textarea {
+  resize: vertical;
+}
+
+// Placeholders are fully opaque and use the --placeholder-color token.
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: var(--placeholder-color);
+}
+
+// WebKit search inputs lose their decoration.
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// File upload buttons inherit the button appearance and typography.
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+// === Lists and links ===
+
+// Lists are stripped of bullets, numbers and default spacing.
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+// Links inherit the surrounding text color instead of the UA blue.
+a {
+  color: inherit;
+}
+
+// === Preflight helpers ===
+
+// The [hidden] attribute always wins: display none.
+[hidden] {
+  display: none;
+}
+
+// Block-level text containers start with zero margin.
+blockquote,
+dl,
+dd,
+figure,
+pre {
+  margin: 0;
+}
+
+// Text blocks wrap long words instead of overflowing their container.
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}