@orangecheck/app-design 0.0.0-stage → 0.1.1

package/dist/styles.css

@@ -0,0 +1,14 @@
+/*
+ * @orangecheck/app-design — the whole system in one import.
+ *
+ *   @import 'tailwindcss';
+ *   @custom-variant dark (&:is(.dark *));
+ *   @source '../../node_modules/@orangecheck/app-design/dist';
+ *   @import '@orangecheck/app-design/styles.css';
+ *
+ * and <html data-oc-app="ochk">. Nothing here applies without the attribute.
+ */
+@import './styles/fonts.css';
+@import './styles/theme.css';
+@import './styles/tokens.css';
+@import './styles/motion.css';

package/dist/tokens.d.mts

@@ -0,0 +1,42 @@
+declare const APP_ATTRIBUTE = "data-oc-app";
+declare const APP_ID = "ochk";
+declare const appColors: {
+    readonly light: {
+        readonly background: "#FAFAFA";
+        readonly foreground: "#0A0A0A";
+        readonly card: "#FFFFFF";
+        readonly muted: "#F2F2F2";
+        readonly mutedForeground: "#54585E";
+        readonly subtleForeground: "#686C72";
+        readonly border: "#ECECEC";
+        readonly hairlineStrong: "#DADADA";
+        readonly accentDisplay: "#F55819";
+        readonly accentInk: "#C73F09";
+    };
+    readonly dark: {
+        readonly background: "#0A0A0A";
+        readonly foreground: "#FAFAFA";
+        readonly card: "#161616";
+        readonly muted: "#1E1E1E";
+        readonly mutedForeground: "#A3A6AA";
+        readonly subtleForeground: "#8B8E93";
+        readonly border: "#262626";
+        readonly hairlineStrong: "#333333";
+        readonly accentDisplay: "#F66D36";
+        readonly accentInk: "#F0835A";
+    };
+    readonly brand: {
+        readonly orange: "#F66D36";
+        readonly orangeLight: "#FB933C";
+        readonly orangeDeep: "#EA580B";
+        readonly peach: "#FED8AB";
+        readonly ink: "#0A0A0A";
+        readonly inkCard: "#1E1E1E";
+    };
+};
+declare const appFonts: {
+    readonly sans: "'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif";
+    readonly mono: "'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace";
+};
+
+export { APP_ATTRIBUTE, APP_ID, appColors, appFonts };

package/dist/tokens.d.ts

@@ -0,0 +1,42 @@
+declare const APP_ATTRIBUTE = "data-oc-app";
+declare const APP_ID = "ochk";
+declare const appColors: {
+    readonly light: {
+        readonly background: "#FAFAFA";
+        readonly foreground: "#0A0A0A";
+        readonly card: "#FFFFFF";
+        readonly muted: "#F2F2F2";
+        readonly mutedForeground: "#54585E";
+        readonly subtleForeground: "#686C72";
+        readonly border: "#ECECEC";
+        readonly hairlineStrong: "#DADADA";
+        readonly accentDisplay: "#F55819";
+        readonly accentInk: "#C73F09";
+    };
+    readonly dark: {
+        readonly background: "#0A0A0A";
+        readonly foreground: "#FAFAFA";
+        readonly card: "#161616";
+        readonly muted: "#1E1E1E";
+        readonly mutedForeground: "#A3A6AA";
+        readonly subtleForeground: "#8B8E93";
+        readonly border: "#262626";
+        readonly hairlineStrong: "#333333";
+        readonly accentDisplay: "#F66D36";
+        readonly accentInk: "#F0835A";
+    };
+    readonly brand: {
+        readonly orange: "#F66D36";
+        readonly orangeLight: "#FB933C";
+        readonly orangeDeep: "#EA580B";
+        readonly peach: "#FED8AB";
+        readonly ink: "#0A0A0A";
+        readonly inkCard: "#1E1E1E";
+    };
+};
+declare const appFonts: {
+    readonly sans: "'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif";
+    readonly mono: "'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace";
+};
+
+export { APP_ATTRIBUTE, APP_ID, appColors, appFonts };

package/dist/tokens.js

