@sole-ui/react 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,67 @@
-# Temporary Holding Version
+# @sole-ui/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Sole's design system. This first release (0.1.0) holds the design tokens: colour, label hues, type scale, radius, elevation and motion, copied from Sole HQ's stylesheet. The components come in later versions.
+
+Light mode and desktop only.
+
+Documentation and a live view of every token: https://mindninjax.github.io/sole-design-system/
+
+## Install
+
+```sh
+npm install @sole-ui/react
+```
+
+## With Tailwind CSS v4
+
+Tailwind v4 is an optional peer dependency (`^4.1.0`). In your main stylesheet:
+
+```css
+@import "tailwindcss";
+@import "@sole-ui/react/styles.css";
+```
+
+That gives you:
+
+- the Sole colours as utilities (`bg-primary`, `text-muted-foreground`, `border-border`), the label hues (`.hue-blue` with `bg-tag-bg`, `text-tag-fg`) and the radius, shadow and type scales (`text-body`, `text-strong`, `text-micro`);
+- Inter Variable as the sans font, through `@fontsource-variable/inter`, which installs with the package;
+- the base layer: page background and text colour, tabular numbers on `time` and `kbd`, and no motion for people who asked their system for less.
+
+## Without Tailwind
+
+`tokens.css` is plain CSS custom properties on `:root`, plus the `.hue-*` classes. It works in any project:
+
+```css
+@import "@sole-ui/react/tokens.css";
+
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--elevation-sm);
+}
+```
+
+(The `@theme` and `@utility` blocks in the file are for Tailwind. Other tools ignore them.)
+
+## In JavaScript
+
+```js
+import { tokens } from "@sole-ui/react";
+
+tokens.color.primary.$value; // "#0270d6"
+```
+
+`tokens` is the token tree as a plain object, typed so that `tokens.color.primary` is checked by the compiler.
+
+## tokens.json
+
+`@sole-ui/react/tokens.json` is the same tree in the [DTCG](https://www.designtokens.org/) format (`$value`, `$type`, `$description`), for design tools and other generators:
+
+```js
+import tokens from "@sole-ui/react/tokens.json" with { type: "json" };
+```
+
+## Source
+
+https://github.com/mindninjaX/sole-design-system. The values never change here first: if the look changes, it changes in Sole HQ, and the tokens follow.

package/dist/index.d.ts

@@ -0,0 +1,223 @@
+/* Generated by packages/ui/scripts/build.ts. Do not edit. */
+
+export type TokenType = 'color' | 'dimension' | 'fontFamily' | 'shadow' | 'cubicBezier' | 'number';
+
+/** One design token in the DTCG shape. */
+export interface Token {
+  readonly $value: string;
+  readonly $type: TokenType;
+  readonly $description?: string;
+}
+
+/** Sole's design tokens, the same tree as tokens.json. */
+export declare const tokens: {
+  readonly color: {
+    readonly background: Token;
+    readonly foreground: Token;
+    readonly card: Token;
+    readonly "card-foreground": Token;
+    readonly popover: Token;
+    readonly "popover-foreground": Token;
+    readonly primary: Token;
+    readonly "primary-foreground": Token;
+    readonly "primary-hover": Token;
+    readonly brand: Token;
+    readonly link: Token;
+    readonly secondary: Token;
+    readonly "secondary-foreground": Token;
+    readonly muted: Token;
+    readonly "muted-foreground": Token;
+    readonly "subtle-foreground": Token;
+    readonly faint: Token;
+    readonly accent: Token;
+    readonly "accent-foreground": Token;
+    readonly "row-hover": Token;
+    readonly border: Token;
+    readonly hairline: Token;
+    readonly input: Token;
+    readonly field: Token;
+    readonly ring: Token;
+    readonly destructive: Token;
+    readonly "destructive-foreground": Token;
+    readonly "danger-text": Token;
+    readonly "danger-soft": Token;
+    readonly "danger-border": Token;
+    readonly warning: Token;
+    readonly "warning-text": Token;
+    readonly "warning-soft": Token;
+    readonly "warning-border": Token;
+    readonly success: Token;
+    readonly "success-text": Token;
+    readonly "success-soft": Token;
+    readonly "success-border": Token;
+    readonly "neutral-soft": Token;
+    readonly "neutral-text": Token;
+    readonly skeleton: Token;
+    readonly sidebar: Token;
+    readonly "sidebar-foreground": Token;
+    readonly "sidebar-accent": Token;
+    readonly "sidebar-accent-foreground": Token;
+    readonly "sidebar-hover": Token;
+    readonly "sidebar-border": Token;
+    readonly "sidebar-ring": Token;
+    readonly tooltip: Token;
+    readonly "tooltip-foreground": Token;
+    readonly overdue: Token;
+    readonly "overdue-foreground": Token;
+    readonly mark: Token;
+    readonly "state-backlog": Token;
+    readonly "state-unstarted": Token;
+    readonly "state-started": Token;
+    readonly "state-completed": Token;
+    readonly "state-cancelled": Token;
+    readonly "sticky-gray": Token;
+    readonly "sticky-peach": Token;
+    readonly "sticky-pink": Token;
+    readonly "sticky-orange": Token;
+    readonly "sticky-green": Token;
+    readonly "sticky-light-blue": Token;
+    readonly "sticky-dark-blue": Token;
+    readonly "sticky-purple": Token;
+    readonly "sticky-foreground": Token;
+  };
+  readonly hue: {
+    readonly slate: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly indigo: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly violet: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly blue: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly cyan: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly teal: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly green: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly lime: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly amber: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly orange: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly rose: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+    readonly pink: {
+      readonly bg: Token;
+      readonly border: Token;
+      readonly fg: Token;
+      readonly dot: Token;
+    };
+  };
+  readonly radius: {
+    readonly base: Token;
+  };
+  readonly shadow: {
+    readonly "elevation-sm": Token;
+    readonly "elevation-lg": Token;
+    readonly "focus-ring": Token;
+  };
+  readonly ease: {
+    readonly rise: Token;
+  };
+  readonly font: {
+    readonly sans: Token;
+    readonly mono: Token;
+  };
+  readonly text: {
+    readonly label: {
+      readonly size: Token;
+      readonly "line-height": Token;
+      readonly weight: Token;
+    };
+    readonly body: {
+      readonly size: Token;
+      readonly "line-height": Token;
+    };
+    readonly strong: {
+      readonly size: Token;
+      readonly "line-height": Token;
+      readonly weight: Token;
+      readonly "letter-spacing": Token;
+    };
+    readonly read: {
+      readonly size: Token;
+      readonly "line-height": Token;
+    };
+    readonly title: {
+      readonly size: Token;
+      readonly "line-height": Token;
+      readonly weight: Token;
+      readonly "letter-spacing": Token;
+    };
+    readonly page: {
+      readonly size: Token;
+      readonly "line-height": Token;
+      readonly weight: Token;
+      readonly "letter-spacing": Token;
+    };
+    readonly doc: {
+      readonly size: Token;
+      readonly "line-height": Token;
+      readonly weight: Token;
+      readonly "letter-spacing": Token;
+    };
+    readonly metric: {
+      readonly size: Token;
+      readonly "line-height": Token;
+      readonly weight: Token;
+      readonly "letter-spacing": Token;
+    };
+    readonly micro: {
+      readonly size: Token;
+      readonly "line-height": Token;
+      readonly weight: Token;
+      readonly "letter-spacing": Token;
+    };
+  };
+};