@stratixlabs/core 1.7.1

package/src/base.css

@@ -0,0 +1,41 @@
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+  color: var(--neutral-900);
+  background-color: var(--neutral-0);
+  margin: 0;
+}
+
+/* ==============================
+   Typography
+============================== */
+
+h1 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  margin-bottom: var(--space-3);
+}
+
+h2 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-normal);
+  margin-bottom: var(--space-3);
+  margin-top: 40px;
+}
+
+h3 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-3);
+  margin-top: var(--space-6);
+}
+
+h4 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-3);
+}

package/src/components/components.css

@@ -0,0 +1,279 @@
+/* Proofs of concept built directly on top of tokens. */
+
+
+/* ==============================
+   Typography
+============================== */
+
+.text-default {
+  font-size: var(--font-size-md);
+  color: var(--neutral-900);
+}
+
+.text-secondary {
+  font-size: var(--font-size-sm);
+  color: var(--neutral-600);
+}
+
+.text-small {
+  font-size: var(--font-size-xs);
+  color: var(--neutral-500);
+}
+ 
+
+/* ==============================
+   Card
+============================== */
+
+.card {
+  background-color: var(--neutral-50);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+
+.card .banner {
+  width: 100%;
+  min-height: 100px;
+  border-radius: var(--radius-md);
+  background-color: var(--neutral-200);
+}
+
+.card .banner img {
+  width: 100%;
+  object-fit: cover;
+}
+
+
+/* ==============================
+   Users List
+============================== */
+
+.users-list {
+  background-color: var(--neutral-50);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.users-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4);
+}
+
+.users-list-item+.users-list-item {
+  border-top: var(--border-width) solid var(--border-color);
+}
+
+.users-list-avatar {
+  width: 48px;
+  height: 48px;
+  background-color: var(--neutral-200);
+  border-radius: 50%;
+}
+
+.users-list-name {
+  font-weight: var(--font-weight-medium);
+  color: var(--neutral-900);
+}
+
+.users-list-bio {
+  font-size: var(--font-size-sm);
+  color: var(--neutral-600);
+}
+
+
+/* ==============================
+   Form
+============================== */
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+  font-size: var(--font-size-sm);
+}
+
+.form-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--neutral-700);
+}
+
+.form-input {
+  padding: var(--space-3);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-md);
+  border: var(--border-width) solid var(--border-color);
+  font-family: var(--font-family-base);
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--brand-500);
+}
+
+
+/* Button */
+
+.form-button {
+  align-self: flex-start;
+  padding: var(--space-3) var(--space-5);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--neutral-0);
+  background-color: var(--brand-500);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+.form-button:hover {
+  background-color: var(--brand-700);
+}
+
+
+/* Options */
+
+.form-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.form-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-sm);
+  color: var(--neutral-700);
+  cursor: pointer;
+}
+
+
+/* Hide native */
+
+.form-option input {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: var(--border-width) solid var(--border-color);
+  background: var(--neutral-0);
+  display: grid;
+  place-content: center;
+}
+
+
+/* Checkbox */
+
+.form-option input[type="checkbox"] {
+  border-radius: var(--radius-sm);
+}
+
+.form-option input[type="checkbox"]::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  transform: scale(0);
+  background: var(--brand-500);
+  border-radius: 2px;
+  transition: transform 0.12s ease;
+}
+
+.form-option input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+
+/* Radio */
+
+.form-option input[type="radio"] {
+  border-radius: 50%;
+}
+
+.form-option input[type="radio"]::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: var(--brand-500);
+  border-radius: 50%;
+  transform: scale(0);
+  transition: transform 0.12s ease;
+}
+
+.form-option input[type="radio"]:checked::before {
+  transform: scale(1);
+}
+
+
+/* Focus */
+
+.form-option input:focus-visible {
+  outline: 2px solid var(--brand-300);
+  outline-offset: 2px;
+}
+
+
+/* Select */
+
+.form-select-wrapper {
+  position: relative;
+  display: flex;
+}
+
+.form-select {
+  width: 100%;
+  padding: var(--space-3);
+  padding-right: var(--space-6);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family-base);
+  color: var(--neutral-900);
+  background-color: var(--neutral-0);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  appearance: none;
+  cursor: pointer;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--brand-500);
+}
+
+/* Chevron */
+.form-select-wrapper::after {
+  content: "";
+  position: absolute;
+  right: var(--space-4);
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--neutral-500);
+  border-bottom: 2px solid var(--neutral-500);
+  transform: translateY(-60%) rotate(45deg);
+  pointer-events: none;
+}
+
+
+/* Textarea */
+
+.form-textarea {
+  width: 100%;
+  min-height: 96px;
+  padding: var(--space-2);
+  font-size: var(--font-size-sm);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--neutral-0);
+  color: var(--neutral-900);
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--brand-500);
+}

