@govnepal/css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nepal Design System Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# @govnepal/css
+
+The framework-agnostic visual layer. Semantic HTML plus `.gov-*` classes, no JavaScript. A
+plain-HTML ministry site or a CMS gets the full Civic Calm interface without adopting a
+component library — the four-step quick start in §10.2, minus the framework.
+
+```
+pnpm --filter @govnepal/css build     # regenerate dist/ from tokens + .guidelines + .assets
+pnpm --filter @govnepal/css test
+```
+
+## Usage
+
+```html
+<link rel="stylesheet" href="@govnepal/tokens/tokens.css" />
+<link rel="stylesheet" href="@govnepal/css/fonts.css" />
+<link rel="stylesheet" href="@govnepal/css/civic-calm.css" />
+```
+
+`civic-calm.css` is meaningless without `tokens.css` loaded alongside it — every rule resolves a
+`var(--gov-*)` the token package declares. A test enforces that contract, so if `@govnepal/tokens`
+ever renames or drops a token this package still consumes, the build fails here rather than
+rendering an element unstyled in production.
+
+Semantic HTML already looks like Civic Calm before a single class is applied — that is the point
+of `base.css`. Classes are for components (`.gov-button--primary`, `.gov-alert--emergency`), not
+for making a heading look like a heading.
+
+## This package holds ALL the visual decisions
+
+That is the deliberate split with `@govnepal/ui`:
+
+- **`css` owns every visual decision** — colour, spacing, the type scale, all six display modes,
+  the print stylesheet, density. The whole visual truth of Civic Calm is here.
+- **`ui` owns only behavior** — ARIA, keyboard, focus management, state. It renders these classes
+  and adds no styling of its own.
+
+So a plain-HTML site, a Drupal theme, or a future Vue / Web Component port re-implements *behavior
+only* — never a design decision. The design decision was made once, here.
+
+## Generated vs. hand-written
+
+Anything carrying a policy **number** is generated, so no stylesheet hardcodes it:
+
+| Generated from | Produces |
+|---|---|
+| `data/grid.yaml`, `data/breakpoints.yaml` | the grid variables and their per-breakpoint `@media` blocks (media queries can't read custom properties, so they're emitted) |
+| the light-mode token set | the `@media print` colour block — see below |
+| `design-assets/fonts/` | `fonts.css` + the woff2 files, copied and url-rewritten; never a CDN link (§9.2) |
+
+Everything in `src/*.css` is hand-written: the visual implementation of the component specs,
+consuming nothing but tokens and the generated layout variables. A test asserts that no
+hand-written file contains a single hex or `rgb()` value.
+
+## Two rules worth knowing
+
+**The focus ring is `box-shadow`, never `outline-offset`.** `outline-offset` leaves the element's
+own background showing in the gap, so on a primary button the double ring would be blue-on-blue and
+collapse into one thick edge. `box-shadow` lets the gap be an actual colour — which is what §5.2
+means by "visible on any background including primary buttons and dark surfaces." A test guards it.
+
+**Dark mode never prints dark (§5.1.5).** Print isn't a seventh display mode — it's a rendering
+target that forces every semantic colour token back to its light-mode value inside `@media print`,
+because a `[data-mode="dark"]` override on `:root` would otherwise still be in force on paper. That
+block is generated from the token set, so even this override hardcodes no hex.
+
+## A known gap: the emblem
+
+The government header renders the emblem from a verified master in `design-assets`. That directory
+(`emblems/files/`) is **currently empty** — no official master exists yet, and the guidelines
+prohibit redrawing, recolouring, or approximating the coat of arms (an outdated or invented emblem
+is a legal error, not a style choice). So `header.css` styles a deliberately ugly
+`.gov-header__emblem-missing` placeholder for development and **never draws emblem artwork** — a
+test asserts the stylesheet contains no `background-image`, `mask-image`, or `content: url`. The
+real emblem drops in the moment the master lands, with no CSS change.