{"id":28443512,"url":"https://github.com/substrate-system/css","last_synced_at":"2025-06-29T12:32:47.032Z","repository":{"id":292728887,"uuid":"981725700","full_name":"substrate-system/css","owner":"substrate-system","description":"CSS variables","archived":false,"fork":false,"pushed_at":"2025-05-14T04:04:50.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-06T08:07:25.682Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-11T18:50:41.000Z","updated_at":"2025-05-14T04:04:53.000Z","dependencies_parsed_at":"2025-05-11T20:44:40.835Z","dependency_job_id":"a1b46c3f-328f-4887-a106-30d26dda6594","html_url":"https://github.com/substrate-system/css","commit_stats":null,"previous_names":["substrate-system/css"],"tags_count":0,"template":false,"template_full_name":"nichoth/template-ts-browser","purl":"pkg:github/substrate-system/css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fcss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262594178,"owners_count":23334150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-06T08:07:19.287Z","updated_at":"2025-06-29T12:32:47.007Z","avatar_url":"https://github.com/substrate-system.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)\n[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/css)](https://packagephobia.com/result?p=@substrate-system/css)\n[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)\n[![license](https://img.shields.io/badge/license-Polyform_Small_Business-249fbc?style=flat-square)](LICENSE)\n\nCSS [normalize](./src/normalize.css), [some variables](./src/index.css), and\n[the Stack](https://every-layout.dev/layouts/stack/).\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [Install](#install)\n- [Use](#use)\n  * [Bundler](#bundler)\n  * [CSS import](#css-import)\n  * [Variables](#variables)\n  * [normalize](#normalize)\n  * [The Stack](#the-stack)\n- [see also](#see-also)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n\n## Install\n\n```sh\nnpm i -S @substrate-system/css\n```\n\n## Use\n\n### Bundler\nIn a bundler (`esbuild`), import from this package.\n\n```js\nimport '@substrate-system/css'\n```\n\nOr minified:\n```js\nimport '@substrate-system/css/min'\n\n// import specific files\nimport '@substrate-system/css/min/normalize'\n```\n\n### CSS import\nImport from this package via CSS:\n\n```css\n@import url(\"node_modules/@substrate-system/css/dist/normalize.min.css\");\n```\n\n### Variables\nThis package exposes CSS variables, used by [substrate](https://github.com/substrate-system/)\nweb components.\n\n```js\nimport '@substrate-system/css'\n```\n\n```css\n:root {\n    --substrate-background: #f4f7f9;\n    --substrate-accent: #38b9ff;\n    --substrate-primary: #36393d;\n    --substrate-secondary: #e8e8e4;\n    --substrate-light: #999da0;\n    --substrate-medium: #999da0;\n    --substrate-dark: #5a6571;\n    --substrate-shadow: #96969640;\n    --substrate-disabled: #98a1af;\n    --substrate-button-text: #36393d;\n    --substrate-button-shadow: #00000054;\n    --substrate-button-background: #f5f5f5;\n    --substrate-button-background-hover: #e6e6e6;\n    --substrate-button-background-focus: #ededed;\n    --substrate-input-text: #36393d;\n    --substrate-input-text-hover: #e4e4e4;\n    --substrate-input-border: #c9c9c9;\n    --substrate-input-border-hover: #36393d;\n    --substrate-input-background-focus: #eee;\n    --substrate-border: #e7edf1;\n    --substrate-error: #f06653;\n    --substrate-notification: #f06653;\n    --substrate-danger: #f06653;\n    --substrate-success: #85b274;\n    --substrate-warning: #f9a967;\n    --substrate-info: #999da0;\n    --substrate-overlay: #fff66;\n}\n```\n\n### normalize\n\nReset/normalize styles for a nice blank slate.\n\nSee [joshcomeau.com/css/custom-css-reset](https://www.joshwcomeau.com/css/custom-css-reset/)\n\n\u003e These days, browsers don't have massive discrepancies when it comes to layout\n\u003e or spacing. By and large, browsers implement the CSS specification faithfully,\n\u003e and things behave as you'd expect.\n\n__*Featuring*__:\n\n1. `box-sizing: border-box;` -- Sizes [based on `border-box`, not `content-box`](https://www.joshwcomeau.com/css/custom-css-reset/#one-box-sizing-model-2).\n2. `margin: 0` -- [Remove default margin](https://www.joshwcomeau.com/css/custom-css-reset/#two-remove-default-margin-3). Add margins as needed in application CSS.\n3. [`line-height: calc(2px + 2ex + 2px);`](https://www.joshwcomeau.com/css/custom-css-reset/#three-add-accessible-line-height-4) -- [Dyslexia friendly](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) line height.\n\u003e\n\u003e [!NOTE]  \n\u003e You may want to override the `line-height` for headings in your application CSS.\n\u003e See [this article](https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/) for more info about `line-height`.\n\u003e\n4. `-webkit-font-smoothing: antialiased;` -- [Chrome and Safari still use subpixel antialiasing by default](https://www.joshwcomeau.com/css/custom-css-reset/#four-improve-text-rendering-5), which is bad on high DPI screens.\n5. [Use block display by default for media tags](https://www.joshwcomeau.com/css/custom-css-reset/#five-improve-media-defaults-6), like `img` and `video`.\n6. [Inherit fonts for form controls](https://www.joshwcomeau.com/css/custom-css-reset/#six-inherit-fonts-for-form-controls-7)\n\u003e `font` is a rarely-used shorthand that sets a bunch of font-related properties, like `font-size`, `font-weight`, and `font-family`. \n7. Avoid text overflows -- Permission to [use hard wraps when no soft wrap opportunties can be found](https://www.joshwcomeau.com/css/custom-css-reset/#seven-avoid-text-overflows-8)\n8. [Improve line wrapping](https://www.joshwcomeau.com/css/custom-css-reset/#eight-improve-line-wrapping-9) -- widows and orphans\n9. [Root stacking context](https://www.joshwcomeau.com/css/custom-css-reset/#nine-root-stacking-context-10) -- **OPTIONAL** -- Create a new stacking context without needing to set a `z-index`. See [What The Heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/)\n\n### [The Stack](https://every-layout.dev/layouts/stack/)\n\n```js\nimport '@substrate-system/css/stack'\n\n// minified\nimport '@substrate-system/css/min/stack'\n```\n\nIt's [Andy Bell's favorite 3 lines](https://piccalil.li/blog/my-favourite-3-lines-of-css/).\n\nIn its entirety:\n\n```css\n.stack \u003e * + * {\n    margin-block-start: 1.5rem;\n}\n```\n\n-------------------\n\n## see also\n\n* [scrolling with reduced motion media query](https://gomakethings.com/how-to-animate-scrolling-to-anchor-links-with-one-line-of-css/#accessibility-concerns)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fcss/lists"}