@simscloud/design 0.1.0

package/fonts/fonts.css

@@ -0,0 +1,25 @@
+/**
+ * SIMS — shared web fonts (part of the design system).
+ * =============================================================================
+ * Self-hosted DejaVu Sans (Latin subset). Imported through the bundler by both
+ * the landing page and the webapp, so the relative url()s below are rewritten
+ * to hashed, cache-busted asset URLs automatically — no per-app public/ copy.
+ *
+ *   global.css (or app entry):  @import ".../design/fonts/fonts.css";
+ * ===========================================================================*/
+
+@font-face {
+  font-family: "DejaVu Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./DejaVuSans.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "DejaVu Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./DejaVuSans-Bold.woff2") format("woff2");
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@simscloud/design",
+  "version": "0.1.0",
+  "description": "Shared SIMS design tokens — CSS variables, Tailwind preset, and web fonts. Framework-agnostic (no React).",
+  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kaistein01/SIMS.git",
+    "directory": "libs/design"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./tailwind-preset.js",
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./tokens.css": "./tokens.css",
+    "./fonts/*": "./fonts/*"
+  },
+  "files": [
+    "tailwind-preset.js",
+    "tokens.css",
+    "fonts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,67 @@
+/**
+ * SIMS — Tailwind preset (shared design system)
+ * =============================================================================
+ * Exposes the SEMANTIC tokens from `tokens.css` as Tailwind utilities, so
+ * `bg-surface text-text rounded-md` means the exact same thing in the Astro
+ * landing page and in the React + Vite webapp.
+ *
+ * Usage:
+ *   - Landing page (Astro, Tailwind v4): loaded via `@config` in global.css.
+ *   - Webapp (React + Vite):  presets: [simsPreset]  in its tailwind config,
+ *                             and import "design/tokens.css" once at the root.
+ *
+ * Components reference ONLY these semantic names — never raw hex — so a theme
+ * swap (dark mode, per-tenant brand) happens entirely in `tokens.css`.
+ * ===========================================================================*/
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          DEFAULT: 'var(--color-brand)',
+          strong: 'var(--color-brand-strong)',
+          soft: 'var(--color-brand-soft)',
+        },
+        'on-brand': 'var(--color-on-brand)',
+
+        bg: 'var(--color-bg)',
+        surface: {
+          DEFAULT: 'var(--color-surface)',
+          muted: 'var(--color-surface-muted)',
+        },
+        header: 'var(--color-header-bg)',
+        banner: 'var(--color-banner)',
+        overlay: 'var(--color-overlay)',
+
+        text: {
+          DEFAULT: 'var(--color-text)',
+          muted: 'var(--color-text-muted)',
+          inverse: 'var(--color-text-inverse)',
+        },
+        heading: 'var(--color-heading)',
+
+        line: 'var(--color-border)',
+        ring: 'var(--color-ring)',
+
+        success: 'var(--color-success)',
+        warning: 'var(--color-warning)',
+        danger: 'var(--color-danger)',
+      },
+
+      fontFamily: {
+        sans: 'var(--font-sans)',
+        display: 'var(--font-display)',
+      },
+
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        full: 'var(--radius-full)',
+      },
+    },
+  },
+};

package/tokens.css

