@snowztech/ui-css 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lucas Neves Pereira
+
+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,72 @@
+# @snowztech/ui-css
+
+Terminal-minimal CSS design system. Tokens, resets, and component classes. Framework-agnostic.
+
+The source of truth for [@snowztech/ui](https://www.npmjs.com/package/@snowztech/ui) (React) and any other framework wrapper.
+
+## Install
+
+```bash
+npm i @snowztech/ui-css
+```
+
+```js
+import "@snowztech/ui-css";
+```
+
+## CDN
+
+```html
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@snowztech/ui-css@0.2/dist/snowztech-ui.min.css">
+```
+
+## What's inside
+
+- `dist/snowztech-ui.css` · full bundle
+- `dist/snowztech-ui.min.css` · minified bundle
+- `dist/tokens.css` · CSS variables only
+- `dist/base.css` · resets, typography, links, keyframes
+- `dist/components/*.css` · one file per component, opt-in
+
+## Subpath imports
+
+```js
+import "@snowztech/ui-css/tokens.css";              // vars only
+import "@snowztech/ui-css/components/btn.css";      // single component
+```
+
+## Class catalog
+
+Tokens prefix `--sn-`. Classes prefix `sn-`. Modifier classes use `--`.
+
+| Class             | Modifiers                                          |
+|-------------------|----------------------------------------------------|
+| `sn-btn`          | `--sm --lg --primary --secondary --ghost --accent --danger` |
+| `sn-input`        | ·                                                  |
+| `sn-card`         | `--rounded --accent --inset`                       |
+| `sn-badge`        | `--accent --success --warning --danger`            |
+| `sn-kbd`          | ·                                                  |
+| `sn-divider`      | ·                                                  |
+| `sn-meta`, `sn-prompt` | ·                                              |
+| `sn-mark`         | `--xs --sm --md --lg --xl --accent --muted`        |
+| `sn-monogram`     | `--xs --sm --md --lg --inverse`                    |
+| `sn-avatar`       | `--xs --sm --md --lg --xl --square --ring`         |
+| `sn-avatar-stack` | ·                                                  |
+| `sn-pulse`        | `--success --warning --danger --accent`            |
+| `sn-copy-btn`     | uses `data-copied="true"`                          |
+| `sn-theme-toggle` | reads `[data-theme="light"]` from `<html>`         |
+
+## Theming
+
+Default is dark. Switch by setting `data-theme="light"` on `<html>`:
+
+```js
+document.documentElement.setAttribute("data-theme", "light");
+```
+
+Override any token by re-declaring on `:root` or a scope:
+
+```css
+:root { --sn-accent: #ff5f5f; }
+```

package/dist/base.css

@@ -0,0 +1,23 @@
+/* Resets and global defaults. Optional. Import tokens.css alone to skip these. */
+
+*, *::before, *::after { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+html, body { height: 100%; }
+
+body {
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-text-sm);
+  line-height: var(--sn-leading-normal);
+  color: var(--sn-fg);
+  background: var(--sn-bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection { background: var(--sn-accent-soft); color: var(--sn-fg); }
+
+a { color: var(--sn-accent); text-decoration: none; }
+a:hover { color: var(--sn-accent-hover); }
+
+@keyframes sn-spin  { to { transform: rotate(360deg); } }
+@keyframes sn-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
+@keyframes sn-blink { 50% { opacity: 0; } }

package/dist/components/avatar.css

@@ -0,0 +1,35 @@
+.sn-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sn-avatar-size, 32px);
+  height: var(--sn-avatar-size, 32px);
+  border-radius: 50%;
+  background: var(--sn-bg-elev-1);
+  color: var(--sn-fg-muted);
+  font-family: var(--sn-font-mono);
+  font-size: max(10px, calc(var(--sn-avatar-size, 32px) * 0.38));
+  font-weight: 500;
+  overflow: hidden;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.sn-avatar--square { border-radius: var(--sn-r-xs); }
+.sn-avatar--ring   { box-shadow: 0 0 0 1px var(--sn-border-strong); }
+
+.sn-avatar--xs { --sn-avatar-size: 20px; }
+.sn-avatar--sm { --sn-avatar-size: 28px; }
+.sn-avatar--md { --sn-avatar-size: 32px; }
+.sn-avatar--lg { --sn-avatar-size: 48px; }
+.sn-avatar--xl { --sn-avatar-size: 64px; }
+
+.sn-avatar > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.sn-avatar-stack { display: inline-flex; }
+.sn-avatar-stack > * + * { margin-left: var(--sn-avatar-overlap, -8px); }

package/dist/components/badge.css

@@ -0,0 +1,18 @@
+.sn-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-text-2xs);
+  font-weight: 400;
+  padding: 2px 6px;
+  border-radius: var(--sn-r-xs);
+  border: 1px solid var(--sn-border);
+  color: var(--sn-fg-muted);
+  height: 18px;
+  text-transform: lowercase;
+}
+.sn-badge--accent  { color: var(--sn-accent);  border-color: var(--sn-accent-border); }
+.sn-badge--success { color: var(--sn-success); border-color: rgba(127, 199, 127, 0.30); }
+.sn-badge--warning { color: var(--sn-warning); border-color: rgba(212, 168, 87, 0.30); }
+.sn-badge--danger  { color: var(--sn-danger);  border-color: rgba(215, 112, 112, 0.30); }