package/src/consumption/plain.css

@@ -0,0 +1,22 @@
+/* 
+  Plain CSS Consumption 
+  Directly uses CSS Variables defined in Substrata.
+*/
+
+.card {
+  padding: var(--space-4);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.button {
+  padding: var(--space-2) var(--space-4);
+  background-color: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  border: none;
+  border-radius: var(--radius-sm);
+}

package/src/consumption/sass-example.scss

@@ -0,0 +1,30 @@
+/* 
+  Sass / SCSS Consumption
+  Preprocessors don't transform CSS variables, they just pass them through.
+*/
+
+.card {
+    padding: var(--space-4);
+    background: var(--color-surface);
+    color: var(--color-text-primary);
+    border-radius: var(--radius-md);
+
+    // Nesting is handled by Sass
+    .card-header {
+        margin-bottom: var(--space-2);
+        font-size: var(--font-size-lg);
+        font-weight: var(--font-weight-bold);
+    }
+}
+
+@mixin button-styles {
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-family-base);
+}
+
+.button-primary {
+    @include button-styles;
+    background-color: var(--color-brand-primary);
+    color: var(--color-text-inverse);
+}

package/src/consumption/styled-components.js

@@ -0,0 +1,28 @@
+/* 
+  CSS-in-JS Consumption (styled-components / emotion)
+  Uses tokens as strings within template literals.
+*/
+
+import styled from 'styled-components';
+
+export const Card = styled.div`
+  padding: var(--space-4);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+`;
+
+export const Button = styled.button`
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-base);
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-brand-hover);
+  }
+`;

package/src/consumption/tailwind.config.js

@@ -0,0 +1,44 @@
+/* 
+  Tailwind CSS Consumption
+  Maps Substrata tokens to Tailwind theme configuration.
+*/
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          300: "var(--brand-300)",
+          500: "var(--brand-500)",
+          700: "var(--brand-700)",
+        },
+        neutral: {
+          0: "var(--neutral-0)",
+          900: "var(--neutral-900)",
+        },
+        surface: "var(--color-surface)",
+        text: "var(--color-text-primary)",
+      },
+      spacing: {
+        1: "var(--space-1)",
+        2: "var(--space-2)",
+        3: "var(--space-3)",
+        4: "var(--space-4)",
+        5: "var(--space-5)",
+        6: "var(--space-6)",
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+      },
+      fontFamily: {
+        body: "var(--font-family-base)",
+        heading: "var(--font-family-heading)",
+      },
+    },
+  },
+  plugins: [],
+};

package/src/consumption/vanilla-extract.css.ts

@@ -0,0 +1,28 @@
+/* 
+  vanilla-extract Consumption
+  Uses tokens as string values in type-safe style definitions.
+*/
+
+import { style } from '@vanilla-extract/css';
+
+export const card = style({
+    padding: 'var(--space-4)',
+    background: 'var(--color-surface)',
+    color: 'var(--color-text-primary)',
+    borderRadius: 'var(--radius-md)',
+    boxShadow: 'var(--shadow-sm)',
+});
+
+export const button = style({
+    padding: 'var(--space-2) var(--space-4)',
+    backgroundColor: 'var(--color-brand-primary)',
+    color: 'var(--color-text-inverse)',
+    fontFamily: 'var(--font-family-base)',
+    borderRadius: 'var(--radius-sm)',
+    border: 'none',
+    selectors: {
+        '&:hover': {
+            backgroundColor: 'var(--color-brand-hover)',
+        }
+    }
+});

