@flow-os/style 0.0.1-dev.1772055921 → 0.0.1-dev.1772056336

package/config/client/root.css

@@ -1,18 +1,11 @@
 /* Base reset */
-html,
-body {
-  margin: 0;
-  padding: 0;
-  min-height: 100vh;
-}
 
-#app {
-  min-height: 100vh;
-  box-sizing: border-box;
+:root {
+  --background: rgb(18, 18, 18)
+
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
+body {
+  background: var(--background);
+  color: #fff;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-os/style",
-  "version": "0.0.1-dev.1772055921",
+  "version": "0.0.1-dev.1772056336",
   "license": "PolyForm-Shield-1.0.0",
   "type": "module",
   "publishConfig": {
@@ -13,7 +13,23 @@
       "types": "./src/index.ts",
       "import": "./src/index.ts",
       "default": "./src/index.ts"
-    }
+    },
+    "./features/s": {
+      "types": "./src/features/s/index.ts",
+      "import": "./src/features/s/index.ts",
+      "default": "./src/features/s/index.ts"
+    },
+    "./features/styleFlow": {
+      "types": "./src/features/styleFlow/index.ts",
+      "import": "./src/features/styleFlow/index.ts",
+      "default": "./src/features/styleFlow/index.ts"
+    },
+    "./features/elements": {
+      "types": "./src/features/elements/index.ts",
+      "import": "./src/features/elements/index.ts",
+      "default": "./src/features/elements/index.ts"
+    },
+    "./config/client/root.css": "./config/client/root.css"
   },
   "dependencies": {}
 }

package/src/features/elements/apply.ts

@@ -0,0 +1,38 @@
+/**
+ * Applies `s` and `styleFlow` props to an HTMLElement.
+ * Used by the JSX runtime to override/extend element styling.
+ */
+
+import { resolveS } from '../s';
+import type { SValue } from '../../types';
+import type { StyleFlowTheme } from '../styleFlow';
+
+export interface StyleProps {
+  s?: SValue;
+  styleFlow?: StyleFlowTheme | string;
+}
+
+export function applyStyleProps(el: HTMLElement, props: StyleProps): void {
+  const { s, styleFlow } = props;
+
+  if (s != null) {
+    const resolved = resolveS(s);
+    if (resolved.className) {
+      const existing = el.className ? `${el.className} ` : '';
+      el.className = `${existing}${resolved.className}`;
+    }
+    if (resolved.style) {
+      for (const [k, v] of Object.entries(resolved.style)) {
+        (el.style as unknown as Record<string, string>)[k] = v;
+      }
+    }
+  }
+
+  if (styleFlow != null) {
+    if (typeof styleFlow === 'string') {
+      el.setAttribute('data-style-flow', styleFlow);
+    } else if (typeof styleFlow === 'object') {
+      el.setAttribute('data-style-flow', JSON.stringify(styleFlow));
+    }
+  }
+}

package/src/features/elements/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Element overrides - applies s and styleFlow to HTML elements.
+ */
+
+export { applyStyleProps } from './apply';
+export type { StyleProps } from './apply';

package/src/features/s/index.ts

@@ -0,0 +1,26 @@
+/**
+ * `s` - shorthand for applying styles to elements.
+ * Accepts: string (class names) or object (inline CSS).
+ */
+
+import type { SResult } from './types';
+
+export type { SResult, SValue } from './types';
+
+function cssProp(js: string): string {
+  return js.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+export function resolveS(s: string | Record<string, string | number | undefined>): SResult {
+  if (typeof s === 'string') {
+    return { className: s.trim() || undefined };
+  }
+  if (s && typeof s === 'object') {
+    const style: Record<string, string> = {};
+    for (const [k, v] of Object.entries(s)) {
+      if (v != null && v !== '') style[cssProp(k)] = String(v);
+    }
+    return Object.keys(style).length ? { style } : {};
+  }
+  return {};
+}

package/src/features/s/types.ts

@@ -0,0 +1,10 @@
+/** Types for the `s` shorthand prop */
+
+import type { SValue } from '../../types';
+
+export type { SValue };
+
+export interface SResult {
+  className?: string;
+  style?: Record<string, string>;
+}

package/src/features/styleFlow/index.ts

@@ -0,0 +1,7 @@
+/**
+ * styleFlow - design system and theme.
+ * Provides tokens and utilities for consistent styling.
+ */
+
+export { tokens } from './tokens';
+export type { StyleFlowTheme } from './types';

package/src/features/styleFlow/tokens.ts

@@ -0,0 +1,24 @@
+/**
+ * Design tokens - CSS variables and theme values.
+ * Extend or override as needed per project.
+ */
+
+import type { StyleFlowTheme } from './types';
+
+export const tokens: StyleFlowTheme = {
+  color: {
+    background: 'rgb(18, 18, 18)',
+    foreground: '#fff',
+  },
+  radius: {
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+  },
+  space: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+  },
+};

package/src/features/styleFlow/types.ts

@@ -0,0 +1,5 @@
+/** Types for the styleFlow design system */
+
+import type { StyleFlowTheme } from '../../types';
+
+export type { StyleFlowTheme };

package/src/index.ts

@@ -1,2 +1,16 @@
+/**
+ * @flow-os/style
+ *
+ * Style system for Flow OS: s (shorthand) and styleFlow (design tokens).
+ * Override HTML elements by using s and styleFlow props in JSX.
+ */
 
-export {};
+// Features
+export { resolveS } from './features/s';
+export type { SValue, SResult } from './features/s';
+
+export { tokens } from './features/styleFlow';
+export type { StyleFlowTheme } from './features/styleFlow';
+
+export { applyStyleProps } from './features/elements';
+export type { StyleProps } from './features/elements';

package/src/jsx.d.ts

@@ -0,0 +1,12 @@
+declare global {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      /** Shorthand: class names (string) or inline styles (object) */
+      s?: string | Record<string, string | number | undefined>;
+      /** Design system / theme token reference */
+      styleFlow?: Record<string, unknown> | string;
+    }
+  }
+}
+
+export {};

package/src/types/index.ts

@@ -0,0 +1,9 @@
+/** Shared types for @flow-os/style */
+
+export type SValue = string | Record<string, string | number | undefined>;
+
+export type StyleFlowToken = string | number;
+
+export interface StyleFlowTheme {
+  [key: string]: StyleFlowToken | StyleFlowTheme;
+}