@softure-ai/theme-notion 0.0.0-stage → 0.1.1

package/dist/sft-bridge.css

@@ -0,0 +1,47 @@
+/*
+ * The bridge from the `--sft-*` tokens of @softure-ai/ui to the Notion theme. Pages rendered by the SOFTURE packages
+ * (sign-in, password, MCP access, OAuth consent) read `--sft-*`; inside a `PageFrame` (any `[data-page-frame]`
+ * element) those tokens point at the Notion values, so the package pages take the theme's colours, type, radii and
+ * shadows. Scoped to the frame, not `:root`: screens still on `--sft-*` keep their look until they move. The Notion
+ * colours and shadows switch scheme by themselves, so the bridge needs no dark block. Spacing, text sizes and
+ * durations stay the package's: the scales already match, and the theme has no motion tokens.
+ *
+ * Import it after `theme.css`, through the app's Tailwind (it reads the theme with `--theme()`).
+ */
+@layer base {
+  [data-page-frame] {
+    --sft-font-sans: --theme(--font-sans);
+    --sft-font-heading: --theme(--font-sans);
+    --sft-font-mono: --theme(--font-mono);
+
+    --sft-radius-control: --theme(--radius-md);
+    --sft-radius-card: --theme(--radius-lg);
+    --sft-radius-pill: --theme(--radius-full);
+
+    --sft-color-background: var(--background);
+    --sft-color-surface: var(--card);
+    --sft-color-surface-raised: var(--popover);
+    --sft-color-foreground: var(--foreground);
+    --sft-color-muted: var(--muted-foreground);
+    --sft-color-border: var(--border);
+    --sft-color-border-strong: var(--control-off);
+    --sft-color-accent: var(--primary);
+    --sft-color-accent-fill: var(--primary);
+    --sft-color-accent-fill-hover: var(--primary-hover);
+    --sft-color-on-accent: var(--primary-foreground);
+    --sft-color-danger: var(--red);
+    --sft-color-success: var(--green);
+    --sft-color-warning: var(--orange);
+    --sft-color-focus: var(--ring);
+    --sft-color-overlay: var(--overlay);
+
+    --sft-shadow-1: var(--shadow-card);
+    --sft-shadow-2: var(--shadow-dialog);
+  }
+
+  /* A page in a frame fills the window: no browser margin, the Notion background behind everything. */
+  body:has([data-page-frame]) {
+    margin: 0;
+    background-color: var(--background);
+  }
+}

package/dist/theme.css