package/dist/components/btn.css

@@ -0,0 +1,53 @@
+.sn-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-text-sm);
+  font-weight: 500;
+  line-height: 1;
+  border-radius: var(--sn-r-xs);
+  padding: 0 14px;
+  height: 30px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background var(--sn-fast) var(--sn-ease),
+              border-color var(--sn-fast) var(--sn-ease),
+              color var(--sn-fast) var(--sn-ease);
+  white-space: nowrap;
+  user-select: none;
+  background: transparent;
+  color: var(--sn-fg);
+}
+.sn-btn:focus-visible { outline: 1px solid var(--sn-accent); outline-offset: 1px; }
+.sn-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
+.sn-btn--sm { height: 24px; font-size: var(--sn-text-xs); padding: 0 10px; }
+.sn-btn--lg { height: 36px; font-size: var(--sn-text-sm); padding: 0 18px; }
+
+.sn-btn--primary {
+  background: var(--sn-fg);
+  color: var(--sn-fg-inverse);
+  border-color: var(--sn-fg);
+}
+.sn-btn--primary:hover { background: var(--sn-fg-muted); border-color: var(--sn-fg-muted); }
+
+.sn-btn--secondary {
+  background: transparent;
+  color: var(--sn-fg);
+  border-color: var(--sn-border-strong);
+}
+.sn-btn--secondary:hover { border-color: var(--sn-fg-muted); }
+
+.sn-btn--ghost { background: transparent; color: var(--sn-fg-muted); }
+.sn-btn--ghost:hover { color: var(--sn-fg); }
+
+.sn-btn--accent {
+  background: var(--sn-accent);
+  color: var(--sn-accent-fg);
+  border-color: var(--sn-accent);
+}
+.sn-btn--accent:hover { background: var(--sn-accent-hover); border-color: var(--sn-accent-hover); }
+
+.sn-btn--danger { background: transparent; color: var(--sn-danger); border-color: var(--sn-border-strong); }
+.sn-btn--danger:hover { border-color: var(--sn-danger); }

package/dist/components/card.css

@@ -0,0 +1,12 @@
+.sn-card {
+  background: transparent;
+  border: 1px solid var(--sn-border);
+  border-radius: var(--sn-r-xs);
+  padding: var(--sn-s-5);
+}
+.sn-card--rounded { border-radius: var(--sn-r-lg); }
+.sn-card--accent {
+  border-color: var(--sn-accent-border);
+  background: var(--sn-accent-soft);
+}
+.sn-card--inset { background: var(--sn-bg-inset); }

package/dist/components/copy-button.css

@@ -0,0 +1,25 @@
+.sn-copy-btn {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--sn-fg-muted);
+  padding: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--sn-r-xs);
+  transition: color var(--sn-fast) var(--sn-ease),
+              border-color var(--sn-fast) var(--sn-ease);
+}
+.sn-copy-btn:hover { color: var(--sn-fg); }
+.sn-copy-btn:focus-visible { outline: 1px solid var(--sn-accent); outline-offset: 1px; }
+.sn-copy-btn[data-copied="true"],
+.sn-copy-btn[data-copied="true"]:hover {
+  color: var(--sn-success);
+}
+
+/* Hide the "copied" icon until the data attribute flips. */
+.sn-copy-btn .sn-copy-btn__copied { display: none; }
+.sn-copy-btn[data-copied="true"] .sn-copy-btn__copied { display: inline-flex; }
+.sn-copy-btn[data-copied="true"] .sn-copy-btn__idle   { display: none; }

package/dist/components/divider.css

@@ -0,0 +1,6 @@
+.sn-divider {
+  height: 1px;
+  background: var(--sn-border);
+  border: 0;
+  margin: 0;
+}

package/dist/components/icon.css

@@ -0,0 +1,6 @@
+.sn-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: currentColor;
+}

package/dist/components/input.css

@@ -0,0 +1,15 @@
+.sn-input {
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-text-sm);
+  color: var(--sn-fg);
+  background: transparent;
+  border: 1px solid var(--sn-border-strong);
+  border-radius: var(--sn-r-xs);
+  padding: 0 10px;
+  height: 30px;
+  width: 100%;
+  transition: border-color var(--sn-fast) var(--sn-ease);
+}
+.sn-input::placeholder { color: var(--sn-fg-faint); }
+.sn-input:hover { border-color: var(--sn-fg-muted); }
+.sn-input:focus { outline: none; border-color: var(--sn-accent); }

