@joinskips/brand 5.0.0-develop.117 → 5.0.0-develop.119

package/README.md

@@ -13,4 +13,11 @@ import tokens from '@joinskips/brand/tokens/skips-design-tokens.json' with { typ
 @import '@joinskips/brand/fonts/onest/onest.css';
 ```
 
+A Tailwind 4 app imports the tokens as its theme. The colours sit under `@variant light` and `@variant dark`, the way
+Uniwind reads them.
+
+```css
+@import '@joinskips/brand/tokens/skips-tailwind-theme.css';
+```
+
 `manifest.json` lists every file with its hash and size. Onest's licence is `fonts/onest/OFL.txt`.

package/chat/components/Welcome.d.ts

@@ -62,6 +62,9 @@ export declare function CodeStep({ words, length, noMatch, ranOut, resendAfterMs
     onResend: () => void;
     onChangeEmail: () => void;
 }): import("react").JSX.Element;
+export declare const DOT_REST_OPACITY = 0.35;
+export declare const DOT_RISE = 3;
+export declare const DOT_STILL_OPACITY = 0.6;
 /** Skip writing a reply: three dots rising in turn in Skip's bubble beside Skip's mark, announced as a status. */
 export declare function SkipTyping({ label, skipMark }: {
     label: string;

package/chat/components/Welcome.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, Animated, Image, Pressable, Text, TextInput, View } from 'react-native';
+import { AccessibilityInfo, ActivityIndicator, Animated, Image, Pressable, Text, TextInput, View } from 'react-native';
 import { DOT_CYCLE_MS } from "../skipTyping.js";
 import { codeDigits, completesCode, EMAIL_MAX_LENGTH, givenEmail, givenName, NAME_MAX_LENGTH, RESEND_AFTER_MS, resendClock, } from "../welcome.js";
 import { useColor } from "./parts.js";
@@ -74,17 +74,38 @@ export function CodeStep({ words, length, noMatch, ranOut, resendAfterMs = RESEN
                             setCode(digits);
                             if (completesCode(digits, code, length))
                                 onSubmit(digits);
-                        }, accessibilityLabel: words.codeLabel, "aria-invalid": error !== null, inputMode: "numeric", autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, className: "absolute inset-0 rounded-control text-transparent" })] }), error ? (_jsx(Text, { role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, onPress: () => {
+                        }, accessibilityLabel: words.codeLabel, "aria-invalid": error !== null, inputMode: "numeric", autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, className: "absolute inset-0 rounded-control text-transparent" })] }), error ? (_jsx(Text, { role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
                             onSubmit(code);
                         } })] })] }));
 }
 const DOTS = [0, 1, 2];
 const DOT_SIZE = 6;
+// A dot at rest is faint, rises this far at the top of its turn, and holds at the still strength for a visitor who
+// asks for less motion.
+export const DOT_REST_OPACITY = 0.35;
+export const DOT_RISE = 3;
+export const DOT_STILL_OPACITY = 0.6;
+// Null until the device has answered, so the dots never start before a visitor who wants them still is known.
+function useReducedMotion() {
+    const [reduced, setReduced] = useState(null);
+    useEffect(() => {
+        void AccessibilityInfo.isReduceMotionEnabled().then(setReduced);
+        const change = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduced);
+        return () => {
+            change.remove();
+        };
+    }, []);
+    return reduced;
+}
 /** Skip writing a reply: three dots rising in turn in Skip's bubble beside Skip's mark, announced as a status. */
 export function SkipTyping({ label, skipMark }) {
     const dotColor = useColor('ink-secondary');
+    const reduced = useReducedMotion();
+    const still = reduced === true;
     const rise = useRef(DOTS.map(() => new Animated.Value(0))).current;
     useEffect(() => {
+        if (reduced !== false)
+            return undefined;
         const step = DOT_CYCLE_MS / (2 * DOTS.length);
         const loop = Animated.loop(Animated.stagger(step, rise.map((value) => Animated.sequence([
             Animated.timing(value, { toValue: 1, duration: step, useNativeDriver: true }),
@@ -94,12 +115,17 @@ export function SkipTyping({ label, skipMark }) {
         return () => {
             loop.stop();
         };
-    }, [rise]);
+    }, [rise, reduced]);
     return (_jsxs(View, { className: "mt-3 flex-row items-end gap-2", children: [_jsx(Image, { source: skipMark, "aria-hidden": true, style: { width: 32, height: 32 }, className: "rounded-control" }), _jsx(View, { role: "status", accessibilityLabel: label, className: "flex-row items-center gap-1 rounded-[20px] rounded-bl-[7px] border border-line-subtle bg-surface px-4 py-4", children: rise.map((value, dot) => (_jsx(Animated.View, { style: {
                         width: DOT_SIZE,
                         height: DOT_SIZE,
                         borderRadius: DOT_SIZE / 2,
                         backgroundColor: dotColor,
-                        transform: [{ translateY: value.interpolate({ inputRange: [0, 1], outputRange: [0, -DOT_SIZE] }) }],
+                        ...(still
+                            ? { opacity: DOT_STILL_OPACITY }
+                            : {
+                                opacity: value.interpolate({ inputRange: [0, 1], outputRange: [DOT_REST_OPACITY, 1] }),
+                                transform: [{ translateY: value.interpolate({ inputRange: [0, 1], outputRange: [0, -DOT_RISE] }) }],
+                            }),
                     } }, DOTS[dot]))) })] }));
 }

package/manifest.json

@@ -484,6 +484,10 @@
     "tokens/skips-design-tokens.json": {
       "sha256": "bd0deecdedbad1a5ab28d0ec3231095d2b4691390a7d42257d259f3197f181ef",
       "bytes": 3205
+    },
+    "tokens/skips-tailwind-theme.css": {
+      "sha256": "00fef53e4e6c3bde68e93a2e5f0ba28edcf17e6da5df6823c7601461462364af",
+      "bytes": 3240
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joinskips/brand",
-  "version": "5.0.0-develop.117",
+  "version": "5.0.0-develop.119",
   "description": "Skips design tokens, Onest, logos, favicons, interface icons, member pictures and app icons.",
   "license": "UNLICENSED",
   "homepage": "https://brand.joinskips.com",
@@ -20,10 +20,10 @@
     "validator": "^13.15.35"
   },
   "peerDependencies": {
-    "react": "^19.3.0",
+    "react": "^19.0.0",
     "react-native": ">=0.81.0",
-    "react-native-web": "~0.21.4",
-    "tailwindcss": "^4.3.3",
+    "react-native-web": "~0.21.0",
+    "tailwindcss": "^4.0.0",
     "uniwind": "1.13.2"
   },
   "peerDependenciesMeta": {

package/tokens/skips-tailwind-theme.css

@@ -0,0 +1,106 @@
+/* Written by scripts/derive.py from skips-design-tokens.json; do not edit by hand. */
+@theme {
+  --font-ui: 'Onest Variable', Onest, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
+  --text-xs: 12px;
+  --text-xs--line-height: 1.5;
+  --text-sm: 13px;
+  --text-sm--line-height: 1.5;
+  --text-base: 15px;
+  --text-base--line-height: 1.6;
+  --text-md: 16px;
+  --text-md--line-height: 1.6;
+  --text-lg: 18px;
+  --text-lg--line-height: 1.55;
+  --text-xl: 22px;
+  --text-xl--line-height: 1.4;
+  --text-2xl: 28px;
+  --text-2xl--line-height: 1.2;
+  --text-3xl: 36px;
+  --text-3xl--line-height: 1.1;
+  --text-4xl: 40px;
+  --text-4xl--line-height: 1.05;
+  --text-5xl: 54px;
+  --text-5xl--line-height: 1.03;
+  --text-6xl: 72px;
+  --text-6xl--line-height: 1.02;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heavy: 800;
+  --radius-control: 8px;
+  --radius-card: 12px;
+  --radius-overlay: 16px;
+  --radius-pill: 9999px;
+  --shadow-card: 0 1px 2px rgba(33, 38, 41, 0.04);
+  --shadow-lift: 0 4px 12px rgba(33, 38, 41, 0.06);
+  --shadow-lift-hover: 0 8px 28px rgba(33, 38, 41, 0.14);
+  --shadow-menu: 0 8px 24px rgba(33, 38, 41, 0.12);
+  --shadow-modal: 0 24px 64px rgba(33, 38, 41, 0.18);
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-pulse: cubic-bezier(0.4, 0, 0.6, 1);
+  --container-content: 1200px;
+  --container-reading: 720px;
+  --spacing-control: 48px;
+  --spacing-control-compact: 44px;
+  --spacing-header-short: 60px;
+  --spacing-header-tall: 76px;
+  --spacing-gutter-phone: 16px;
+  --spacing-gutter-tablet: 24px;
+  --spacing-gutter-desktop: 32px;
+}
+
+@layer theme {
+  :root {
+    @variant light {
+      --color-page: #f8f5f2;
+      --color-surface: #ffffff;
+      --color-muted: #f5f6f7;
+      --color-paper: #f7f5f0;
+      --color-ink: #212629;
+      --color-ink-secondary: #5b5b57;
+      --color-ink-placeholder: #64645f;
+      --color-line-subtle: #d9d9d6;
+      --color-line-control: #85857f;
+      --color-accent: #f7ad00;
+      --color-accent-ink: #212629;
+      --color-action: #242e2b;
+      --color-action-hover: #314039;
+      --color-action-pressed: #1a231f;
+      --color-action-ink: #ffffff;
+      --color-error: #fff1f0;
+      --color-error-ink: #b42318;
+      --color-warning: #fff5d6;
+      --color-warning-ink: #854d0e;
+      --color-success: #dcf3e3;
+      --color-success-ink: #166534;
+      --color-focus: #212629;
+    }
+
+    @variant dark {
+      --color-page: #0f1110;
+      --color-surface: #181a19;
+      --color-muted: #1f2221;
+      --color-paper: #1b1b18;
+      --color-ink: #f5f6f4;
+      --color-ink-secondary: #b4b4ae;
+      --color-ink-placeholder: #8d8d87;
+      --color-line-subtle: #2c2e2d;
+      --color-line-control: #5a5c59;
+      --color-accent: #f7ad00;
+      --color-accent-ink: #212629;
+      --color-action: #3a4a44;
+      --color-action-hover: #46574f;
+      --color-action-pressed: #2f3c37;
+      --color-action-ink: #ffffff;
+      --color-error: #3a1b19;
+      --color-error-ink: #ff8a80;
+      --color-warning: #3a2e10;
+      --color-warning-ink: #f5c451;
+      --color-success: #12301f;
+      --color-success-ink: #7ddc9c;
+      --color-focus: #f5f6f4;
+    }
+  }
+}