@@ -0,0 +1,50 @@
+'use strict';
+
+// src/tokens/index.ts
+var APP_ATTRIBUTE = "data-oc-app";
+var APP_ID = "ochk";
+var appColors = {
+  light: {
+    background: "#FAFAFA",
+    foreground: "#0A0A0A",
+    card: "#FFFFFF",
+    muted: "#F2F2F2",
+    mutedForeground: "#54585E",
+    subtleForeground: "#686C72",
+    border: "#ECECEC",
+    hairlineStrong: "#DADADA",
+    accentDisplay: "#F55819",
+    accentInk: "#C73F09"
+  },
+  dark: {
+    background: "#0A0A0A",
+    foreground: "#FAFAFA",
+    card: "#161616",
+    muted: "#1E1E1E",
+    mutedForeground: "#A3A6AA",
+    subtleForeground: "#8B8E93",
+    border: "#262626",
+    hairlineStrong: "#333333",
+    accentDisplay: "#F66D36",
+    accentInk: "#F0835A"
+  },
+  brand: {
+    orange: "#F66D36",
+    orangeLight: "#FB933C",
+    orangeDeep: "#EA580B",
+    peach: "#FED8AB",
+    ink: "#0A0A0A",
+    inkCard: "#1E1E1E"
+  }
+};
+var appFonts = {
+  sans: "'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif",
+  mono: "'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace"
+};
+
+exports.APP_ATTRIBUTE = APP_ATTRIBUTE;
+exports.APP_ID = APP_ID;
+exports.appColors = appColors;
+exports.appFonts = appFonts;
+//# sourceMappingURL=tokens.js.map
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/index.ts"],"names":[],"mappings":";;;AAKO,IAAM,aAAA,GAAgB;AACtB,IAAM,MAAA,GAAS;AAEf,IAAM,SAAA,GAAY;AAAA,EACrB,KAAA,EAAO;AAAA,IACH,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,IAAA,EAAM;AAAA,IACF,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,KAAA,EAAO;AAAA,IACH,MAAA,EAAQ,SAAA;AAAA,IACR,WAAA,EAAa,SAAA;AAAA,IACb,UAAA,EAAY,SAAA;AAAA,IACZ,KAAA,EAAO,SAAA;AAAA,IACP,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEjB;AAEO,IAAM,QAAA,GAAW;AAAA,EACpB,IAAA,EAAM,yEAAA;AAAA,EACN,IAAA,EAAM;AACV","file":"tokens.js","sourcesContent":["/*\n * The ochk.app palette as data, for places CSS variables cannot reach: OG\n * images, canvas, charts, email. Must match styles/tokens.css; the contrast\n * check reads both.\n */\nexport const APP_ATTRIBUTE = 'data-oc-app';\nexport const APP_ID = 'ochk';\n\nexport const appColors = {\n    light: {\n        background: '#FAFAFA',\n        foreground: '#0A0A0A',\n        card: '#FFFFFF',\n        muted: '#F2F2F2',\n        mutedForeground: '#54585E',\n        subtleForeground: '#686C72',\n        border: '#ECECEC',\n        hairlineStrong: '#DADADA',\n        accentDisplay: '#F55819',\n        accentInk: '#C73F09',\n    },\n    dark: {\n        background: '#0A0A0A',\n        foreground: '#FAFAFA',\n        card: '#161616',\n        muted: '#1E1E1E',\n        mutedForeground: '#A3A6AA',\n        subtleForeground: '#8B8E93',\n        border: '#262626',\n        hairlineStrong: '#333333',\n        accentDisplay: '#F66D36',\n        accentInk: '#F0835A',\n    },\n    brand: {\n        orange: '#F66D36',\n        orangeLight: '#FB933C',\n        orangeDeep: '#EA580B',\n        peach: '#FED8AB',\n        ink: '#0A0A0A',\n        inkCard: '#1E1E1E',\n    },\n} as const;\n\nexport const appFonts = {\n    sans: \"'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif\",\n    mono: \"'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace\",\n} as const;\n"]}

package/dist/tokens.mjs

@@ -0,0 +1,45 @@
+// src/tokens/index.ts
+var APP_ATTRIBUTE = "data-oc-app";
+var APP_ID = "ochk";
+var appColors = {
+  light: {
+    background: "#FAFAFA",
+    foreground: "#0A0A0A",
+    card: "#FFFFFF",
+    muted: "#F2F2F2",
+    mutedForeground: "#54585E",
+    subtleForeground: "#686C72",
+    border: "#ECECEC",
+    hairlineStrong: "#DADADA",
+    accentDisplay: "#F55819",
+    accentInk: "#C73F09"
+  },
+  dark: {
+    background: "#0A0A0A",
+    foreground: "#FAFAFA",
+    card: "#161616",
+    muted: "#1E1E1E",
+    mutedForeground: "#A3A6AA",
+    subtleForeground: "#8B8E93",
+    border: "#262626",
+    hairlineStrong: "#333333",
+    accentDisplay: "#F66D36",
+    accentInk: "#F0835A"
+  },
+  brand: {
+    orange: "#F66D36",
+    orangeLight: "#FB933C",
+    orangeDeep: "#EA580B",
+    peach: "#FED8AB",
+    ink: "#0A0A0A",
+    inkCard: "#1E1E1E"
+  }
+};
+var appFonts = {
+  sans: "'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif",
+  mono: "'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace"
+};
+
+export { APP_ATTRIBUTE, APP_ID, appColors, appFonts };
+//# sourceMappingURL=tokens.mjs.map
+//# sourceMappingURL=tokens.mjs.map