@@ -0,0 +1,122 @@
+/**
+ * SIMS — Design Tokens (single source of truth)
+ * =============================================================================
+ * Shared by the Astro landing page AND the future React + Vite webapp.
+ * Two layers, per the UI architecture notes:
+ *   Layer 1 — PRIMITIVES : raw values (never used directly by components).
+ *   Layer 2 — SEMANTIC   : intent, referencing primitives. Components use ONLY
+ *                          these, so re-theming = swap the semantic layer.
+ *
+ * Light mode only for now. Dark mode / per-tenant branding are intentionally
+ * left "open": because semantics are CSS variables, a future `[data-theme]`
+ * override re-themes the whole app with ZERO component changes (see bottom).
+ * =============================================================================
+ */
+
+:root {
+  /* ========================================================================
+   * Layer 1 — PRIMITIVES
+   * ===================================================================== */
+
+  /* Brand navy — every step is a tint/shade of the brand navy #000059
+     (matches the logo). #000059 is the anchor (navy-600). */
+  --navy-50:  #ebebf2;
+  --navy-100: #d6d6e4;
+  --navy-200: #adadca;
+  --navy-300: #8585af;
+  --navy-400: #575791;
+  --navy-500: #2e2e77;
+  --navy-600: #000059; /* ← primary brand (matches the logo) */
+  --navy-700: #000047;
+  --navy-800: #000037;
+  --navy-900: #000028;
+
+  /* Accent blues — pulled from the logo's highlight gradients */
+  --blue-100: #e9e9ff;
+  --blue-200: #c7c7ff;
+  --blue-400: #8686bf;
+
+  /* Neutral (slate) */
+  --gray-0:   #ffffff;
+  --gray-50:  #f6f8fb;
+  --gray-100: #eef1f6;
+  --gray-200: #e3e7ef;
+  --gray-300: #cbd2de;
+  --gray-400: #9aa3b2;
+  --gray-500: #64748b;
+  --gray-600: #475569;
+  --gray-700: #334155;
+  --gray-800: #1e293b;
+  --gray-900: #0f172a;
+
+  /* Support / status */
+  --green-500: #16a34a;
+  --amber-500: #f59e0b;
+  --red-500:   #dc2626;
+
+  /* Typography — DejaVu Sans (matches the logo wordmark; self-hosted, so it
+     renders identically on every OS). The @font-face lives in the consuming
+     app's stylesheet, e.g. the landing page's global.css. */
+  --font-sans:    "DejaVu Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-display: var(--font-sans);
+
+  /* Radii */
+  --radius-sm:   0.375rem;
+  --radius-md:   0.625rem;
+  --radius-lg:   1rem;
+  --radius-xl:   1.5rem;
+  --radius-full: 9999px;
+
+  /* ========================================================================
+   * Layer 2 — SEMANTIC (light theme)
+   * ===================================================================== */
+
+  /* Brand */
+  --color-brand:         var(--navy-600);
+  --color-brand-strong:  var(--navy-800);
+  --color-brand-soft:    var(--navy-50);
+  --color-on-brand:      #ffffff;
+
+  /* Surfaces */
+  --color-bg:            var(--gray-0);
+  --color-surface:       var(--gray-50);
+  --color-surface-muted: #eef1fc;             /* the pale-blue section bg */
+  --color-header-bg:     #e7e8ea;
+  --color-banner:        var(--color-brand);  /* top announcement bar = brand */
+  --color-overlay:       rgba(0, 0, 40, 0.55);/* image scrim on the hero */
+
+  /* Text */
+  --color-text:          var(--gray-900);
+  --color-text-muted:    var(--gray-500);
+  --color-text-inverse:  #ffffff;
+  --color-heading:       var(--navy-800);
+
+  /* Lines & focus */
+  --color-border:        var(--gray-200);
+  --color-ring:          var(--navy-600);
+
+  /* Status */
+  --color-success:       var(--green-500);
+  --color-warning:       var(--amber-500);
+  --color-danger:        var(--red-500);
+}
+
+/* =============================================================================
+ * Dark theme — NOT enabled yet. Kept here (commented) to prove the door is
+ * open: switching is a token swap on the root, no component edits. To enable,
+ * add `data-theme="dark"` on <html> and uncomment.
+ * ===========================================================================*/
+/*
+[data-theme="dark"] {
+  --color-bg:            var(--navy-900);
+  --color-surface:       #0c0c33;
+  --color-surface-muted: #11113f;
+  --color-header-bg:     #0a0a30;
+  --color-text:          #e8e9f5;
+  --color-text-muted:    #a9adc4;
+  --color-heading:       #ffffff;
+  --color-border:        #1c1c4d;
+  --color-brand:         var(--blue-200);
+  --color-on-brand:      var(--navy-900);
+}
+*/