package/dist/components/kbd.css

@@ -0,0 +1,8 @@
+.sn-kbd {
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-text-2xs);
+  border: 1px solid var(--sn-border-strong);
+  border-radius: var(--sn-r-xs);
+  padding: 1px 5px;
+  color: var(--sn-fg-muted);
+}

package/dist/components/mark.css

@@ -0,0 +1,31 @@
+/* Wrapper for mark SVGs. The SVG itself owns its art via `currentColor`,
+   the class controls layout, sizing, and color hand-off. */
+
+.sn-mark {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: currentColor;
+  width: var(--sn-mark-size, 32px);
+  height: var(--sn-mark-size, 32px);
+}
+
+.sn-mark--xs { --sn-mark-size: 16px; }
+.sn-mark--sm { --sn-mark-size: 24px; }
+.sn-mark--md { --sn-mark-size: 32px; }
+.sn-mark--lg { --sn-mark-size: 48px; }
+.sn-mark--xl { --sn-mark-size: 64px; }
+
+.sn-mark--accent { color: var(--sn-accent); }
+.sn-mark--muted  { color: var(--sn-fg-muted); }
+
+/* Wordmark */
+.sn-wordmark {
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-wordmark-size, 18px);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: currentColor;
+  line-height: 1;
+}
+.sn-wordmark__dot { color: var(--sn-accent); }

package/dist/components/meta.css

@@ -0,0 +1,13 @@
+.sn-meta {
+  font-family: var(--sn-font-mono);
+  font-size: var(--sn-text-2xs);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--sn-fg-faint);
+}
+
+.sn-prompt {
+  color: var(--sn-fg-faint);
+  user-select: none;
+}
+.sn-prompt::before { content: "› "; }

package/dist/components/monogram.css

@@ -0,0 +1,21 @@
+.sn-monogram {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--sn-monogram-bg, var(--sn-bg));
+  color: var(--sn-monogram-fg, var(--sn-fg));
+  width: var(--sn-monogram-size, 64px);
+  height: var(--sn-monogram-size, 64px);
+  border-radius: var(--sn-monogram-radius, var(--sn-r-md));
+}
+
+.sn-monogram--xs { --sn-monogram-size: 32px; --sn-monogram-radius: var(--sn-r-xs); }
+.sn-monogram--sm { --sn-monogram-size: 48px; --sn-monogram-radius: var(--sn-r-sm); }
+.sn-monogram--md { --sn-monogram-size: 64px; --sn-monogram-radius: var(--sn-r-md); }
+.sn-monogram--lg { --sn-monogram-size: 96px; --sn-monogram-radius: var(--sn-r-lg); }
+
+.sn-monogram--inverse {
+  --sn-monogram-bg: var(--sn-fg);
+  --sn-monogram-fg: var(--sn-bg);
+}

package/dist/components/pulse.css

@@ -0,0 +1,34 @@
+.sn-pulse {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sn-s-2);
+  color: var(--sn-fg-muted);
+  font-size: var(--sn-text-sm);
+}
+
+.sn-pulse__dot {
+  position: relative;
+  display: inline-flex;
+  width: var(--sn-pulse-size, 8px);
+  height: var(--sn-pulse-size, 8px);
+  flex-shrink: 0;
+}
+
+.sn-pulse__dot::before,
+.sn-pulse__dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--sn-pulse-color, var(--sn-success));
+}
+
+.sn-pulse__dot::before {
+  opacity: 0.6;
+  animation: sn-pulse 2s ease-in-out infinite;
+}
+
+.sn-pulse--success { --sn-pulse-color: var(--sn-success); }
+.sn-pulse--warning { --sn-pulse-color: var(--sn-warning); }
+.sn-pulse--danger  { --sn-pulse-color: var(--sn-danger); }
+.sn-pulse--accent  { --sn-pulse-color: var(--sn-accent); }

package/dist/components/theme-toggle.css

@@ -0,0 +1,23 @@
+.sn-theme-toggle {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity var(--sn-base);
+}
+.sn-theme-toggle:focus-visible { outline: 1px solid var(--sn-accent); outline-offset: 1px; }
+
+.sn-theme-toggle__indicator {
+  display: inline-block;
+  width: var(--sn-theme-toggle-size, 12px);
+  height: var(--sn-theme-toggle-size, 12px);
+  border-radius: 50%;
+  border: 1px solid var(--sn-fg-muted);
+  background: var(--sn-fg);
+  transition: background var(--sn-base) var(--sn-ease);
+}
+[data-theme="light"] .sn-theme-toggle__indicator { background: transparent; }