package/dist/tokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/index.ts"],"names":[],"mappings":";AAKO,IAAM,aAAA,GAAgB;AACtB,IAAM,MAAA,GAAS;AAEf,IAAM,SAAA,GAAY;AAAA,EACrB,KAAA,EAAO;AAAA,IACH,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,IAAA,EAAM;AAAA,IACF,UAAA,EAAY,SAAA;AAAA,IACZ,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,eAAA,EAAiB,SAAA;AAAA,IACjB,gBAAA,EAAkB,SAAA;AAAA,IAClB,MAAA,EAAQ,SAAA;AAAA,IACR,cAAA,EAAgB,SAAA;AAAA,IAChB,aAAA,EAAe,SAAA;AAAA,IACf,SAAA,EAAW;AAAA,GACf;AAAA,EACA,KAAA,EAAO;AAAA,IACH,MAAA,EAAQ,SAAA;AAAA,IACR,WAAA,EAAa,SAAA;AAAA,IACb,UAAA,EAAY,SAAA;AAAA,IACZ,KAAA,EAAO,SAAA;AAAA,IACP,GAAA,EAAK,SAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEjB;AAEO,IAAM,QAAA,GAAW;AAAA,EACpB,IAAA,EAAM,yEAAA;AAAA,EACN,IAAA,EAAM;AACV","file":"tokens.mjs","sourcesContent":["/*\n * The ochk.app palette as data, for places CSS variables cannot reach: OG\n * images, canvas, charts, email. Must match styles/tokens.css; the contrast\n * check reads both.\n */\nexport const APP_ATTRIBUTE = 'data-oc-app';\nexport const APP_ID = 'ochk';\n\nexport const appColors = {\n    light: {\n        background: '#FAFAFA',\n        foreground: '#0A0A0A',\n        card: '#FFFFFF',\n        muted: '#F2F2F2',\n        mutedForeground: '#54585E',\n        subtleForeground: '#686C72',\n        border: '#ECECEC',\n        hairlineStrong: '#DADADA',\n        accentDisplay: '#F55819',\n        accentInk: '#C73F09',\n    },\n    dark: {\n        background: '#0A0A0A',\n        foreground: '#FAFAFA',\n        card: '#161616',\n        muted: '#1E1E1E',\n        mutedForeground: '#A3A6AA',\n        subtleForeground: '#8B8E93',\n        border: '#262626',\n        hairlineStrong: '#333333',\n        accentDisplay: '#F66D36',\n        accentInk: '#F0835A',\n    },\n    brand: {\n        orange: '#F66D36',\n        orangeLight: '#FB933C',\n        orangeDeep: '#EA580B',\n        peach: '#FED8AB',\n        ink: '#0A0A0A',\n        inkCard: '#1E1E1E',\n    },\n} as const;\n\nexport const appFonts = {\n    sans: \"'OCA Inter', 'OCA Inter Fallback', ui-sans-serif, system-ui, sans-serif\",\n    mono: \"'OCA JetBrains Mono', 'OCA JetBrains Mono Fallback', ui-monospace, monospace\",\n} as const;\n"]}

package/package.json

@@ -1,6 +1,116 @@
 {
   "name": "@orangecheck/app-design",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "The ochk.app design system: tokens, type, the isometric check, halftone photography, primitives and app chrome. Its own system, scoped under data-oc-app=\"ochk\" so it never reaches the .ochk.io family sites.",
+  "keywords": [
+    "orangecheck",
+    "ochk.app",
+    "design-system",
+    "tokens",
+    "react",
+    "internal"
+  ],
+  "author": "OrangeCheck",
+  "license": "MIT",
+  "homepage": "https://design.ochk.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orangecheck/oc-packages.git",
+    "directory": "app-design"
+  },
+  "bugs": {
+    "url": "https://github.com/orangecheck/oc-packages/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.mjs",
+      "require": "./dist/tokens.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives.d.ts",
+      "import": "./dist/primitives.mjs",
+      "require": "./dist/primitives.js"
+    },
+    "./brand": {
+      "types": "./dist/brand.d.ts",
+      "import": "./dist/brand.mjs",
+      "require": "./dist/brand.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.js"
+    },
+    "./chrome": {
+      "types": "./dist/chrome.d.ts",
+      "import": "./dist/chrome.mjs",
+      "require": "./dist/chrome.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./styles/*": "./dist/styles/*"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup && yarn copy:css",
+    "copy:css": "rm -rf dist/styles && mkdir -p dist/styles && cp src/styles.css dist/styles.css && cp -R src/styles/. dist/styles/",
+    "test": "node scripts/check-contrast.mjs && node scripts/check-isolation.mjs",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "next": "^15.0.0 || ^16.0.0",
+    "next-themes": "^0.4.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.544.0",
+    "next": "^16.3.8",
+    "next-themes": "^0.4.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}