@snowztech/ui-css 0.2.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@snowztech/ui-css",
+  "version": "0.2.0",
+  "description": "Terminal-minimal CSS design system. Tokens, resets, and component classes. Framework-agnostic.",
+  "license": "MIT",
+  "author": {
+    "name": "Lucas Neves Pereira",
+    "email": "lnevespereira@proton.me",
+    "url": "https://github.com/lucasnevespereira"
+  },
+  "homepage": "https://github.com/snowztech/ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/snowztech/ui.git",
+    "directory": "packages/ui-css"
+  },
+  "bugs": {
+    "url": "https://github.com/snowztech/ui/issues"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "tokens",
+    "snowztech",
+    "terminal",
+    "minimal"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./dist/snowztech-ui.css",
+    "./min": "./dist/snowztech-ui.min.css",
+    "./tokens": "./dist/tokens.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./base": "./dist/base.css",
+    "./base.css": "./dist/base.css",
+    "./styles.css": "./dist/snowztech-ui.css",
+    "./components/*": "./dist/components/*.css",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.7"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "dev": "node build.mjs --watch"
+  }
+}

package/src/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/src/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/src/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/src/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/src/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/src/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/src/components/divider.css

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

package/src/components/icon.css

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

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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; }

package/src/index.css

@@ -0,0 +1,17 @@
+@import "./tokens.css";
+@import "./base.css";
+
+@import "./components/btn.css";
+@import "./components/input.css";
+@import "./components/card.css";
+@import "./components/badge.css";
+@import "./components/kbd.css";
+@import "./components/divider.css";
+@import "./components/meta.css";
+@import "./components/icon.css";
+@import "./components/mark.css";
+@import "./components/monogram.css";
+@import "./components/avatar.css";
+@import "./components/pulse.css";
+@import "./components/copy-button.css";
+@import "./components/theme-toggle.css";

package/src/tokens.css

@@ -0,0 +1,96 @@
+/* snowztech / design tokens
+   Pure CSS custom properties. Safe to import alone (no resets, no components). */
+
+:root {
+  --sn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --sn-font-sans: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+
+  --sn-text-2xs: 11px;
+  --sn-text-xs: 12px;
+  --sn-text-sm: 13px;
+  --sn-text-base: 14px;
+  --sn-text-md: 15px;
+  --sn-text-lg: 17px;
+  --sn-text-xl: 20px;
+  --sn-text-2xl: 24px;
+  --sn-text-3xl: 28px;
+  --sn-text-4xl: 36px;
+
+  --sn-leading-tight: 1.2;
+  --sn-leading-normal: 1.55;
+  --sn-leading-relaxed: 1.75;
+
+  --sn-s-1: 4px;  --sn-s-2: 8px;  --sn-s-3: 12px;
+  --sn-s-4: 16px; --sn-s-5: 20px; --sn-s-6: 24px;
+  --sn-s-7: 32px; --sn-s-8: 40px; --sn-s-9: 48px;
+  --sn-s-10: 64px; --sn-s-11: 80px; --sn-s-12: 96px;
+
+  --sn-r-none: 0;
+  --sn-r-xs: 2px;
+  --sn-r-sm: 4px;
+  --sn-r-md: 6px;
+  --sn-r-lg: 8px;
+
+  --sn-fast: 100ms;
+  --sn-base: 160ms;
+  --sn-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* dark, default */
+  --sn-bg: #0a0a0a;
+  --sn-bg-elev-1: #111111;
+  --sn-bg-elev-2: #181818;
+  --sn-bg-inset: #050505;
+
+  --sn-border: #1f1f1f;
+  --sn-border-strong: #2a2a2a;
+  --sn-border-subtle: #161616;
+
+  --sn-fg: #e8e8e8;
+  --sn-fg-muted: #888888;
+  --sn-fg-subtle: #666666;
+  --sn-fg-faint: #444444;
+  --sn-fg-inverse: #0a0a0a;
+
+  --sn-accent: #8ab4f8;
+  --sn-accent-hover: #a8c7fa;
+  --sn-accent-active: #6c9eed;
+  --sn-accent-fg: #0a0a0a;
+  --sn-accent-soft: rgba(138, 180, 248, 0.10);
+  --sn-accent-border: rgba(138, 180, 248, 0.24);
+
+  --sn-success: #7fc77f;
+  --sn-warning: #d4a857;
+  --sn-danger: #d77070;
+
+  --sn-success-soft: rgba(127, 199, 127, 0.10);
+  --sn-warning-soft: rgba(212, 168, 87, 0.10);
+  --sn-danger-soft:  rgba(215, 112, 112, 0.10);
+
+  --sn-shadow-sm: none;
+  --sn-shadow-md: 0 0 0 1px var(--sn-border);
+  --sn-shadow-lg: 0 0 0 1px var(--sn-border-strong);
+}
+
+[data-theme="light"] {
+  --sn-bg: #f7f7f5;
+  --sn-bg-elev-1: #ffffff;
+  --sn-bg-elev-2: #ffffff;
+  --sn-bg-inset: #efefec;
+
+  --sn-border: #e2e2dd;
+  --sn-border-strong: #c8c8c2;
+  --sn-border-subtle: #ececea;
+
+  --sn-fg: #161616;
+  --sn-fg-muted: #6a6a6a;
+  --sn-fg-subtle: #888888;
+  --sn-fg-faint: #b0b0ad;
+  --sn-fg-inverse: #ffffff;
+
+  --sn-accent: #2a64d6;
+  --sn-accent-hover: #1f56c2;
+  --sn-accent-active: #194ba8;
+  --sn-accent-fg: #ffffff;
+  --sn-accent-soft: rgba(42, 100, 214, 0.08);
+  --sn-accent-border: rgba(42, 100, 214, 0.24);
+}