@@ -0,0 +1,388 @@
+@import "tw-animate-css";
+@source "./ui";
+@source "./notion";
+
+/* Theme "Notion", generated by @softure-ai/theme-kit (buildThemeCss). */
+
+@custom-variant dark {
+  @media (prefers-color-scheme: dark) {
+    &:where(:root:not(.light, [data-theme="light"]), :root:not(.light, [data-theme="light"]) *) {
+      @slot;
+    }
+  }
+  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
+    @slot;
+  }
+}
+
+:root, .light, [data-theme="light"] {
+  --background: #ffffff;
+  --foreground: #37352f;
+  --card: #ffffff;
+  --card-foreground: #37352f;
+  --popover: #ffffff;
+  --popover-foreground: #37352f;
+  --primary: #2383e2;
+  --primary-foreground: #ffffff;
+  --primary-hover: #0077d4;
+  --secondary: #f1f1ef;
+  --secondary-foreground: #37352f;
+  --muted: #f7f7f5;
+  --muted-foreground: #787774;
+  --accent: rgba(55, 53, 47, 0.08);
+  --accent-foreground: #37352f;
+  --accent-strong: rgba(55, 53, 47, 0.16);
+  --destructive: #eb5757;
+  --destructive-foreground: #ffffff;
+  --border: #e9e9e7;
+  --input: rgba(15, 15, 15, 0.1);
+  --field: rgba(242, 241, 238, 0.6);
+  --control-off: rgba(135, 131, 120, 0.3);
+  --ring: rgba(35, 131, 226, 0.57);
+  --sidebar: #f7f7f5;
+  --sidebar-foreground: #5f5e5b;
+  --sidebar-primary: #2383e2;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(55, 53, 47, 0.08);
+  --sidebar-accent-foreground: #37352f;
+  --sidebar-border: #ededeb;
+  --sidebar-ring: rgba(35, 131, 226, 0.57);
+  --tooltip: #0f0f0f;
+  --tooltip-foreground: rgba(255, 255, 255, 0.9);
+  --overlay: rgba(15, 15, 15, 0.6);
+  --gray: #787774;
+  --gray-bg: #f1f1ef;
+  --gray-tag: #e3e2e0;
+  --gray-tag-foreground: #32302c;
+  --brown: #9f6b53;
+  --brown-bg: #f4eeee;
+  --brown-tag: #eee0da;
+  --brown-tag-foreground: #442a1e;
+  --orange: #d9730d;
+  --orange-bg: #fbecdd;
+  --orange-tag: #fadec9;
+  --orange-tag-foreground: #49290e;
+  --yellow: #cb912f;
+  --yellow-bg: #fbf3db;
+  --yellow-tag: #fdecc8;
+  --yellow-tag-foreground: #402c1b;
+  --green: #448361;
+  --green-bg: #edf3ec;
+  --green-tag: #dbeddb;
+  --green-tag-foreground: #1c3829;
+  --blue: #337ea9;
+  --blue-bg: #e7f3f8;
+  --blue-tag: #d3e5ef;
+  --blue-tag-foreground: #183347;
+  --purple: #9065b0;
+  --purple-bg: #f6f3f9;
+  --purple-tag: #e8deee;
+  --purple-tag-foreground: #412454;
+  --pink: #c14c8a;
+  --pink-bg: #faf1f5;
+  --pink-tag: #f5e0e9;
+  --pink-tag-foreground: #4c2337;
+  --red: #d44c47;
+  --red-bg: #fdebec;
+  --red-tag: #ffe2dd;
+  --red-tag-foreground: #5d1715;
+  --default-tag: #f1f0ef;
+  --default-tag-foreground: #32302c;
+  --chart-1: var(--blue);
+  --chart-2: var(--orange);
+  --chart-3: var(--green);
+  --chart-4: var(--purple);
+  --chart-5: var(--pink);
+  --shadow-menu: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2);
+  --shadow-dialog: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 5px 10px rgba(15, 15, 15, 0.1), 0 15px 40px rgba(15, 15, 15, 0.2);
+  --shadow-card: 0 0 0 1px rgba(15, 15, 15, 0.1), 0 2px 4px rgba(15, 15, 15, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light, [data-theme="light"]) {
+    --background: #191919;
+    --foreground: #d4d4d4;
+    --card: #202020;
+    --card-foreground: #d4d4d4;
+    --popover: #252525;
+    --popover-foreground: #d4d4d4;
+    --primary: #2383e2;
+    --primary-foreground: #ffffff;
+    --primary-hover: #0077d4;
+    --secondary: #2f2f2f;
+    --secondary-foreground: #d4d4d4;
+    --muted: #202020;
+    --muted-foreground: #9b9b9b;
+    --accent: rgba(255, 255, 255, 0.055);
+    --accent-foreground: #d4d4d4;
+    --accent-strong: rgba(255, 255, 255, 0.1);
+    --destructive: #eb5757;
+    --destructive-foreground: #ffffff;
+    --border: #2f2f2f;
+    --input: rgba(255, 255, 255, 0.075);
+    --field: rgba(255, 255, 255, 0.055);
+    --control-off: rgba(202, 196, 183, 0.15);
+    --ring: rgba(35, 131, 226, 0.57);
+    --sidebar: #202020;
+    --sidebar-foreground: #9b9b9b;
+    --sidebar-primary: #2383e2;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: rgba(255, 255, 255, 0.055);
+    --sidebar-accent-foreground: #d4d4d4;
+    --sidebar-border: #2a2a2a;
+    --sidebar-ring: rgba(35, 131, 226, 0.57);
+    --tooltip: #373737;
+    --tooltip-foreground: rgba(255, 255, 255, 0.9);
+    --overlay: rgba(0, 0, 0, 0.6);
+    --gray: #9b9b9b;
+    --gray-bg: #2f2f2f;
+    --gray-tag: #5a5a5a;
+    --gray-tag-foreground: rgba(255, 255, 255, 0.81);
+    --brown: #ba856f;
+    --brown-bg: #4a3228;
+    --brown-tag: #603b2c;
+    --brown-tag-foreground: rgba(255, 255, 255, 0.81);
+    --orange: #c77d48;
+    --orange-bg: #5c3b23;
+    --orange-tag: #854c1d;
+    --orange-tag-foreground: rgba(255, 255, 255, 0.81);
+    --yellow: #ca984d;
+    --yellow-bg: #564328;
+    --yellow-tag: #89632a;
+    --yellow-tag-foreground: rgba(255, 255, 255, 0.81);
+    --green: #529e72;
+    --green-bg: #243d30;
+    --green-tag: #2b593f;
+    --green-tag-foreground: rgba(255, 255, 255, 0.81);
+    --blue: #379ad3;
+    --blue-bg: #143a4e;
+    --blue-tag: #28456c;
+    --blue-tag-foreground: rgba(255, 255, 255, 0.81);
+    --purple: #9d68d3;
+    --purple-bg: #3c2d49;
+    --purple-tag: #492f64;
+    --purple-tag-foreground: rgba(255, 255, 255, 0.81);
+    --pink: #d15796;
+    --pink-bg: #4e2c3c;
+    --pink-tag: #69314c;
+    --pink-tag-foreground: rgba(255, 255, 255, 0.81);
+    --red: #df5452;
+    --red-bg: #522e2a;
+    --red-tag: #6e3630;
+    --red-tag-foreground: rgba(255, 255, 255, 0.81);
+    --default-tag: #373737;
+    --default-tag-foreground: #d4d4d4;
+    --shadow-menu: 0 0 0 1px rgba(255, 255, 255, 0.094), 0 3px 6px rgba(0, 0, 0, 0.2), 0 9px 24px rgba(0, 0, 0, 0.4);
+    --shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.094), 0 5px 10px rgba(0, 0, 0, 0.3), 0 15px 40px rgba(0, 0, 0, 0.5);
+    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.094), 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.dark, [data-theme="dark"] {
+  --background: #191919;
+  --foreground: #d4d4d4;
+  --card: #202020;
+  --card-foreground: #d4d4d4;
+  --popover: #252525;
+  --popover-foreground: #d4d4d4;
+  --primary: #2383e2;
+  --primary-foreground: #ffffff;
+  --primary-hover: #0077d4;
+  --secondary: #2f2f2f;
+  --secondary-foreground: #d4d4d4;
+  --muted: #202020;
+  --muted-foreground: #9b9b9b;
+  --accent: rgba(255, 255, 255, 0.055);
+  --accent-foreground: #d4d4d4;
+  --accent-strong: rgba(255, 255, 255, 0.1);
+  --destructive: #eb5757;
+  --destructive-foreground: #ffffff;
+  --border: #2f2f2f;
+  --input: rgba(255, 255, 255, 0.075);
+  --field: rgba(255, 255, 255, 0.055);
+  --control-off: rgba(202, 196, 183, 0.15);
+  --ring: rgba(35, 131, 226, 0.57);
+  --sidebar: #202020;
+  --sidebar-foreground: #9b9b9b;
+  --sidebar-primary: #2383e2;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(255, 255, 255, 0.055);
+  --sidebar-accent-foreground: #d4d4d4;
+  --sidebar-border: #2a2a2a;
+  --sidebar-ring: rgba(35, 131, 226, 0.57);
+  --tooltip: #373737;
+  --tooltip-foreground: rgba(255, 255, 255, 0.9);
+  --overlay: rgba(0, 0, 0, 0.6);
+  --gray: #9b9b9b;
+  --gray-bg: #2f2f2f;
+  --gray-tag: #5a5a5a;
+  --gray-tag-foreground: rgba(255, 255, 255, 0.81);
+  --brown: #ba856f;
+  --brown-bg: #4a3228;
+  --brown-tag: #603b2c;
+  --brown-tag-foreground: rgba(255, 255, 255, 0.81);
+  --orange: #c77d48;
+  --orange-bg: #5c3b23;
+  --orange-tag: #854c1d;
+  --orange-tag-foreground: rgba(255, 255, 255, 0.81);
+  --yellow: #ca984d;
+  --yellow-bg: #564328;
+  --yellow-tag: #89632a;
+  --yellow-tag-foreground: rgba(255, 255, 255, 0.81);
+  --green: #529e72;
+  --green-bg: #243d30;
+  --green-tag: #2b593f;
+  --green-tag-foreground: rgba(255, 255, 255, 0.81);
+  --blue: #379ad3;
+  --blue-bg: #143a4e;
+  --blue-tag: #28456c;
+  --blue-tag-foreground: rgba(255, 255, 255, 0.81);
+  --purple: #9d68d3;
+  --purple-bg: #3c2d49;
+  --purple-tag: #492f64;
+  --purple-tag-foreground: rgba(255, 255, 255, 0.81);
+  --pink: #d15796;
+  --pink-bg: #4e2c3c;
+  --pink-tag: #69314c;
+  --pink-tag-foreground: rgba(255, 255, 255, 0.81);
+  --red: #df5452;
+  --red-bg: #522e2a;
+  --red-tag: #6e3630;
+  --red-tag-foreground: rgba(255, 255, 255, 0.81);
+  --default-tag: #373737;
+  --default-tag-foreground: #d4d4d4;
+  --shadow-menu: 0 0 0 1px rgba(255, 255, 255, 0.094), 0 3px 6px rgba(0, 0, 0, 0.2), 0 9px 24px rgba(0, 0, 0, 0.4);
+  --shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.094), 0 5px 10px rgba(0, 0, 0, 0.3), 0 15px 40px rgba(0, 0, 0, 0.5);
+  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.094), 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+@theme inline {
+  --color-*: initial;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-strong: var(--accent-strong);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-field: var(--field);
+  --color-control-off: var(--control-off);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-tooltip: var(--tooltip);
+  --color-tooltip-foreground: var(--tooltip-foreground);
+  --color-overlay: var(--overlay);
+  --color-gray: var(--gray);
+  --color-gray-bg: var(--gray-bg);
+  --color-gray-tag: var(--gray-tag);
+  --color-gray-tag-foreground: var(--gray-tag-foreground);
+  --color-brown: var(--brown);
+  --color-brown-bg: var(--brown-bg);
+  --color-brown-tag: var(--brown-tag);
+  --color-brown-tag-foreground: var(--brown-tag-foreground);
+  --color-orange: var(--orange);
+  --color-orange-bg: var(--orange-bg);
+  --color-orange-tag: var(--orange-tag);
+  --color-orange-tag-foreground: var(--orange-tag-foreground);
+  --color-yellow: var(--yellow);
+  --color-yellow-bg: var(--yellow-bg);
+  --color-yellow-tag: var(--yellow-tag);
+  --color-yellow-tag-foreground: var(--yellow-tag-foreground);
+  --color-green: var(--green);
+  --color-green-bg: var(--green-bg);
+  --color-green-tag: var(--green-tag);
+  --color-green-tag-foreground: var(--green-tag-foreground);
+  --color-blue: var(--blue);
+  --color-blue-bg: var(--blue-bg);
+  --color-blue-tag: var(--blue-tag);
+  --color-blue-tag-foreground: var(--blue-tag-foreground);
+  --color-purple: var(--purple);
+  --color-purple-bg: var(--purple-bg);
+  --color-purple-tag: var(--purple-tag);
+  --color-purple-tag-foreground: var(--purple-tag-foreground);
+  --color-pink: var(--pink);
+  --color-pink-bg: var(--pink-bg);
+  --color-pink-tag: var(--pink-tag);
+  --color-pink-tag-foreground: var(--pink-tag-foreground);
+  --color-red: var(--red);
+  --color-red-bg: var(--red-bg);
+  --color-red-tag: var(--red-tag);
+  --color-red-tag-foreground: var(--red-tag-foreground);
+  --color-default-tag: var(--default-tag);
+  --color-default-tag-foreground: var(--default-tag-foreground);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+  --text-page-title: 40px;
+  --text-page-title--line-height: 48px;
+  --text-page-title--font-weight: 700;
+  --text-page-title--letter-spacing: -0.01em;
+  --text-heading-1: 30px;
+  --text-heading-1--line-height: 39px;
+  --text-heading-1--font-weight: 600;
+  --text-heading-2: 24px;
+  --text-heading-2--line-height: 31px;
+  --text-heading-2--font-weight: 600;
+  --text-heading-3: 20px;
+  --text-heading-3--line-height: 26px;
+  --text-heading-3--font-weight: 600;
+  --text-body: 16px;
+  --text-body--line-height: 24px;
+  --text-body--font-weight: 400;
+  --text-ui: 14px;
+  --text-ui--line-height: 20px;
+  --text-ui--font-weight: 400;
+  --text-ui-medium: 14px;
+  --text-ui-medium--line-height: 20px;
+  --text-ui-medium--font-weight: 500;
+  --text-small: 12px;
+  --text-small--line-height: 16px;
+  --text-small--font-weight: 400;
+  --text-section-label: 12px;
+  --text-section-label--line-height: 16px;
+  --text-section-label--font-weight: 500;
+  --text-section-label--letter-spacing: 0.01em;
+  --text-code: 13px;
+  --text-code--line-height: 20px;
+  --text-code--font-weight: 400;
+  --radius-xs: 3px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-full: 9999px;
+  --shadow-menu: var(--shadow-menu);
+  --shadow-dialog: var(--shadow-dialog);
+  --shadow-card: var(--shadow-card);
+  --spacing-sidebar-width: 240px;
+  --spacing-content-width: 708px;
+  --spacing-content-width-wide: 1152px;
+  --spacing-control-height: 28px;
+  --spacing-row-height: 34px;
+}
+