package/src/substrata.css

@@ -0,0 +1,11 @@
+@import "tokens/typography.css";
+@import "tokens/spacing.css";
+@import "tokens/colors.css";
+@import "tokens/radius-and-borders.css";
+@import "tokens/elevation.css";
+@import "tokens/motion.css";
+@import "tokens/opacity.css";
+@import "tokens/breakpoints.css";
+@import "tokens/semantic-aliases.css";
+
+@import "./base.css";

package/src/tokens/breakpoints.css

@@ -0,0 +1,7 @@
+:root {
+
+  --breakpoint-lg: 1024px;
+  --breakpoint-md: 768px;
+  --breakpoint-sm: 640px;
+
+}

package/src/tokens/colors.css

@@ -0,0 +1,21 @@
+:root {
+
+  --brand-300: #93c5fd;
+  --brand-500: #3b82f6;
+  --brand-700: #1d4ed8;
+  --color-danger: #ef4444;
+  --color-success: #22c55e;
+  --color-warning: #eab308;
+  --neutral-0: #ffffff;
+  --neutral-100: #f1f5f9;
+  --neutral-200: #e2e8f0;
+  --neutral-300: #cbd5e1;
+  --neutral-400: #94a3b8;
+  --neutral-50: #f8fafc;
+  --neutral-500: #64748b;
+  --neutral-600: #475569;
+  --neutral-700: #334155;
+  --neutral-800: #1e293b;
+  --neutral-900: #0f172a;
+
+}

package/src/tokens/elevation.css

@@ -0,0 +1,7 @@
+:root {
+
+  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+}

package/src/tokens/motion.css

@@ -0,0 +1,7 @@
+:root {
+
+  --motion-fast: 200ms;
+  --motion-normal: 300ms;
+  --motion-slow: 400ms;
+
+}

package/src/tokens/opacity.css

@@ -0,0 +1,7 @@
+:root {
+
+  --opacity-disabled: 0.4;
+  --opacity-muted: 0.6;
+  --opacity-overlay: 0.9;
+
+}

package/src/tokens/radius-and-borders.css

@@ -0,0 +1,9 @@
+:root {
+
+  --border-color: var(--neutral-200);
+  --border-width: 1px;
+  --radius-lg: 0.75rem;
+  --radius-md: 0.5rem;
+  --radius-sm: 0.375rem;
+
+}

package/src/tokens/semantic-aliases.css

@@ -0,0 +1,12 @@
+:root {
+
+  --color-bg: var(--neutral-50);
+  --color-border: var(--neutral-200);
+  --color-brand-hover: var(--brand-700);
+  --color-brand-primary: var(--brand-500);
+  --color-surface: var(--neutral-50);
+  --color-text-inverse: var(--neutral-0);
+  --color-text-primary: var(--neutral-900);
+  --color-text-secondary: var(--neutral-700);
+
+}

package/src/tokens/spacing.css

@@ -0,0 +1,10 @@
+:root {
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+
+}

package/src/tokens/typography.css

@@ -0,0 +1,18 @@
+:root {
+
+  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-size-2xl: 2rem;
+  --font-size-lg: 1.25rem;
+  --font-size-md: 1rem;
+  --font-size-sm: 0.875rem;
+  --font-size-xl: 1.5rem;
+  --font-size-xs: 0.75rem;
+  --font-weight-bold: 700;
+  --font-weight-medium: 500;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-tight: 1.25;
+
+}

package/substrata.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  tokens: './src/tokens',
+  output: './tokens.json'
+};