From 14a132897fbf2233d8fc85dfdd9905715a22c6e2 Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Fri, 20 Feb 2026 00:09:45 -0800 Subject: [PATCH 01/11] start of customizations --- .architecture/ARCHITECTURE.md | 244 ++++++++++++++++++++++++++++++ .claude/settings.local.json | 3 +- SYNC_FORK.md | 127 ++++++++++++++++ bin/synthtabs.js | 3 + package-lock.json | 10 +- package.json | 33 ++-- src/customizer/TeamsCustomizer.ts | 32 ++++ src/customizer/index.ts | 8 +- src/synthtabs-cli.ts | 49 ++++++ teams-default-pages/.gitkeep | 0 teams-default-scripts/.gitkeep | 0 teams-default-themes/.gitkeep | 0 teams-page-scripts/.gitkeep | 0 teams-required-pages/.gitkeep | 0 teams-service-connectors/.gitkeep | 0 teams-tests/.gitkeep | 0 16 files changed, 483 insertions(+), 26 deletions(-) create mode 100644 .architecture/ARCHITECTURE.md create mode 100644 SYNC_FORK.md create mode 100644 bin/synthtabs.js create mode 100644 src/customizer/TeamsCustomizer.ts create mode 100644 src/synthtabs-cli.ts create mode 100644 teams-default-pages/.gitkeep create mode 100644 teams-default-scripts/.gitkeep create mode 100644 teams-default-themes/.gitkeep create mode 100644 teams-page-scripts/.gitkeep create mode 100644 teams-required-pages/.gitkeep create mode 100644 teams-service-connectors/.gitkeep create mode 100644 teams-tests/.gitkeep diff --git a/.architecture/ARCHITECTURE.md b/.architecture/ARCHITECTURE.md new file mode 100644 index 0000000..695924d --- /dev/null +++ b/.architecture/ARCHITECTURE.md @@ -0,0 +1,244 @@ +# SynthOS / SynthTabs Architecture + +## Overview + +SynthOS is an AI-powered local web application builder. Users create fully functional +HTML/CSS/JS apps through conversational chat — no manual coding required. **SynthTabs** +is a fork that adds Microsoft Teams integration via the **Customizer** extensibility +layer. + +Installed via `npm install -g synthos`, run with `synthos start`. Node.js v20+. + +--- + +## Tech Stack + +| Layer | Technology | +|------------- |-------------------------------------------------| +| Language | TypeScript (strict, ESNext target) | +| Server | Express.js | +| DOM Engine | cheerio (server-side HTML manipulation) | +| AI Providers | Anthropic SDK, OpenAI SDK, FireworksAI (OpenAI-compat) | +| Agent Protocols | A2A SDK, OpenClaw (WebSocket) | +| CLI | yargs | +| Tests | Mocha + ts-mocha, nyc (coverage) | + +--- + +## Folder Structure + +``` +synthtabs/ +├── bin/ CLI entry (synthos.js) +├── src/ TypeScript source +│ ├── index.ts Public exports +│ ├── init.ts Config creation, first-run setup +│ ├── files.ts File I/O helpers +│ ├── pages.ts Page CRUD, metadata, versioning +│ ├── scripts.ts Shell script execution +│ ├── settings.ts Settings persistence (v2) +│ ├── themes.ts Theme loading & parsing +│ ├── migrations.ts Page version upgrades (v1 → v2) +│ ├── synthos-cli.ts CLI command parser +│ ├── customizer/ +│ │ ├── Customizer.ts Extensibility framework +│ │ └── index.ts Default Customizer instance +│ ├── service/ +│ │ ├── server.ts Express app assembly +│ │ ├── usePageRoutes.ts GET/POST /:page (serve + transform) +│ │ ├── useApiRoutes.ts /api/pages, /api/themes, /api/settings, etc. +│ │ ├── useConnectorRoutes.ts /api/connectors (OAuth2, proxy) +│ │ ├── useAgentRoutes.ts /api/agents (A2A + OpenClaw streaming) +│ │ ├── useDataRoutes.ts /api/data/:page/:table (JSON CRUD) +│ │ ├── transformPage.ts Core page transformation pipeline +│ │ ├── createCompletePrompt.ts Provider-specific prompt routing +│ │ ├── modelInstructions.ts Per-model prompt tuning +│ │ ├── generateImage.ts DALL-E 3 image generation +│ │ ├── requiresSettings.ts Middleware: settings guard +│ │ └── debugLog.ts Colored debug logging +│ ├── models/ LLM provider implementations +│ │ ├── anthropic.ts Claude (Opus/Sonnet/Haiku) +│ │ ├── openai.ts GPT (5.2/5-mini/5-nano) +│ │ └── fireworksai.ts FireworksAI (GLM-5) +│ ├── agents/ Agent protocol implementations +│ │ ├── a2aProvider.ts A2A HTTP protocol +│ │ └── openclawProvider.ts OpenClaw WebSocket + SSH tunnels +│ └── connectors/ Connector registry loader +├── default-pages/ Starter HTML templates (copied on init) +├── default-scripts/ OS-specific shell script templates +├── default-themes/ Theme CSS + JSON (Nebula Dusk/Dawn) +├── page-scripts/ Versioned page scripts (page-v2.js, helpers-v2.js) +├── required-pages/ System pages (builder, settings, pages, scripts, apis) +├── service-connectors/ 28+ connector JSON definitions +├── migration-rules/ Markdown rules for page upgrades +├── tests/ Unit tests +├── teams-default-pages/ [TEAMS] Custom page templates +├── teams-default-scripts/ [TEAMS] Custom shell scripts +├── teams-default-themes/ [TEAMS] Custom themes +├── teams-page-scripts/ [TEAMS] Custom versioned page scripts +├── teams-required-pages/ [TEAMS] Custom system pages +├── teams-service-connectors/ [TEAMS] Custom connectors +└── .synthos/ USER DATA (created at runtime, git-ignored) + ├── settings.json API keys, model config, features + ├── pages// page.html + page.json + data tables + ├── themes/ Local theme copies + └── scripts/ User shell scripts +``` + +--- + +## Core Loop: Page Transformation + +This is the heart of SynthOS — every page edit goes through this pipeline: + +``` +User types message in chat panel + │ + ▼ +POST /:page (usePageRoutes.ts) + │ + ▼ +transformPage() (transformPage.ts) + 1. Assign data-node-id to every element (cheerio) + 2. Build LLM prompt with: + - Annotated HTML + - Theme info (CSS variables, colors) + - Enabled connectors + hints + - Enabled agents + capabilities + - Available scripts + - Custom transform instructions (from Customizer) + 3. Route to provider (Anthropic / OpenAI / FireworksAI) + 4. LLM returns JSON array of change operations: + { op: "update"|"delete"|"insert", nodeId, html, parentId } + 5. Apply changes via cheerio + 6. Strip data-node-id attributes + │ + ▼ +Save updated HTML → Serve to browser +``` + +On error (bad JSON, missing nodes), the original page is returned unchanged +with an injected ` + + + + + + + + +
+
SynthOS
+
+

SynthOS: What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!

+
+
+ Save + Pages + Reset +
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/teams-required-pages/builder.json b/teams-required-pages/builder.json new file mode 100644 index 0000000..68086e7 --- /dev/null +++ b/teams-required-pages/builder.json @@ -0,0 +1 @@ +{ "title": "Builder", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 2, "mode": "unlockedS" } diff --git a/teams-required-pages/pages.html b/teams-required-pages/pages.html new file mode 100644 index 0000000..3d74315 --- /dev/null +++ b/teams-required-pages/pages.html @@ -0,0 +1,919 @@ + + + + SynthOS - Pages + + + + + + + + + + +
+
SynthOS
+
+
+

SynthOS: Here are all of the created pages. Right-click any page to pin it to + favorites, edit its definition, or copy it to a new page.

+
+
+
+ Save + Pages + Reset +
+
+ + +
+
+
+
Pages
+ + + + + + +
+

Pages

+
+
+ +
+ + +
+
+
+ + + + + + + + + +
+
+ + +
+
+
Edit page definition
+
Copy to new page
+
Update page
+
+
Download page
+
+ + + + +
+ + + + + diff --git a/teams-required-pages/pages.json b/teams-required-pages/pages.json new file mode 100644 index 0000000..a5293cd --- /dev/null +++ b/teams-required-pages/pages.json @@ -0,0 +1 @@ +{ "title": "Pages", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 2, "mode": "locked" } diff --git a/teams-required-pages/settings.html b/teams-required-pages/settings.html new file mode 100644 index 0000000..655e61c --- /dev/null +++ b/teams-required-pages/settings.html @@ -0,0 +1,1639 @@ + + + + SynthOS - Settings + + + + + + + + +
+
SynthOS
+
+
+

SynthOS: Configure your settings below. Use the accordion sections to navigate between General settings, Model configuration (Page Builder & Chat Completion), and Additional Features.

+

The Page Builder Model is used when building pages via chat. The Chat Model is used by pages that call synthos.generate.completion().

+
+ +
+
+ Save + Pages + Reset +
+
+ + +
+
+
+
Settings
+
+ +
+ +
+
+
+ + +
+
+
+ +
+
+
+ +
+ +
+
+ + +
+
Page Builder Model
+
+ + +
+
+ + + +
+
+ + +
+ ▾ More settings +
+ + +
+
+ + +
+
+ +
+
Chat Model
+
+ + +
+
+ + +
+
+ + +
+ ▾ More settings +
+ + +
+
+ + +
+
+ +
+
+ +
+
+
+ +
+ +
+
+
+
+ + +
+
+
+
+
+ +
+ +
+
+
+
Configure agents (A2A or OpenClaw) that your pages can communicate with.
+ +
+
+ +
+
+ Chat with Agent + +
+
+
+ + +
+
+
+
+
+ +
+
+
+ + + + + + + + diff --git a/teams-required-pages/settings.json b/teams-required-pages/settings.json new file mode 100644 index 0000000..c5e2618 --- /dev/null +++ b/teams-required-pages/settings.json @@ -0,0 +1 @@ +{ "title": "Settings", "categories": ["System"], "pinned": true, "showInAll": true, "pageVersion": 2, "mode": "locked" } diff --git a/teams-required-pages/synthos_apis.html b/teams-required-pages/synthos_apis.html new file mode 100644 index 0000000..3f2567f --- /dev/null +++ b/teams-required-pages/synthos_apis.html @@ -0,0 +1,327 @@ + + + + SynthOS - APIs + + + + + + + + + +
+
SynthOS
+
+

SynthOS: Expand the individual API operations to test calls.

+
+
+ Save + Pages + Reset +
+
+ + +
+
+
+
API Explorer
+
+
+
GET /api/data/:page/:table
+
+ This operation retrieves all rows from the specified page-scoped table. The response is an array of JSON objects, each representing a row in the table. +
+ + + +
+
+
+
+
+
GET /api/data/:page/:table?limit=N&offset=N
+
+ Paginated variant. Returns a page of rows from the table. The response includes the items, total count, and whether more rows are available. + Response: { items: [...], total: number, offset: number, limit: number, hasMore: boolean } +
+ + + + + +
+
+
+
+
+
GET /api/data/:page/:table/:id
+
+ This operation retrieves a single row from the specified page-scoped table using the provided ID. The response is a JSON object representing the row. +
+ + + + +
+
+
+
+
+
POST /api/data/:page/:table
+
+ This operation saves a single row to the specified page-scoped table. The request should include a JSON object representing the row. The response indicates success. +
+ + + + +
+
+
+
+
+
DELETE /api/data/:page/:table/:id
+
+ This operation deletes a single row from the specified page-scoped table using the provided ID. The response indicates success. +
+ + + + +
+
+
+
+
+
GET /api/pages
+
+ This operation retrieves a list of all available pages. The response is an array of page objects with name, title, categories, pinned, createdDate, lastModified, pageVersion, and mode. +
+ +
+
+
+
+
+
GET /api/pages/:name
+
+ This operation retrieves the metadata for a single page, including title, categories, pinned, createdDate, lastModified, pageVersion, and mode. +
+ + +
+
+
+
+
+
POST /api/pages/:name
+
+ This operation merges metadata for a page. Send only the fields you want to update. Supported fields: title (string), categories (array of strings), pinned (boolean), mode ("unlocked" | "locked"). The lastModified timestamp is auto-set on each update. The createdDate and pageVersion fields are preserved and cannot be overridden. +
+ + + +
+
+
+
+
+
POST /api/pages/:name/pin
+
+ This operation toggles the pinned status for a page. The request body should include pinned (boolean). +
+ + + +
+
+
+
+
+
DELETE /api/pages/:name
+
+ This operation deletes a user page. Required (system) pages cannot be deleted. Returns 400 if the page is a required page, or 404 if not found. +
+ + +
+
+
+
+
+
POST /api/pages/:name/copy
+
+ This operation copies a page to a new name. The source page can be a user page or a required (system) page. The request body should include name (string, required), title (string, optional), and categories (array of strings, optional). Returns 409 if the target page already exists. +
+ + + +
+
+
+
+
+
POST /api/search/web
+
+ This operation searches the web using Brave Search and returns a list of results. Requires Brave Search to be enabled in Settings > Connectors. +
+ + + +
+
+
+
+
+
POST /api/generate/image
+
+ This operation generates an image based on a prompt. You can specify the shape and style of the image. +
+ + + + +
+
+
+
+
+
POST /api/generate/completion
+
+ This operation generates a text completion based on a prompt. You can optionally specify the temperature for controlling randomness. +
+ + + +
+
+
+
+
+
POST /api/scripts/:id
+
+ This operation executes a script with the specified ID and passes in the provided variables. The response contains the output of the script execution. +
+ + + +
+
+
+
+
+
GET /api/connectors
+
+ Lists all available connectors with their configuration status. Supports optional category and id query filters. +
+ + +
+
+
+
+
+
GET /api/connectors/:id
+
+ Retrieves full detail for a single connector, including its definition and whether it is configured and enabled. +
+ + +
+
+
+
+
+
POST /api/connectors (proxy call)
+
+ Proxies a request through a configured connector. The connector attaches authentication automatically based on its auth strategy. +
+ + + + + + +
+
+
+
+
+
GET /api/agents
+
+ Lists configured agents (A2A and OpenClaw). Supports optional filters: enabled (boolean) and provider (a2a|openclaw). Returns id, name, description, url, enabled, provider, and capabilities for each agent. +
+ + + +
+
+
+
+
+
POST /api/agents/:id/send
+
+ Sends a text message to an agent (works for both A2A and OpenClaw protocols). Returns a normalized response: { kind: 'message'|'task', text?: string, raw: object }. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. +
+ + + +
+
+
+
+
+
POST /api/agents/:id/stream
+
+ Sends a message and receives a streaming SSE response. Each event is JSON: { kind: 'text'|'status'|'artifact'|'done'|'error', data: any }. The stream ends with a [DONE] sentinel. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. +
+ + + +
+
+
+
+
+
PATCH /api/agents/:id
+
+ Toggle an agent's enabled/disabled state or update its name and description. Send only the fields to change. +
+ + + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/teams-required-pages/synthos_apis.json b/teams-required-pages/synthos_apis.json new file mode 100644 index 0000000..43154b5 --- /dev/null +++ b/teams-required-pages/synthos_apis.json @@ -0,0 +1 @@ +{ "title": "SynthOS APIs", "categories": ["System"], "pinned": false, "showInAll": false, "pageVersion": 2, "mode": "locked" } diff --git a/teams-required-pages/synthos_scripts.html b/teams-required-pages/synthos_scripts.html new file mode 100644 index 0000000..23500b1 --- /dev/null +++ b/teams-required-pages/synthos_scripts.html @@ -0,0 +1,87 @@ + + + + SynthOS - Scripts + + + + + + + + + +
+
SynthOS
+
+

SynthOS: Add or modify scripts that can be executed using the /api/scripts/:id API.

+
+
+ Save + Pages + Reset +
+
+ + +
+
+
+
Script Editor
+
+
+
    + +
+ +
+
+
+ Select an existing script to edit or add a new one using the "Add New Script" button. +
+ + + + + +
Script Command is required.
+ + +
+

Understanding SynthOS Scripts

+

Scripts in SynthOS are powerful tools that allow you to define custom terminal commands for various tasks. When SynthOS executes a script, it runs the command and captures the console output, which is then returned for further processing or analysis.

+ +

Creating Effective Scripts

+

When writing a script, you can use any valid terminal command. For added flexibility, you can include {{variable}} placeholders, which SynthOS will replace with actual values during execution.

+ +

Example: Weather Forecast Script

+

Here's an example of an interesting script that SynthOS could use:

+

curl wttr.in/{{city}}?format=3

+

This script fetches a concise weather forecast for a specified city. SynthOS can call this script with different city names to get up-to-date weather information.

+ +

Tips for Script Writing

+

1. Keep commands concise and focused on a single task.

+

2. Use variables for dynamic inputs to make scripts more versatile.

+

3. Consider potential errors and how to handle them.

+

4. Test your scripts thoroughly to ensure they work as expected.

+

5. Provide a clear and concise usage description to help others understand how to use your script.

+

6. Define the expected variables in the Variables field to document the script's requirements.

+ +

Using the Description Field

+

The Description field allows you to provide a brief explanation of what SynthOS can use your script for.

+ +

Defining Variables

+

Use the Variables field to specify any input parameters your script expects. Format it as a JSON object, e.g., { city: string, days?: number }. This helps SynthOS know what inputs it needs to provide when running your script.

+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/teams-required-pages/synthos_scripts.json b/teams-required-pages/synthos_scripts.json new file mode 100644 index 0000000..782e617 --- /dev/null +++ b/teams-required-pages/synthos_scripts.json @@ -0,0 +1 @@ +{ "title": "SynthOS Scripts", "categories": ["System"], "pinned": false, "showInAll": false, "pageVersion": 2, "mode": "locked" } From 323c64dc2c62c6bb9ffcc10788dfb42d0d909177 Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Fri, 20 Feb 2026 00:43:52 -0800 Subject: [PATCH 05/11] deleted .synthtabs folder --- .synthtabs/.gitignore | 1 - .synthtabs/scripts/example.sh | 10 - .synthtabs/scripts/windows-terminal.json | 7 - .synthtabs/settings.json.example | 32 - .synthtabs/themes/.gitkeep | 0 .synthtabs/themes/nebula-dawn.json | 19 - .synthtabs/themes/nebula-dawn.v2.css | 706 ----------------------- .synthtabs/themes/nebula-dusk.json | 19 - .synthtabs/themes/nebula-dusk.v2.css | 698 ---------------------- 9 files changed, 1492 deletions(-) delete mode 100644 .synthtabs/.gitignore delete mode 100644 .synthtabs/scripts/example.sh delete mode 100644 .synthtabs/scripts/windows-terminal.json delete mode 100644 .synthtabs/settings.json.example delete mode 100644 .synthtabs/themes/.gitkeep delete mode 100644 .synthtabs/themes/nebula-dawn.json delete mode 100644 .synthtabs/themes/nebula-dawn.v2.css delete mode 100644 .synthtabs/themes/nebula-dusk.json delete mode 100644 .synthtabs/themes/nebula-dusk.v2.css diff --git a/.synthtabs/.gitignore b/.synthtabs/.gitignore deleted file mode 100644 index e38da20..0000000 --- a/.synthtabs/.gitignore +++ /dev/null @@ -1 +0,0 @@ -settings.json diff --git a/.synthtabs/scripts/example.sh b/.synthtabs/scripts/example.sh deleted file mode 100644 index 15f5bd4..0000000 --- a/.synthtabs/scripts/example.sh +++ /dev/null @@ -1,10 +0,0 @@ -#!/bin/bash - -# This is an example script - -# You can run this script using the following command: -# sh .synthtabs/scripts/example.sh - -# This script will print "Hello, World!" to the console - -echo "Hello, World!" diff --git a/.synthtabs/scripts/windows-terminal.json b/.synthtabs/scripts/windows-terminal.json deleted file mode 100644 index 42a8bf4..0000000 --- a/.synthtabs/scripts/windows-terminal.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "id": "windows-terminal", - "type": "command", - "command": "{{command}}", - "description": "Executes a windows based terminal command in the current working directory", - "variables": "{{command}}" -} \ No newline at end of file diff --git a/.synthtabs/settings.json.example b/.synthtabs/settings.json.example deleted file mode 100644 index dcb5839..0000000 --- a/.synthtabs/settings.json.example +++ /dev/null @@ -1,32 +0,0 @@ -{ - "version": 2, - "theme": "nebula-dawn", - "models": [ - { - "use": "builder", - "provider": "Anthropic", - "configuration": { - "apiKey": "", - "model": "" - }, - "imageQuality": "standard", - "instructions": "", - "logCompletions": false - }, - { - "use": "chat", - "provider": "Anthropic", - "configuration": { - "apiKey": "", - "model": "" - }, - "imageQuality": "standard", - "instructions": "", - "logCompletions": false - } - ], - "features": [], - "services": {}, - "connectors": {}, - "agents": [] -} \ No newline at end of file diff --git a/.synthtabs/themes/.gitkeep b/.synthtabs/themes/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/.synthtabs/themes/nebula-dawn.json b/.synthtabs/themes/nebula-dawn.json deleted file mode 100644 index 29f481e..0000000 --- a/.synthtabs/themes/nebula-dawn.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "mode": "light", - "colors": { - "bg-primary": "#f0e6f6", - "bg-secondary": "#e8dff0", - "bg-tertiary": "#f7f2fa", - "accent-primary": "#667eea", - "accent-secondary": "#764ba2", - "accent-tertiary": "#c054d4", - "accent-glow": "rgba(118,75,162,0.15)", - "text-primary": "#2d2640", - "text-secondary": "#6b4f8a", - "border-color": "rgba(118,75,162,0.25)", - "header-min-height": "58px", - "header-padding-vertical": "14px", - "header-padding-horizontal": "20px", - "header-line-height": "1.25" - } -} diff --git a/.synthtabs/themes/nebula-dawn.v2.css b/.synthtabs/themes/nebula-dawn.v2.css deleted file mode 100644 index 112522d..0000000 --- a/.synthtabs/themes/nebula-dawn.v2.css +++ /dev/null @@ -1,706 +0,0 @@ -:root { - --bg-primary: #f0e6f6; - --bg-secondary: #e8dff0; - --bg-tertiary: #f7f2fa; - --accent-primary: #667eea; - --accent-secondary: #764ba2; - --accent-tertiary: #c054d4; - --accent-glow: rgba(118,75,162,0.15); - --text-primary: #2d2640; - --text-secondary: #6b4f8a; - --border-color: rgba(118,75,162,0.25); - --header-min-height: 58px; - --header-padding-vertical: 14px; - --header-padding-horizontal: 20px; - --header-line-height: 1.25; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); - color: var(--text-primary); - height: 100vh; - display: flex; -} - -.chat-panel { - width: 30%; - background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,230,246,0.95) 100%); - box-shadow: 0 0 30px rgba(118,75,162,0.1), inset 0 0 60px rgba(240,230,246,0.3); - padding: 20px; - display: flex; - flex-direction: column; - border-right: 1px solid var(--border-color); - position: relative; - transition: margin-left 0.3s ease, border-right-color 0.3s ease; -} - -.chat-header { - font-size: 24px; - min-height: var(--header-min-height); - padding: var(--header-padding-vertical) var(--header-padding-horizontal); - line-height: var(--header-line-height); - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); - color: #fff; - border-radius: 15px; - box-shadow: 0 4px 20px rgba(102,126,234,0.3); - text-shadow: 0 2px 10px rgba(0,0,0,0.15); - letter-spacing: 2px; -} - -.chat-messages { - flex-grow: 1; - overflow-y: auto; - padding: 15px; - margin-top: 15px; - background: rgba(255,255,255,0.6); - border-radius: 15px; - border: 1px solid rgba(118,75,162,0.15); - box-shadow: inset 0 0 30px rgba(240,230,246,0.4); -} - -.chat-message { - margin-bottom: 15px; - padding: 12px 15px; - background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%); - border-radius: 15px; - box-shadow: 0 2px 10px rgba(118,75,162,0.1); - border: 1px solid rgba(118,75,162,0.1); - backdrop-filter: blur(5px); -} - -.chat-message p { - margin-bottom: 5px; - line-height: 1.5; -} - -.chat-message p strong { - font-weight: 600; - background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} - -.chat-message p code { - background: var(--accent-glow); - padding: 2px 6px; - border-radius: 5px; - font-family: 'Courier New', Courier, monospace; - color: var(--accent-secondary); - border: 1px solid rgba(118,75,162,0.2); -} - -.link-group { - display: flex; - justify-content: space-between; - margin: 15px 0; - padding: 10px; - background: rgba(255,255,255,0.4); - border-radius: 10px; - border: 1px solid rgba(118,75,162,0.15); -} - -.link-group a { - font-size: 14px; - color: var(--text-secondary); - text-decoration: none; - padding: 8px 15px; - border-radius: 8px; - transition: all 0.3s ease; - border: 1px solid transparent; -} - -.link-group a:hover { - background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%); - border-color: rgba(118,75,162,0.3); - box-shadow: 0 0 15px var(--accent-glow); - color: var(--accent-secondary); -} - -form { - display: flex; - flex-direction: row; - width: 100%; - gap: 10px; - align-items: center; -} - -.chat-input { - padding: 14px 18px; - border: 1px solid var(--border-color); - border-radius: 25px; - flex-grow: 1; - font-size: 14px; - background: rgba(255,255,255,0.8); - color: var(--text-primary); - box-shadow: inset 0 2px 10px rgba(118,75,162,0.05), 0 0 20px rgba(118,75,162,0.05); - transition: all 0.3s ease; -} - -.chat-input:focus { - outline: none; - border-color: rgba(118,75,162,0.5); - box-shadow: inset 0 2px 10px rgba(118,75,162,0.05), 0 0 25px rgba(118,75,162,0.15); -} - -.chat-input::placeholder { - color: rgba(118,75,162,0.4); -} - -.chat-submit { - padding: 14px 20px; - border: none; - border-radius: 25px; - font-size: 14px; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); - color: #fff; - cursor: pointer; - transition: all 0.3s ease; - font-weight: 600; - letter-spacing: 1px; - box-shadow: 0 4px 20px rgba(102,126,234,0.3); - white-space: nowrap; -} - -.chat-submit:hover { - transform: translateY(-2px); - box-shadow: 0 6px 25px rgba(102,126,234,0.5); -} - -.chat-submit:active { - transform: translateY(0); -} - -.viewer-panel { - flex: 1; - min-width: 0; - padding: 20px 20px 20px 44px; - background: linear-gradient(135deg, rgba(232,223,240,0.9) 0%, rgba(247,242,250,0.95) 100%); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - box-shadow: inset 0 0 60px rgba(118,75,162,0.05); - position: relative; - overflow: hidden; -} - -.viewer-panel::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(ellipse at center, rgba(102,126,234,0.04) 0%, transparent 70%); - animation: nebula-pulse 8s ease-in-out infinite; - pointer-events: none; -} - -@keyframes nebula-pulse { - 0%,100% { opacity: 0.5; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.1); } -} - -.viewer-panel.full-viewer { - padding: 0; -} - -.loading-overlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(240,230,246,0.9); - justify-content: center; - align-items: center; - z-index: 1000; -} - -.spinner { - width: 50px; - height: 50px; - border: 4px solid var(--border-color); - border-top-color: var(--accent-tertiary); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} - -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -::-webkit-scrollbar-track { - background: rgba(240,230,246,0.6); - border-radius: 10px; -} - -::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); - border-radius: 10px; - border: 2px solid rgba(240,230,246,0.6); - box-shadow: 0 0 10px var(--accent-glow); -} - -::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); - box-shadow: 0 0 15px rgba(192,84,212,0.3); -} - -::-webkit-scrollbar-corner { - background: rgba(240,230,246,0.6); -} - -* { - scrollbar-width: thin; - scrollbar-color: var(--accent-secondary) rgba(240,230,246,0.6); -} - -/* ---- Chat Toggle ---- */ -.chat-toggle { - position: fixed; - left: 30%; - top: 50%; - transform: translateY(-50%); - width: 24px; - height: 80px; - background: rgba(240,230,246,0.95); - border: none; - border-left: 1px solid var(--border-color); - border-radius: 0 12px 12px 0; - cursor: pointer; - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - transition: left 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; -} - -.chat-toggle:hover { - background: rgba(255,255,255,1); - box-shadow: 0 0 20px var(--accent-glow), inset 0 0 15px rgba(118,75,162,0.1); -} - -.chat-toggle-dots { - display: flex; - flex-direction: column; - gap: 6px; -} - -.chat-toggle-dot { - width: 4px; - height: 4px; - border-radius: 50%; - background: var(--text-secondary); - transition: transform 0.3s ease; -} - -.chat-toggle:hover .chat-toggle-dot { - transform: scale(1.4); -} - -body.chat-collapsed .chat-panel { - margin-left: -30%; - border-right-color: transparent; -} - -body.chat-collapsed .chat-toggle { - left: 0; -} - -/* ---- Modal ---- */ -.modal-overlay { - position: fixed; - top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.4); - display: none; - align-items: center; - justify-content: center; - z-index: 2000; - backdrop-filter: blur(4px); -} - -.modal-overlay.show { display: flex; } - -.modal-content { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 12px; - width: 90%; - max-width: 450px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); - overflow: hidden; -} - -.modal-header { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - padding: 16px 20px; - font-size: 18px; - font-weight: 600; -} - -.modal-body { padding: 20px; } - -.modal-footer { - padding: 16px 20px; - border-top: 1px solid var(--border-color); - display: flex; - justify-content: space-between; - align-items: center; - gap: 12px; -} - -.modal-footer-right { display: flex; gap: 10px; margin-left: auto; } - -/* ---- Form elements ---- */ -.form-group { margin-bottom: 16px; } -.form-group:last-child { margin-bottom: 0; } - -.form-label { - display: block; - font-size: 13px; - color: var(--text-secondary); - margin-bottom: 6px; - font-weight: 500; -} - -.form-input { - width: 100%; - padding: 10px 14px; - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); - color: var(--text-primary); - font-size: 14px; - outline: none; - transition: border-color 0.2s ease; - box-sizing: border-box; -} - -.form-input:focus { border-color: var(--accent-primary); } -.form-input:read-only { opacity: 0.7; cursor: not-allowed; } -.form-input::placeholder { color: var(--text-secondary); opacity: 0.7; } - -.checkbox-label { - display: flex; - align-items: center; - gap: 8px; - cursor: pointer; -} - -.checkbox-label input[type="checkbox"] { - width: 18px; - height: 18px; - accent-color: var(--accent-primary); - cursor: pointer; -} - -.checkbox-label span { font-size: 14px; color: var(--text-primary); } - -/* ---- Modal buttons ---- */ -.modal-btn { - padding: 10px 20px; - border-radius: 8px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; -} - -.modal-btn-primary { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; -} - -.modal-btn-primary:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); -} - -.modal-btn-secondary { - background: var(--bg-secondary); - color: var(--text-primary); - border: 1px solid var(--border-color); -} - -.modal-btn-secondary:hover { - background: var(--bg-tertiary); - border-color: var(--text-secondary); -} - -.modal-btn-danger { background: #dc3545; color: white; } - -.modal-btn-danger:hover { - background: #c82333; - box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3); -} - -/* ---- Brainstorm icon button (inside input) ---- */ -.chat-input-wrapper { - position: relative; - flex: 1; - display: flex; - align-items: center; -} - -.chat-input-wrapper .chat-input { - width: 100%; - padding-right: 36px; -} - -.brainstorm-icon-btn { - position: absolute; - right: 6px; - top: 50%; - transform: translateY(-50%); - background: transparent; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 4px; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - transition: color 0.2s, background 0.2s; -} - -.brainstorm-icon-btn:hover { - color: var(--accent-primary); - background: var(--accent-glow); -} - -.light-mode .brainstorm-icon-btn { - color: var(--text-secondary); -} - -.light-mode .brainstorm-icon-btn:hover { - color: var(--accent-primary); -} - -/* ---- Brainstorm modal (full-window variant) ---- */ -.brainstorm-modal .modal-content { - max-width: none; - width: calc(100% - 80px); - height: calc(100% - 80px); - display: flex; - flex-direction: column; -} - -.brainstorm-modal .modal-header { - display: flex; - justify-content: space-between; - align-items: center; - flex-shrink: 0; -} - -.brainstorm-close-btn { - background: none; - border: none; - color: white; - font-size: 24px; - cursor: pointer; - padding: 0 4px; - line-height: 1; - opacity: 0.7; - transition: opacity 0.2s; -} - -.brainstorm-close-btn:hover { opacity: 1; } - -.brainstorm-messages { - flex: 1; - overflow-y: auto; - scrollbar-gutter: stable; - padding: 20px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.brainstorm-message { - padding: 12px 16px; - border-radius: 10px; - font-size: 14px; - line-height: 1.5; - max-width: 85%; - word-wrap: break-word; -} - -.brainstorm-user { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - align-self: flex-end; -} - -.brainstorm-assistant { - background: var(--bg-secondary); - color: var(--text-primary); - border: 1px solid var(--border-color); - align-self: flex-start; -} - -.brainstorm-input-row { - display: flex; - gap: 8px; - padding: 16px 20px; - border-top: 1px solid var(--border-color); - flex-shrink: 0; -} - -.brainstorm-input { - flex: 1; - padding: 10px 14px; - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); - color: var(--text-primary); - font-size: 14px; - outline: none; - transition: border-color 0.2s; -} - -.brainstorm-input:focus { border-color: var(--accent-primary); } -.brainstorm-input::placeholder { color: var(--text-secondary); opacity: 0.7; } - -.brainstorm-send-btn { - padding: 10px 20px; - border: none; - border-radius: 8px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; -} - -.brainstorm-send-btn:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); -} - -.brainstorm-send-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.brainstorm-assistant p { margin: 4px 0; } -.brainstorm-assistant pre { background: var(--bg-tertiary); padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; } -.brainstorm-assistant code { font-size: 13px; } -.brainstorm-assistant ul, .brainstorm-assistant ol { margin: 4px 0; padding-left: 20px; } - -.brainstorm-build-row { - display: flex; - justify-content: flex-end; - margin-top: 10px; -} - -.brainstorm-build-btn { - padding: 6px 16px; - font-size: 12px; - font-weight: 600; - border: none; - border-radius: 6px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - cursor: pointer; - transition: all 0.2s; -} - -.brainstorm-build-btn:hover { - filter: brightness(1.15); - box-shadow: 0 2px 10px var(--accent-glow); -} - -.brainstorm-suggestions { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 10px; -} - -.brainstorm-suggestion-chip { - padding: 5px 12px; - font-size: 12px; - border: 1px solid var(--border-color); - border-radius: 16px; - background: var(--bg-tertiary); - color: var(--text-secondary); - cursor: pointer; - transition: all 0.2s; - line-height: 1.4; -} - -.brainstorm-suggestion-chip:hover { - border-color: var(--accent-primary); - color: var(--accent-primary); - background: var(--accent-glow); -} - -.brainstorm-suggestion-chip:disabled { - opacity: 0.4; - cursor: default; - pointer-events: none; -} - -.brainstorm-thinking { - align-self: flex-start; - padding: 12px 16px; - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 10px; - color: var(--text-secondary); - font-size: 14px; - font-style: italic; -} - -/* ---- Save Line ---- */ -.save-line { - display: flex; - align-items: center; - gap: 10px; - margin: 8px 0 15px; - font-size: 11px; - color: var(--text-secondary); - opacity: 0.7; -} - -.save-line::before, -.save-line::after { - content: ''; - flex: 1; - height: 1px; - background: linear-gradient(90deg, transparent, var(--border-color), transparent); -} - -.save-line-label { - white-space: nowrap; - letter-spacing: 0.5px; -} - -/* ---- Shared page rules ---- */ -#loadingOverlay { position: absolute; } -.chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } -.chat-input:disabled { opacity: 0.5; cursor: not-allowed; } diff --git a/.synthtabs/themes/nebula-dusk.json b/.synthtabs/themes/nebula-dusk.json deleted file mode 100644 index 07ad149..0000000 --- a/.synthtabs/themes/nebula-dusk.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "mode": "dark", - "colors": { - "bg-primary": "#1a1a2e", - "bg-secondary": "#16213e", - "bg-tertiary": "#0f0f23", - "accent-primary": "#667eea", - "accent-secondary": "#764ba2", - "accent-tertiary": "#f093fb", - "accent-glow": "rgba(138,43,226,0.3)", - "text-primary": "#e0e0e0", - "text-secondary": "#b794f6", - "border-color": "rgba(138,43,226,0.3)", - "header-min-height": "58px", - "header-padding-vertical": "14px", - "header-padding-horizontal": "20px", - "header-line-height": "1.25" - } -} diff --git a/.synthtabs/themes/nebula-dusk.v2.css b/.synthtabs/themes/nebula-dusk.v2.css deleted file mode 100644 index d2bd17a..0000000 --- a/.synthtabs/themes/nebula-dusk.v2.css +++ /dev/null @@ -1,698 +0,0 @@ -:root { - --bg-primary: #1a1a2e; - --bg-secondary: #16213e; - --bg-tertiary: #0f0f23; - --accent-primary: #667eea; - --accent-secondary: #764ba2; - --accent-tertiary: #f093fb; - --accent-glow: rgba(138,43,226,0.3); - --text-primary: #e0e0e0; - --text-secondary: #b794f6; - --border-color: rgba(138,43,226,0.3); - --header-min-height: 58px; - --header-padding-vertical: 14px; - --header-padding-horizontal: 20px; - --header-line-height: 1.25; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); - color: var(--text-primary); - height: 100vh; - display: flex; -} - -.chat-panel { - width: 30%; - background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%); - box-shadow: 0 0 30px rgba(138,43,226,0.2), inset 0 0 60px rgba(75,0,130,0.1); - padding: 20px; - display: flex; - flex-direction: column; - border-right: 1px solid var(--border-color); - position: relative; - transition: margin-left 0.3s ease, border-right-color 0.3s ease; -} - -.chat-header { - font-size: 24px; - min-height: var(--header-min-height); - padding: var(--header-padding-vertical) var(--header-padding-horizontal); - line-height: var(--header-line-height); - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); - color: #fff; - border-radius: 15px; - box-shadow: 0 4px 20px rgba(102,126,234,0.4); - text-shadow: 0 2px 10px rgba(0,0,0,0.3); - letter-spacing: 2px; -} - -.chat-messages { - flex-grow: 1; - overflow-y: auto; - padding: 15px; - margin-top: 15px; - background: rgba(15,15,35,0.6); - border-radius: 15px; - border: 1px solid rgba(138,43,226,0.2); - box-shadow: inset 0 0 30px rgba(75,0,130,0.2); -} - -.chat-message { - margin-bottom: 15px; - padding: 12px 15px; - background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%); - border-radius: 15px; - box-shadow: 0 2px 10px rgba(138,43,226,0.2); - border: 1px solid rgba(138,43,226,0.1); - backdrop-filter: blur(5px); -} - -.chat-message p { - margin-bottom: 5px; - line-height: 1.5; -} - -.chat-message p strong { - font-weight: 600; - background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} - -.chat-message p code { - background: var(--accent-glow); - padding: 2px 6px; - border-radius: 5px; - font-family: 'Courier New', Courier, monospace; - color: var(--accent-tertiary); - border: 1px solid rgba(240,147,251,0.3); -} - -.link-group { - display: flex; - justify-content: space-between; - margin: 15px 0; - padding: 10px; - background: rgba(15,15,35,0.4); - border-radius: 10px; - border: 1px solid rgba(138,43,226,0.2); -} - -.link-group a { - font-size: 14px; - color: var(--text-secondary); - text-decoration: none; - padding: 8px 15px; - border-radius: 8px; - transition: all 0.3s ease; - border: 1px solid transparent; -} - -.link-group a:hover { - background: linear-gradient(135deg, rgba(102,126,234,0.3) 0%, rgba(118,75,162,0.3) 100%); - border-color: rgba(183,148,246,0.5); - box-shadow: 0 0 15px var(--accent-glow); - color: var(--accent-tertiary); -} - -form { - display: flex; - flex-direction: row; - width: 100%; - gap: 10px; - align-items: center; -} - -.chat-input { - padding: 14px 18px; - border: 1px solid var(--border-color); - border-radius: 25px; - flex-grow: 1; - font-size: 14px; - background: rgba(15,15,35,0.8); - color: var(--text-primary); - box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 0 20px rgba(138,43,226,0.1); - transition: all 0.3s ease; -} - -.chat-input:focus { - outline: none; - border-color: rgba(183,148,246,0.6); - box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 0 25px rgba(138,43,226,0.3); -} - -.chat-input::placeholder { - color: rgba(183,148,246,0.5); -} - -.chat-submit { - padding: 14px 20px; - border: none; - border-radius: 25px; - font-size: 14px; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); - color: #fff; - cursor: pointer; - transition: all 0.3s ease; - font-weight: 600; - letter-spacing: 1px; - box-shadow: 0 4px 20px rgba(102,126,234,0.4); - white-space: nowrap; -} - -.chat-submit:hover { - transform: translateY(-2px); - box-shadow: 0 6px 25px rgba(102,126,234,0.6); -} - -.chat-submit:active { - transform: translateY(0); -} - -.viewer-panel { - flex: 1; - min-width: 0; - padding: 20px 20px 20px 44px; - background: linear-gradient(135deg, rgba(22,33,62,0.9) 0%, rgba(15,15,35,0.95) 100%); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - box-shadow: inset 0 0 60px rgba(75,0,130,0.15); - position: relative; - overflow: hidden; -} - -.viewer-panel::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(ellipse at center, rgba(138,43,226,0.05) 0%, transparent 70%); - animation: nebula-pulse 8s ease-in-out infinite; - pointer-events: none; -} - -@keyframes nebula-pulse { - 0%,100% { opacity: 0.5; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.1); } -} - -.viewer-panel.full-viewer { - padding: 0; -} - -.loading-overlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(15,15,35,0.9); - justify-content: center; - align-items: center; - z-index: 1000; -} - -.spinner { - width: 50px; - height: 50px; - border: 4px solid var(--border-color); - border-top-color: var(--accent-tertiary); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} - -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -::-webkit-scrollbar-track { - background: rgba(15,15,35,0.6); - border-radius: 10px; -} - -::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); - border-radius: 10px; - border: 2px solid rgba(15,15,35,0.6); - box-shadow: 0 0 10px var(--accent-glow); -} - -::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); - box-shadow: 0 0 15px rgba(240,147,251,0.5); -} - -::-webkit-scrollbar-corner { - background: rgba(15,15,35,0.6); -} - -* { - scrollbar-width: thin; - scrollbar-color: var(--accent-secondary) rgba(15,15,35,0.6); -} - -/* ---- Chat Toggle ---- */ -.chat-toggle { - position: fixed; - left: 30%; - top: 50%; - transform: translateY(-50%); - width: 24px; - height: 80px; - background: rgba(22,33,62,0.95); - border: none; - border-left: 1px solid var(--border-color); - border-radius: 0 12px 12px 0; - cursor: pointer; - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - transition: left 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; -} - -.chat-toggle:hover { - background: rgba(30,42,72,1); - box-shadow: 0 0 20px var(--accent-glow), inset 0 0 15px rgba(138,43,226,0.15); -} - -.chat-toggle-dots { - display: flex; - flex-direction: column; - gap: 6px; -} - -.chat-toggle-dot { - width: 4px; - height: 4px; - border-radius: 50%; - background: var(--text-secondary); - transition: transform 0.3s ease; -} - -.chat-toggle:hover .chat-toggle-dot { - transform: scale(1.4); -} - -body.chat-collapsed .chat-panel { - margin-left: -30%; - border-right-color: transparent; -} - -body.chat-collapsed .chat-toggle { - left: 0; -} - -/* ---- Modal ---- */ -.modal-overlay { - position: fixed; - top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.6); - display: none; - align-items: center; - justify-content: center; - z-index: 2000; - backdrop-filter: blur(4px); -} - -.modal-overlay.show { display: flex; } - -.modal-content { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 12px; - width: 90%; - max-width: 450px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); - overflow: hidden; -} - -.modal-header { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - padding: 16px 20px; - font-size: 18px; - font-weight: 600; -} - -.modal-body { padding: 20px; } - -.modal-footer { - padding: 16px 20px; - border-top: 1px solid var(--border-color); - display: flex; - justify-content: space-between; - align-items: center; - gap: 12px; -} - -.modal-footer-right { display: flex; gap: 10px; margin-left: auto; } - -/* ---- Form elements ---- */ -.form-group { margin-bottom: 16px; } -.form-group:last-child { margin-bottom: 0; } - -.form-label { - display: block; - font-size: 13px; - color: var(--text-secondary); - margin-bottom: 6px; - font-weight: 500; -} - -.form-input { - width: 100%; - padding: 10px 14px; - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); - color: var(--text-primary); - font-size: 14px; - outline: none; - transition: border-color 0.2s ease; - box-sizing: border-box; -} - -.form-input:focus { border-color: var(--accent-primary); } -.form-input:read-only { opacity: 0.7; cursor: not-allowed; } -.form-input::placeholder { color: var(--text-secondary); opacity: 0.7; } - -.checkbox-label { - display: flex; - align-items: center; - gap: 8px; - cursor: pointer; -} - -.checkbox-label input[type="checkbox"] { - width: 18px; - height: 18px; - accent-color: var(--accent-primary); - cursor: pointer; -} - -.checkbox-label span { font-size: 14px; color: var(--text-primary); } - -/* ---- Modal buttons ---- */ -.modal-btn { - padding: 10px 20px; - border-radius: 8px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; -} - -.modal-btn-primary { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; -} - -.modal-btn-primary:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); -} - -.modal-btn-secondary { - background: var(--bg-secondary); - color: var(--text-primary); - border: 1px solid var(--border-color); -} - -.modal-btn-secondary:hover { - background: var(--bg-tertiary); - border-color: var(--text-secondary); -} - -.modal-btn-danger { background: #dc3545; color: white; } - -.modal-btn-danger:hover { - background: #c82333; - box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3); -} - -/* ---- Brainstorm icon button (inside input) ---- */ -.chat-input-wrapper { - position: relative; - flex: 1; - display: flex; - align-items: center; -} - -.chat-input-wrapper .chat-input { - width: 100%; - padding-right: 36px; -} - -.brainstorm-icon-btn { - position: absolute; - right: 6px; - top: 50%; - transform: translateY(-50%); - background: transparent; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 4px; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - transition: color 0.2s, background 0.2s; -} - -.brainstorm-icon-btn:hover { - color: var(--accent-primary); - background: var(--accent-glow); -} - -/* ---- Brainstorm modal (full-window variant) ---- */ -.brainstorm-modal .modal-content { - max-width: none; - width: calc(100% - 80px); - height: calc(100% - 80px); - display: flex; - flex-direction: column; -} - -.brainstorm-modal .modal-header { - display: flex; - justify-content: space-between; - align-items: center; - flex-shrink: 0; -} - -.brainstorm-close-btn { - background: none; - border: none; - color: white; - font-size: 24px; - cursor: pointer; - padding: 0 4px; - line-height: 1; - opacity: 0.7; - transition: opacity 0.2s; -} - -.brainstorm-close-btn:hover { opacity: 1; } - -.brainstorm-messages { - flex: 1; - overflow-y: auto; - scrollbar-gutter: stable; - padding: 20px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.brainstorm-message { - padding: 12px 16px; - border-radius: 10px; - font-size: 14px; - line-height: 1.5; - max-width: 85%; - word-wrap: break-word; -} - -.brainstorm-user { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - align-self: flex-end; -} - -.brainstorm-assistant { - background: var(--bg-secondary); - color: var(--text-primary); - border: 1px solid var(--border-color); - align-self: flex-start; -} - -.brainstorm-input-row { - display: flex; - gap: 8px; - padding: 16px 20px; - border-top: 1px solid var(--border-color); - flex-shrink: 0; -} - -.brainstorm-input { - flex: 1; - padding: 10px 14px; - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); - color: var(--text-primary); - font-size: 14px; - outline: none; - transition: border-color 0.2s; -} - -.brainstorm-input:focus { border-color: var(--accent-primary); } -.brainstorm-input::placeholder { color: var(--text-secondary); opacity: 0.7; } - -.brainstorm-send-btn { - padding: 10px 20px; - border: none; - border-radius: 8px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s; -} - -.brainstorm-send-btn:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); -} - -.brainstorm-send-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.brainstorm-assistant p { margin: 4px 0; } -.brainstorm-assistant pre { background: var(--bg-tertiary); padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; } -.brainstorm-assistant code { font-size: 13px; } -.brainstorm-assistant ul, .brainstorm-assistant ol { margin: 4px 0; padding-left: 20px; } - -.brainstorm-build-row { - display: flex; - justify-content: flex-end; - margin-top: 10px; -} - -.brainstorm-build-btn { - padding: 6px 16px; - font-size: 12px; - font-weight: 600; - border: none; - border-radius: 6px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); - color: white; - cursor: pointer; - transition: all 0.2s; -} - -.brainstorm-build-btn:hover { - filter: brightness(1.15); - box-shadow: 0 2px 10px var(--accent-glow); -} - -.brainstorm-suggestions { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 10px; -} - -.brainstorm-suggestion-chip { - padding: 5px 12px; - font-size: 12px; - border: 1px solid var(--border-color); - border-radius: 16px; - background: var(--bg-tertiary); - color: var(--text-secondary); - cursor: pointer; - transition: all 0.2s; - line-height: 1.4; -} - -.brainstorm-suggestion-chip:hover { - border-color: var(--accent-primary); - color: var(--accent-primary); - background: var(--accent-glow); -} - -.brainstorm-suggestion-chip:disabled { - opacity: 0.4; - cursor: default; - pointer-events: none; -} - -.brainstorm-thinking { - align-self: flex-start; - padding: 12px 16px; - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 10px; - color: var(--text-secondary); - font-size: 14px; - font-style: italic; -} - -/* ---- Save Line ---- */ -.save-line { - display: flex; - align-items: center; - gap: 10px; - margin: 8px 0 15px; - font-size: 11px; - color: var(--text-secondary); - opacity: 0.7; -} - -.save-line::before, -.save-line::after { - content: ''; - flex: 1; - height: 1px; - background: linear-gradient(90deg, transparent, var(--border-color), transparent); -} - -.save-line-label { - white-space: nowrap; - letter-spacing: 0.5px; -} - -/* ---- Shared page rules ---- */ -#loadingOverlay { position: absolute; } -.chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } -.chat-input:disabled { opacity: 0.5; cursor: not-allowed; } From 19d77563955d140dab8b804d5b5753c812809f82 Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Fri, 20 Feb 2026 01:10:13 -0800 Subject: [PATCH 06/11] initial themes --- .gitignore | 2 + .saved-pages/.gitignore | 1 - .saved-pages/game_factory/page.html | 289 -- .saved-pages/game_factory/page.json | 11 - .../63b6fb56-3ea2-4eeb-a50a-5255261ad3e0.json | 5 - .../b1e32533-ccce-42a0-ae1c-e8647f322a4b.json | 5 - .saved-pages/my_notes/page.html | 35 - .saved-pages/my_notes/page.json | 11 - .saved-pages/oregon_trail1/page.html | 521 --- .saved-pages/oregon_trail1/page.json | 12 - .saved-pages/pixels_photo_search/page.html | 784 ----- .saved-pages/pixels_photo_search/page.json | 12 - Microsoft-Teams-UI-Kit.md | 2866 +++++++++++++++++ teams-default-themes/nebula-dawn.json | 19 - teams-default-themes/nebula-dusk.json | 19 - teams-default-themes/teams-dark.json | 134 + .../{nebula-dusk.v2.css => teams-dark.v1.css} | 246 +- teams-default-themes/teams-light.json | 134 + ...{nebula-dawn.v2.css => teams-light.v1.css} | 246 +- teams-required-pages/synthos_apis.html | 327 -- teams-required-pages/synthos_apis.json | 1 - teams-required-pages/synthos_scripts.html | 87 - teams-required-pages/synthos_scripts.json | 1 - 23 files changed, 3342 insertions(+), 2426 deletions(-) delete mode 100644 .saved-pages/.gitignore delete mode 100644 .saved-pages/game_factory/page.html delete mode 100644 .saved-pages/game_factory/page.json delete mode 100644 .saved-pages/my_notes/notes/63b6fb56-3ea2-4eeb-a50a-5255261ad3e0.json delete mode 100644 .saved-pages/my_notes/notes/b1e32533-ccce-42a0-ae1c-e8647f322a4b.json delete mode 100644 .saved-pages/my_notes/page.html delete mode 100644 .saved-pages/my_notes/page.json delete mode 100644 .saved-pages/oregon_trail1/page.html delete mode 100644 .saved-pages/oregon_trail1/page.json delete mode 100644 .saved-pages/pixels_photo_search/page.html delete mode 100644 .saved-pages/pixels_photo_search/page.json create mode 100644 Microsoft-Teams-UI-Kit.md delete mode 100644 teams-default-themes/nebula-dawn.json delete mode 100644 teams-default-themes/nebula-dusk.json create mode 100644 teams-default-themes/teams-dark.json rename teams-default-themes/{nebula-dusk.v2.css => teams-dark.v1.css} (64%) create mode 100644 teams-default-themes/teams-light.json rename teams-default-themes/{nebula-dawn.v2.css => teams-light.v1.css} (63%) delete mode 100644 teams-required-pages/synthos_apis.html delete mode 100644 teams-required-pages/synthos_apis.json delete mode 100644 teams-required-pages/synthos_scripts.html delete mode 100644 teams-required-pages/synthos_scripts.json diff --git a/.gitignore b/.gitignore index 79ef331..254de37 100644 --- a/.gitignore +++ b/.gitignore @@ -131,5 +131,7 @@ dist .synthos .synthos-* +.synthtabs +.synthtabs-* CLAUDE.md CLAUDE-PLAN.md \ No newline at end of file diff --git a/.saved-pages/.gitignore b/.saved-pages/.gitignore deleted file mode 100644 index e38da20..0000000 --- a/.saved-pages/.gitignore +++ /dev/null @@ -1 +0,0 @@ -settings.json diff --git a/.saved-pages/game_factory/page.html b/.saved-pages/game_factory/page.html deleted file mode 100644 index 5b1fcb3..0000000 --- a/.saved-pages/game_factory/page.html +++ /dev/null @@ -1,289 +0,0 @@ - - - - - - SynthOS - - - - -
-
-
-

Your Game Design

- -
-
-
- - Creating your game design... -
-
-
- Oops! Something went wrong while creating your game design. - 🔄 Try Again -
-
-
-
- - -
-
-
- - -
-
-
-
-
⚙️
⚙️
-
🏃 Obby Adventure
💰 Tycoon Empire
🐾 Pet Simulator
🏠 Roleplay World
-

🏭 Game Factory

-
-
-
Hey there, future game creator! 🌟 Welcome to the Game Factory! I'm here to help you design the most AMAZING game ever!

What kind of game sounds fun to you? Pick one or tell me your own idea!
🏃 Obby💰 Tycoon🎮 Simulator🏠 Roleplay👻 Horror🏎️ Racing⚔️ Fighting🧩 Puzzle
-
-
-
- - Oops! Something went wrong. Please try again! -
-
Listening...
- - - - -
-
-
Listening
-
Updating...
-
- - - - \ No newline at end of file diff --git a/.saved-pages/game_factory/page.json b/.saved-pages/game_factory/page.json deleted file mode 100644 index 49e67be..0000000 --- a/.saved-pages/game_factory/page.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "title": "Game Factory", - "categories": [ - "Builder" - ], - "pinned": false, - "createdDate": "2026-02-16T07:11:49.649Z", - "lastModified": "2026-02-16T07:11:49.649Z", - "pageVersion": 1, - "mode": "unlocked" -} \ No newline at end of file diff --git a/.saved-pages/my_notes/notes/63b6fb56-3ea2-4eeb-a50a-5255261ad3e0.json b/.saved-pages/my_notes/notes/63b6fb56-3ea2-4eeb-a50a-5255261ad3e0.json deleted file mode 100644 index 21d63e0..0000000 --- a/.saved-pages/my_notes/notes/63b6fb56-3ea2-4eeb-a50a-5255261ad3e0.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "id": "63b6fb56-3ea2-4eeb-a50a-5255261ad3e0", - "title": "SynthOS Tasks", - "content": "* [x] Create the new My Notes app\n* [ ] Rewrite the transform prompt that Claude screwed up\n* [ ] Minimize all of the default and required pages\n* [ ] " -} \ No newline at end of file diff --git a/.saved-pages/my_notes/notes/b1e32533-ccce-42a0-ae1c-e8647f322a4b.json b/.saved-pages/my_notes/notes/b1e32533-ccce-42a0-ae1c-e8647f322a4b.json deleted file mode 100644 index 837a73d..0000000 --- a/.saved-pages/my_notes/notes/b1e32533-ccce-42a0-ae1c-e8647f322a4b.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "id": "b1e32533-ccce-42a0-ae1c-e8647f322a4b", - "title": "My First Note", - "content": "# Things I need to do" -} \ No newline at end of file diff --git a/.saved-pages/my_notes/page.html b/.saved-pages/my_notes/page.html deleted file mode 100644 index bc32888..0000000 --- a/.saved-pages/my_notes/page.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - SynthOS - Notes - - - - - - - - - - -
-
SynthOS
-

SynthOS: Welcome to My Notes — a simple note-taking app! Your notes are listed in the sidebar on the left. Click any note to view or edit it, or tap "+ New Note" to create a fresh one. Each note has a rich text editor with formatting tools, and you can save or delete notes using the buttons below the editor. Use the search box to filter notes by title or content. What would you like to do?

-
- Save - Pages - Reset -
-
- - -
-
-

My Notes

📝

Welcome to Notes

Select a note from the sidebar to view or edit it, or click "+ New Note" to create a new one.

- - - - - - - \ No newline at end of file diff --git a/.saved-pages/my_notes/page.json b/.saved-pages/my_notes/page.json deleted file mode 100644 index 6e8a33d..0000000 --- a/.saved-pages/my_notes/page.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "title": "My Notes", - "categories": [ - "Tools" - ], - "pinned": false, - "createdDate": "2026-02-15T00:34:24.996Z", - "lastModified": "2026-02-15T00:40:19.428Z", - "pageVersion": 2, - "mode": "locked" -} \ No newline at end of file diff --git a/.saved-pages/oregon_trail1/page.html b/.saved-pages/oregon_trail1/page.html deleted file mode 100644 index 4270ee8..0000000 --- a/.saved-pages/oregon_trail1/page.html +++ /dev/null @@ -1,521 +0,0 @@ - - - - SynthOS - - - - - - - - - -
-
SynthOS
-
-
SynthOS: What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!
- -

User: can you build a map of the united states circa mid 1800's

SynthOS: I've built an interactive map of the United States circa 1850! It shows the states and territories as they existed around that time, including key acquisitions like the Louisiana Purchase (1803), the Oregon Territory, the Mexican Cession (1848), and the Texas Annexation (1845). Hover over any region to see details. The map uses a vintage parchment style to give it a period-appropriate feel.

User: now can you plot out the path of the oregon trail?

SynthOS: Done! I've plotted the Oregon Trail on the map as a dashed red-brown line tracing the historic route from Independence, Missouri to Oregon City, Oregon. Key landmarks and stops along the trail are marked with dots and labels, including Fort Kearny, Chimney Rock, Fort Laramie, Independence Rock, South Pass, Fort Hall, Fort Boise, The Dalles, and Oregon City. Hover over any waypoint to see details about that stop on the trail.

-
- Save - Pages - Reset -
-
- - -
-
-
-
United States of America — Circa 1850
-
- -
-
-
Legend
-
Original 13 States
-
Early Statehood (1790s–1820s)
-
Louisiana Purchase (1803)
-
Oregon Territory
-
Texas Annexation (1845)
-
Mexican Cession (1848)
-
Territories
-
Oregon Trail
-
-
-
- - - - - - - - \ No newline at end of file diff --git a/.saved-pages/oregon_trail1/page.json b/.saved-pages/oregon_trail1/page.json deleted file mode 100644 index fc043ab..0000000 --- a/.saved-pages/oregon_trail1/page.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "title": "Oregon Trail - Initial", - "categories": [ - "Educational" - ], - "pinned": false, - "showInAll": true, - "createdDate": "2026-02-16T13:28:00.654Z", - "lastModified": "2026-02-16T13:28:00.654Z", - "pageVersion": 2, - "mode": "unlocked" -} \ No newline at end of file diff --git a/.saved-pages/pixels_photo_search/page.html b/.saved-pages/pixels_photo_search/page.html deleted file mode 100644 index 0ee05da..0000000 --- a/.saved-pages/pixels_photo_search/page.html +++ /dev/null @@ -1,784 +0,0 @@ - - - - SynthOS - - - - - - - - - -
-
SynthOS
-
-
SynthOS: What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!
- -

User: Create a stock photography search app using Pexels

SynthOS: I've built a stock photography search app powered by Pexels! You can search for any topic, browse results in a beautiful masonry grid, filter by orientation and color, and click any photo to see it full-size with download options and photographer credits. Photos provided by Pexels.

-
- Save - Pages - Reset -
-
- - -
-
-
- - - - - - - - \ No newline at end of file diff --git a/.saved-pages/pixels_photo_search/page.json b/.saved-pages/pixels_photo_search/page.json deleted file mode 100644 index 75b8dc0..0000000 --- a/.saved-pages/pixels_photo_search/page.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "title": "Pexels Photo Search", - "categories": [ - "Tools" - ], - "pinned": false, - "showInAll": true, - "createdDate": "2026-02-16T12:25:06.710Z", - "lastModified": "2026-02-16T18:22:22.434Z", - "pageVersion": 2, - "mode": "unlocked" -} \ No newline at end of file diff --git a/Microsoft-Teams-UI-Kit.md b/Microsoft-Teams-UI-Kit.md new file mode 100644 index 0000000..03b7842 --- /dev/null +++ b/Microsoft-Teams-UI-Kit.md @@ -0,0 +1,2866 @@ +\## Commit: Component Inventory + Full Light/Dark Themes (up through Tooltip) + + + +Below is the consolidated \*\*component inventory (HTML)\*\* plus the \*\*single token-based CSS system\*\* and \*\*complete Light/Dark theme blocks\*\* that cover everything added so far: Buttons, Alert, Breadcrumb, Card, Carousel, Checkbox, Coachmark, Menu, Dialog, Dropdown, Group list, Link, \*\*Input\*\*, \*\*Key value pair\*\*, \*\*Paragraph\*\*, \*\*Picker\*\*, \*\*Pivot\*\*, \*\*Progress indicator\*\*, \*\*Radio (final)\*\*, \*\*Scrollbar\*\*, \*\*Search box\*\*, \*\*Side panel\*\*, \*\*Status label\*\*, \*\*Toast\*\*, \*\*Toggle (final)\*\*, \*\*Tooltip\*\*. + + + +--- + + + +\# Component inventory (HTML) + + + +\## Button + + + +```html + + + + + + + + + + + + + + + +
+ +  + +  + +
+ +``` + + + +\## Alert + + + +```html + +
+ +  + +  Message goes here + +  + +  + +
+ +``` + + + +\## Breadcrumb + + + +```html + + + +``` + + + +\## Card + + + +```html + +
+ + 
+ + 
+ + 
+ + 
+ + 
Fluent base card
+ + 
Subtitle
+ + 
+ +  + + 
+ + 
+ +
+ +``` + + + +\## Carousel + + + +```html + +
+ + 
+ + 
+ + 
CONTENT
+ + 
+ +  + +  + + 
+ + 
+ +  + +  + + 
+ +
+ +``` + + + +\## Checkbox + + + +```html + + + +``` + + + +\## Coachmark + + + +```html + + + +``` + + + +\## Contextual menu (Menu) + + + +```html + + + +``` + + + +\## Dialog + + + +```html + + + +``` + + + +\## Dropdown (button + menu) + + + +```html + +
+ +  + +  + +  + +
+ + + +``` + + + +\## Group list (disclosure header) + + + +```html + +
+ +  + +  + +
+ +``` + + + +\## Hyperlink + + + +```html + +Hyperlink + +A very long hyperlink that should truncate + +Disabled + +``` + + + +--- + + + +\## Input + + + +```html + +
+ +  + + + + 
+ +  + + 
+ + + + 
Optional hint
+ +
+ + + +
+ + 
+ +  Prefix + +  + + 
+ +
+ + + +
+ +  + + 
+ +  + +  + + 
+ +  + +
+ +``` + + + +\## Key value pair + + + +```html + +
+ + 
+ + 
Label
+ + 
+ + 
Key
+ + 
Value
+ + 
+ + 
+ + + + 
+ + 
Toggle switch
+ + 
+ + 
Key
+ +  + + 
+ + 
+ + + + 
+ + 
Input box
+ + 
+ + 
Key
+ + 
+ + 
+ + 
+ + + + 
+ + 
Radios
+ + 
+ + 
Key
+ + 
+ +  + +  + + 
+ + 
+ + 
+ +
+ +``` + + + +\## Paragraph + + + +```html + +
+ + 

Headline example

+ + 

Description example…

+ + 

Subheadline here

+ + 

Lorem ipsum…

+ + 

Description example…

+ +
+ +``` + + + +\## Picker (generic + date/time) + + + +```html + +
+ +  + + + + 
+ + 
+ +  + + 
+ + + + 
+ +  + + 
+ + 
+ +
+ + + +
+ + 
+ + 
+ + 
+ +  + + 
Jan 2021
+ +  + + 
+ + 
+ +  + +  + + 
+ + 
+ +
+ + + +
+ + 
+ + 
+ + 
+ +  + +  + + 
+ + 
+ +
+ +``` + + + +\## Pivot + + + +```html + + + +``` + + + +\## Progress indicator + + + +```html + +
+ +  + +
+ + + +
+ + 
+ + 
Label
+ + 
Description
+ + 
+ + 
+ + 
+ + 
+ +
+ +``` + + + +\## Radio (final) + + + +```html + +
+ +  + +  + +
+ +``` + + + +\## Scroll region (styled scrollbars) + + + +```html + +
Very long content…
+ +``` + + + +\## Search box + + + +```html + + + +``` + + + +\## Side panel + + + +```html + + + +``` + + + +\## Status label + + + +```html + + + +  + +  Critical + + + + + + + +  + +  Warning + + + +``` + + + +\## Toast + + + +```html + +
+ + 
+ + 
+ +  + + 
+ + 
ContosoBot
+ + 
Lorem ipsum…
+ + 
+ +  + + 
+ + 
+ + 
Lorem ipsum…
+ + 
+ + 
+ +  + +  + + 
+ + 
+ +
+ +``` + + + +\## Toggle (final) + + + +```html + + + +``` + + + +\## Tooltip + + + +```html + + + + + +``` + + + +--- + + + +\# Single stylesheet (Base tokens + component CSS) + + + +```css + +/\* ===== Base Tokens (theme sets values) ===== \*/ + +:root{ + +  --font:"Segoe UI",system-ui,-apple-system,sans-serif; + +  --type-xs: 12px/16px var(--font); + +  --type-sm: 13px/20px var(--font); + +  --type-md: 16px/22px var(--font); + +  --type-lg: 18px/24px var(--font); + + + +  --bg: ; + +  --surface: ; + +  --surface-2: ; + +  --surface-hover: ; + +  --surface-pressed: ; + +  --surface-disabled: ; + + + +  --text: ; + +  --text-muted: ; + +  --text-disabled: ; + + + +  --border: ; + +  --border-strong: ; + + + +  --accent: ; + +  --accent-hover: ; + +  --accent-pressed: ; + +  --accent-contrast: ; + + + +  --danger: ; + +  --danger-2: ; + + + +  --focus-ring: ; + + + +  --shadow-1: ; + +  --shadow-2: ; + + + +  --scrim: ; + +} + + + +/\* ===== Primitives ===== \*/ + +.mt-link{ color:var(--accent); text-decoration:none; cursor:pointer; font:inherit; } + +.mt-link:hover{ color:var(--accent-hover); text-decoration:underline; } + +.mt-link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } + +.mt-link\[aria-disabled="true"]{ color:var(--text-disabled); pointer-events:none; cursor:default; text-decoration:none; } + +.mt-link--truncate{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } + + + +/\* ===== Button ===== \*/ + +.mt-btn{ + +  display:inline-flex; align-items:center; justify-content:center; gap:6px; + +  border-radius:4px; border:1px solid var(--btn-border); + +  background:var(--btn-bg); color:var(--btn-fg); + +  font:600 var(--type-sm); + +  height:32px; padding:0 12px; + +  cursor:pointer; user-select:none; + +} + +.mt-btn\[data-size="sm"]{ height:24px; padding:0 8px; font:600 var(--type-xs); } + +.mt-btn:hover:not(:disabled){ background:var(--btn-hover-bg); } + +.mt-btn:active:not(:disabled){ background:var(--btn-pressed-bg); } + +.mt-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-btn:disabled{ background:var(--surface-disabled); color:var(--text-disabled); border-color:var(--surface-disabled); cursor:not-allowed; } + +.mt-btn\[data-icon-only]{ width:32px; padding:0; } + +.mt-btn\[data-icon-only]\[data-size="sm"]{ width:24px; } + +.mt-btn-group{ display:inline-flex; } + +.mt-btn--split{ width:32px; padding:0; } + + + +.mt-btn\[data-style="accent"]{ + +  --btn-bg:var(--accent); --btn-fg:var(--accent-contrast); --btn-border:var(--accent); + +  --btn-hover-bg:var(--accent-hover); --btn-pressed-bg:var(--accent-pressed); + +} + +.mt-btn\[data-style="neutral"]{ + +  --btn-bg:var(--surface); --btn-fg:var(--text); --btn-border:var(--border); + +  --btn-hover-bg:var(--surface-hover); --btn-pressed-bg:var(--surface-pressed); + +} + +.mt-btn\[data-style="outline"]{ + +  --btn-bg:transparent; --btn-fg:var(--text); --btn-border:var(--border-strong); + +  --btn-hover-bg:var(--surface-hover); --btn-pressed-bg:var(--surface-pressed); + +} + +.mt-btn\[data-style="ghost"]{ + +  --btn-bg:transparent; --btn-fg:var(--text); --btn-border:transparent; + +  --btn-hover-bg:var(--surface-hover); --btn-pressed-bg:var(--surface-pressed); + +} + + + +/\* ===== Alert ===== \*/ + +.mt-alert{ + +  display:flex; align-items:center; gap:10px; + +  min-height:32px; padding:6px 10px; + +  border:1px solid var(--alert-border); + +  border-radius:4px; + +  background:var(--alert-bg); + +  color:var(--alert-fg); + +} + +.mt-alert\_\_icon{ width:14px; height:14px; border-radius:999px; background:var(--alert-icon); } + +.mt-alert\_\_message{ font:var(--type-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } + +.mt-alert\_\_action{ + +  height:22px; padding:0 10px; border-radius:3px; + +  border:1px solid var(--border); background:var(--surface); color:var(--text); + +  font:600 11px/20px var(--font); + +} + +.mt-alert\_\_dismiss{ + +  width:22px; height:22px; display:grid; place-items:center; + +  border:0; background:transparent; color:var(--text-muted); border-radius:3px; + +} + +.mt-alert\_\_action:focus-visible,.mt-alert\_\_dismiss:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + + + +.mt-alert\[data-variant="error"] { --alert-bg:var(--alert-error-bg); --alert-border:var(--alert-error-border); --alert-fg:var(--alert-error-fg); --alert-icon:var(--alert-error-icon); } + +.mt-alert\[data-variant="warning"]{ --alert-bg:var(--alert-warn-bg); --alert-border:var(--alert-warn-border); --alert-fg:var(--alert-warn-fg); --alert-icon:var(--alert-warn-icon); } + +.mt-alert\[data-variant="success"]{ --alert-bg:var(--alert-ok-bg); --alert-border:var(--alert-ok-border); --alert-fg:var(--alert-ok-fg); --alert-icon:var(--alert-ok-icon); } + +.mt-alert\[data-variant="info"] { --alert-bg:var(--alert-info-bg); --alert-border:var(--alert-info-border); --alert-fg:var(--alert-info-fg); --alert-icon:var(--alert-info-icon); } + + + +/\* ===== Breadcrumb ===== \*/ + +.mt-breadcrumb{ font:var(--type-sm); } + +.mt-breadcrumb\_\_list{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; } + +.mt-breadcrumb\_\_sep{ color:var(--text-disabled); user-select:none; } + +.mt-breadcrumb\_\_current{ color:var(--text); font-weight:600; } + + + +/\* ===== Card ===== \*/ + +.mt-card{ + +  position:relative; display:flex; flex-direction:column; overflow:hidden; + +  border-radius:6px; border:1px solid var(--border); + +  background:var(--surface); color:var(--text); + +  box-shadow:var(--shadow-1); + +} + +.mt-card:hover{ box-shadow:var(--shadow-2); } + +.mt-card:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-card\[data-size="xs"]{ width:160px; } .mt-card\[data-size="sm"]{ width:220px; } + +.mt-card\[data-size="md"]{ width:280px; } .mt-card\[data-size="lg"]{ width:360px; } + +.mt-card\_\_media{ aspect-ratio:16/9; background:var(--surface-2); } + +.mt-card\_\_media img{ width:100%; height:100%; object-fit:cover; display:block; } + +.mt-card\_\_body{ padding:10px 12px; } + +.mt-card\_\_header{ display:flex; gap:8px; align-items:flex-start; } + +.mt-card\_\_title{ font:600 var(--type-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } + +.mt-card\_\_subtitle{ font:var(--type-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } + +.mt-card\_\_menu{ width:28px; height:28px; border:0; background:transparent; color:var(--text-muted); border-radius:4px; cursor:pointer; } + +.mt-card\_\_menu:hover{ background:var(--surface-hover); color:var(--text); } + +.mt-card\_\_menu:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-card\[data-selected="true"]{ border-color:var(--accent); } + +.mt-card\[data-selected="true"]::after{ + +  content:"✓"; position:absolute; top:8px; right:8px; + +  width:18px; height:18px; border-radius:999px; display:grid; place-items:center; + +  background:var(--accent); color:var(--accent-contrast); font:700 12px/1 var(--font); + +} + +.mt-card\[data-disabled="true"]{ background:var(--surface-disabled); color:var(--text-disabled); box-shadow:none; opacity:.7; pointer-events:none; } + + + +/\* ===== Carousel ===== \*/ + +.mt-carousel\_\_viewport{ position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; } + +.mt-carousel\_\_track{ display:flex; transition:transform 240ms ease; } + +.mt-carousel\_\_slide{ min-width:100%; display:flex; justify-content:center; padding:20px 0; } + +.mt-carousel\_\_content{ + +  width:70%; max-width:600px; aspect-ratio:16/9; + +  border-radius:6px; border:1px solid var(--border); + +  background:var(--surface); box-shadow:var(--shadow-1); + +  display:grid; place-items:center; + +} + +.mt-carousel\_\_nav{ + +  position:absolute; top:50%; transform:translateY(-50%); + +  width:36px; height:36px; border-radius:999px; border:0; + +  background:transparent; color:var(--text-muted); cursor:pointer; + +} + +.mt-carousel\_\_nav--prev{ left:12px; } .mt-carousel\_\_nav--next{ right:12px; } + +.mt-carousel\_\_nav:hover{ background:var(--surface-hover); color:var(--text); } + +.mt-carousel\_\_nav:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-carousel\_\_dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; } + +.mt-carousel\_\_dot{ width:6px; height:6px; border-radius:999px; border:0; background:var(--text-disabled); cursor:pointer; } + +.mt-carousel\_\_dot\[aria-selected="true"]{ background:var(--accent); transform:scale(1.2); } + +.mt-carousel\_\_dot:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + + + +/\* ===== Checkbox ===== \*/ + +.mt-checkbox{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:var(--type-sm); color:var(--text); } + +.mt-checkbox\_\_input{ position:absolute; opacity:0; pointer-events:none; } + +.mt-checkbox\_\_control{ + +  width:16px; height:16px; display:grid; place-items:center; + +  border-radius:3px; border:1px solid var(--border-strong); background:transparent; + +} + +.mt-checkbox\_\_icon{ width:12px; height:12px; color:var(--accent-contrast); opacity:0; transform:scale(.85); transition:120ms ease; } + +.mt-checkbox:hover .mt-checkbox\_\_control{ border-color:var(--text); } + +.mt-checkbox\_\_input:checked + .mt-checkbox\_\_control{ background:var(--accent); border-color:var(--accent); } + +.mt-checkbox\_\_input:checked + .mt-checkbox\_\_control .mt-checkbox\_\_icon{ opacity:1; transform:scale(1); } + +.mt-checkbox\_\_input:focus-visible + .mt-checkbox\_\_control{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-checkbox\_\_input:disabled + .mt-checkbox\_\_control{ background:var(--surface-disabled); border-color:var(--border); } + +.mt-checkbox\_\_input:disabled ~ .mt-checkbox\_\_label{ color:var(--text-disabled); cursor:not-allowed; } + + + +/\* ===== Menu ===== \*/ + +.mt-menu{ + +  min-width:180px; max-width:280px; padding:4px; + +  border-radius:6px; border:1px solid var(--menu-border); + +  background:var(--menu-bg); box-shadow:var(--menu-shadow); + +} + +.mt-menu\_\_item{ + +  width:100%; height:32px; + +  display:grid; grid-template-columns:20px 1fr auto auto; align-items:center; gap:8px; + +  padding:0 8px; border:0; border-radius:4px; background:transparent; + +  color:var(--text); font:var(--type-sm); text-align:left; cursor:pointer; + +} + +.mt-menu\_\_icon{ color:var(--text-muted); } + +.mt-menu\_\_shortcut,.mt-menu\_\_submenu{ color:var(--text-muted); font:var(--type-xs); } + +.mt-menu\_\_item:hover{ background:var(--surface-hover); } + +.mt-menu\_\_item:active{ background:var(--surface-pressed); } + +.mt-menu\_\_item:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-menu\_\_divider{ height:1px; background:var(--border); margin:4px 6px; } + +.mt-menu\_\_section{ padding:6px 10px 4px; font:700 11px/14px var(--font); color:var(--text-muted); } + +.mt-menu\_\_item\[aria-disabled="true"]{ color:var(--text-disabled); cursor:not-allowed; } + +.mt-menu\_\_item\[aria-disabled="true"]:hover{ background:transparent; } + + + +/\* ===== Dialog ===== \*/ + +.mt-dialog{ position:fixed; inset:0; z-index:1100; } + +.mt-dialog\_\_scrim{ position:absolute; inset:0; background:var(--scrim); } + +.mt-dialog\_\_panel{ + +  position:relative; margin:10vh auto 0; + +  border-radius:8px; border:1px solid var(--border); + +  background:var(--surface); box-shadow:0 20px 50px rgba(0,0,0,.35); + +  display:flex; flex-direction:column; + +} + +.mt-dialog\_\_panel\[data-size="sm"]{ width:480px; } + +.mt-dialog\_\_panel\[data-size="md"]{ width:600px; } + +.mt-dialog\_\_panel\[data-size="lg"]{ width:680px; } + +@media (max-width:720px){ .mt-dialog\_\_panel{ width:calc(100% - 32px); } } + +.mt-dialog\_\_header{ padding:20px 24px 0; } + +.mt-dialog\_\_title{ font:700 var(--type-lg); margin:0; color:var(--text); } + +.mt-dialog\_\_body{ padding:16px 24px; font:var(--type-sm); color:var(--text); } + +.mt-dialog\_\_error{ padding:0 24px 8px; font:var(--type-xs); color:var(--danger); } + +.mt-dialog\_\_footer{ padding:16px 24px 20px; display:flex; justify-content:flex-end; gap:8px; } + + + +/\* ===== Dropdown ===== \*/ + +.mt-field{ display:flex; flex-direction:column; gap:4px; } + +.mt-field\_\_label{ font:700 var(--type-xs); color:var(--text-muted); } + +.mt-field\_\_error{ font:var(--type-xs); color:var(--danger); } + +.mt-field\_\_hint{ font:var(--type-xs); color:var(--text-muted); } + + + +.mt-dropdown{ + +  height:32px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; + +  border-radius:4px; border:1px solid var(--border); + +  background:var(--surface); color:var(--text); + +  font:var(--type-sm); cursor:pointer; + +} + +.mt-dropdown:hover{ border-color:var(--text); } + +.mt-dropdown:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-dropdown\[aria-expanded="true"]{ border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); } + +.mt-field\[data-state="error"] .mt-dropdown{ border-color:var(--danger); } + + + +/\* ===== Group list ===== \*/ + +.mt-group\_\_header{ + +  width:100%; display:flex; align-items:center; gap:6px; + +  padding:6px 8px; border:0; background:transparent; + +  font:700 var(--type-sm); color:var(--text); + +  cursor:pointer; text-align:left; + +} + +.mt-group\_\_header:hover:not(:disabled){ background:var(--surface-hover); } + +.mt-group\_\_header:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-group\_\_chevron{ color:var(--text-muted); transition:transform 120ms ease; } + +.mt-group\_\_header\[aria-expanded="true"] .mt-group\_\_chevron{ transform:rotate(90deg); } + +.mt-group\_\_header:disabled{ color:var(--text-disabled); cursor:not-allowed; } + +.mt-group\_\_header:disabled .mt-group\_\_chevron{ color:var(--text-disabled); } + +.mt-group\_\_content{ padding-left:20px; } + + + +/\* ===== Coachmark ===== \*/ + +.mt-coachmark{ position:fixed; inset:0; z-index:1000; } + +.mt-coachmark\_\_scrim{ position:absolute; inset:0; background:var(--scrim); } + +.mt-coachmark\_\_panel{ + +  position:absolute; + +  min-width:260px; max-width:420px; + +  border-radius:8px; border:1px solid var(--border); + +  background:var(--surface); box-shadow:var(--shadow-2); + +  padding:16px; + +} + +.mt-coachmark\_\_title{ font:700 var(--type-md); margin:0 0 8px; color:var(--text); } + +.mt-coachmark\_\_body{ font:var(--type-sm); color:var(--text-muted); } + +.mt-coachmark\_\_footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } + +.mt-coachmark\_\_close{ + +  position:absolute; top:8px; right:8px; + +  width:28px; height:28px; border:0; background:transparent; + +  color:var(--text-muted); border-radius:4px; cursor:pointer; + +} + +.mt-coachmark\_\_close:hover{ background:var(--surface-hover); color:var(--text); } + +.mt-coachmark\_\_close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + + + +/\* ===== Input ===== \*/ + +.mt-input{ + +  height:32px; padding:0 12px; + +  display:flex; align-items:center; gap:8px; + +  border-radius:4px; + +  border:1px solid var(--input-border); + +  background:var(--input-bg); + +  color:var(--input-fg); + +} + +.mt-input\[data-size="sm"]{ height:24px; padding:0 8px; } + +.mt-input:hover{ border-color:var(--input-border-hover); } + + + +.mt-input\_\_control{ + +  width:100%; + +  border:0; + +  outline:none; + +  background:transparent; + +  color:inherit; + +  font:var(--type-sm); + +  min-width:0; + +} + +.mt-input\[data-size="sm"] .mt-input\_\_control{ font:var(--type-xs); } + +.mt-input\_\_control::placeholder{ color:var(--input-placeholder); } + + + +.mt-input:focus-within{ + +  border-color:var(--input-border-focus); + +  box-shadow: inset 0 -2px 0 var(--input-underline-focus); + +} + +.mt-input\_\_control:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } + + + +.mt-input\[data-disabled="true"]{ background:var(--surface-disabled); border-color:var(--border); color:var(--text-disabled); } + +.mt-input\_\_control:disabled{ cursor:not-allowed; } + + + +.mt-input\_\_prefix{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } + +.mt-input\_\_prefix--chip{ + +  height:20px; padding:0 6px; border-radius:3px; + +  background:var(--input-prefix-bg); color:var(--input-prefix-fg); + +  font:600 11px/20px var(--font); + +} + +.mt-input\_\_prefix--icon{ width:16px; height:16px; border-radius:2px; background:var(--input-icon-bg); } + + + +.mt-input\_\_end{ + +  width:22px; height:22px; display:grid; place-items:center; + +  border:0; border-radius:3px; + +  background:transparent; color:var(--text-muted); + +  cursor:pointer; + +} + +.mt-input\_\_end:hover{ background:var(--surface-hover); color:var(--text); } + +.mt-input\_\_end:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + + + +.mt-field\[data-state="error"] .mt-input{ + +  border-color:var(--danger); + +  box-shadow: inset 0 -2px 0 var(--danger); + +} + + + +/\* ===== Key value pair ===== \*/ + +.mt-kvp{ display:flex; flex-direction:column; gap:18px; } + +.mt-kvp\_\_row{ display:grid; grid-template-columns:160px 1fr; column-gap:28px; align-items:start; } + +.mt-kvp\_\_key{ + +  font:700 var(--type-xs); color:var(--text-muted); + +  text-transform:uppercase; letter-spacing:.02em; + +} + +.mt-kvp\_\_value{ display:flex; flex-direction:column; gap:6px; } + +.mt-kvp\_\_text-title{ font:600 var(--type-xs); color:var(--text); } + +.mt-kvp\_\_text-sub{ font:var(--type-xs); color:var(--text-muted); } + + + +/\* ===== Paragraph ===== \*/ + +.mt-paragraph{ max-width:520px; color:var(--text); } + +.mt-paragraph\_\_headline{ margin:0 0 10px; font:700 var(--type-lg); color:var(--text); } + +.mt-paragraph\_\_desc{ margin:0 0 18px; font:var(--type-xs); color:var(--text-muted); } + +.mt-paragraph\_\_subhead{ margin:0 0 8px; font:700 var(--type-sm); color:var(--text); } + +.mt-paragraph\_\_body{ margin:0 0 14px; font:var(--type-xs); color:var(--text-muted); } + +.mt-paragraph\_\_meta{ margin:0; font:var(--type-xs); color:var(--text-muted); } + + + +/\* ===== Picker ===== \*/ + +.mt-picker{ position:relative; } + +.mt-picker\_\_panel{ + +  position:absolute; top:calc(100% + 4px); left:0; width:100%; + +  max-height:280px; overflow:auto; + +  border-radius:6px; border:1px solid var(--picker-border); + +  background:var(--picker-bg); box-shadow:var(--picker-shadow); + +  padding:4px; display:none; z-index:100; + +} + +.mt-picker\[data-open="true"] .mt-picker\_\_panel{ display:block; } + +.mt-picker\_\_option{ + +  width:100%; height:40px; + +  display:flex; align-items:center; gap:10px; + +  padding:0 10px; border:0; border-radius:4px; + +  background:transparent; color:var(--text); + +  font:var(--type-sm); text-align:left; cursor:pointer; + +} + +.mt-picker\_\_option:hover{ background:var(--surface-hover); } + +.mt-picker\_\_option\[data-selected="true"]{ background:var(--surface-pressed); } + +.mt-picker\_\_option-label{ font-weight:600; } + +.mt-picker\_\_option-meta{ font:var(--type-xs); color:var(--text-muted); } + + + +.mt-avatar{ + +  width:24px; height:24px; border-radius:999px; + +  background:var(--accent); color:var(--accent-contrast); + +  font:600 11px/24px var(--font); text-align:center; + +} + +.mt-picker\_\_file-icon{ width:20px; height:20px; border-radius:3px; background:var(--accent); } + + + +/\* Date \*/ + +.mt-date\_\_header{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px; font:600 var(--type-sm); } + +.mt-date\_\_nav{ + +  width:28px; height:28px; border:0; border-radius:4px; + +  background:transparent; color:var(--text-muted); cursor:pointer; + +} + +.mt-date\_\_nav:hover{ background:var(--surface-hover); } + +.mt-date\_\_grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:8px; } + +.mt-date\_\_cell{ + +  height:32px; border:0; border-radius:4px; + +  background:transparent; color:var(--text); + +  font:var(--type-xs); cursor:pointer; + +} + +.mt-date\_\_cell:hover{ background:var(--surface-hover); } + +.mt-date\_\_cell\[data-selected="true"]{ background:var(--accent); color:var(--accent-contrast); } + + + +/\* Time \*/ + +.mt-time\_\_row{ display:flex; gap:8px; padding:8px; } + +.mt-time\_\_input{ + +  flex:1; height:32px; border-radius:4px; + +  border:1px solid var(--border); background:var(--surface); + +  color:var(--text); padding:0 8px; font:var(--type-sm); + +} + +.mt-time\_\_input:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; } + + + +/\* ===== Pivot ===== \*/ + +.mt-pivot\_\_list{ display:flex; align-items:flex-end; gap:24px; } + +.mt-pivot\_\_tab{ + +  position:relative; height:32px; padding:0; + +  border:0; background:transparent; cursor:pointer; + +  font:600 var(--type-sm); + +  color:var(--pivot-fg); + +} + +.mt-pivot\_\_tab::after{ + +  content:""; position:absolute; left:0; right:0; bottom:-2px; + +  height:2px; border-radius:2px; background:transparent; transition:120ms ease; + +} + +.mt-pivot\_\_tab:hover::after{ background:var(--pivot-underline-hover); } + +.mt-pivot\_\_tab\[aria-selected="true"]{ color:var(--pivot-active-fg); } + +.mt-pivot\_\_tab\[aria-selected="true"]::after{ background:var(--pivot-underline-active); } + +.mt-pivot\_\_tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:4px; } + + + +/\* ===== Progress ===== \*/ + +.mt-progress{ display:flex; align-items:center; gap:14px; color:var(--text); } + +.mt-progress\_\_spinner{ + +  width:16px; height:16px; border-radius:999px; + +  border:2px solid var(--progress-spinner-track); + +  border-top-color: var(--progress-spinner-head); + +  box-sizing:border-box; + +  animation: mt-spin 900ms linear infinite; + +} + +@keyframes mt-spin{ to{ transform:rotate(360deg); } } + + + +.mt-progress\[data-variant="determinate"]{ align-items:flex-start; gap:16px; } + +.mt-progress\_\_text{ min-width:120px; } + +.mt-progress\_\_label{ font:600 var(--type-xs); color:var(--text); margin:0 0 2px; } + +.mt-progress\_\_desc{ font:var(--type-xs); color:var(--text-muted); margin:0; } + +.mt-progress\_\_bar{ + +  flex:1; min-width:220px; height:2px; border-radius:999px; + +  background:var(--progress-track); overflow:hidden; margin-top:8px; + +} + +.mt-progress\_\_fill{ height:100%; background:var(--progress-fill); border-radius:999px; transition:width 200ms ease; } + +@media (prefers-reduced-motion: reduce){ + +  .mt-progress\_\_spinner{ animation:none; } + +  .mt-progress\_\_fill{ transition:none; } + +} + + + +/\* ===== Radio (final) ===== \*/ + +.mt-radio-group{ display:flex; flex-direction:column; gap:8px; } + +.mt-radio{ + +  display:inline-flex; align-items:center; gap:8px; + +  cursor:pointer; font:var(--type-sm); color:var(--text); position:relative; + +} + +.mt-radio\_\_input{ position:absolute; opacity:0; pointer-events:none; } + +.mt-radio\_\_control{ + +  width:16px; height:16px; border-radius:999px; + +  border:1px solid var(--radio-border); background:transparent; + +  position:relative; transition:120ms ease; + +} + +.mt-radio\_\_control::after{ + +  content:""; width:8px; height:8px; border-radius:999px; + +  background:var(--radio-dot); + +  position:absolute; top:50%; left:50%; + +  transform:translate(-50%,-50%) scale(.6); + +  opacity:0; transition:120ms ease; + +} + +.mt-radio:hover .mt-radio\_\_control{ border-color:var(--radio-border-hover); } + +.mt-radio\_\_input:checked + .mt-radio\_\_control{ border-color:var(--accent); } + +.mt-radio\_\_input:checked + .mt-radio\_\_control::after{ opacity:1; transform:translate(-50%,-50%) scale(1); } + +.mt-radio\_\_input:focus-visible + .mt-radio\_\_control{ outline:2px solid var(--focus-ring); outline-offset:3px; } + +.mt-radio\_\_input:disabled + .mt-radio\_\_control{ border-color:var(--radio-disabled-border); background:var(--radio-disabled-bg); } + +.mt-radio\_\_input:disabled + .mt-radio\_\_control::after{ background:var(--radio-disabled-dot); } + +.mt-radio\_\_input:disabled ~ .mt-radio\_\_label{ color:var(--text-disabled); cursor:not-allowed; } + + + +/\* ===== Scroll region + scrollbars ===== \*/ + +.mt-scroll{ + +  max-height:120px; overflow:auto; + +  padding:10px 12px; + +  border:1px solid var(--border); + +  border-radius:4px; + +  background:var(--surface); + +  color:var(--text); + +  font:var(--type-xs); + +  box-shadow: inset -10px 0 10px -12px var(--scroll-shadow); + +  scrollbar-width: thin; + +  scrollbar-color: var(--scroll-thumb) var(--scroll-track); + +} + +.mt-scroll::-webkit-scrollbar{ width:10px; height:10px; } + +.mt-scroll::-webkit-scrollbar-track{ background:var(--scroll-track); border-radius:999px; } + +.mt-scroll::-webkit-scrollbar-thumb{ + +  background:var(--scroll-thumb); border-radius:999px; + +  border:3px solid var(--scroll-track); + +} + +.mt-scroll::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); } + +.mt-scroll::-webkit-scrollbar-thumb:active{ background:var(--scroll-thumb-active); } + +.mt-scroll::-webkit-scrollbar-corner{ background:transparent; } + + + +/\* ===== Search box ===== \*/ + +.mt-search\_\_box{ + +  height:32px; padding:0 10px; + +  display:flex; align-items:center; gap:8px; + +  border-radius:4px; + +  border:1px solid transparent; + +  background:var(--search-bg); + +  color:var(--text); + +} + +.mt-search\_\_icon{ width:16px; height:16px; border-radius:2px; background:var(--search-icon); flex:0 0 auto; } + +.mt-search\_\_input{ + +  width:100%; border:0; outline:none; background:transparent; + +  color:inherit; font:var(--type-sm); min-width:0; + +} + +.mt-search\_\_input::placeholder{ color:var(--search-placeholder); } + +.mt-search\_\_box:focus-within{ box-shadow: inset 0 -2px 0 var(--search-underline); } + +.mt-search\_\_input:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } + +.mt-search\_\_clear{ + +  width:22px; height:22px; display:grid; place-items:center; + +  border:0; border-radius:3px; + +  background:transparent; color:var(--text-muted); + +  cursor:pointer; flex:0 0 auto; + +} + +.mt-search\_\_clear:hover{ background:var(--surface-hover); color:var(--text); } + +.mt-search\_\_clear:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + + + +/\* ===== Side panel ===== \*/ + +.mt-sidepanel{ position:fixed; inset:0; z-index:1200; pointer-events:none; } + +.mt-sidepanel\_\_scrim{ position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity 180ms ease; } + +.mt-sidepanel\_\_panel{ + +  position:absolute; top:0; right:0; height:100%; + +  display:flex; flex-direction:column; + +  background:var(--surface); + +  border-left:1px solid var(--border); + +  box-shadow:var(--shadow-2); + +  transform:translateX(100%); + +  transition:transform 220ms ease; + +  pointer-events:auto; + +} + +.mt-sidepanel\_\_panel\[data-size="sm"]{ width:320px; } + +.mt-sidepanel\_\_panel\[data-size="md"]{ width:400px; } + +.mt-sidepanel\_\_panel\[data-size="lg"]{ width:480px; } + +.mt-sidepanel\[data-open="true"]{ pointer-events:auto; } + +.mt-sidepanel\[data-open="true"] .mt-sidepanel\_\_scrim{ opacity:1; } + +.mt-sidepanel\[data-open="true"] .mt-sidepanel\_\_panel{ transform:translateX(0); } + + + +.mt-sidepanel\_\_header{ + +  height:56px; padding:0 16px; + +  display:flex; align-items:center; justify-content:space-between; + +  border-bottom:1px solid var(--border); + +} + +.mt-sidepanel\_\_title{ margin:0; font:700 var(--type-md); color:var(--text); } + +.mt-sidepanel\_\_close{ + +  width:32px; height:32px; border:0; border-radius:4px; + +  background:transparent; color:var(--text-muted); cursor:pointer; + +} + +.mt-sidepanel\_\_close:hover{ background:var(--surface-hover); color:var(--text); } + +.mt-sidepanel\_\_close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + + + +.mt-sidepanel\_\_body{ flex:1; overflow:auto; padding:16px; color:var(--text); } + +.mt-sidepanel\_\_footer{ + +  padding:12px 16px; border-top:1px solid var(--border); + +  display:flex; justify-content:flex-end; gap:8px; + +  background:var(--surface); + +} + + + +/\* ===== Status label ===== \*/ + +.mt-status{ display:inline-flex; align-items:center; gap:6px; font:600 var(--type-xs); color:var(--status-fg); } + +.mt-status\_\_icon{ + +  width:14px; height:14px; display:grid; place-items:center; + +  font:700 10px/1 var(--font); color:currentColor; + +} + +.mt-status{ --status-fg: var(--status-color); } + +.mt-status\[data-variant="critical"]{ + +  height:18px; padding:0 8px; border-radius:3px; + +  background:var(--status-critical-bg); color:var(--status-critical-fg); + +} + +.mt-status\[data-variant="critical"] .mt-status\_\_icon{ color:var(--status-critical-fg); } + +.mt-status\[data-variant="error"]{ --status-color: var(--status-error); } + +.mt-status\[data-variant="warning"]{ --status-color: var(--status-warning); } + +.mt-status\[data-variant="success"]{ --status-color: var(--status-success); } + +.mt-status\[data-variant="info"]{ --status-color: var(--status-info); } + + + +/\* ===== Toast ===== \*/ + +.mt-toast-stack{ + +  position:fixed; bottom:16px; right:16px; + +  display:flex; flex-direction:column; gap:12px; + +  z-index:1300; + +} + +.mt-toast{ + +  width:320px; border-radius:6px; + +  background:var(--toast-bg); color:var(--text); + +  border:1px solid var(--toast-border); + +  box-shadow:var(--shadow-2); + +  display:flex; flex-direction:column; overflow:hidden; + +  animation: mt-toast-in 180ms ease; + +} + +@keyframes mt-toast-in{ from{ transform:translateY(8px); opacity:0; } to{ transform:translateY(0); opacity:1; } } + +.mt-toast\_\_header{ display:flex; align-items:flex-start; gap:10px; padding:12px 12px 8px; } + +.mt-toast\_\_avatar{ width:28px; height:28px; border-radius:999px; background:var(--accent); flex:0 0 auto; } + +.mt-toast\_\_meta{ flex:1; min-width:0; } + +.mt-toast\_\_title{ font:600 var(--type-sm); color:var(--text); } + +.mt-toast\_\_subtitle{ font:var(--type-xs); color:var(--text-muted); } + +.mt-toast\_\_close{ + +  width:28px; height:28px; border:0; background:transparent; + +  border-radius:4px; color:var(--text-muted); cursor:pointer; + +} + +.mt-toast\_\_close:hover{ background:var(--surface-hover); color:var(--text); } + +.mt-toast\_\_close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-toast\_\_body{ padding:0 12px 10px; } + +.mt-toast\_\_message{ font:var(--type-xs); color:var(--text-muted); } + +.mt-toast\_\_reply{ display:flex; align-items:center; gap:6px; padding:8px 10px 10px; border-top:1px solid var(--border); } + +.mt-toast\_\_input{ + +  flex:1; height:28px; border-radius:4px; + +  border:1px solid var(--border); background:var(--surface); + +  color:var(--text); padding:0 8px; font:var(--type-xs); + +} + +.mt-toast\_\_input:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-toast\_\_send{ + +  width:28px; height:28px; border:0; border-radius:4px; + +  background:var(--accent); color:var(--accent-contrast); cursor:pointer; + +} + +.mt-toast\_\_send:hover{ background:var(--accent-hover); } + +.mt-toast\[data-variant="accent"]{ background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); } + +.mt-toast\[data-variant="accent"] .mt-toast\_\_subtitle, + +.mt-toast\[data-variant="accent"] .mt-toast\_\_message{ color:rgba(255,255,255,.9); } + +.mt-toast\[data-variant="accent"] .mt-toast\_\_close{ color:rgba(255,255,255,.8); } + + + +/\* ===== Toggle (final) ===== \*/ + +.mt-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; color:var(--text); } + +.mt-toggle\_\_input{ position:absolute; opacity:0; pointer-events:none; } + +.mt-toggle\_\_track{ + +  width:28px; height:16px; border-radius:999px; + +  background:var(--toggle-track-off); + +  border:1px solid var(--toggle-border-off); + +  position:relative; transition:120ms ease; box-sizing:border-box; + +} + +.mt-toggle\_\_thumb{ + +  width:12px; height:12px; border-radius:999px; + +  background:var(--toggle-thumb); + +  position:absolute; top:1px; left:1px; + +  transition:120ms ease; + +} + +.mt-toggle\_\_input:checked + .mt-toggle\_\_track{ + +  background:var(--toggle-track-on); + +  border-color:var(--toggle-border-on); + +} + +.mt-toggle\_\_input:checked + .mt-toggle\_\_track .mt-toggle\_\_thumb{ transform:translateX(12px); } + + + +.mt-toggle:hover .mt-toggle\_\_track{ background:var(--toggle-track-off-hover); border-color:var(--toggle-border-off-hover); } + +.mt-toggle:hover .mt-toggle\_\_input:checked + .mt-toggle\_\_track{ background:var(--toggle-track-on-hover); border-color:var(--toggle-border-on-hover); } + +.mt-toggle:active .mt-toggle\_\_track{ background:var(--toggle-track-off-pressed); border-color:var(--toggle-border-off-pressed); } + +.mt-toggle:active .mt-toggle\_\_input:checked + .mt-toggle\_\_track{ background:var(--toggle-track-on-pressed); border-color:var(--toggle-border-on-pressed); } + +.mt-toggle\_\_input:focus-visible + .mt-toggle\_\_track{ outline:2px solid var(--focus-ring); outline-offset:3px; } + +.mt-toggle\_\_input:disabled + .mt-toggle\_\_track{ background:var(--toggle-track-disabled); border-color:var(--toggle-border-disabled); } + +.mt-toggle\_\_input:disabled + .mt-toggle\_\_track .mt-toggle\_\_thumb{ background:var(--toggle-thumb-disabled); } + +.mt-toggle\_\_input:disabled ~ .mt-toggle\_\_label{ color:var(--text-disabled); } + + + +/\* ===== Tooltip ===== \*/ + +.mt-tooltip{ + +  position:absolute; z-index:1400; + +  max-width:220px; + +  padding:6px 8px; + +  border-radius:4px; + +  font:var(--type-xs); + +  white-space:nowrap; + +  background:var(--tooltip-bg); + +  color:var(--tooltip-fg); + +  box-shadow:var(--tooltip-shadow); + +  opacity:0; + +  transform:translateY(2px); + +  pointer-events:none; + +  transition:opacity 120ms ease, transform 120ms ease; + +} + +.mt-tooltip\[data-open="true"]{ opacity:1; transform:translateY(0); } + +.mt-tooltip::after{ + +  content:""; + +  position:absolute; + +  width:8px; height:8px; + +  background:var(--tooltip-bg); + +  transform:rotate(45deg); + +} + +.mt-tooltip\[data-placement="top"]::after{ bottom:-4px; left:50%; transform:translateX(-50%) rotate(45deg); } + +.mt-tooltip\[data-placement="bottom"]::after{ top:-4px; left:50%; transform:translateX(-50%) rotate(45deg); } + +.mt-tooltip\[data-placement="left"]::after{ right:-4px; top:50%; transform:translateY(-50%) rotate(45deg); } + +.mt-tooltip\[data-placement="right"]::after{ left:-4px; top:50%; transform:translateY(-50%) rotate(45deg); } + +``` + + + +--- + + + +\# Theme definitions (Light + Dark) + + + +\## Light theme + + + +```css + +:root\[data-theme="light"]{ + +  --bg:#ffffff; + + + +  --surface:#ffffff; + +  --surface-2:#F7F7F7; + +  --surface-hover:#F3F2F1; + +  --surface-pressed:#EDEBE9; + +  --surface-disabled:#F3F2F1; + + + +  --text:#252423; + +  --text-muted:#605E5C; + +  --text-disabled:#A19F9D; + + + +  --border:#E1DFDD; + +  --border-strong:#C8C6C4; + + + +  --accent:#6264A7; + +  --accent-hover:#585A96; + +  --accent-pressed:#4F5187; + +  --accent-contrast:#ffffff; + + + +  --danger:#D13438; + +  --danger-2:#D13438; + + + +  --focus-ring:#6264A7; + + + +  --shadow-1:0 1px 2px rgba(0,0,0,0.08); + +  --shadow-2:0 6px 18px rgba(0,0,0,0.18); + + + +  --scrim:rgba(0,0,0,0.5); + + + +  /\* menu \*/ + +  --menu-bg:#ffffff; + +  --menu-border:#E1DFDD; + +  --menu-shadow:0 6px 18px rgba(0,0,0,0.18); + + + +  /\* alerts \*/ + +  --alert-error-bg:#FCF4F6; --alert-error-border:#F3D6DC; --alert-error-fg:#A4262C; --alert-error-icon:#A4262C; + +  --alert-warn-bg:#FBF6D9; --alert-warn-border:#F2E2A5; --alert-warn-fg:#8A6A00; --alert-warn-icon:#8A6A00; + +  --alert-ok-bg:#E7F2DA; --alert-ok-border:#CDE6B3; --alert-ok-fg:#107C10; --alert-ok-icon:#107C10; + +  --alert-info-bg:#F5F5F5; --alert-info-border:#E1DFDD; --alert-info-fg:#252423; --alert-info-icon:#605E5C; + + + +  /\* input \*/ + +  --input-bg:#ffffff; + +  --input-fg:var(--text); + +  --input-border:var(--border); + +  --input-border-hover:var(--border-strong); + +  --input-border-focus:var(--accent); + +  --input-underline-focus:var(--accent); + +  --input-placeholder:var(--text-disabled); + +  --input-prefix-bg:var(--accent); + +  --input-prefix-fg:var(--accent-contrast); + +  --input-icon-bg:#605E5C; + + + +  /\* picker \*/ + +  --picker-bg:#ffffff; + +  --picker-border:var(--border); + +  --picker-shadow:0 8px 24px rgba(0,0,0,0.18); + + + +  /\* pivot \*/ + +  --pivot-fg:var(--text-muted); + +  --pivot-active-fg:var(--accent); + +  --pivot-underline-active:var(--accent); + +  --pivot-underline-hover:#C8C6C4; + + + +  /\* progress \*/ + +  --progress-track:#E1DFDD; + +  --progress-fill:var(--accent); + +  --progress-spinner-track:#E1DFDD; + +  --progress-spinner-head:var(--accent); + + + +  /\* radio \*/ + +  --radio-border:#C8C6C4; + +  --radio-border-hover:#605E5C; + +  --radio-dot:var(--accent); + +  --radio-disabled-border:#E1DFDD; + +  --radio-disabled-bg:#F3F2F1; + +  --radio-disabled-dot:#C8C6C4; + + + +  /\* scrollbars \*/ + +  --scroll-track:transparent; + +  --scroll-thumb:#C8C6C4; + +  --scroll-thumb-hover:#A19F9D; + +  --scroll-thumb-active:#8A8886; + +  --scroll-shadow:rgba(0,0,0,0.18); + + + +  /\* search \*/ + +  --search-bg:#F3F2F1; + +  --search-icon:#605E5C; + +  --search-placeholder:#A19F9D; + +  --search-underline:var(--accent); + + + +  /\* status \*/ + +  --status-critical-bg:#C4314B; + +  --status-critical-fg:#ffffff; + +  --status-error:#C4314B; + +  --status-warning:#986F0B; + +  --status-success:#107C10; + +  --status-info:var(--text-muted); + + + +  /\* toast \*/ + +  --toast-bg:#ffffff; + +  --toast-border:var(--border); + + + +  /\* toggle \*/ + +  --toggle-track-off:#FFFFFF; + +  --toggle-border-off:#8A8886; + +  --toggle-thumb:#8A8886; + +  --toggle-track-off-hover:#FFFFFF; + +  --toggle-border-off-hover:#605E5C; + +  --toggle-track-off-pressed:#FFFFFF; + +  --toggle-border-off-pressed:#252423; + + + +  --toggle-track-on:var(--accent); + +  --toggle-border-on:var(--accent); + +  --toggle-track-on-hover:var(--accent-hover); + +  --toggle-border-on-hover:var(--accent-hover); + +  --toggle-track-on-pressed:var(--accent-pressed); + +  --toggle-border-on-pressed:var(--accent-pressed); + + + +  --toggle-track-disabled:#F3F2F1; + +  --toggle-border-disabled:#E1DFDD; + +  --toggle-thumb-disabled:#C8C6C4; + + + +  /\* tooltip \*/ + +  --tooltip-bg:#323130; + +  --tooltip-fg:#ffffff; + +  --tooltip-shadow:0 6px 16px rgba(0,0,0,0.25); + +} + +``` + + + +\## Dark theme + + + +```css + +:root\[data-theme="dark"]{ + +  --bg:#1B1B1B; + + + +  --surface:#2B2B2B; + +  --surface-2:#242424; + +  --surface-hover:#3A3A3A; + +  --surface-pressed:#444444; + +  --surface-disabled:#3A3A3A; + + + +  --text:#ffffff; + +  --text-muted:#C8C8C8; + +  --text-disabled:#8A8886; + + + +  --border:#3F3F3F; + +  --border-strong:#5A5A5A; + + + +  --accent:#7B83EB; + +  --accent-hover:#A6ABFF; + +  --accent-pressed:#4F52B2; + +  --accent-contrast:#ffffff; + + + +  --danger:#F1707B; + +  --danger-2:#F1707B; + + + +  --focus-ring:#7B83EB; + + + +  --shadow-1:0 1px 2px rgba(0,0,0,0.35); + +  --shadow-2:0 10px 28px rgba(0,0,0,0.6); + + + +  --scrim:rgba(0,0,0,0.75); + + + +  /\* menu \*/ + +  --menu-bg:#2B2B2B; + +  --menu-border:#3F3F3F; + +  --menu-shadow:0 10px 28px rgba(0,0,0,0.6); + + + +  /\* alerts \*/ + +  --alert-error-bg:#3E1F25; --alert-error-border:#6B2B34; --alert-error-fg:#F1707B; --alert-error-icon:#F1707B; + +  --alert-warn-bg:#463100; --alert-warn-border:#7A5A00; --alert-warn-fg:#FFD86A; --alert-warn-icon:#FFD86A; + +  --alert-ok-bg:#0D2E0D; --alert-ok-border:#1E5A1E; --alert-ok-fg:#7FE07F; --alert-ok-icon:#7FE07F; + +  --alert-info-bg:#1F1F1F; --alert-info-border:#3F3F3F; --alert-info-fg:#ffffff; --alert-info-icon:#C8C8C8; + + + +  /\* input \*/ + +  --input-bg:var(--surface); + +  --input-fg:var(--text); + +  --input-border:var(--border); + +  --input-border-hover:var(--border-strong); + +  --input-border-focus:var(--accent); + +  --input-underline-focus:var(--accent); + +  --input-placeholder:var(--text-disabled); + +  --input-prefix-bg:var(--accent); + +  --input-prefix-fg:var(--accent-contrast); + +  --input-icon-bg:#C8C8C8; + + + +  /\* picker \*/ + +  --picker-bg:var(--surface); + +  --picker-border:var(--border); + +  --picker-shadow:0 12px 30px rgba(0,0,0,0.6); + + + +  /\* pivot \*/ + +  --pivot-fg:var(--text-muted); + +  --pivot-active-fg:var(--accent); + +  --pivot-underline-active:var(--accent); + +  --pivot-underline-hover:#8A8886; + + + +  /\* progress \*/ + +  --progress-track:#5A5A5A; + +  --progress-fill:var(--accent); + +  --progress-spinner-track:#5A5A5A; + +  --progress-spinner-head:#ffffff; + + + +  /\* radio \*/ + +  --radio-border:#8A8886; + +  --radio-border-hover:#C8C8C8; + +  --radio-dot:var(--accent); + +  --radio-disabled-border:#3F3F3F; + +  --radio-disabled-bg:#2B2B2B; + +  --radio-disabled-dot:#5A5A5A; + + + +  /\* scrollbars \*/ + +  --scroll-track:transparent; + +  --scroll-thumb:#5A5A5A; + +  --scroll-thumb-hover:#8A8886; + +  --scroll-thumb-active:#C8C8C8; + +  --scroll-shadow:rgba(0,0,0,0.55); + + + +  /\* search \*/ + +  --search-bg:#2B2B2B; + +  --search-icon:#C8C8C8; + +  --search-placeholder:#8A8886; + +  --search-underline:var(--accent); + + + +  /\* status \*/ + +  --status-critical-bg:#C4314B; + +  --status-critical-fg:#ffffff; + +  --status-error:#F1707B; + +  --status-warning:#FFD86A; + +  --status-success:#7FE07F; + +  --status-info:var(--text-muted); + + + +  /\* toast \*/ + +  --toast-bg:#2B2B2B; + +  --toast-border:var(--border); + + + +  /\* toggle \*/ + +  --toggle-track-off:#1F1F1F; + +  --toggle-border-off:#8A8886; + +  --toggle-thumb:#8A8886; + +  --toggle-track-off-hover:#1F1F1F; + +  --toggle-border-off-hover:#C8C8C8; + +  --toggle-track-off-pressed:#1F1F1F; + +  --toggle-border-off-pressed:#FFFFFF; + + + +  --toggle-track-on:var(--accent); + +  --toggle-border-on:var(--accent); + +  --toggle-track-on-hover:#A6ABFF; + +  --toggle-border-on-hover:#A6ABFF; + +  --toggle-track-on-pressed:var(--accent-pressed); + +  --toggle-border-on-pressed:var(--accent-pressed); + + + +  --toggle-track-disabled:#2B2B2B; + +  --toggle-border-disabled:#3F3F3F; + +  --toggle-thumb-disabled:#5A5A5A; + + + +  /\* tooltip \*/ + +  --tooltip-bg:#3B3A39; + +  --tooltip-fg:#ffffff; + +  --tooltip-shadow:0 8px 20px rgba(0,0,0,0.6); + +} + +``` + + + +--- + + + +\## Usage + + + +```html + +… + + + +… + +``` + + + diff --git a/teams-default-themes/nebula-dawn.json b/teams-default-themes/nebula-dawn.json deleted file mode 100644 index 29f481e..0000000 --- a/teams-default-themes/nebula-dawn.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "mode": "light", - "colors": { - "bg-primary": "#f0e6f6", - "bg-secondary": "#e8dff0", - "bg-tertiary": "#f7f2fa", - "accent-primary": "#667eea", - "accent-secondary": "#764ba2", - "accent-tertiary": "#c054d4", - "accent-glow": "rgba(118,75,162,0.15)", - "text-primary": "#2d2640", - "text-secondary": "#6b4f8a", - "border-color": "rgba(118,75,162,0.25)", - "header-min-height": "58px", - "header-padding-vertical": "14px", - "header-padding-horizontal": "20px", - "header-line-height": "1.25" - } -} diff --git a/teams-default-themes/nebula-dusk.json b/teams-default-themes/nebula-dusk.json deleted file mode 100644 index 07ad149..0000000 --- a/teams-default-themes/nebula-dusk.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "mode": "dark", - "colors": { - "bg-primary": "#1a1a2e", - "bg-secondary": "#16213e", - "bg-tertiary": "#0f0f23", - "accent-primary": "#667eea", - "accent-secondary": "#764ba2", - "accent-tertiary": "#f093fb", - "accent-glow": "rgba(138,43,226,0.3)", - "text-primary": "#e0e0e0", - "text-secondary": "#b794f6", - "border-color": "rgba(138,43,226,0.3)", - "header-min-height": "58px", - "header-padding-vertical": "14px", - "header-padding-horizontal": "20px", - "header-line-height": "1.25" - } -} diff --git a/teams-default-themes/teams-dark.json b/teams-default-themes/teams-dark.json new file mode 100644 index 0000000..14abade --- /dev/null +++ b/teams-default-themes/teams-dark.json @@ -0,0 +1,134 @@ +{ + "mode": "dark", + "colors": { + "bg-primary": "#1B1B1B", + "bg-secondary": "#2B2B2B", + "bg-tertiary": "#242424", + "accent-primary": "#7B83EB", + "accent-secondary": "#A6ABFF", + "accent-tertiary": "#4F52B2", + "accent-glow": "rgba(123,131,235,0.2)", + "text-primary": "#ffffff", + "text-secondary": "#C8C8C8", + "border-color": "#3F3F3F", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25", + + "surface": "#2B2B2B", + "surface-2": "#242424", + "surface-hover": "#3A3A3A", + "surface-pressed": "#444444", + "surface-disabled": "#3A3A3A", + + "text-disabled": "#8A8886", + "border-strong": "#5A5A5A", + + "accent-contrast": "#ffffff", + "accent-hover": "#A6ABFF", + "accent-pressed": "#4F52B2", + + "danger": "#F1707B", + "danger-2": "#F1707B", + "focus-ring": "#7B83EB", + + "shadow-1": "0 1px 2px rgba(0,0,0,0.35)", + "shadow-2": "0 10px 28px rgba(0,0,0,0.6)", + "scrim": "rgba(0,0,0,0.75)", + + "menu-bg": "#2B2B2B", + "menu-border": "#3F3F3F", + "menu-shadow": "0 10px 28px rgba(0,0,0,0.6)", + + "alert-error-bg": "#3E1F25", + "alert-error-border": "#6B2B34", + "alert-error-fg": "#F1707B", + "alert-error-icon": "#F1707B", + "alert-warn-bg": "#463100", + "alert-warn-border": "#7A5A00", + "alert-warn-fg": "#FFD86A", + "alert-warn-icon": "#FFD86A", + "alert-ok-bg": "#0D2E0D", + "alert-ok-border": "#1E5A1E", + "alert-ok-fg": "#7FE07F", + "alert-ok-icon": "#7FE07F", + "alert-info-bg": "#1F1F1F", + "alert-info-border": "#3F3F3F", + "alert-info-fg": "#ffffff", + "alert-info-icon": "#C8C8C8", + + "input-bg": "#2B2B2B", + "input-border": "#3F3F3F", + "input-border-hover": "#5A5A5A", + "input-border-focus": "#7B83EB", + "input-underline-focus": "#7B83EB", + "input-placeholder": "#8A8886", + "input-prefix-bg": "#7B83EB", + "input-prefix-fg": "#ffffff", + "input-icon-bg": "#C8C8C8", + + "picker-bg": "#2B2B2B", + "picker-border": "#3F3F3F", + "picker-shadow": "0 12px 30px rgba(0,0,0,0.6)", + + "pivot-fg": "#C8C8C8", + "pivot-active-fg": "#7B83EB", + "pivot-underline-active": "#7B83EB", + "pivot-underline-hover": "#8A8886", + + "progress-track": "#5A5A5A", + "progress-fill": "#7B83EB", + "progress-spinner-track": "#5A5A5A", + "progress-spinner-head": "#ffffff", + + "radio-border": "#8A8886", + "radio-border-hover": "#C8C8C8", + "radio-dot": "#7B83EB", + "radio-disabled-border": "#3F3F3F", + "radio-disabled-bg": "#2B2B2B", + "radio-disabled-dot": "#5A5A5A", + + "scroll-track": "transparent", + "scroll-thumb": "#5A5A5A", + "scroll-thumb-hover": "#8A8886", + "scroll-thumb-active": "#C8C8C8", + "scroll-shadow": "rgba(0,0,0,0.55)", + + "search-bg": "#2B2B2B", + "search-icon": "#C8C8C8", + "search-placeholder": "#8A8886", + "search-underline": "#7B83EB", + + "status-critical-bg": "#C4314B", + "status-critical-fg": "#ffffff", + "status-error": "#F1707B", + "status-warning": "#FFD86A", + "status-success": "#7FE07F", + "status-info": "#C8C8C8", + + "toast-bg": "#2B2B2B", + "toast-border": "#3F3F3F", + + "toggle-track-off": "#1F1F1F", + "toggle-border-off": "#8A8886", + "toggle-thumb": "#8A8886", + "toggle-track-off-hover": "#1F1F1F", + "toggle-border-off-hover": "#C8C8C8", + "toggle-track-off-pressed": "#1F1F1F", + "toggle-border-off-pressed": "#FFFFFF", + "toggle-track-on": "#7B83EB", + "toggle-border-on": "#7B83EB", + "toggle-track-on-hover": "#A6ABFF", + "toggle-border-on-hover": "#A6ABFF", + "toggle-track-on-pressed": "#4F52B2", + "toggle-border-on-pressed": "#4F52B2", + "toggle-track-disabled": "#2B2B2B", + "toggle-border-disabled": "#3F3F3F", + "toggle-thumb-disabled": "#5A5A5A", + + "tooltip-bg": "#3B3A39", + "tooltip-fg": "#ffffff", + "tooltip-shadow": "0 8px 20px rgba(0,0,0,0.6)" + } +} diff --git a/teams-default-themes/nebula-dusk.v2.css b/teams-default-themes/teams-dark.v1.css similarity index 64% rename from teams-default-themes/nebula-dusk.v2.css rename to teams-default-themes/teams-dark.v1.css index d2bd17a..395eb87 100644 --- a/teams-default-themes/nebula-dusk.v2.css +++ b/teams-default-themes/teams-dark.v1.css @@ -1,14 +1,14 @@ :root { - --bg-primary: #1a1a2e; - --bg-secondary: #16213e; - --bg-tertiary: #0f0f23; - --accent-primary: #667eea; - --accent-secondary: #764ba2; - --accent-tertiary: #f093fb; - --accent-glow: rgba(138,43,226,0.3); - --text-primary: #e0e0e0; - --text-secondary: #b794f6; - --border-color: rgba(138,43,226,0.3); + --bg-primary: #1B1B1B; + --bg-secondary: #2B2B2B; + --bg-tertiary: #242424; + --accent-primary: #7B83EB; + --accent-secondary: #A6ABFF; + --accent-tertiary: #4F52B2; + --accent-glow: rgba(123,131,235,0.2); + --text-primary: #ffffff; + --text-secondary: #C8C8C8; + --border-color: #3F3F3F; --header-min-height: 58px; --header-padding-vertical: 14px; --header-padding-horizontal: 20px; @@ -22,8 +22,8 @@ } body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); + font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + background: var(--bg-primary); color: var(--text-primary); height: 100vh; display: flex; @@ -31,8 +31,8 @@ body { .chat-panel { width: 30%; - background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, rgba(22,33,62,0.95) 100%); - box-shadow: 0 0 30px rgba(138,43,226,0.2), inset 0 0 60px rgba(75,0,130,0.1); + background: var(--bg-secondary); + box-shadow: 1px 0 2px rgba(0,0,0,0.35); padding: 20px; display: flex; flex-direction: column; @@ -50,12 +50,12 @@ body { align-items: center; justify-content: center; box-sizing: border-box; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); + background: var(--accent-primary); color: #fff; - border-radius: 15px; - box-shadow: 0 4px 20px rgba(102,126,234,0.4); - text-shadow: 0 2px 10px rgba(0,0,0,0.3); - letter-spacing: 2px; + border-radius: 6px; + box-shadow: 0 1px 2px rgba(0,0,0,0.35); + letter-spacing: 1px; + font-weight: 700; } .chat-messages { @@ -63,20 +63,17 @@ body { overflow-y: auto; padding: 15px; margin-top: 15px; - background: rgba(15,15,35,0.6); - border-radius: 15px; - border: 1px solid rgba(138,43,226,0.2); - box-shadow: inset 0 0 30px rgba(75,0,130,0.2); + background: var(--bg-tertiary); + border-radius: 6px; + border: 1px solid var(--border-color); } .chat-message { margin-bottom: 15px; padding: 12px 15px; - background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%); - border-radius: 15px; - box-shadow: 0 2px 10px rgba(138,43,226,0.2); - border: 1px solid rgba(138,43,226,0.1); - backdrop-filter: blur(5px); + background: var(--bg-secondary); + border-radius: 6px; + border: 1px solid var(--border-color); } .chat-message p { @@ -86,19 +83,16 @@ body { .chat-message p strong { font-weight: 600; - background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + color: var(--accent-secondary); } .chat-message p code { background: var(--accent-glow); padding: 2px 6px; - border-radius: 5px; + border-radius: 4px; font-family: 'Courier New', Courier, monospace; - color: var(--accent-tertiary); - border: 1px solid rgba(240,147,251,0.3); + color: var(--accent-secondary); + border: 1px solid var(--border-color); } .link-group { @@ -106,26 +100,25 @@ body { justify-content: space-between; margin: 15px 0; padding: 10px; - background: rgba(15,15,35,0.4); - border-radius: 10px; - border: 1px solid rgba(138,43,226,0.2); + background: var(--bg-tertiary); + border-radius: 6px; + border: 1px solid var(--border-color); } .link-group a { font-size: 14px; - color: var(--text-secondary); + color: var(--accent-primary); text-decoration: none; padding: 8px 15px; - border-radius: 8px; - transition: all 0.3s ease; + border-radius: 4px; + transition: all 0.2s ease; border: 1px solid transparent; } .link-group a:hover { - background: linear-gradient(135deg, rgba(102,126,234,0.3) 0%, rgba(118,75,162,0.3) 100%); - border-color: rgba(183,148,246,0.5); - box-shadow: 0 0 15px var(--accent-glow); - color: var(--accent-tertiary); + background: var(--accent-glow); + border-color: var(--border-color); + color: var(--accent-secondary); } form { @@ -139,80 +132,59 @@ form { .chat-input { padding: 14px 18px; border: 1px solid var(--border-color); - border-radius: 25px; + border-radius: 4px; flex-grow: 1; font-size: 14px; - background: rgba(15,15,35,0.8); + background: var(--bg-tertiary); color: var(--text-primary); - box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 0 20px rgba(138,43,226,0.1); - transition: all 0.3s ease; + transition: border-color 0.2s ease; } .chat-input:focus { outline: none; - border-color: rgba(183,148,246,0.6); - box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 0 25px rgba(138,43,226,0.3); + border-color: var(--accent-primary); + box-shadow: inset 0 -2px 0 var(--accent-primary); } .chat-input::placeholder { - color: rgba(183,148,246,0.5); + color: #8A8886; } .chat-submit { padding: 14px 20px; border: none; - border-radius: 25px; + border-radius: 4px; font-size: 14px; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); + background: var(--accent-primary); color: #fff; cursor: pointer; - transition: all 0.3s ease; + transition: background 0.2s ease; font-weight: 600; letter-spacing: 1px; - box-shadow: 0 4px 20px rgba(102,126,234,0.4); white-space: nowrap; } .chat-submit:hover { - transform: translateY(-2px); - box-shadow: 0 6px 25px rgba(102,126,234,0.6); + background: var(--accent-secondary); } .chat-submit:active { - transform: translateY(0); + background: var(--accent-tertiary); } .viewer-panel { flex: 1; min-width: 0; padding: 20px 20px 20px 44px; - background: linear-gradient(135deg, rgba(22,33,62,0.9) 0%, rgba(15,15,35,0.95) 100%); + background: var(--bg-tertiary); display: flex; flex-direction: column; justify-content: center; align-items: center; - box-shadow: inset 0 0 60px rgba(75,0,130,0.15); position: relative; overflow: hidden; } -.viewer-panel::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(ellipse at center, rgba(138,43,226,0.05) 0%, transparent 70%); - animation: nebula-pulse 8s ease-in-out infinite; - pointer-events: none; -} - -@keyframes nebula-pulse { - 0%,100% { opacity: 0.5; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.1); } -} - .viewer-panel.full-viewer { padding: 0; } @@ -224,7 +196,7 @@ form { left: 0; width: 100%; height: 100%; - background: rgba(15,15,35,0.9); + background: rgba(27,27,27,0.9); justify-content: center; align-items: center; z-index: 1000; @@ -234,7 +206,7 @@ form { width: 50px; height: 50px; border: 4px solid var(--border-color); - border-top-color: var(--accent-tertiary); + border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; } @@ -249,29 +221,27 @@ form { } ::-webkit-scrollbar-track { - background: rgba(15,15,35,0.6); + background: transparent; border-radius: 10px; } ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); + background: #5A5A5A; border-radius: 10px; - border: 2px solid rgba(15,15,35,0.6); - box-shadow: 0 0 10px var(--accent-glow); + border: 3px solid var(--bg-primary); } ::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); - box-shadow: 0 0 15px rgba(240,147,251,0.5); + background: #8A8886; } ::-webkit-scrollbar-corner { - background: rgba(15,15,35,0.6); + background: transparent; } * { scrollbar-width: thin; - scrollbar-color: var(--accent-secondary) rgba(15,15,35,0.6); + scrollbar-color: #5A5A5A transparent; } /* ---- Chat Toggle ---- */ @@ -282,22 +252,21 @@ form { transform: translateY(-50%); width: 24px; height: 80px; - background: rgba(22,33,62,0.95); + background: var(--bg-secondary); border: none; border-left: 1px solid var(--border-color); - border-radius: 0 12px 12px 0; + border-radius: 0 6px 6px 0; cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 0; - transition: left 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; + transition: left 0.3s ease, background 0.2s ease; } .chat-toggle:hover { - background: rgba(30,42,72,1); - box-shadow: 0 0 20px var(--accent-glow), inset 0 0 15px rgba(138,43,226,0.15); + background: #3A3A3A; } .chat-toggle-dots { @@ -311,7 +280,7 @@ form { height: 4px; border-radius: 50%; background: var(--text-secondary); - transition: transform 0.3s ease; + transition: transform 0.2s ease; } .chat-toggle:hover .chat-toggle-dot { @@ -331,7 +300,7 @@ body.chat-collapsed .chat-toggle { .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.75); display: none; align-items: center; justify-content: center; @@ -342,21 +311,21 @@ body.chat-collapsed .chat-toggle { .modal-overlay.show { display: flex; } .modal-content { - background: var(--bg-primary); + background: var(--bg-secondary); border: 1px solid var(--border-color); - border-radius: 12px; + border-radius: 8px; width: 90%; max-width: 450px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); + box-shadow: 0 10px 28px rgba(0,0,0,0.6); overflow: hidden; } .modal-header { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + background: var(--accent-primary); color: white; padding: 16px 20px; font-size: 18px; - font-weight: 600; + font-weight: 700; } .modal-body { padding: 20px; } @@ -381,15 +350,15 @@ body.chat-collapsed .chat-toggle { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; - font-weight: 500; + font-weight: 600; } .form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); + border-radius: 4px; + background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px; outline: none; @@ -397,9 +366,9 @@ body.chat-collapsed .chat-toggle { box-sizing: border-box; } -.form-input:focus { border-color: var(--accent-primary); } +.form-input:focus { border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } .form-input:read-only { opacity: 0.7; cursor: not-allowed; } -.form-input::placeholder { color: var(--text-secondary); opacity: 0.7; } +.form-input::placeholder { color: #8A8886; } .checkbox-label { display: flex; @@ -420,40 +389,37 @@ body.chat-collapsed .chat-toggle { /* ---- Modal buttons ---- */ .modal-btn { padding: 10px 20px; - border-radius: 8px; + border-radius: 4px; font-size: 14px; - font-weight: 500; + font-weight: 600; cursor: pointer; - transition: all 0.2s ease; + transition: background 0.2s ease; border: none; } .modal-btn-primary { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + background: var(--accent-primary); color: white; } .modal-btn-primary:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); + background: var(--accent-secondary); } .modal-btn-secondary { - background: var(--bg-secondary); + background: var(--bg-tertiary); color: var(--text-primary); - border: 1px solid var(--border-color); + border: 1px solid #5A5A5A; } .modal-btn-secondary:hover { - background: var(--bg-tertiary); - border-color: var(--text-secondary); + background: #3A3A3A; } -.modal-btn-danger { background: #dc3545; color: white; } +.modal-btn-danger { background: #F1707B; color: white; } .modal-btn-danger:hover { - background: #c82333; - box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3); + background: #D13438; } /* ---- Brainstorm icon button (inside input) ---- */ @@ -533,7 +499,7 @@ body.chat-collapsed .chat-toggle { .brainstorm-message { padding: 12px 16px; - border-radius: 10px; + border-radius: 6px; font-size: 14px; line-height: 1.5; max-width: 85%; @@ -541,13 +507,13 @@ body.chat-collapsed .chat-toggle { } .brainstorm-user { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + background: var(--accent-primary); color: white; align-self: flex-end; } .brainstorm-assistant { - background: var(--bg-secondary); + background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); align-self: flex-start; @@ -565,8 +531,8 @@ body.chat-collapsed .chat-toggle { flex: 1; padding: 10px 14px; border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); + border-radius: 4px; + background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px; outline: none; @@ -574,23 +540,22 @@ body.chat-collapsed .chat-toggle { } .brainstorm-input:focus { border-color: var(--accent-primary); } -.brainstorm-input::placeholder { color: var(--text-secondary); opacity: 0.7; } +.brainstorm-input::placeholder { color: #8A8886; } .brainstorm-send-btn { padding: 10px 20px; border: none; - border-radius: 8px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + border-radius: 4px; + background: var(--accent-primary); color: white; font-size: 14px; - font-weight: 500; + font-weight: 600; cursor: pointer; - transition: all 0.2s; + transition: background 0.2s; } .brainstorm-send-btn:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); + background: var(--accent-secondary); } .brainstorm-send-btn:disabled { @@ -599,7 +564,7 @@ body.chat-collapsed .chat-toggle { } .brainstorm-assistant p { margin: 4px 0; } -.brainstorm-assistant pre { background: var(--bg-tertiary); padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; } +.brainstorm-assistant pre { background: var(--bg-primary); padding: 10px; border-radius: 4px; overflow-x: auto; margin: 8px 0; } .brainstorm-assistant code { font-size: 13px; } .brainstorm-assistant ul, .brainstorm-assistant ol { margin: 4px 0; padding-left: 20px; } @@ -614,16 +579,15 @@ body.chat-collapsed .chat-toggle { font-size: 12px; font-weight: 600; border: none; - border-radius: 6px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + border-radius: 4px; + background: var(--accent-primary); color: white; cursor: pointer; - transition: all 0.2s; + transition: background 0.2s; } .brainstorm-build-btn:hover { - filter: brightness(1.15); - box-shadow: 0 2px 10px var(--accent-glow); + background: var(--accent-secondary); } .brainstorm-suggestions { @@ -637,8 +601,8 @@ body.chat-collapsed .chat-toggle { padding: 5px 12px; font-size: 12px; border: 1px solid var(--border-color); - border-radius: 16px; - background: var(--bg-tertiary); + border-radius: 4px; + background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; @@ -660,9 +624,9 @@ body.chat-collapsed .chat-toggle { .brainstorm-thinking { align-self: flex-start; padding: 12px 16px; - background: var(--bg-secondary); + background: var(--bg-tertiary); border: 1px solid var(--border-color); - border-radius: 10px; + border-radius: 6px; color: var(--text-secondary); font-size: 14px; font-style: italic; @@ -684,7 +648,7 @@ body.chat-collapsed .chat-toggle { content: ''; flex: 1; height: 1px; - background: linear-gradient(90deg, transparent, var(--border-color), transparent); + background: var(--border-color); } .save-line-label { diff --git a/teams-default-themes/teams-light.json b/teams-default-themes/teams-light.json new file mode 100644 index 0000000..f019c82 --- /dev/null +++ b/teams-default-themes/teams-light.json @@ -0,0 +1,134 @@ +{ + "mode": "light", + "colors": { + "bg-primary": "#ffffff", + "bg-secondary": "#F7F7F7", + "bg-tertiary": "#F3F2F1", + "accent-primary": "#6264A7", + "accent-secondary": "#585A96", + "accent-tertiary": "#4F5187", + "accent-glow": "rgba(98,100,167,0.15)", + "text-primary": "#252423", + "text-secondary": "#605E5C", + "border-color": "#E1DFDD", + "header-min-height": "58px", + "header-padding-vertical": "14px", + "header-padding-horizontal": "20px", + "header-line-height": "1.25", + + "surface": "#ffffff", + "surface-2": "#F7F7F7", + "surface-hover": "#F3F2F1", + "surface-pressed": "#EDEBE9", + "surface-disabled": "#F3F2F1", + + "text-disabled": "#A19F9D", + "border-strong": "#C8C6C4", + + "accent-contrast": "#ffffff", + "accent-hover": "#585A96", + "accent-pressed": "#4F5187", + + "danger": "#D13438", + "danger-2": "#D13438", + "focus-ring": "#6264A7", + + "shadow-1": "0 1px 2px rgba(0,0,0,0.08)", + "shadow-2": "0 6px 18px rgba(0,0,0,0.18)", + "scrim": "rgba(0,0,0,0.5)", + + "menu-bg": "#ffffff", + "menu-border": "#E1DFDD", + "menu-shadow": "0 6px 18px rgba(0,0,0,0.18)", + + "alert-error-bg": "#FCF4F6", + "alert-error-border": "#F3D6DC", + "alert-error-fg": "#A4262C", + "alert-error-icon": "#A4262C", + "alert-warn-bg": "#FBF6D9", + "alert-warn-border": "#F2E2A5", + "alert-warn-fg": "#8A6A00", + "alert-warn-icon": "#8A6A00", + "alert-ok-bg": "#E7F2DA", + "alert-ok-border": "#CDE6B3", + "alert-ok-fg": "#107C10", + "alert-ok-icon": "#107C10", + "alert-info-bg": "#F5F5F5", + "alert-info-border": "#E1DFDD", + "alert-info-fg": "#252423", + "alert-info-icon": "#605E5C", + + "input-bg": "#ffffff", + "input-border": "#E1DFDD", + "input-border-hover": "#C8C6C4", + "input-border-focus": "#6264A7", + "input-underline-focus": "#6264A7", + "input-placeholder": "#A19F9D", + "input-prefix-bg": "#6264A7", + "input-prefix-fg": "#ffffff", + "input-icon-bg": "#605E5C", + + "picker-bg": "#ffffff", + "picker-border": "#E1DFDD", + "picker-shadow": "0 8px 24px rgba(0,0,0,0.18)", + + "pivot-fg": "#605E5C", + "pivot-active-fg": "#6264A7", + "pivot-underline-active": "#6264A7", + "pivot-underline-hover": "#C8C6C4", + + "progress-track": "#E1DFDD", + "progress-fill": "#6264A7", + "progress-spinner-track": "#E1DFDD", + "progress-spinner-head": "#6264A7", + + "radio-border": "#C8C6C4", + "radio-border-hover": "#605E5C", + "radio-dot": "#6264A7", + "radio-disabled-border": "#E1DFDD", + "radio-disabled-bg": "#F3F2F1", + "radio-disabled-dot": "#C8C6C4", + + "scroll-track": "transparent", + "scroll-thumb": "#C8C6C4", + "scroll-thumb-hover": "#A19F9D", + "scroll-thumb-active": "#8A8886", + "scroll-shadow": "rgba(0,0,0,0.18)", + + "search-bg": "#F3F2F1", + "search-icon": "#605E5C", + "search-placeholder": "#A19F9D", + "search-underline": "#6264A7", + + "status-critical-bg": "#C4314B", + "status-critical-fg": "#ffffff", + "status-error": "#C4314B", + "status-warning": "#986F0B", + "status-success": "#107C10", + "status-info": "#605E5C", + + "toast-bg": "#ffffff", + "toast-border": "#E1DFDD", + + "toggle-track-off": "#FFFFFF", + "toggle-border-off": "#8A8886", + "toggle-thumb": "#8A8886", + "toggle-track-off-hover": "#FFFFFF", + "toggle-border-off-hover": "#605E5C", + "toggle-track-off-pressed": "#FFFFFF", + "toggle-border-off-pressed": "#252423", + "toggle-track-on": "#6264A7", + "toggle-border-on": "#6264A7", + "toggle-track-on-hover": "#585A96", + "toggle-border-on-hover": "#585A96", + "toggle-track-on-pressed": "#4F5187", + "toggle-border-on-pressed": "#4F5187", + "toggle-track-disabled": "#F3F2F1", + "toggle-border-disabled": "#E1DFDD", + "toggle-thumb-disabled": "#C8C6C4", + + "tooltip-bg": "#323130", + "tooltip-fg": "#ffffff", + "tooltip-shadow": "0 6px 16px rgba(0,0,0,0.25)" + } +} diff --git a/teams-default-themes/nebula-dawn.v2.css b/teams-default-themes/teams-light.v1.css similarity index 63% rename from teams-default-themes/nebula-dawn.v2.css rename to teams-default-themes/teams-light.v1.css index 112522d..0c2ae0d 100644 --- a/teams-default-themes/nebula-dawn.v2.css +++ b/teams-default-themes/teams-light.v1.css @@ -1,14 +1,14 @@ :root { - --bg-primary: #f0e6f6; - --bg-secondary: #e8dff0; - --bg-tertiary: #f7f2fa; - --accent-primary: #667eea; - --accent-secondary: #764ba2; - --accent-tertiary: #c054d4; - --accent-glow: rgba(118,75,162,0.15); - --text-primary: #2d2640; - --text-secondary: #6b4f8a; - --border-color: rgba(118,75,162,0.25); + --bg-primary: #ffffff; + --bg-secondary: #F7F7F7; + --bg-tertiary: #F3F2F1; + --accent-primary: #6264A7; + --accent-secondary: #585A96; + --accent-tertiary: #4F5187; + --accent-glow: rgba(98,100,167,0.15); + --text-primary: #252423; + --text-secondary: #605E5C; + --border-color: #E1DFDD; --header-min-height: 58px; --header-padding-vertical: 14px; --header-padding-horizontal: 20px; @@ -22,8 +22,8 @@ } body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%); + font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + background: var(--bg-primary); color: var(--text-primary); height: 100vh; display: flex; @@ -31,8 +31,8 @@ body { .chat-panel { width: 30%; - background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,230,246,0.95) 100%); - box-shadow: 0 0 30px rgba(118,75,162,0.1), inset 0 0 60px rgba(240,230,246,0.3); + background: var(--bg-secondary); + box-shadow: 1px 0 2px rgba(0,0,0,0.08); padding: 20px; display: flex; flex-direction: column; @@ -50,12 +50,12 @@ body { align-items: center; justify-content: center; box-sizing: border-box; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); + background: var(--accent-primary); color: #fff; - border-radius: 15px; - box-shadow: 0 4px 20px rgba(102,126,234,0.3); - text-shadow: 0 2px 10px rgba(0,0,0,0.15); - letter-spacing: 2px; + border-radius: 6px; + box-shadow: 0 1px 2px rgba(0,0,0,0.08); + letter-spacing: 1px; + font-weight: 700; } .chat-messages { @@ -63,20 +63,17 @@ body { overflow-y: auto; padding: 15px; margin-top: 15px; - background: rgba(255,255,255,0.6); - border-radius: 15px; - border: 1px solid rgba(118,75,162,0.15); - box-shadow: inset 0 0 30px rgba(240,230,246,0.4); + background: var(--bg-primary); + border-radius: 6px; + border: 1px solid var(--border-color); } .chat-message { margin-bottom: 15px; padding: 12px 15px; - background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%); - border-radius: 15px; - box-shadow: 0 2px 10px rgba(118,75,162,0.1); - border: 1px solid rgba(118,75,162,0.1); - backdrop-filter: blur(5px); + background: var(--bg-tertiary); + border-radius: 6px; + border: 1px solid var(--border-color); } .chat-message p { @@ -86,19 +83,16 @@ body { .chat-message p strong { font-weight: 600; - background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary)); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + color: var(--accent-primary); } .chat-message p code { background: var(--accent-glow); padding: 2px 6px; - border-radius: 5px; + border-radius: 4px; font-family: 'Courier New', Courier, monospace; - color: var(--accent-secondary); - border: 1px solid rgba(118,75,162,0.2); + color: var(--accent-primary); + border: 1px solid var(--border-color); } .link-group { @@ -106,25 +100,24 @@ body { justify-content: space-between; margin: 15px 0; padding: 10px; - background: rgba(255,255,255,0.4); - border-radius: 10px; - border: 1px solid rgba(118,75,162,0.15); + background: var(--bg-primary); + border-radius: 6px; + border: 1px solid var(--border-color); } .link-group a { font-size: 14px; - color: var(--text-secondary); + color: var(--accent-primary); text-decoration: none; padding: 8px 15px; - border-radius: 8px; - transition: all 0.3s ease; + border-radius: 4px; + transition: all 0.2s ease; border: 1px solid transparent; } .link-group a:hover { - background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%); - border-color: rgba(118,75,162,0.3); - box-shadow: 0 0 15px var(--accent-glow); + background: var(--accent-glow); + border-color: var(--border-color); color: var(--accent-secondary); } @@ -139,80 +132,59 @@ form { .chat-input { padding: 14px 18px; border: 1px solid var(--border-color); - border-radius: 25px; + border-radius: 4px; flex-grow: 1; font-size: 14px; - background: rgba(255,255,255,0.8); + background: var(--bg-primary); color: var(--text-primary); - box-shadow: inset 0 2px 10px rgba(118,75,162,0.05), 0 0 20px rgba(118,75,162,0.05); - transition: all 0.3s ease; + transition: border-color 0.2s ease; } .chat-input:focus { outline: none; - border-color: rgba(118,75,162,0.5); - box-shadow: inset 0 2px 10px rgba(118,75,162,0.05), 0 0 25px rgba(118,75,162,0.15); + border-color: var(--accent-primary); + box-shadow: inset 0 -2px 0 var(--accent-primary); } .chat-input::placeholder { - color: rgba(118,75,162,0.4); + color: #A19F9D; } .chat-submit { padding: 14px 20px; border: none; - border-radius: 25px; + border-radius: 4px; font-size: 14px; - background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); + background: var(--accent-primary); color: #fff; cursor: pointer; - transition: all 0.3s ease; + transition: background 0.2s ease; font-weight: 600; letter-spacing: 1px; - box-shadow: 0 4px 20px rgba(102,126,234,0.3); white-space: nowrap; } .chat-submit:hover { - transform: translateY(-2px); - box-shadow: 0 6px 25px rgba(102,126,234,0.5); + background: var(--accent-secondary); } .chat-submit:active { - transform: translateY(0); + background: var(--accent-tertiary); } .viewer-panel { flex: 1; min-width: 0; padding: 20px 20px 20px 44px; - background: linear-gradient(135deg, rgba(232,223,240,0.9) 0%, rgba(247,242,250,0.95) 100%); + background: var(--bg-tertiary); display: flex; flex-direction: column; justify-content: center; align-items: center; - box-shadow: inset 0 0 60px rgba(118,75,162,0.05); position: relative; overflow: hidden; } -.viewer-panel::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(ellipse at center, rgba(102,126,234,0.04) 0%, transparent 70%); - animation: nebula-pulse 8s ease-in-out infinite; - pointer-events: none; -} - -@keyframes nebula-pulse { - 0%,100% { opacity: 0.5; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.1); } -} - .viewer-panel.full-viewer { padding: 0; } @@ -224,7 +196,7 @@ form { left: 0; width: 100%; height: 100%; - background: rgba(240,230,246,0.9); + background: rgba(255,255,255,0.9); justify-content: center; align-items: center; z-index: 1000; @@ -234,7 +206,7 @@ form { width: 50px; height: 50px; border: 4px solid var(--border-color); - border-top-color: var(--accent-tertiary); + border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; } @@ -249,29 +221,27 @@ form { } ::-webkit-scrollbar-track { - background: rgba(240,230,246,0.6); + background: transparent; border-radius: 10px; } ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-tertiary) 100%); + background: #C8C6C4; border-radius: 10px; - border: 2px solid rgba(240,230,246,0.6); - box-shadow: 0 0 10px var(--accent-glow); + border: 3px solid var(--bg-primary); } ::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, var(--accent-tertiary) 0%, var(--accent-secondary) 50%, var(--accent-primary) 100%); - box-shadow: 0 0 15px rgba(192,84,212,0.3); + background: #A19F9D; } ::-webkit-scrollbar-corner { - background: rgba(240,230,246,0.6); + background: transparent; } * { scrollbar-width: thin; - scrollbar-color: var(--accent-secondary) rgba(240,230,246,0.6); + scrollbar-color: #C8C6C4 transparent; } /* ---- Chat Toggle ---- */ @@ -282,22 +252,21 @@ form { transform: translateY(-50%); width: 24px; height: 80px; - background: rgba(240,230,246,0.95); + background: var(--bg-secondary); border: none; border-left: 1px solid var(--border-color); - border-radius: 0 12px 12px 0; + border-radius: 0 6px 6px 0; cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 0; - transition: left 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; + transition: left 0.3s ease, background 0.2s ease; } .chat-toggle:hover { - background: rgba(255,255,255,1); - box-shadow: 0 0 20px var(--accent-glow), inset 0 0 15px rgba(118,75,162,0.1); + background: var(--bg-tertiary); } .chat-toggle-dots { @@ -311,7 +280,7 @@ form { height: 4px; border-radius: 50%; background: var(--text-secondary); - transition: transform 0.3s ease; + transition: transform 0.2s ease; } .chat-toggle:hover .chat-toggle-dot { @@ -331,7 +300,7 @@ body.chat-collapsed .chat-toggle { .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.4); + background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; @@ -344,19 +313,19 @@ body.chat-collapsed .chat-toggle { .modal-content { background: var(--bg-primary); border: 1px solid var(--border-color); - border-radius: 12px; + border-radius: 8px; width: 90%; max-width: 450px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); + box-shadow: 0 6px 18px rgba(0,0,0,0.18); overflow: hidden; } .modal-header { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + background: var(--accent-primary); color: white; padding: 16px 20px; font-size: 18px; - font-weight: 600; + font-weight: 700; } .modal-body { padding: 20px; } @@ -381,15 +350,15 @@ body.chat-collapsed .chat-toggle { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; - font-weight: 500; + font-weight: 600; } .form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); + border-radius: 4px; + background: var(--bg-primary); color: var(--text-primary); font-size: 14px; outline: none; @@ -397,9 +366,9 @@ body.chat-collapsed .chat-toggle { box-sizing: border-box; } -.form-input:focus { border-color: var(--accent-primary); } +.form-input:focus { border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } .form-input:read-only { opacity: 0.7; cursor: not-allowed; } -.form-input::placeholder { color: var(--text-secondary); opacity: 0.7; } +.form-input::placeholder { color: #A19F9D; } .checkbox-label { display: flex; @@ -420,40 +389,37 @@ body.chat-collapsed .chat-toggle { /* ---- Modal buttons ---- */ .modal-btn { padding: 10px 20px; - border-radius: 8px; + border-radius: 4px; font-size: 14px; - font-weight: 500; + font-weight: 600; cursor: pointer; - transition: all 0.2s ease; + transition: background 0.2s ease; border: none; } .modal-btn-primary { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + background: var(--accent-primary); color: white; } .modal-btn-primary:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); + background: var(--accent-secondary); } .modal-btn-secondary { background: var(--bg-secondary); color: var(--text-primary); - border: 1px solid var(--border-color); + border: 1px solid #C8C6C4; } .modal-btn-secondary:hover { background: var(--bg-tertiary); - border-color: var(--text-secondary); } -.modal-btn-danger { background: #dc3545; color: white; } +.modal-btn-danger { background: #D13438; color: white; } .modal-btn-danger:hover { - background: #c82333; - box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3); + background: #A4262C; } /* ---- Brainstorm icon button (inside input) ---- */ @@ -491,14 +457,6 @@ body.chat-collapsed .chat-toggle { background: var(--accent-glow); } -.light-mode .brainstorm-icon-btn { - color: var(--text-secondary); -} - -.light-mode .brainstorm-icon-btn:hover { - color: var(--accent-primary); -} - /* ---- Brainstorm modal (full-window variant) ---- */ .brainstorm-modal .modal-content { max-width: none; @@ -541,7 +499,7 @@ body.chat-collapsed .chat-toggle { .brainstorm-message { padding: 12px 16px; - border-radius: 10px; + border-radius: 6px; font-size: 14px; line-height: 1.5; max-width: 85%; @@ -549,13 +507,13 @@ body.chat-collapsed .chat-toggle { } .brainstorm-user { - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + background: var(--accent-primary); color: white; align-self: flex-end; } .brainstorm-assistant { - background: var(--bg-secondary); + background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); align-self: flex-start; @@ -573,8 +531,8 @@ body.chat-collapsed .chat-toggle { flex: 1; padding: 10px 14px; border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); + border-radius: 4px; + background: var(--bg-primary); color: var(--text-primary); font-size: 14px; outline: none; @@ -582,23 +540,22 @@ body.chat-collapsed .chat-toggle { } .brainstorm-input:focus { border-color: var(--accent-primary); } -.brainstorm-input::placeholder { color: var(--text-secondary); opacity: 0.7; } +.brainstorm-input::placeholder { color: #A19F9D; } .brainstorm-send-btn { padding: 10px 20px; border: none; - border-radius: 8px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + border-radius: 4px; + background: var(--accent-primary); color: white; font-size: 14px; - font-weight: 500; + font-weight: 600; cursor: pointer; - transition: all 0.2s; + transition: background 0.2s; } .brainstorm-send-btn:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px var(--accent-glow); + background: var(--accent-secondary); } .brainstorm-send-btn:disabled { @@ -607,7 +564,7 @@ body.chat-collapsed .chat-toggle { } .brainstorm-assistant p { margin: 4px 0; } -.brainstorm-assistant pre { background: var(--bg-tertiary); padding: 10px; border-radius: 6px; overflow-x: auto; margin: 8px 0; } +.brainstorm-assistant pre { background: var(--bg-secondary); padding: 10px; border-radius: 4px; overflow-x: auto; margin: 8px 0; } .brainstorm-assistant code { font-size: 13px; } .brainstorm-assistant ul, .brainstorm-assistant ol { margin: 4px 0; padding-left: 20px; } @@ -622,16 +579,15 @@ body.chat-collapsed .chat-toggle { font-size: 12px; font-weight: 600; border: none; - border-radius: 6px; - background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); + border-radius: 4px; + background: var(--accent-primary); color: white; cursor: pointer; - transition: all 0.2s; + transition: background 0.2s; } .brainstorm-build-btn:hover { - filter: brightness(1.15); - box-shadow: 0 2px 10px var(--accent-glow); + background: var(--accent-secondary); } .brainstorm-suggestions { @@ -645,8 +601,8 @@ body.chat-collapsed .chat-toggle { padding: 5px 12px; font-size: 12px; border: 1px solid var(--border-color); - border-radius: 16px; - background: var(--bg-tertiary); + border-radius: 4px; + background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; @@ -668,9 +624,9 @@ body.chat-collapsed .chat-toggle { .brainstorm-thinking { align-self: flex-start; padding: 12px 16px; - background: var(--bg-secondary); + background: var(--bg-tertiary); border: 1px solid var(--border-color); - border-radius: 10px; + border-radius: 6px; color: var(--text-secondary); font-size: 14px; font-style: italic; @@ -692,7 +648,7 @@ body.chat-collapsed .chat-toggle { content: ''; flex: 1; height: 1px; - background: linear-gradient(90deg, transparent, var(--border-color), transparent); + background: var(--border-color); } .save-line-label { diff --git a/teams-required-pages/synthos_apis.html b/teams-required-pages/synthos_apis.html deleted file mode 100644 index 3f2567f..0000000 --- a/teams-required-pages/synthos_apis.html +++ /dev/null @@ -1,327 +0,0 @@ - - - - SynthOS - APIs - - - - - - - - - -
-
SynthOS
-
-

SynthOS: Expand the individual API operations to test calls.

-
-
- Save - Pages - Reset -
-
- - -
-
-
-
API Explorer
-
-
-
GET /api/data/:page/:table
-
- This operation retrieves all rows from the specified page-scoped table. The response is an array of JSON objects, each representing a row in the table. -
- - - -
-
-
-
-
-
GET /api/data/:page/:table?limit=N&offset=N
-
- Paginated variant. Returns a page of rows from the table. The response includes the items, total count, and whether more rows are available. - Response: { items: [...], total: number, offset: number, limit: number, hasMore: boolean } -
- - - - - -
-
-
-
-
-
GET /api/data/:page/:table/:id
-
- This operation retrieves a single row from the specified page-scoped table using the provided ID. The response is a JSON object representing the row. -
- - - - -
-
-
-
-
-
POST /api/data/:page/:table
-
- This operation saves a single row to the specified page-scoped table. The request should include a JSON object representing the row. The response indicates success. -
- - - - -
-
-
-
-
-
DELETE /api/data/:page/:table/:id
-
- This operation deletes a single row from the specified page-scoped table using the provided ID. The response indicates success. -
- - - - -
-
-
-
-
-
GET /api/pages
-
- This operation retrieves a list of all available pages. The response is an array of page objects with name, title, categories, pinned, createdDate, lastModified, pageVersion, and mode. -
- -
-
-
-
-
-
GET /api/pages/:name
-
- This operation retrieves the metadata for a single page, including title, categories, pinned, createdDate, lastModified, pageVersion, and mode. -
- - -
-
-
-
-
-
POST /api/pages/:name
-
- This operation merges metadata for a page. Send only the fields you want to update. Supported fields: title (string), categories (array of strings), pinned (boolean), mode ("unlocked" | "locked"). The lastModified timestamp is auto-set on each update. The createdDate and pageVersion fields are preserved and cannot be overridden. -
- - - -
-
-
-
-
-
POST /api/pages/:name/pin
-
- This operation toggles the pinned status for a page. The request body should include pinned (boolean). -
- - - -
-
-
-
-
-
DELETE /api/pages/:name
-
- This operation deletes a user page. Required (system) pages cannot be deleted. Returns 400 if the page is a required page, or 404 if not found. -
- - -
-
-
-
-
-
POST /api/pages/:name/copy
-
- This operation copies a page to a new name. The source page can be a user page or a required (system) page. The request body should include name (string, required), title (string, optional), and categories (array of strings, optional). Returns 409 if the target page already exists. -
- - - -
-
-
-
-
-
POST /api/search/web
-
- This operation searches the web using Brave Search and returns a list of results. Requires Brave Search to be enabled in Settings > Connectors. -
- - - -
-
-
-
-
-
POST /api/generate/image
-
- This operation generates an image based on a prompt. You can specify the shape and style of the image. -
- - - - -
-
-
-
-
-
POST /api/generate/completion
-
- This operation generates a text completion based on a prompt. You can optionally specify the temperature for controlling randomness. -
- - - -
-
-
-
-
-
POST /api/scripts/:id
-
- This operation executes a script with the specified ID and passes in the provided variables. The response contains the output of the script execution. -
- - - -
-
-
-
-
-
GET /api/connectors
-
- Lists all available connectors with their configuration status. Supports optional category and id query filters. -
- - -
-
-
-
-
-
GET /api/connectors/:id
-
- Retrieves full detail for a single connector, including its definition and whether it is configured and enabled. -
- - -
-
-
-
-
-
POST /api/connectors (proxy call)
-
- Proxies a request through a configured connector. The connector attaches authentication automatically based on its auth strategy. -
- - - - - - -
-
-
-
-
-
GET /api/agents
-
- Lists configured agents (A2A and OpenClaw). Supports optional filters: enabled (boolean) and provider (a2a|openclaw). Returns id, name, description, url, enabled, provider, and capabilities for each agent. -
- - - -
-
-
-
-
-
POST /api/agents/:id/send
-
- Sends a text message to an agent (works for both A2A and OpenClaw protocols). Returns a normalized response: { kind: 'message'|'task', text?: string, raw: object }. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. -
- - - -
-
-
-
-
-
POST /api/agents/:id/stream
-
- Sends a message and receives a streaming SSE response. Each event is JSON: { kind: 'text'|'status'|'artifact'|'done'|'error', data: any }. The stream ends with a [DONE] sentinel. Optionally include an attachments array: [{ fileName: string, mimeType: string, content: string (base64 for binary) }]. -
- - - -
-
-
-
-
-
PATCH /api/agents/:id
-
- Toggle an agent's enabled/disabled state or update its name and description. Send only the fields to change. -
- - - -
-
-
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/teams-required-pages/synthos_apis.json b/teams-required-pages/synthos_apis.json deleted file mode 100644 index 43154b5..0000000 --- a/teams-required-pages/synthos_apis.json +++ /dev/null @@ -1 +0,0 @@ -{ "title": "SynthOS APIs", "categories": ["System"], "pinned": false, "showInAll": false, "pageVersion": 2, "mode": "locked" } diff --git a/teams-required-pages/synthos_scripts.html b/teams-required-pages/synthos_scripts.html deleted file mode 100644 index 23500b1..0000000 --- a/teams-required-pages/synthos_scripts.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - SynthOS - Scripts - - - - - - - - - -
-
SynthOS
-
-

SynthOS: Add or modify scripts that can be executed using the /api/scripts/:id API.

-
-
- Save - Pages - Reset -
-
- - -
-
-
-
Script Editor
-
-
-
    - -
- -
-
-
- Select an existing script to edit or add a new one using the "Add New Script" button. -
- - - - - -
Script Command is required.
- - -
-

Understanding SynthOS Scripts

-

Scripts in SynthOS are powerful tools that allow you to define custom terminal commands for various tasks. When SynthOS executes a script, it runs the command and captures the console output, which is then returned for further processing or analysis.

- -

Creating Effective Scripts

-

When writing a script, you can use any valid terminal command. For added flexibility, you can include {{variable}} placeholders, which SynthOS will replace with actual values during execution.

- -

Example: Weather Forecast Script

-

Here's an example of an interesting script that SynthOS could use:

-

curl wttr.in/{{city}}?format=3

-

This script fetches a concise weather forecast for a specified city. SynthOS can call this script with different city names to get up-to-date weather information.

- -

Tips for Script Writing

-

1. Keep commands concise and focused on a single task.

-

2. Use variables for dynamic inputs to make scripts more versatile.

-

3. Consider potential errors and how to handle them.

-

4. Test your scripts thoroughly to ensure they work as expected.

-

5. Provide a clear and concise usage description to help others understand how to use your script.

-

6. Define the expected variables in the Variables field to document the script's requirements.

- -

Using the Description Field

-

The Description field allows you to provide a brief explanation of what SynthOS can use your script for.

- -

Defining Variables

-

Use the Variables field to specify any input parameters your script expects. Format it as a JSON object, e.g., { city: string, days?: number }. This helps SynthOS know what inputs it needs to provide when running your script.

-
-
-
-
-
- - - - - - \ No newline at end of file diff --git a/teams-required-pages/synthos_scripts.json b/teams-required-pages/synthos_scripts.json deleted file mode 100644 index 782e617..0000000 --- a/teams-required-pages/synthos_scripts.json +++ /dev/null @@ -1 +0,0 @@ -{ "title": "SynthOS Scripts", "categories": ["System"], "pinned": false, "showInAll": false, "pageVersion": 2, "mode": "locked" } From e94a10b7a1521dc8e35e71dd046ef11adcaf5234 Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Fri, 20 Feb 2026 01:41:30 -0800 Subject: [PATCH 07/11] updated themes and added component defs --- src/customizer/TeamsCustomizer.ts | 338 ++++++++++ teams-default-themes/teams-dark.v1.css | 782 +++++++++++++++++++++++- teams-default-themes/teams-light.v1.css | 782 +++++++++++++++++++++++- 3 files changed, 1874 insertions(+), 28 deletions(-) diff --git a/src/customizer/TeamsCustomizer.ts b/src/customizer/TeamsCustomizer.ts index a927170..4255d01 100644 --- a/src/customizer/TeamsCustomizer.ts +++ b/src/customizer/TeamsCustomizer.ts @@ -6,6 +6,11 @@ import { Customizer } from './Customizer'; * data-folder name for the SynthTabs fork. */ export class TeamsCustomizer extends Customizer { + constructor() { + super(); + this.addTransformInstructions(transformInstructions); + } + get localFolder(): string { return '.synthtabs'; } @@ -30,3 +35,336 @@ export class TeamsCustomizer extends Customizer { return path.join(__dirname, '../../teams-service-connectors'); } } + +const transformInstructions = ` + +## Button + + + + + +
+ + +
+ +## Alert +
+ + Message goes here + + +
+ +## Breadcrumb + + +## Card +
+
+
+
+
+
Fluent base card
+
Subtitle
+
+ +
+
+
+ +## Carousel +
+
+
+
CONTENT
+
+ + +
+
+ + +
+
+ +## Checkbox + + +## Coachmark + + +## Contextual Menu + + +## Dialog + + +## Dropdown +
+ + + +
+ +## Group List +
+ + +
+ +## Hyperlink +Hyperlink +A very long hyperlink that should truncate +Disabled + +## Input +
+ +
+ +
+
Optional hint
+
+
+
+ Prefix + +
+
+
+ +
+ + +
+ +
+ +## Key Value Pair +
+
+
Label
+
+
Key
+
Value
+
+
+
+ +## Paragraph +
+

Headline example

+

Description example…

+

Subheadline here

+

Lorem ipsum…

+

Description example…

+
+ +## Picker +
+ +
+
+ +
+
+ +
+
+
+ +## Date Picker +
+
+
+
+ +
Jan 2021
+ +
+
+ + +
+
+
+ +## Time Picker +
+
+
+
+ + +
+
+
+ +## Pivot + + +## Progress Indicator +
+ +
+
+
+
Label
+
Description
+
+
+
+
+
+ +## Radio +
+ + +
+ +## Scroll Region +
Very long content…
+ +## Search Box + + +## Side Panel + + +## Status Label + + + Critical + + + + Warning + + +## Toast +
+
+
+ +
+
ContosoBot
+
Lorem ipsum…
+
+ +
+
+
Lorem ipsum…
+
+
+ + +
+
+
+ +## Toggle + + +## Tooltip + + + +`; diff --git a/teams-default-themes/teams-dark.v1.css b/teams-default-themes/teams-dark.v1.css index 395eb87..5708023 100644 --- a/teams-default-themes/teams-dark.v1.css +++ b/teams-default-themes/teams-dark.v1.css @@ -1,19 +1,137 @@ :root { + /* ---- Core palette ---- */ --bg-primary: #1B1B1B; --bg-secondary: #2B2B2B; --bg-tertiary: #242424; --accent-primary: #7B83EB; --accent-secondary: #A6ABFF; --accent-tertiary: #4F52B2; + --accent-contrast: #ffffff; --accent-glow: rgba(123,131,235,0.2); --text-primary: #ffffff; --text-secondary: #C8C8C8; + --text-disabled: #8A8886; --border-color: #3F3F3F; + --border-strong: #5A5A5A; + --danger: #F1707B; + --focus-ring: #7B83EB; + --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); + --shadow-lg: 0 10px 28px rgba(0,0,0,0.6); + --scrim: rgba(0,0,0,0.75); + + /* ---- Typography ---- */ + --font: "Segoe UI", system-ui, -apple-system, sans-serif; + --type-xs: 12px/16px var(--font); + --type-sm: 13px/20px var(--font); + --type-md: 16px/22px var(--font); + --type-lg: 18px/24px var(--font); + + /* ---- Shell layout ---- */ --header-min-height: 58px; --header-padding-vertical: 14px; --header-padding-horizontal: 20px; --header-line-height: 1.25; -} + + /* ---- Menu ---- */ + --menu-bg: #2B2B2B; + --menu-border: #3F3F3F; + --menu-shadow: 0 10px 28px rgba(0,0,0,0.6); + + /* ---- Alert ---- */ + --alert-error-bg: #3E1F25; --alert-error-border: #6B2B34; --alert-error-fg: #F1707B; --alert-error-icon: #F1707B; + --alert-warn-bg: #463100; --alert-warn-border: #7A5A00; --alert-warn-fg: #FFD86A; --alert-warn-icon: #FFD86A; + --alert-ok-bg: #0D2E0D; --alert-ok-border: #1E5A1E; --alert-ok-fg: #7FE07F; --alert-ok-icon: #7FE07F; + --alert-info-bg: #1F1F1F; --alert-info-border: #3F3F3F; --alert-info-fg: #ffffff; --alert-info-icon: #C8C8C8; + + /* ---- Input ---- */ + --input-bg: #2B2B2B; + --input-fg: var(--text-primary); + --input-border: var(--border-color); + --input-border-hover: var(--border-strong); + --input-border-focus: var(--accent-primary); + --input-underline-focus: var(--accent-primary); + --input-placeholder: var(--text-disabled); + --input-prefix-bg: var(--accent-primary); + --input-prefix-fg: var(--accent-contrast); + --input-icon-bg: #C8C8C8; + + /* ---- Picker ---- */ + --picker-bg: #2B2B2B; + --picker-border: var(--border-color); + --picker-shadow: 0 12px 30px rgba(0,0,0,0.6); + + /* ---- Pivot ---- */ + --pivot-fg: var(--text-secondary); + --pivot-active-fg: var(--accent-primary); + --pivot-underline-active: var(--accent-primary); + --pivot-underline-hover: #8A8886; + + /* ---- Progress ---- */ + --progress-track: #5A5A5A; + --progress-fill: var(--accent-primary); + --progress-spinner-track: #5A5A5A; + --progress-spinner-head: #ffffff; + + /* ---- Radio ---- */ + --radio-border: #8A8886; + --radio-border-hover: #C8C8C8; + --radio-dot: var(--accent-primary); + --radio-disabled-border: #3F3F3F; + --radio-disabled-bg: #2B2B2B; + --radio-disabled-dot: #5A5A5A; + + /* ---- Scroll ---- */ + --scroll-track: transparent; + --scroll-thumb: #5A5A5A; + --scroll-thumb-hover: #8A8886; + --scroll-thumb-active: #C8C8C8; + --scroll-shadow: rgba(0,0,0,0.55); + + /* ---- Search ---- */ + --search-bg: #2B2B2B; + --search-icon: #C8C8C8; + --search-placeholder: #8A8886; + --search-underline: var(--accent-primary); + + /* ---- Status ---- */ + --status-critical-bg: #C4314B; + --status-critical-fg: #ffffff; + --status-error: #F1707B; + --status-warning: #FFD86A; + --status-success: #7FE07F; + --status-info: var(--text-secondary); + + /* ---- Toast ---- */ + --toast-bg: #2B2B2B; + --toast-border: var(--border-color); + + /* ---- Toggle ---- */ + --toggle-track-off: #1F1F1F; + --toggle-border-off: #8A8886; + --toggle-thumb: #8A8886; + --toggle-track-off-hover: #1F1F1F; + --toggle-border-off-hover: #C8C8C8; + --toggle-track-off-pressed: #1F1F1F; + --toggle-border-off-pressed: #FFFFFF; + --toggle-track-on: var(--accent-primary); + --toggle-border-on: var(--accent-primary); + --toggle-track-on-hover: var(--accent-secondary); + --toggle-border-on-hover: var(--accent-secondary); + --toggle-track-on-pressed: var(--accent-tertiary); + --toggle-border-on-pressed: var(--accent-tertiary); + --toggle-track-disabled: #2B2B2B; + --toggle-border-disabled: #3F3F3F; + --toggle-thumb-disabled: #5A5A5A; + + /* ---- Tooltip ---- */ + --tooltip-bg: #3B3A39; + --tooltip-fg: #ffffff; + --tooltip-shadow: 0 8px 20px rgba(0,0,0,0.6); +} + +/* ================================================================ + SHELL STYLES + ================================================================ */ * { margin: 0; @@ -22,7 +140,7 @@ } body { - font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); height: 100vh; @@ -53,7 +171,7 @@ body { background: var(--accent-primary); color: #fff; border-radius: 6px; - box-shadow: 0 1px 2px rgba(0,0,0,0.35); + box-shadow: var(--shadow-sm); letter-spacing: 1px; font-weight: 700; } @@ -147,7 +265,7 @@ form { } .chat-input::placeholder { - color: #8A8886; + color: var(--text-disabled); } .chat-submit { @@ -221,18 +339,18 @@ form { } ::-webkit-scrollbar-track { - background: transparent; + background: var(--scroll-track); border-radius: 10px; } ::-webkit-scrollbar-thumb { - background: #5A5A5A; + background: var(--scroll-thumb); border-radius: 10px; border: 3px solid var(--bg-primary); } ::-webkit-scrollbar-thumb:hover { - background: #8A8886; + background: var(--scroll-thumb-hover); } ::-webkit-scrollbar-corner { @@ -241,7 +359,7 @@ form { * { scrollbar-width: thin; - scrollbar-color: #5A5A5A transparent; + scrollbar-color: var(--scroll-thumb) transparent; } /* ---- Chat Toggle ---- */ @@ -300,7 +418,7 @@ body.chat-collapsed .chat-toggle { .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.75); + background: var(--scrim); display: none; align-items: center; justify-content: center; @@ -316,7 +434,7 @@ body.chat-collapsed .chat-toggle { border-radius: 8px; width: 90%; max-width: 450px; - box-shadow: 0 10px 28px rgba(0,0,0,0.6); + box-shadow: var(--shadow-lg); overflow: hidden; } @@ -368,7 +486,7 @@ body.chat-collapsed .chat-toggle { .form-input:focus { border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } .form-input:read-only { opacity: 0.7; cursor: not-allowed; } -.form-input::placeholder { color: #8A8886; } +.form-input::placeholder { color: var(--text-disabled); } .checkbox-label { display: flex; @@ -409,14 +527,14 @@ body.chat-collapsed .chat-toggle { .modal-btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); - border: 1px solid #5A5A5A; + border: 1px solid var(--border-strong); } .modal-btn-secondary:hover { background: #3A3A3A; } -.modal-btn-danger { background: #F1707B; color: white; } +.modal-btn-danger { background: var(--danger); color: white; } .modal-btn-danger:hover { background: #D13438; @@ -540,7 +658,7 @@ body.chat-collapsed .chat-toggle { } .brainstorm-input:focus { border-color: var(--accent-primary); } -.brainstorm-input::placeholder { color: #8A8886; } +.brainstorm-input::placeholder { color: var(--text-disabled); } .brainstorm-send-btn { padding: 10px 20px; @@ -660,3 +778,639 @@ body.chat-collapsed .chat-toggle { #loadingOverlay { position: absolute; } .chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .chat-input:disabled { opacity: 0.5; cursor: not-allowed; } + + +/* ================================================================ + TEAMS UI KIT — COMPONENT STYLES + ================================================================ */ + +/* ===== Hyperlink ===== */ +.mt-link{ color:var(--accent-primary); text-decoration:none; cursor:pointer; font:inherit; } +.mt-link:hover{ color:var(--accent-secondary); text-decoration:underline; } +.mt-link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } +.mt-link[aria-disabled="true"]{ color:var(--text-disabled); pointer-events:none; cursor:default; text-decoration:none; } +.mt-link--truncate{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } + +/* ===== Button ===== */ +.mt-btn{ + display:inline-flex; align-items:center; justify-content:center; gap:6px; + border-radius:4px; border:1px solid var(--btn-border); + background:var(--btn-bg); color:var(--btn-fg); + font:600 var(--type-sm); + height:32px; padding:0 12px; + cursor:pointer; user-select:none; +} +.mt-btn[data-size="sm"]{ height:24px; padding:0 8px; font:600 var(--type-xs); } +.mt-btn:hover:not(:disabled){ background:var(--btn-hover-bg); } +.mt-btn:active:not(:disabled){ background:var(--btn-pressed-bg); } +.mt-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-btn:disabled{ background:var(--bg-tertiary); color:var(--text-disabled); border-color:var(--bg-tertiary); cursor:not-allowed; } +.mt-btn[data-icon-only]{ width:32px; padding:0; } +.mt-btn[data-icon-only][data-size="sm"]{ width:24px; } +.mt-btn-group{ display:inline-flex; } +.mt-btn--split{ width:32px; padding:0; } + +.mt-btn[data-style="accent"]{ + --btn-bg:var(--accent-primary); --btn-fg:var(--accent-contrast); --btn-border:var(--accent-primary); + --btn-hover-bg:var(--accent-secondary); --btn-pressed-bg:var(--accent-tertiary); +} +.mt-btn[data-style="neutral"]{ + --btn-bg:var(--bg-secondary); --btn-fg:var(--text-primary); --btn-border:var(--border-color); + --btn-hover-bg:var(--bg-tertiary); --btn-pressed-bg:var(--bg-tertiary); +} +.mt-btn[data-style="outline"]{ + --btn-bg:transparent; --btn-fg:var(--text-primary); --btn-border:var(--border-strong); + --btn-hover-bg:var(--bg-tertiary); --btn-pressed-bg:var(--bg-tertiary); +} +.mt-btn[data-style="ghost"]{ + --btn-bg:transparent; --btn-fg:var(--text-primary); --btn-border:transparent; + --btn-hover-bg:var(--bg-tertiary); --btn-pressed-bg:var(--bg-tertiary); +} + +/* ===== Alert ===== */ +.mt-alert{ + display:flex; align-items:center; gap:10px; + min-height:32px; padding:6px 10px; + border:1px solid var(--alert-border); + border-radius:4px; + background:var(--alert-bg); + color:var(--alert-fg); +} +.mt-alert__icon{ width:14px; height:14px; border-radius:999px; background:var(--alert-icon); } +.mt-alert__message{ font:var(--type-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } +.mt-alert__action{ + height:22px; padding:0 10px; border-radius:3px; + border:1px solid var(--border-color); background:var(--bg-secondary); color:var(--text-primary); + font:600 11px/20px var(--font); +} +.mt-alert__dismiss{ + width:22px; height:22px; display:grid; place-items:center; + border:0; background:transparent; color:var(--text-secondary); border-radius:3px; +} +.mt-alert__action:focus-visible,.mt-alert__dismiss:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-alert[data-variant="error"] { --alert-bg:var(--alert-error-bg); --alert-border:var(--alert-error-border); --alert-fg:var(--alert-error-fg); --alert-icon:var(--alert-error-icon); } +.mt-alert[data-variant="warning"]{ --alert-bg:var(--alert-warn-bg); --alert-border:var(--alert-warn-border); --alert-fg:var(--alert-warn-fg); --alert-icon:var(--alert-warn-icon); } +.mt-alert[data-variant="success"]{ --alert-bg:var(--alert-ok-bg); --alert-border:var(--alert-ok-border); --alert-fg:var(--alert-ok-fg); --alert-icon:var(--alert-ok-icon); } +.mt-alert[data-variant="info"] { --alert-bg:var(--alert-info-bg); --alert-border:var(--alert-info-border); --alert-fg:var(--alert-info-fg); --alert-icon:var(--alert-info-icon); } + +/* ===== Breadcrumb ===== */ +.mt-breadcrumb{ font:var(--type-sm); } +.mt-breadcrumb__list{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; } +.mt-breadcrumb__sep{ color:var(--text-disabled); user-select:none; } +.mt-breadcrumb__current{ color:var(--text-primary); font-weight:600; } + +/* ===== Card ===== */ +.mt-card{ + position:relative; display:flex; flex-direction:column; overflow:hidden; + border-radius:6px; border:1px solid var(--border-color); + background:var(--bg-secondary); color:var(--text-primary); + box-shadow:var(--shadow-sm); +} +.mt-card:hover{ box-shadow:var(--shadow-lg); } +.mt-card:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-card[data-size="xs"]{ width:160px; } .mt-card[data-size="sm"]{ width:220px; } +.mt-card[data-size="md"]{ width:280px; } .mt-card[data-size="lg"]{ width:360px; } +.mt-card__media{ aspect-ratio:16/9; background:var(--bg-tertiary); } +.mt-card__media img{ width:100%; height:100%; object-fit:cover; display:block; } +.mt-card__body{ padding:10px 12px; } +.mt-card__header{ display:flex; gap:8px; align-items:flex-start; } +.mt-card__title{ font:600 var(--type-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.mt-card__subtitle{ font:var(--type-xs); color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.mt-card__menu{ width:28px; height:28px; border:0; background:transparent; color:var(--text-secondary); border-radius:4px; cursor:pointer; } +.mt-card__menu:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-card__menu:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-card[data-selected="true"]{ border-color:var(--accent-primary); } +.mt-card[data-selected="true"]::after{ + content:"✓"; position:absolute; top:8px; right:8px; + width:18px; height:18px; border-radius:999px; display:grid; place-items:center; + background:var(--accent-primary); color:var(--accent-contrast); font:700 12px/1 var(--font); +} +.mt-card[data-disabled="true"]{ background:var(--bg-tertiary); color:var(--text-disabled); box-shadow:none; opacity:.7; pointer-events:none; } + +/* ===== Carousel ===== */ +.mt-carousel__viewport{ position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; } +.mt-carousel__track{ display:flex; transition:transform 240ms ease; } +.mt-carousel__slide{ min-width:100%; display:flex; justify-content:center; padding:20px 0; } +.mt-carousel__content{ + width:70%; max-width:600px; aspect-ratio:16/9; + border-radius:6px; border:1px solid var(--border-color); + background:var(--bg-secondary); box-shadow:var(--shadow-sm); + display:grid; place-items:center; +} +.mt-carousel__nav{ + position:absolute; top:50%; transform:translateY(-50%); + width:36px; height:36px; border-radius:999px; border:0; + background:transparent; color:var(--text-secondary); cursor:pointer; +} +.mt-carousel__nav--prev{ left:12px; } .mt-carousel__nav--next{ right:12px; } +.mt-carousel__nav:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-carousel__nav:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-carousel__dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; } +.mt-carousel__dot{ width:6px; height:6px; border-radius:999px; border:0; background:var(--text-disabled); cursor:pointer; } +.mt-carousel__dot[aria-selected="true"]{ background:var(--accent-primary); transform:scale(1.2); } +.mt-carousel__dot:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Checkbox ===== */ +.mt-checkbox{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:var(--type-sm); color:var(--text-primary); } +.mt-checkbox__input{ position:absolute; opacity:0; pointer-events:none; } +.mt-checkbox__control{ + width:16px; height:16px; display:grid; place-items:center; + border-radius:3px; border:1px solid var(--border-strong); background:transparent; +} +.mt-checkbox__icon{ width:12px; height:12px; color:var(--accent-contrast); opacity:0; transform:scale(.85); transition:120ms ease; } +.mt-checkbox:hover .mt-checkbox__control{ border-color:var(--text-primary); } +.mt-checkbox__input:checked + .mt-checkbox__control{ background:var(--accent-primary); border-color:var(--accent-primary); } +.mt-checkbox__input:checked + .mt-checkbox__control .mt-checkbox__icon{ opacity:1; transform:scale(1); } +.mt-checkbox__input:focus-visible + .mt-checkbox__control{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-checkbox__input:disabled + .mt-checkbox__control{ background:var(--bg-tertiary); border-color:var(--border-color); } +.mt-checkbox__input:disabled ~ .mt-checkbox__label{ color:var(--text-disabled); cursor:not-allowed; } + +/* ===== Menu ===== */ +.mt-menu{ + min-width:180px; max-width:280px; padding:4px; + border-radius:6px; border:1px solid var(--menu-border); + background:var(--menu-bg); box-shadow:var(--menu-shadow); +} +.mt-menu__item{ + width:100%; height:32px; + display:grid; grid-template-columns:20px 1fr auto auto; align-items:center; gap:8px; + padding:0 8px; border:0; border-radius:4px; background:transparent; + color:var(--text-primary); font:var(--type-sm); text-align:left; cursor:pointer; +} +.mt-menu__icon{ color:var(--text-secondary); } +.mt-menu__shortcut,.mt-menu__submenu{ color:var(--text-secondary); font:var(--type-xs); } +.mt-menu__item:hover{ background:var(--bg-tertiary); } +.mt-menu__item:active{ background:var(--bg-tertiary); } +.mt-menu__item:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-menu__divider{ height:1px; background:var(--border-color); margin:4px 6px; } +.mt-menu__section{ padding:6px 10px 4px; font:700 11px/14px var(--font); color:var(--text-secondary); } +.mt-menu__item[aria-disabled="true"]{ color:var(--text-disabled); cursor:not-allowed; } +.mt-menu__item[aria-disabled="true"]:hover{ background:transparent; } + +/* ===== Dialog ===== */ +.mt-dialog{ position:fixed; inset:0; z-index:1100; } +.mt-dialog__scrim{ position:absolute; inset:0; background:var(--scrim); } +.mt-dialog__panel{ + position:relative; margin:10vh auto 0; + border-radius:8px; border:1px solid var(--border-color); + background:var(--bg-secondary); box-shadow:0 20px 50px rgba(0,0,0,.5); + display:flex; flex-direction:column; +} +.mt-dialog__panel[data-size="sm"]{ width:480px; } +.mt-dialog__panel[data-size="md"]{ width:600px; } +.mt-dialog__panel[data-size="lg"]{ width:680px; } +@media (max-width:720px){ .mt-dialog__panel{ width:calc(100% - 32px); } } +.mt-dialog__header{ padding:20px 24px 0; } +.mt-dialog__title{ font:700 var(--type-lg); margin:0; color:var(--text-primary); } +.mt-dialog__body{ padding:16px 24px; font:var(--type-sm); color:var(--text-primary); } +.mt-dialog__error{ padding:0 24px 8px; font:var(--type-xs); color:var(--danger); } +.mt-dialog__footer{ padding:16px 24px 20px; display:flex; justify-content:flex-end; gap:8px; } + +/* ===== Dropdown / Field ===== */ +.mt-field{ display:flex; flex-direction:column; gap:4px; } +.mt-field__label{ font:700 var(--type-xs); color:var(--text-secondary); } +.mt-field__error{ font:var(--type-xs); color:var(--danger); } +.mt-field__hint{ font:var(--type-xs); color:var(--text-secondary); } + +.mt-dropdown{ + height:32px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; + border-radius:4px; border:1px solid var(--border-color); + background:var(--bg-secondary); color:var(--text-primary); + font:var(--type-sm); cursor:pointer; +} +.mt-dropdown:hover{ border-color:var(--text-primary); } +.mt-dropdown:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-dropdown[aria-expanded="true"]{ border-color:var(--accent-primary); box-shadow:inset 0 -2px 0 var(--accent-primary); } +.mt-field[data-state="error"] .mt-dropdown{ border-color:var(--danger); } + +/* ===== Group list ===== */ +.mt-group__header{ + width:100%; display:flex; align-items:center; gap:6px; + padding:6px 8px; border:0; background:transparent; + font:700 var(--type-sm); color:var(--text-primary); + cursor:pointer; text-align:left; +} +.mt-group__header:hover:not(:disabled){ background:var(--bg-tertiary); } +.mt-group__header:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-group__chevron{ color:var(--text-secondary); transition:transform 120ms ease; } +.mt-group__header[aria-expanded="true"] .mt-group__chevron{ transform:rotate(90deg); } +.mt-group__header:disabled{ color:var(--text-disabled); cursor:not-allowed; } +.mt-group__header:disabled .mt-group__chevron{ color:var(--text-disabled); } +.mt-group__content{ padding-left:20px; } + +/* ===== Coachmark ===== */ +.mt-coachmark{ position:fixed; inset:0; z-index:1000; } +.mt-coachmark__scrim{ position:absolute; inset:0; background:var(--scrim); } +.mt-coachmark__panel{ + position:absolute; + min-width:260px; max-width:420px; + border-radius:8px; border:1px solid var(--border-color); + background:var(--bg-secondary); box-shadow:var(--shadow-lg); + padding:16px; +} +.mt-coachmark__title{ font:700 var(--type-md); margin:0 0 8px; color:var(--text-primary); } +.mt-coachmark__body{ font:var(--type-sm); color:var(--text-secondary); } +.mt-coachmark__footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } +.mt-coachmark__close{ + position:absolute; top:8px; right:8px; + width:28px; height:28px; border:0; background:transparent; + color:var(--text-secondary); border-radius:4px; cursor:pointer; +} +.mt-coachmark__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-coachmark__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Input ===== */ +.mt-input{ + height:32px; padding:0 12px; + display:flex; align-items:center; gap:8px; + border-radius:4px; + border:1px solid var(--input-border); + background:var(--input-bg); + color:var(--input-fg); +} +.mt-input[data-size="sm"]{ height:24px; padding:0 8px; } +.mt-input:hover{ border-color:var(--input-border-hover); } +.mt-input__control{ + width:100%; border:0; outline:none; background:transparent; + color:inherit; font:var(--type-sm); min-width:0; +} +.mt-input[data-size="sm"] .mt-input__control{ font:var(--type-xs); } +.mt-input__control::placeholder{ color:var(--input-placeholder); } +.mt-input:focus-within{ + border-color:var(--input-border-focus); + box-shadow: inset 0 -2px 0 var(--input-underline-focus); +} +.mt-input__control:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } +.mt-input[data-disabled="true"]{ background:var(--bg-tertiary); border-color:var(--border-color); color:var(--text-disabled); } +.mt-input__control:disabled{ cursor:not-allowed; } +.mt-input__prefix{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } +.mt-input__prefix--chip{ + height:20px; padding:0 6px; border-radius:3px; + background:var(--input-prefix-bg); color:var(--input-prefix-fg); + font:600 11px/20px var(--font); +} +.mt-input__prefix--icon{ width:16px; height:16px; border-radius:2px; background:var(--input-icon-bg); } +.mt-input__end{ + width:22px; height:22px; display:grid; place-items:center; + border:0; border-radius:3px; + background:transparent; color:var(--text-secondary); + cursor:pointer; +} +.mt-input__end:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-input__end:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-field[data-state="error"] .mt-input{ + border-color:var(--danger); + box-shadow: inset 0 -2px 0 var(--danger); +} + +/* ===== Key value pair ===== */ +.mt-kvp{ display:flex; flex-direction:column; gap:18px; } +.mt-kvp__row{ display:grid; grid-template-columns:160px 1fr; column-gap:28px; align-items:start; } +.mt-kvp__key{ + font:700 var(--type-xs); color:var(--text-secondary); + text-transform:uppercase; letter-spacing:.02em; +} +.mt-kvp__value{ display:flex; flex-direction:column; gap:6px; } +.mt-kvp__text-title{ font:600 var(--type-xs); color:var(--text-primary); } +.mt-kvp__text-sub{ font:var(--type-xs); color:var(--text-secondary); } + +/* ===== Paragraph ===== */ +.mt-paragraph{ max-width:520px; color:var(--text-primary); } +.mt-paragraph__headline{ margin:0 0 10px; font:700 var(--type-lg); color:var(--text-primary); } +.mt-paragraph__desc{ margin:0 0 18px; font:var(--type-xs); color:var(--text-secondary); } +.mt-paragraph__subhead{ margin:0 0 8px; font:700 var(--type-sm); color:var(--text-primary); } +.mt-paragraph__body{ margin:0 0 14px; font:var(--type-xs); color:var(--text-secondary); } +.mt-paragraph__meta{ margin:0; font:var(--type-xs); color:var(--text-secondary); } + +/* ===== Picker ===== */ +.mt-picker{ position:relative; } +.mt-picker__panel{ + position:absolute; top:calc(100% + 4px); left:0; width:100%; + max-height:280px; overflow:auto; + border-radius:6px; border:1px solid var(--picker-border); + background:var(--picker-bg); box-shadow:var(--picker-shadow); + padding:4px; display:none; z-index:100; +} +.mt-picker[data-open="true"] .mt-picker__panel{ display:block; } +.mt-picker__option{ + width:100%; height:40px; + display:flex; align-items:center; gap:10px; + padding:0 10px; border:0; border-radius:4px; + background:transparent; color:var(--text-primary); + font:var(--type-sm); text-align:left; cursor:pointer; +} +.mt-picker__option:hover{ background:var(--bg-tertiary); } +.mt-picker__option[data-selected="true"]{ background:var(--bg-tertiary); } +.mt-picker__option-label{ font-weight:600; } +.mt-picker__option-meta{ font:var(--type-xs); color:var(--text-secondary); } + +.mt-avatar{ + width:24px; height:24px; border-radius:999px; + background:var(--accent-primary); color:var(--accent-contrast); + font:600 11px/24px var(--font); text-align:center; +} +.mt-picker__file-icon{ width:20px; height:20px; border-radius:3px; background:var(--accent-primary); } + +/* Date */ +.mt-date__header{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px; font:600 var(--type-sm); } +.mt-date__nav{ + width:28px; height:28px; border:0; border-radius:4px; + background:transparent; color:var(--text-secondary); cursor:pointer; +} +.mt-date__nav:hover{ background:var(--bg-tertiary); } +.mt-date__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:8px; } +.mt-date__cell{ + height:32px; border:0; border-radius:4px; + background:transparent; color:var(--text-primary); + font:var(--type-xs); cursor:pointer; +} +.mt-date__cell:hover{ background:var(--bg-tertiary); } +.mt-date__cell[data-selected="true"]{ background:var(--accent-primary); color:var(--accent-contrast); } + +/* Time */ +.mt-time__row{ display:flex; gap:8px; padding:8px; } +.mt-time__input{ + flex:1; height:32px; border-radius:4px; + border:1px solid var(--border-color); background:var(--bg-secondary); + color:var(--text-primary); padding:0 8px; font:var(--type-sm); +} +.mt-time__input:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Pivot ===== */ +.mt-pivot__list{ display:flex; align-items:flex-end; gap:24px; } +.mt-pivot__tab{ + position:relative; height:32px; padding:0; + border:0; background:transparent; cursor:pointer; + font:600 var(--type-sm); + color:var(--pivot-fg); +} +.mt-pivot__tab::after{ + content:""; position:absolute; left:0; right:0; bottom:-2px; + height:2px; border-radius:2px; background:transparent; transition:120ms ease; +} +.mt-pivot__tab:hover::after{ background:var(--pivot-underline-hover); } +.mt-pivot__tab[aria-selected="true"]{ color:var(--pivot-active-fg); } +.mt-pivot__tab[aria-selected="true"]::after{ background:var(--pivot-underline-active); } +.mt-pivot__tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:4px; } + +/* ===== Progress ===== */ +.mt-progress{ display:flex; align-items:center; gap:14px; color:var(--text-primary); } +.mt-progress__spinner{ + width:16px; height:16px; border-radius:999px; + border:2px solid var(--progress-spinner-track); + border-top-color: var(--progress-spinner-head); + box-sizing:border-box; + animation: mt-spin 900ms linear infinite; +} +@keyframes mt-spin{ to{ transform:rotate(360deg); } } + +.mt-progress[data-variant="determinate"]{ align-items:flex-start; gap:16px; } +.mt-progress__text{ min-width:120px; } +.mt-progress__label{ font:600 var(--type-xs); color:var(--text-primary); margin:0 0 2px; } +.mt-progress__desc{ font:var(--type-xs); color:var(--text-secondary); margin:0; } +.mt-progress__bar{ + flex:1; min-width:220px; height:2px; border-radius:999px; + background:var(--progress-track); overflow:hidden; margin-top:8px; +} +.mt-progress__fill{ height:100%; background:var(--progress-fill); border-radius:999px; transition:width 200ms ease; } +@media (prefers-reduced-motion: reduce){ + .mt-progress__spinner{ animation:none; } + .mt-progress__fill{ transition:none; } +} + +/* ===== Radio ===== */ +.mt-radio-group{ display:flex; flex-direction:column; gap:8px; } +.mt-radio{ + display:inline-flex; align-items:center; gap:8px; + cursor:pointer; font:var(--type-sm); color:var(--text-primary); position:relative; +} +.mt-radio__input{ position:absolute; opacity:0; pointer-events:none; } +.mt-radio__control{ + width:16px; height:16px; border-radius:999px; + border:1px solid var(--radio-border); background:transparent; + position:relative; transition:120ms ease; +} +.mt-radio__control::after{ + content:""; width:8px; height:8px; border-radius:999px; + background:var(--radio-dot); + position:absolute; top:50%; left:50%; + transform:translate(-50%,-50%) scale(.6); + opacity:0; transition:120ms ease; +} +.mt-radio:hover .mt-radio__control{ border-color:var(--radio-border-hover); } +.mt-radio__input:checked + .mt-radio__control{ border-color:var(--accent-primary); } +.mt-radio__input:checked + .mt-radio__control::after{ opacity:1; transform:translate(-50%,-50%) scale(1); } +.mt-radio__input:focus-visible + .mt-radio__control{ outline:2px solid var(--focus-ring); outline-offset:3px; } +.mt-radio__input:disabled + .mt-radio__control{ border-color:var(--radio-disabled-border); background:var(--radio-disabled-bg); } +.mt-radio__input:disabled + .mt-radio__control::after{ background:var(--radio-disabled-dot); } +.mt-radio__input:disabled ~ .mt-radio__label{ color:var(--text-disabled); cursor:not-allowed; } + +/* ===== Scroll region ===== */ +.mt-scroll{ + max-height:120px; overflow:auto; + padding:10px 12px; + border:1px solid var(--border-color); + border-radius:4px; + background:var(--bg-secondary); + color:var(--text-primary); + font:var(--type-xs); + box-shadow: inset -10px 0 10px -12px var(--scroll-shadow); + scrollbar-width: thin; + scrollbar-color: var(--scroll-thumb) var(--scroll-track); +} +.mt-scroll::-webkit-scrollbar{ width:10px; height:10px; } +.mt-scroll::-webkit-scrollbar-track{ background:var(--scroll-track); border-radius:999px; } +.mt-scroll::-webkit-scrollbar-thumb{ + background:var(--scroll-thumb); border-radius:999px; + border:3px solid var(--scroll-track); +} +.mt-scroll::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); } +.mt-scroll::-webkit-scrollbar-thumb:active{ background:var(--scroll-thumb-active); } +.mt-scroll::-webkit-scrollbar-corner{ background:transparent; } + +/* ===== Search box ===== */ +.mt-search__box{ + height:32px; padding:0 10px; + display:flex; align-items:center; gap:8px; + border-radius:4px; + border:1px solid transparent; + background:var(--search-bg); + color:var(--text-primary); +} +.mt-search__icon{ width:16px; height:16px; border-radius:2px; background:var(--search-icon); flex:0 0 auto; } +.mt-search__input{ + width:100%; border:0; outline:none; background:transparent; + color:inherit; font:var(--type-sm); min-width:0; +} +.mt-search__input::placeholder{ color:var(--search-placeholder); } +.mt-search__box:focus-within{ box-shadow: inset 0 -2px 0 var(--search-underline); } +.mt-search__input:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } +.mt-search__clear{ + width:22px; height:22px; display:grid; place-items:center; + border:0; border-radius:3px; + background:transparent; color:var(--text-secondary); + cursor:pointer; flex:0 0 auto; +} +.mt-search__clear:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-search__clear:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Side panel ===== */ +.mt-sidepanel{ position:fixed; inset:0; z-index:1200; pointer-events:none; } +.mt-sidepanel__scrim{ position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity 180ms ease; } +.mt-sidepanel__panel{ + position:absolute; top:0; right:0; height:100%; + display:flex; flex-direction:column; + background:var(--bg-secondary); + border-left:1px solid var(--border-color); + box-shadow:var(--shadow-lg); + transform:translateX(100%); + transition:transform 220ms ease; + pointer-events:auto; +} +.mt-sidepanel__panel[data-size="sm"]{ width:320px; } +.mt-sidepanel__panel[data-size="md"]{ width:400px; } +.mt-sidepanel__panel[data-size="lg"]{ width:480px; } +.mt-sidepanel[data-open="true"]{ pointer-events:auto; } +.mt-sidepanel[data-open="true"] .mt-sidepanel__scrim{ opacity:1; } +.mt-sidepanel[data-open="true"] .mt-sidepanel__panel{ transform:translateX(0); } + +.mt-sidepanel__header{ + height:56px; padding:0 16px; + display:flex; align-items:center; justify-content:space-between; + border-bottom:1px solid var(--border-color); +} +.mt-sidepanel__title{ margin:0; font:700 var(--type-md); color:var(--text-primary); } +.mt-sidepanel__close{ + width:32px; height:32px; border:0; border-radius:4px; + background:transparent; color:var(--text-secondary); cursor:pointer; +} +.mt-sidepanel__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-sidepanel__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-sidepanel__body{ flex:1; overflow:auto; padding:16px; color:var(--text-primary); } +.mt-sidepanel__footer{ + padding:12px 16px; border-top:1px solid var(--border-color); + display:flex; justify-content:flex-end; gap:8px; + background:var(--bg-secondary); +} + +/* ===== Status label ===== */ +.mt-status{ display:inline-flex; align-items:center; gap:6px; font:600 var(--type-xs); color:var(--status-color); } +.mt-status__icon{ + width:14px; height:14px; display:grid; place-items:center; + font:700 10px/1 var(--font); color:currentColor; +} +.mt-status[data-variant="critical"]{ + height:18px; padding:0 8px; border-radius:3px; + background:var(--status-critical-bg); color:var(--status-critical-fg); +} +.mt-status[data-variant="critical"] .mt-status__icon{ color:var(--status-critical-fg); } +.mt-status[data-variant="error"]{ --status-color: var(--status-error); } +.mt-status[data-variant="warning"]{ --status-color: var(--status-warning); } +.mt-status[data-variant="success"]{ --status-color: var(--status-success); } +.mt-status[data-variant="info"]{ --status-color: var(--status-info); } + +/* ===== Toast ===== */ +.mt-toast-stack{ + position:fixed; bottom:16px; right:16px; + display:flex; flex-direction:column; gap:12px; + z-index:1300; +} +.mt-toast{ + width:320px; border-radius:6px; + background:var(--toast-bg); color:var(--text-primary); + border:1px solid var(--toast-border); + box-shadow:var(--shadow-lg); + display:flex; flex-direction:column; overflow:hidden; + animation: mt-toast-in 180ms ease; +} +@keyframes mt-toast-in{ from{ transform:translateY(8px); opacity:0; } to{ transform:translateY(0); opacity:1; } } +.mt-toast__header{ display:flex; align-items:flex-start; gap:10px; padding:12px 12px 8px; } +.mt-toast__avatar{ width:28px; height:28px; border-radius:999px; background:var(--accent-primary); flex:0 0 auto; } +.mt-toast__meta{ flex:1; min-width:0; } +.mt-toast__title{ font:600 var(--type-sm); color:var(--text-primary); } +.mt-toast__subtitle{ font:var(--type-xs); color:var(--text-secondary); } +.mt-toast__close{ + width:28px; height:28px; border:0; background:transparent; + border-radius:4px; color:var(--text-secondary); cursor:pointer; +} +.mt-toast__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-toast__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-toast__body{ padding:0 12px 10px; } +.mt-toast__message{ font:var(--type-xs); color:var(--text-secondary); } +.mt-toast__reply{ display:flex; align-items:center; gap:6px; padding:8px 10px 10px; border-top:1px solid var(--border-color); } +.mt-toast__input{ + flex:1; height:28px; border-radius:4px; + border:1px solid var(--border-color); background:var(--bg-secondary); + color:var(--text-primary); padding:0 8px; font:var(--type-xs); +} +.mt-toast__input:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-toast__send{ + width:28px; height:28px; border:0; border-radius:4px; + background:var(--accent-primary); color:var(--accent-contrast); cursor:pointer; +} +.mt-toast__send:hover{ background:var(--accent-secondary); } +.mt-toast[data-variant="accent"]{ background:var(--accent-primary); color:var(--accent-contrast); border-color:var(--accent-primary); } +.mt-toast[data-variant="accent"] .mt-toast__subtitle, +.mt-toast[data-variant="accent"] .mt-toast__message{ color:rgba(255,255,255,.9); } +.mt-toast[data-variant="accent"] .mt-toast__close{ color:rgba(255,255,255,.8); } + +/* ===== Toggle ===== */ +.mt-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; color:var(--text-primary); } +.mt-toggle__input{ position:absolute; opacity:0; pointer-events:none; } +.mt-toggle__track{ + width:28px; height:16px; border-radius:999px; + background:var(--toggle-track-off); + border:1px solid var(--toggle-border-off); + position:relative; transition:120ms ease; box-sizing:border-box; +} +.mt-toggle__thumb{ + width:12px; height:12px; border-radius:999px; + background:var(--toggle-thumb); + position:absolute; top:1px; left:1px; + transition:120ms ease; +} +.mt-toggle__input:checked + .mt-toggle__track{ + background:var(--toggle-track-on); + border-color:var(--toggle-border-on); +} +.mt-toggle__input:checked + .mt-toggle__track .mt-toggle__thumb{ transform:translateX(12px); } + +.mt-toggle:hover .mt-toggle__track{ background:var(--toggle-track-off-hover); border-color:var(--toggle-border-off-hover); } +.mt-toggle:hover .mt-toggle__input:checked + .mt-toggle__track{ background:var(--toggle-track-on-hover); border-color:var(--toggle-border-on-hover); } +.mt-toggle:active .mt-toggle__track{ background:var(--toggle-track-off-pressed); border-color:var(--toggle-border-off-pressed); } +.mt-toggle:active .mt-toggle__input:checked + .mt-toggle__track{ background:var(--toggle-track-on-pressed); border-color:var(--toggle-border-on-pressed); } +.mt-toggle__input:focus-visible + .mt-toggle__track{ outline:2px solid var(--focus-ring); outline-offset:3px; } +.mt-toggle__input:disabled + .mt-toggle__track{ background:var(--toggle-track-disabled); border-color:var(--toggle-border-disabled); } +.mt-toggle__input:disabled + .mt-toggle__track .mt-toggle__thumb{ background:var(--toggle-thumb-disabled); } +.mt-toggle__input:disabled ~ .mt-toggle__label{ color:var(--text-disabled); } + +/* ===== Tooltip ===== */ +.mt-tooltip{ + position:absolute; z-index:1400; + max-width:220px; + padding:6px 8px; + border-radius:4px; + font:var(--type-xs); + white-space:nowrap; + background:var(--tooltip-bg); + color:var(--tooltip-fg); + box-shadow:var(--tooltip-shadow); + opacity:0; + transform:translateY(2px); + pointer-events:none; + transition:opacity 120ms ease, transform 120ms ease; +} +.mt-tooltip[data-open="true"]{ opacity:1; transform:translateY(0); } +.mt-tooltip::after{ + content:""; + position:absolute; + width:8px; height:8px; + background:var(--tooltip-bg); + transform:rotate(45deg); +} +.mt-tooltip[data-placement="top"]::after{ bottom:-4px; left:50%; transform:translateX(-50%) rotate(45deg); } +.mt-tooltip[data-placement="bottom"]::after{ top:-4px; left:50%; transform:translateX(-50%) rotate(45deg); } +.mt-tooltip[data-placement="left"]::after{ right:-4px; top:50%; transform:translateY(-50%) rotate(45deg); } +.mt-tooltip[data-placement="right"]::after{ left:-4px; top:50%; transform:translateY(-50%) rotate(45deg); } diff --git a/teams-default-themes/teams-light.v1.css b/teams-default-themes/teams-light.v1.css index 0c2ae0d..3a8cd4e 100644 --- a/teams-default-themes/teams-light.v1.css +++ b/teams-default-themes/teams-light.v1.css @@ -1,19 +1,137 @@ :root { + /* ---- Core palette ---- */ --bg-primary: #ffffff; --bg-secondary: #F7F7F7; --bg-tertiary: #F3F2F1; --accent-primary: #6264A7; --accent-secondary: #585A96; --accent-tertiary: #4F5187; + --accent-contrast: #ffffff; --accent-glow: rgba(98,100,167,0.15); --text-primary: #252423; --text-secondary: #605E5C; + --text-disabled: #A19F9D; --border-color: #E1DFDD; + --border-strong: #C8C6C4; + --danger: #D13438; + --focus-ring: #6264A7; + --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); + --shadow-lg: 0 6px 18px rgba(0,0,0,0.18); + --scrim: rgba(0,0,0,0.5); + + /* ---- Typography ---- */ + --font: "Segoe UI", system-ui, -apple-system, sans-serif; + --type-xs: 12px/16px var(--font); + --type-sm: 13px/20px var(--font); + --type-md: 16px/22px var(--font); + --type-lg: 18px/24px var(--font); + + /* ---- Shell layout ---- */ --header-min-height: 58px; --header-padding-vertical: 14px; --header-padding-horizontal: 20px; --header-line-height: 1.25; -} + + /* ---- Menu ---- */ + --menu-bg: #ffffff; + --menu-border: #E1DFDD; + --menu-shadow: 0 6px 18px rgba(0,0,0,0.18); + + /* ---- Alert ---- */ + --alert-error-bg: #FCF4F6; --alert-error-border: #F3D6DC; --alert-error-fg: #A4262C; --alert-error-icon: #A4262C; + --alert-warn-bg: #FBF6D9; --alert-warn-border: #F2E2A5; --alert-warn-fg: #8A6A00; --alert-warn-icon: #8A6A00; + --alert-ok-bg: #E7F2DA; --alert-ok-border: #CDE6B3; --alert-ok-fg: #107C10; --alert-ok-icon: #107C10; + --alert-info-bg: #F5F5F5; --alert-info-border: #E1DFDD; --alert-info-fg: #252423; --alert-info-icon: #605E5C; + + /* ---- Input ---- */ + --input-bg: #ffffff; + --input-fg: var(--text-primary); + --input-border: var(--border-color); + --input-border-hover: var(--border-strong); + --input-border-focus: var(--accent-primary); + --input-underline-focus: var(--accent-primary); + --input-placeholder: var(--text-disabled); + --input-prefix-bg: var(--accent-primary); + --input-prefix-fg: var(--accent-contrast); + --input-icon-bg: #605E5C; + + /* ---- Picker ---- */ + --picker-bg: #ffffff; + --picker-border: var(--border-color); + --picker-shadow: 0 8px 24px rgba(0,0,0,0.18); + + /* ---- Pivot ---- */ + --pivot-fg: var(--text-secondary); + --pivot-active-fg: var(--accent-primary); + --pivot-underline-active: var(--accent-primary); + --pivot-underline-hover: #C8C6C4; + + /* ---- Progress ---- */ + --progress-track: #E1DFDD; + --progress-fill: var(--accent-primary); + --progress-spinner-track: #E1DFDD; + --progress-spinner-head: var(--accent-primary); + + /* ---- Radio ---- */ + --radio-border: #C8C6C4; + --radio-border-hover: #605E5C; + --radio-dot: var(--accent-primary); + --radio-disabled-border: #E1DFDD; + --radio-disabled-bg: #F3F2F1; + --radio-disabled-dot: #C8C6C4; + + /* ---- Scroll ---- */ + --scroll-track: transparent; + --scroll-thumb: #C8C6C4; + --scroll-thumb-hover: #A19F9D; + --scroll-thumb-active: #8A8886; + --scroll-shadow: rgba(0,0,0,0.18); + + /* ---- Search ---- */ + --search-bg: #F3F2F1; + --search-icon: #605E5C; + --search-placeholder: #A19F9D; + --search-underline: var(--accent-primary); + + /* ---- Status ---- */ + --status-critical-bg: #C4314B; + --status-critical-fg: #ffffff; + --status-error: #C4314B; + --status-warning: #986F0B; + --status-success: #107C10; + --status-info: var(--text-secondary); + + /* ---- Toast ---- */ + --toast-bg: #ffffff; + --toast-border: var(--border-color); + + /* ---- Toggle ---- */ + --toggle-track-off: #FFFFFF; + --toggle-border-off: #8A8886; + --toggle-thumb: #8A8886; + --toggle-track-off-hover: #FFFFFF; + --toggle-border-off-hover: #605E5C; + --toggle-track-off-pressed: #FFFFFF; + --toggle-border-off-pressed: #252423; + --toggle-track-on: var(--accent-primary); + --toggle-border-on: var(--accent-primary); + --toggle-track-on-hover: var(--accent-secondary); + --toggle-border-on-hover: var(--accent-secondary); + --toggle-track-on-pressed: var(--accent-tertiary); + --toggle-border-on-pressed: var(--accent-tertiary); + --toggle-track-disabled: #F3F2F1; + --toggle-border-disabled: #E1DFDD; + --toggle-thumb-disabled: #C8C6C4; + + /* ---- Tooltip ---- */ + --tooltip-bg: #323130; + --tooltip-fg: #ffffff; + --tooltip-shadow: 0 6px 16px rgba(0,0,0,0.25); +} + +/* ================================================================ + SHELL STYLES + ================================================================ */ * { margin: 0; @@ -22,7 +140,7 @@ } body { - font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; + font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); height: 100vh; @@ -53,7 +171,7 @@ body { background: var(--accent-primary); color: #fff; border-radius: 6px; - box-shadow: 0 1px 2px rgba(0,0,0,0.08); + box-shadow: var(--shadow-sm); letter-spacing: 1px; font-weight: 700; } @@ -147,7 +265,7 @@ form { } .chat-input::placeholder { - color: #A19F9D; + color: var(--text-disabled); } .chat-submit { @@ -221,18 +339,18 @@ form { } ::-webkit-scrollbar-track { - background: transparent; + background: var(--scroll-track); border-radius: 10px; } ::-webkit-scrollbar-thumb { - background: #C8C6C4; + background: var(--scroll-thumb); border-radius: 10px; border: 3px solid var(--bg-primary); } ::-webkit-scrollbar-thumb:hover { - background: #A19F9D; + background: var(--scroll-thumb-hover); } ::-webkit-scrollbar-corner { @@ -241,7 +359,7 @@ form { * { scrollbar-width: thin; - scrollbar-color: #C8C6C4 transparent; + scrollbar-color: var(--scroll-thumb) transparent; } /* ---- Chat Toggle ---- */ @@ -300,7 +418,7 @@ body.chat-collapsed .chat-toggle { .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.5); + background: var(--scrim); display: none; align-items: center; justify-content: center; @@ -316,7 +434,7 @@ body.chat-collapsed .chat-toggle { border-radius: 8px; width: 90%; max-width: 450px; - box-shadow: 0 6px 18px rgba(0,0,0,0.18); + box-shadow: var(--shadow-lg); overflow: hidden; } @@ -368,7 +486,7 @@ body.chat-collapsed .chat-toggle { .form-input:focus { border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } .form-input:read-only { opacity: 0.7; cursor: not-allowed; } -.form-input::placeholder { color: #A19F9D; } +.form-input::placeholder { color: var(--text-disabled); } .checkbox-label { display: flex; @@ -409,14 +527,14 @@ body.chat-collapsed .chat-toggle { .modal-btn-secondary { background: var(--bg-secondary); color: var(--text-primary); - border: 1px solid #C8C6C4; + border: 1px solid var(--border-strong); } .modal-btn-secondary:hover { background: var(--bg-tertiary); } -.modal-btn-danger { background: #D13438; color: white; } +.modal-btn-danger { background: var(--danger); color: white; } .modal-btn-danger:hover { background: #A4262C; @@ -540,7 +658,7 @@ body.chat-collapsed .chat-toggle { } .brainstorm-input:focus { border-color: var(--accent-primary); } -.brainstorm-input::placeholder { color: #A19F9D; } +.brainstorm-input::placeholder { color: var(--text-disabled); } .brainstorm-send-btn { padding: 10px 20px; @@ -660,3 +778,639 @@ body.chat-collapsed .chat-toggle { #loadingOverlay { position: absolute; } .chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .chat-input:disabled { opacity: 0.5; cursor: not-allowed; } + + +/* ================================================================ + TEAMS UI KIT — COMPONENT STYLES + ================================================================ */ + +/* ===== Hyperlink ===== */ +.mt-link{ color:var(--accent-primary); text-decoration:none; cursor:pointer; font:inherit; } +.mt-link:hover{ color:var(--accent-secondary); text-decoration:underline; } +.mt-link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } +.mt-link[aria-disabled="true"]{ color:var(--text-disabled); pointer-events:none; cursor:default; text-decoration:none; } +.mt-link--truncate{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } + +/* ===== Button ===== */ +.mt-btn{ + display:inline-flex; align-items:center; justify-content:center; gap:6px; + border-radius:4px; border:1px solid var(--btn-border); + background:var(--btn-bg); color:var(--btn-fg); + font:600 var(--type-sm); + height:32px; padding:0 12px; + cursor:pointer; user-select:none; +} +.mt-btn[data-size="sm"]{ height:24px; padding:0 8px; font:600 var(--type-xs); } +.mt-btn:hover:not(:disabled){ background:var(--btn-hover-bg); } +.mt-btn:active:not(:disabled){ background:var(--btn-pressed-bg); } +.mt-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-btn:disabled{ background:var(--bg-tertiary); color:var(--text-disabled); border-color:var(--bg-tertiary); cursor:not-allowed; } +.mt-btn[data-icon-only]{ width:32px; padding:0; } +.mt-btn[data-icon-only][data-size="sm"]{ width:24px; } +.mt-btn-group{ display:inline-flex; } +.mt-btn--split{ width:32px; padding:0; } + +.mt-btn[data-style="accent"]{ + --btn-bg:var(--accent-primary); --btn-fg:var(--accent-contrast); --btn-border:var(--accent-primary); + --btn-hover-bg:var(--accent-secondary); --btn-pressed-bg:var(--accent-tertiary); +} +.mt-btn[data-style="neutral"]{ + --btn-bg:var(--bg-primary); --btn-fg:var(--text-primary); --btn-border:var(--border-color); + --btn-hover-bg:var(--bg-tertiary); --btn-pressed-bg:var(--bg-tertiary); +} +.mt-btn[data-style="outline"]{ + --btn-bg:transparent; --btn-fg:var(--text-primary); --btn-border:var(--border-strong); + --btn-hover-bg:var(--bg-tertiary); --btn-pressed-bg:var(--bg-tertiary); +} +.mt-btn[data-style="ghost"]{ + --btn-bg:transparent; --btn-fg:var(--text-primary); --btn-border:transparent; + --btn-hover-bg:var(--bg-tertiary); --btn-pressed-bg:var(--bg-tertiary); +} + +/* ===== Alert ===== */ +.mt-alert{ + display:flex; align-items:center; gap:10px; + min-height:32px; padding:6px 10px; + border:1px solid var(--alert-border); + border-radius:4px; + background:var(--alert-bg); + color:var(--alert-fg); +} +.mt-alert__icon{ width:14px; height:14px; border-radius:999px; background:var(--alert-icon); } +.mt-alert__message{ font:var(--type-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } +.mt-alert__action{ + height:22px; padding:0 10px; border-radius:3px; + border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-primary); + font:600 11px/20px var(--font); +} +.mt-alert__dismiss{ + width:22px; height:22px; display:grid; place-items:center; + border:0; background:transparent; color:var(--text-secondary); border-radius:3px; +} +.mt-alert__action:focus-visible,.mt-alert__dismiss:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-alert[data-variant="error"] { --alert-bg:var(--alert-error-bg); --alert-border:var(--alert-error-border); --alert-fg:var(--alert-error-fg); --alert-icon:var(--alert-error-icon); } +.mt-alert[data-variant="warning"]{ --alert-bg:var(--alert-warn-bg); --alert-border:var(--alert-warn-border); --alert-fg:var(--alert-warn-fg); --alert-icon:var(--alert-warn-icon); } +.mt-alert[data-variant="success"]{ --alert-bg:var(--alert-ok-bg); --alert-border:var(--alert-ok-border); --alert-fg:var(--alert-ok-fg); --alert-icon:var(--alert-ok-icon); } +.mt-alert[data-variant="info"] { --alert-bg:var(--alert-info-bg); --alert-border:var(--alert-info-border); --alert-fg:var(--alert-info-fg); --alert-icon:var(--alert-info-icon); } + +/* ===== Breadcrumb ===== */ +.mt-breadcrumb{ font:var(--type-sm); } +.mt-breadcrumb__list{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; } +.mt-breadcrumb__sep{ color:var(--text-disabled); user-select:none; } +.mt-breadcrumb__current{ color:var(--text-primary); font-weight:600; } + +/* ===== Card ===== */ +.mt-card{ + position:relative; display:flex; flex-direction:column; overflow:hidden; + border-radius:6px; border:1px solid var(--border-color); + background:var(--bg-primary); color:var(--text-primary); + box-shadow:var(--shadow-sm); +} +.mt-card:hover{ box-shadow:var(--shadow-lg); } +.mt-card:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-card[data-size="xs"]{ width:160px; } .mt-card[data-size="sm"]{ width:220px; } +.mt-card[data-size="md"]{ width:280px; } .mt-card[data-size="lg"]{ width:360px; } +.mt-card__media{ aspect-ratio:16/9; background:var(--bg-secondary); } +.mt-card__media img{ width:100%; height:100%; object-fit:cover; display:block; } +.mt-card__body{ padding:10px 12px; } +.mt-card__header{ display:flex; gap:8px; align-items:flex-start; } +.mt-card__title{ font:600 var(--type-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.mt-card__subtitle{ font:var(--type-xs); color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.mt-card__menu{ width:28px; height:28px; border:0; background:transparent; color:var(--text-secondary); border-radius:4px; cursor:pointer; } +.mt-card__menu:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-card__menu:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-card[data-selected="true"]{ border-color:var(--accent-primary); } +.mt-card[data-selected="true"]::after{ + content:"✓"; position:absolute; top:8px; right:8px; + width:18px; height:18px; border-radius:999px; display:grid; place-items:center; + background:var(--accent-primary); color:var(--accent-contrast); font:700 12px/1 var(--font); +} +.mt-card[data-disabled="true"]{ background:var(--bg-tertiary); color:var(--text-disabled); box-shadow:none; opacity:.7; pointer-events:none; } + +/* ===== Carousel ===== */ +.mt-carousel__viewport{ position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; } +.mt-carousel__track{ display:flex; transition:transform 240ms ease; } +.mt-carousel__slide{ min-width:100%; display:flex; justify-content:center; padding:20px 0; } +.mt-carousel__content{ + width:70%; max-width:600px; aspect-ratio:16/9; + border-radius:6px; border:1px solid var(--border-color); + background:var(--bg-primary); box-shadow:var(--shadow-sm); + display:grid; place-items:center; +} +.mt-carousel__nav{ + position:absolute; top:50%; transform:translateY(-50%); + width:36px; height:36px; border-radius:999px; border:0; + background:transparent; color:var(--text-secondary); cursor:pointer; +} +.mt-carousel__nav--prev{ left:12px; } .mt-carousel__nav--next{ right:12px; } +.mt-carousel__nav:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-carousel__nav:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-carousel__dots{ display:flex; justify-content:center; gap:6px; margin-top:8px; } +.mt-carousel__dot{ width:6px; height:6px; border-radius:999px; border:0; background:var(--text-disabled); cursor:pointer; } +.mt-carousel__dot[aria-selected="true"]{ background:var(--accent-primary); transform:scale(1.2); } +.mt-carousel__dot:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Checkbox ===== */ +.mt-checkbox{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:var(--type-sm); color:var(--text-primary); } +.mt-checkbox__input{ position:absolute; opacity:0; pointer-events:none; } +.mt-checkbox__control{ + width:16px; height:16px; display:grid; place-items:center; + border-radius:3px; border:1px solid var(--border-strong); background:transparent; +} +.mt-checkbox__icon{ width:12px; height:12px; color:var(--accent-contrast); opacity:0; transform:scale(.85); transition:120ms ease; } +.mt-checkbox:hover .mt-checkbox__control{ border-color:var(--text-primary); } +.mt-checkbox__input:checked + .mt-checkbox__control{ background:var(--accent-primary); border-color:var(--accent-primary); } +.mt-checkbox__input:checked + .mt-checkbox__control .mt-checkbox__icon{ opacity:1; transform:scale(1); } +.mt-checkbox__input:focus-visible + .mt-checkbox__control{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-checkbox__input:disabled + .mt-checkbox__control{ background:var(--bg-tertiary); border-color:var(--border-color); } +.mt-checkbox__input:disabled ~ .mt-checkbox__label{ color:var(--text-disabled); cursor:not-allowed; } + +/* ===== Menu ===== */ +.mt-menu{ + min-width:180px; max-width:280px; padding:4px; + border-radius:6px; border:1px solid var(--menu-border); + background:var(--menu-bg); box-shadow:var(--menu-shadow); +} +.mt-menu__item{ + width:100%; height:32px; + display:grid; grid-template-columns:20px 1fr auto auto; align-items:center; gap:8px; + padding:0 8px; border:0; border-radius:4px; background:transparent; + color:var(--text-primary); font:var(--type-sm); text-align:left; cursor:pointer; +} +.mt-menu__icon{ color:var(--text-secondary); } +.mt-menu__shortcut,.mt-menu__submenu{ color:var(--text-secondary); font:var(--type-xs); } +.mt-menu__item:hover{ background:var(--bg-tertiary); } +.mt-menu__item:active{ background:var(--bg-tertiary); } +.mt-menu__item:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-menu__divider{ height:1px; background:var(--border-color); margin:4px 6px; } +.mt-menu__section{ padding:6px 10px 4px; font:700 11px/14px var(--font); color:var(--text-secondary); } +.mt-menu__item[aria-disabled="true"]{ color:var(--text-disabled); cursor:not-allowed; } +.mt-menu__item[aria-disabled="true"]:hover{ background:transparent; } + +/* ===== Dialog ===== */ +.mt-dialog{ position:fixed; inset:0; z-index:1100; } +.mt-dialog__scrim{ position:absolute; inset:0; background:var(--scrim); } +.mt-dialog__panel{ + position:relative; margin:10vh auto 0; + border-radius:8px; border:1px solid var(--border-color); + background:var(--bg-primary); box-shadow:0 20px 50px rgba(0,0,0,.35); + display:flex; flex-direction:column; +} +.mt-dialog__panel[data-size="sm"]{ width:480px; } +.mt-dialog__panel[data-size="md"]{ width:600px; } +.mt-dialog__panel[data-size="lg"]{ width:680px; } +@media (max-width:720px){ .mt-dialog__panel{ width:calc(100% - 32px); } } +.mt-dialog__header{ padding:20px 24px 0; } +.mt-dialog__title{ font:700 var(--type-lg); margin:0; color:var(--text-primary); } +.mt-dialog__body{ padding:16px 24px; font:var(--type-sm); color:var(--text-primary); } +.mt-dialog__error{ padding:0 24px 8px; font:var(--type-xs); color:var(--danger); } +.mt-dialog__footer{ padding:16px 24px 20px; display:flex; justify-content:flex-end; gap:8px; } + +/* ===== Dropdown / Field ===== */ +.mt-field{ display:flex; flex-direction:column; gap:4px; } +.mt-field__label{ font:700 var(--type-xs); color:var(--text-secondary); } +.mt-field__error{ font:var(--type-xs); color:var(--danger); } +.mt-field__hint{ font:var(--type-xs); color:var(--text-secondary); } + +.mt-dropdown{ + height:32px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; + border-radius:4px; border:1px solid var(--border-color); + background:var(--bg-primary); color:var(--text-primary); + font:var(--type-sm); cursor:pointer; +} +.mt-dropdown:hover{ border-color:var(--text-primary); } +.mt-dropdown:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-dropdown[aria-expanded="true"]{ border-color:var(--accent-primary); box-shadow:inset 0 -2px 0 var(--accent-primary); } +.mt-field[data-state="error"] .mt-dropdown{ border-color:var(--danger); } + +/* ===== Group list ===== */ +.mt-group__header{ + width:100%; display:flex; align-items:center; gap:6px; + padding:6px 8px; border:0; background:transparent; + font:700 var(--type-sm); color:var(--text-primary); + cursor:pointer; text-align:left; +} +.mt-group__header:hover:not(:disabled){ background:var(--bg-tertiary); } +.mt-group__header:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-group__chevron{ color:var(--text-secondary); transition:transform 120ms ease; } +.mt-group__header[aria-expanded="true"] .mt-group__chevron{ transform:rotate(90deg); } +.mt-group__header:disabled{ color:var(--text-disabled); cursor:not-allowed; } +.mt-group__header:disabled .mt-group__chevron{ color:var(--text-disabled); } +.mt-group__content{ padding-left:20px; } + +/* ===== Coachmark ===== */ +.mt-coachmark{ position:fixed; inset:0; z-index:1000; } +.mt-coachmark__scrim{ position:absolute; inset:0; background:var(--scrim); } +.mt-coachmark__panel{ + position:absolute; + min-width:260px; max-width:420px; + border-radius:8px; border:1px solid var(--border-color); + background:var(--bg-primary); box-shadow:var(--shadow-lg); + padding:16px; +} +.mt-coachmark__title{ font:700 var(--type-md); margin:0 0 8px; color:var(--text-primary); } +.mt-coachmark__body{ font:var(--type-sm); color:var(--text-secondary); } +.mt-coachmark__footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } +.mt-coachmark__close{ + position:absolute; top:8px; right:8px; + width:28px; height:28px; border:0; background:transparent; + color:var(--text-secondary); border-radius:4px; cursor:pointer; +} +.mt-coachmark__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-coachmark__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Input ===== */ +.mt-input{ + height:32px; padding:0 12px; + display:flex; align-items:center; gap:8px; + border-radius:4px; + border:1px solid var(--input-border); + background:var(--input-bg); + color:var(--input-fg); +} +.mt-input[data-size="sm"]{ height:24px; padding:0 8px; } +.mt-input:hover{ border-color:var(--input-border-hover); } +.mt-input__control{ + width:100%; border:0; outline:none; background:transparent; + color:inherit; font:var(--type-sm); min-width:0; +} +.mt-input[data-size="sm"] .mt-input__control{ font:var(--type-xs); } +.mt-input__control::placeholder{ color:var(--input-placeholder); } +.mt-input:focus-within{ + border-color:var(--input-border-focus); + box-shadow: inset 0 -2px 0 var(--input-underline-focus); +} +.mt-input__control:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } +.mt-input[data-disabled="true"]{ background:var(--bg-tertiary); border-color:var(--border-color); color:var(--text-disabled); } +.mt-input__control:disabled{ cursor:not-allowed; } +.mt-input__prefix{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } +.mt-input__prefix--chip{ + height:20px; padding:0 6px; border-radius:3px; + background:var(--input-prefix-bg); color:var(--input-prefix-fg); + font:600 11px/20px var(--font); +} +.mt-input__prefix--icon{ width:16px; height:16px; border-radius:2px; background:var(--input-icon-bg); } +.mt-input__end{ + width:22px; height:22px; display:grid; place-items:center; + border:0; border-radius:3px; + background:transparent; color:var(--text-secondary); + cursor:pointer; +} +.mt-input__end:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-input__end:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-field[data-state="error"] .mt-input{ + border-color:var(--danger); + box-shadow: inset 0 -2px 0 var(--danger); +} + +/* ===== Key value pair ===== */ +.mt-kvp{ display:flex; flex-direction:column; gap:18px; } +.mt-kvp__row{ display:grid; grid-template-columns:160px 1fr; column-gap:28px; align-items:start; } +.mt-kvp__key{ + font:700 var(--type-xs); color:var(--text-secondary); + text-transform:uppercase; letter-spacing:.02em; +} +.mt-kvp__value{ display:flex; flex-direction:column; gap:6px; } +.mt-kvp__text-title{ font:600 var(--type-xs); color:var(--text-primary); } +.mt-kvp__text-sub{ font:var(--type-xs); color:var(--text-secondary); } + +/* ===== Paragraph ===== */ +.mt-paragraph{ max-width:520px; color:var(--text-primary); } +.mt-paragraph__headline{ margin:0 0 10px; font:700 var(--type-lg); color:var(--text-primary); } +.mt-paragraph__desc{ margin:0 0 18px; font:var(--type-xs); color:var(--text-secondary); } +.mt-paragraph__subhead{ margin:0 0 8px; font:700 var(--type-sm); color:var(--text-primary); } +.mt-paragraph__body{ margin:0 0 14px; font:var(--type-xs); color:var(--text-secondary); } +.mt-paragraph__meta{ margin:0; font:var(--type-xs); color:var(--text-secondary); } + +/* ===== Picker ===== */ +.mt-picker{ position:relative; } +.mt-picker__panel{ + position:absolute; top:calc(100% + 4px); left:0; width:100%; + max-height:280px; overflow:auto; + border-radius:6px; border:1px solid var(--picker-border); + background:var(--picker-bg); box-shadow:var(--picker-shadow); + padding:4px; display:none; z-index:100; +} +.mt-picker[data-open="true"] .mt-picker__panel{ display:block; } +.mt-picker__option{ + width:100%; height:40px; + display:flex; align-items:center; gap:10px; + padding:0 10px; border:0; border-radius:4px; + background:transparent; color:var(--text-primary); + font:var(--type-sm); text-align:left; cursor:pointer; +} +.mt-picker__option:hover{ background:var(--bg-tertiary); } +.mt-picker__option[data-selected="true"]{ background:var(--bg-tertiary); } +.mt-picker__option-label{ font-weight:600; } +.mt-picker__option-meta{ font:var(--type-xs); color:var(--text-secondary); } + +.mt-avatar{ + width:24px; height:24px; border-radius:999px; + background:var(--accent-primary); color:var(--accent-contrast); + font:600 11px/24px var(--font); text-align:center; +} +.mt-picker__file-icon{ width:20px; height:20px; border-radius:3px; background:var(--accent-primary); } + +/* Date */ +.mt-date__header{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px; font:600 var(--type-sm); } +.mt-date__nav{ + width:28px; height:28px; border:0; border-radius:4px; + background:transparent; color:var(--text-secondary); cursor:pointer; +} +.mt-date__nav:hover{ background:var(--bg-tertiary); } +.mt-date__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:8px; } +.mt-date__cell{ + height:32px; border:0; border-radius:4px; + background:transparent; color:var(--text-primary); + font:var(--type-xs); cursor:pointer; +} +.mt-date__cell:hover{ background:var(--bg-tertiary); } +.mt-date__cell[data-selected="true"]{ background:var(--accent-primary); color:var(--accent-contrast); } + +/* Time */ +.mt-time__row{ display:flex; gap:8px; padding:8px; } +.mt-time__input{ + flex:1; height:32px; border-radius:4px; + border:1px solid var(--border-color); background:var(--bg-primary); + color:var(--text-primary); padding:0 8px; font:var(--type-sm); +} +.mt-time__input:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Pivot ===== */ +.mt-pivot__list{ display:flex; align-items:flex-end; gap:24px; } +.mt-pivot__tab{ + position:relative; height:32px; padding:0; + border:0; background:transparent; cursor:pointer; + font:600 var(--type-sm); + color:var(--pivot-fg); +} +.mt-pivot__tab::after{ + content:""; position:absolute; left:0; right:0; bottom:-2px; + height:2px; border-radius:2px; background:transparent; transition:120ms ease; +} +.mt-pivot__tab:hover::after{ background:var(--pivot-underline-hover); } +.mt-pivot__tab[aria-selected="true"]{ color:var(--pivot-active-fg); } +.mt-pivot__tab[aria-selected="true"]::after{ background:var(--pivot-underline-active); } +.mt-pivot__tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:4px; } + +/* ===== Progress ===== */ +.mt-progress{ display:flex; align-items:center; gap:14px; color:var(--text-primary); } +.mt-progress__spinner{ + width:16px; height:16px; border-radius:999px; + border:2px solid var(--progress-spinner-track); + border-top-color: var(--progress-spinner-head); + box-sizing:border-box; + animation: mt-spin 900ms linear infinite; +} +@keyframes mt-spin{ to{ transform:rotate(360deg); } } + +.mt-progress[data-variant="determinate"]{ align-items:flex-start; gap:16px; } +.mt-progress__text{ min-width:120px; } +.mt-progress__label{ font:600 var(--type-xs); color:var(--text-primary); margin:0 0 2px; } +.mt-progress__desc{ font:var(--type-xs); color:var(--text-secondary); margin:0; } +.mt-progress__bar{ + flex:1; min-width:220px; height:2px; border-radius:999px; + background:var(--progress-track); overflow:hidden; margin-top:8px; +} +.mt-progress__fill{ height:100%; background:var(--progress-fill); border-radius:999px; transition:width 200ms ease; } +@media (prefers-reduced-motion: reduce){ + .mt-progress__spinner{ animation:none; } + .mt-progress__fill{ transition:none; } +} + +/* ===== Radio ===== */ +.mt-radio-group{ display:flex; flex-direction:column; gap:8px; } +.mt-radio{ + display:inline-flex; align-items:center; gap:8px; + cursor:pointer; font:var(--type-sm); color:var(--text-primary); position:relative; +} +.mt-radio__input{ position:absolute; opacity:0; pointer-events:none; } +.mt-radio__control{ + width:16px; height:16px; border-radius:999px; + border:1px solid var(--radio-border); background:transparent; + position:relative; transition:120ms ease; +} +.mt-radio__control::after{ + content:""; width:8px; height:8px; border-radius:999px; + background:var(--radio-dot); + position:absolute; top:50%; left:50%; + transform:translate(-50%,-50%) scale(.6); + opacity:0; transition:120ms ease; +} +.mt-radio:hover .mt-radio__control{ border-color:var(--radio-border-hover); } +.mt-radio__input:checked + .mt-radio__control{ border-color:var(--accent-primary); } +.mt-radio__input:checked + .mt-radio__control::after{ opacity:1; transform:translate(-50%,-50%) scale(1); } +.mt-radio__input:focus-visible + .mt-radio__control{ outline:2px solid var(--focus-ring); outline-offset:3px; } +.mt-radio__input:disabled + .mt-radio__control{ border-color:var(--radio-disabled-border); background:var(--radio-disabled-bg); } +.mt-radio__input:disabled + .mt-radio__control::after{ background:var(--radio-disabled-dot); } +.mt-radio__input:disabled ~ .mt-radio__label{ color:var(--text-disabled); cursor:not-allowed; } + +/* ===== Scroll region ===== */ +.mt-scroll{ + max-height:120px; overflow:auto; + padding:10px 12px; + border:1px solid var(--border-color); + border-radius:4px; + background:var(--bg-primary); + color:var(--text-primary); + font:var(--type-xs); + box-shadow: inset -10px 0 10px -12px var(--scroll-shadow); + scrollbar-width: thin; + scrollbar-color: var(--scroll-thumb) var(--scroll-track); +} +.mt-scroll::-webkit-scrollbar{ width:10px; height:10px; } +.mt-scroll::-webkit-scrollbar-track{ background:var(--scroll-track); border-radius:999px; } +.mt-scroll::-webkit-scrollbar-thumb{ + background:var(--scroll-thumb); border-radius:999px; + border:3px solid var(--scroll-track); +} +.mt-scroll::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); } +.mt-scroll::-webkit-scrollbar-thumb:active{ background:var(--scroll-thumb-active); } +.mt-scroll::-webkit-scrollbar-corner{ background:transparent; } + +/* ===== Search box ===== */ +.mt-search__box{ + height:32px; padding:0 10px; + display:flex; align-items:center; gap:8px; + border-radius:4px; + border:1px solid transparent; + background:var(--search-bg); + color:var(--text-primary); +} +.mt-search__icon{ width:16px; height:16px; border-radius:2px; background:var(--search-icon); flex:0 0 auto; } +.mt-search__input{ + width:100%; border:0; outline:none; background:transparent; + color:inherit; font:var(--type-sm); min-width:0; +} +.mt-search__input::placeholder{ color:var(--search-placeholder); } +.mt-search__box:focus-within{ box-shadow: inset 0 -2px 0 var(--search-underline); } +.mt-search__input:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } +.mt-search__clear{ + width:22px; height:22px; display:grid; place-items:center; + border:0; border-radius:3px; + background:transparent; color:var(--text-secondary); + cursor:pointer; flex:0 0 auto; +} +.mt-search__clear:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-search__clear:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +/* ===== Side panel ===== */ +.mt-sidepanel{ position:fixed; inset:0; z-index:1200; pointer-events:none; } +.mt-sidepanel__scrim{ position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity 180ms ease; } +.mt-sidepanel__panel{ + position:absolute; top:0; right:0; height:100%; + display:flex; flex-direction:column; + background:var(--bg-primary); + border-left:1px solid var(--border-color); + box-shadow:var(--shadow-lg); + transform:translateX(100%); + transition:transform 220ms ease; + pointer-events:auto; +} +.mt-sidepanel__panel[data-size="sm"]{ width:320px; } +.mt-sidepanel__panel[data-size="md"]{ width:400px; } +.mt-sidepanel__panel[data-size="lg"]{ width:480px; } +.mt-sidepanel[data-open="true"]{ pointer-events:auto; } +.mt-sidepanel[data-open="true"] .mt-sidepanel__scrim{ opacity:1; } +.mt-sidepanel[data-open="true"] .mt-sidepanel__panel{ transform:translateX(0); } + +.mt-sidepanel__header{ + height:56px; padding:0 16px; + display:flex; align-items:center; justify-content:space-between; + border-bottom:1px solid var(--border-color); +} +.mt-sidepanel__title{ margin:0; font:700 var(--type-md); color:var(--text-primary); } +.mt-sidepanel__close{ + width:32px; height:32px; border:0; border-radius:4px; + background:transparent; color:var(--text-secondary); cursor:pointer; +} +.mt-sidepanel__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-sidepanel__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } + +.mt-sidepanel__body{ flex:1; overflow:auto; padding:16px; color:var(--text-primary); } +.mt-sidepanel__footer{ + padding:12px 16px; border-top:1px solid var(--border-color); + display:flex; justify-content:flex-end; gap:8px; + background:var(--bg-primary); +} + +/* ===== Status label ===== */ +.mt-status{ display:inline-flex; align-items:center; gap:6px; font:600 var(--type-xs); color:var(--status-color); } +.mt-status__icon{ + width:14px; height:14px; display:grid; place-items:center; + font:700 10px/1 var(--font); color:currentColor; +} +.mt-status[data-variant="critical"]{ + height:18px; padding:0 8px; border-radius:3px; + background:var(--status-critical-bg); color:var(--status-critical-fg); +} +.mt-status[data-variant="critical"] .mt-status__icon{ color:var(--status-critical-fg); } +.mt-status[data-variant="error"]{ --status-color: var(--status-error); } +.mt-status[data-variant="warning"]{ --status-color: var(--status-warning); } +.mt-status[data-variant="success"]{ --status-color: var(--status-success); } +.mt-status[data-variant="info"]{ --status-color: var(--status-info); } + +/* ===== Toast ===== */ +.mt-toast-stack{ + position:fixed; bottom:16px; right:16px; + display:flex; flex-direction:column; gap:12px; + z-index:1300; +} +.mt-toast{ + width:320px; border-radius:6px; + background:var(--toast-bg); color:var(--text-primary); + border:1px solid var(--toast-border); + box-shadow:var(--shadow-lg); + display:flex; flex-direction:column; overflow:hidden; + animation: mt-toast-in 180ms ease; +} +@keyframes mt-toast-in{ from{ transform:translateY(8px); opacity:0; } to{ transform:translateY(0); opacity:1; } } +.mt-toast__header{ display:flex; align-items:flex-start; gap:10px; padding:12px 12px 8px; } +.mt-toast__avatar{ width:28px; height:28px; border-radius:999px; background:var(--accent-primary); flex:0 0 auto; } +.mt-toast__meta{ flex:1; min-width:0; } +.mt-toast__title{ font:600 var(--type-sm); color:var(--text-primary); } +.mt-toast__subtitle{ font:var(--type-xs); color:var(--text-secondary); } +.mt-toast__close{ + width:28px; height:28px; border:0; background:transparent; + border-radius:4px; color:var(--text-secondary); cursor:pointer; +} +.mt-toast__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } +.mt-toast__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-toast__body{ padding:0 12px 10px; } +.mt-toast__message{ font:var(--type-xs); color:var(--text-secondary); } +.mt-toast__reply{ display:flex; align-items:center; gap:6px; padding:8px 10px 10px; border-top:1px solid var(--border-color); } +.mt-toast__input{ + flex:1; height:28px; border-radius:4px; + border:1px solid var(--border-color); background:var(--bg-primary); + color:var(--text-primary); padding:0 8px; font:var(--type-xs); +} +.mt-toast__input:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; } +.mt-toast__send{ + width:28px; height:28px; border:0; border-radius:4px; + background:var(--accent-primary); color:var(--accent-contrast); cursor:pointer; +} +.mt-toast__send:hover{ background:var(--accent-secondary); } +.mt-toast[data-variant="accent"]{ background:var(--accent-primary); color:var(--accent-contrast); border-color:var(--accent-primary); } +.mt-toast[data-variant="accent"] .mt-toast__subtitle, +.mt-toast[data-variant="accent"] .mt-toast__message{ color:rgba(255,255,255,.9); } +.mt-toast[data-variant="accent"] .mt-toast__close{ color:rgba(255,255,255,.8); } + +/* ===== Toggle ===== */ +.mt-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; color:var(--text-primary); } +.mt-toggle__input{ position:absolute; opacity:0; pointer-events:none; } +.mt-toggle__track{ + width:28px; height:16px; border-radius:999px; + background:var(--toggle-track-off); + border:1px solid var(--toggle-border-off); + position:relative; transition:120ms ease; box-sizing:border-box; +} +.mt-toggle__thumb{ + width:12px; height:12px; border-radius:999px; + background:var(--toggle-thumb); + position:absolute; top:1px; left:1px; + transition:120ms ease; +} +.mt-toggle__input:checked + .mt-toggle__track{ + background:var(--toggle-track-on); + border-color:var(--toggle-border-on); +} +.mt-toggle__input:checked + .mt-toggle__track .mt-toggle__thumb{ transform:translateX(12px); } + +.mt-toggle:hover .mt-toggle__track{ background:var(--toggle-track-off-hover); border-color:var(--toggle-border-off-hover); } +.mt-toggle:hover .mt-toggle__input:checked + .mt-toggle__track{ background:var(--toggle-track-on-hover); border-color:var(--toggle-border-on-hover); } +.mt-toggle:active .mt-toggle__track{ background:var(--toggle-track-off-pressed); border-color:var(--toggle-border-off-pressed); } +.mt-toggle:active .mt-toggle__input:checked + .mt-toggle__track{ background:var(--toggle-track-on-pressed); border-color:var(--toggle-border-on-pressed); } +.mt-toggle__input:focus-visible + .mt-toggle__track{ outline:2px solid var(--focus-ring); outline-offset:3px; } +.mt-toggle__input:disabled + .mt-toggle__track{ background:var(--toggle-track-disabled); border-color:var(--toggle-border-disabled); } +.mt-toggle__input:disabled + .mt-toggle__track .mt-toggle__thumb{ background:var(--toggle-thumb-disabled); } +.mt-toggle__input:disabled ~ .mt-toggle__label{ color:var(--text-disabled); } + +/* ===== Tooltip ===== */ +.mt-tooltip{ + position:absolute; z-index:1400; + max-width:220px; + padding:6px 8px; + border-radius:4px; + font:var(--type-xs); + white-space:nowrap; + background:var(--tooltip-bg); + color:var(--tooltip-fg); + box-shadow:var(--tooltip-shadow); + opacity:0; + transform:translateY(2px); + pointer-events:none; + transition:opacity 120ms ease, transform 120ms ease; +} +.mt-tooltip[data-open="true"]{ opacity:1; transform:translateY(0); } +.mt-tooltip::after{ + content:""; + position:absolute; + width:8px; height:8px; + background:var(--tooltip-bg); + transform:rotate(45deg); +} +.mt-tooltip[data-placement="top"]::after{ bottom:-4px; left:50%; transform:translateX(-50%) rotate(45deg); } +.mt-tooltip[data-placement="bottom"]::after{ top:-4px; left:50%; transform:translateX(-50%) rotate(45deg); } +.mt-tooltip[data-placement="left"]::after{ right:-4px; top:50%; transform:translateY(-50%) rotate(45deg); } +.mt-tooltip[data-placement="right"]::after{ left:-4px; top:50%; transform:translateY(-50%) rotate(45deg); } From 12e809f7431a292d58aa18c4daf9f07c0bd5ae1a Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Fri, 20 Feb 2026 01:54:10 -0800 Subject: [PATCH 08/11] updated builder --- src/customizer/TeamsCustomizer.ts | 4 ++- teams-default-themes/teams-dark.v1.css | 39 +++++++------------------ teams-default-themes/teams-light.v1.css | 39 +++++++------------------ teams-required-pages/builder.html | 35 +++++++++++----------- 4 files changed, 42 insertions(+), 75 deletions(-) diff --git a/src/customizer/TeamsCustomizer.ts b/src/customizer/TeamsCustomizer.ts index 4255d01..69da07f 100644 --- a/src/customizer/TeamsCustomizer.ts +++ b/src/customizer/TeamsCustomizer.ts @@ -36,7 +36,9 @@ export class TeamsCustomizer extends Customizer { } } -const transformInstructions = ` +const transformInstructions = `Prefer using the below when designing pages: + + ## Button diff --git a/teams-default-themes/teams-dark.v1.css b/teams-default-themes/teams-dark.v1.css index 5708023..5e9a371 100644 --- a/teams-default-themes/teams-dark.v1.css +++ b/teams-default-themes/teams-dark.v1.css @@ -150,30 +150,13 @@ body { .chat-panel { width: 30%; background: var(--bg-secondary); - box-shadow: 1px 0 2px rgba(0,0,0,0.35); + box-shadow: -1px 0 2px rgba(0,0,0,0.35); padding: 20px; display: flex; flex-direction: column; - border-right: 1px solid var(--border-color); + border-left: 1px solid var(--border-color); position: relative; - transition: margin-left 0.3s ease, border-right-color 0.3s ease; -} - -.chat-header { - font-size: 24px; - min-height: var(--header-min-height); - padding: var(--header-padding-vertical) var(--header-padding-horizontal); - line-height: var(--header-line-height); - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - background: var(--accent-primary); - color: #fff; - border-radius: 6px; - box-shadow: var(--shadow-sm); - letter-spacing: 1px; - font-weight: 700; + transition: margin-right 0.3s ease, border-left-color 0.3s ease; } .chat-messages { @@ -293,7 +276,7 @@ form { .viewer-panel { flex: 1; min-width: 0; - padding: 20px 20px 20px 44px; + padding: 20px 44px 20px 20px; background: var(--bg-tertiary); display: flex; flex-direction: column; @@ -365,22 +348,22 @@ form { /* ---- Chat Toggle ---- */ .chat-toggle { position: fixed; - left: 30%; + right: 30%; top: 50%; transform: translateY(-50%); width: 24px; height: 80px; background: var(--bg-secondary); border: none; - border-left: 1px solid var(--border-color); - border-radius: 0 6px 6px 0; + border-right: 1px solid var(--border-color); + border-radius: 6px 0 0 6px; cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 0; - transition: left 0.3s ease, background 0.2s ease; + transition: right 0.3s ease, background 0.2s ease; } .chat-toggle:hover { @@ -406,12 +389,12 @@ form { } body.chat-collapsed .chat-panel { - margin-left: -30%; - border-right-color: transparent; + margin-right: -30%; + border-left-color: transparent; } body.chat-collapsed .chat-toggle { - left: 0; + right: 0; } /* ---- Modal ---- */ diff --git a/teams-default-themes/teams-light.v1.css b/teams-default-themes/teams-light.v1.css index 3a8cd4e..1331be1 100644 --- a/teams-default-themes/teams-light.v1.css +++ b/teams-default-themes/teams-light.v1.css @@ -150,30 +150,13 @@ body { .chat-panel { width: 30%; background: var(--bg-secondary); - box-shadow: 1px 0 2px rgba(0,0,0,0.08); + box-shadow: -1px 0 2px rgba(0,0,0,0.08); padding: 20px; display: flex; flex-direction: column; - border-right: 1px solid var(--border-color); + border-left: 1px solid var(--border-color); position: relative; - transition: margin-left 0.3s ease, border-right-color 0.3s ease; -} - -.chat-header { - font-size: 24px; - min-height: var(--header-min-height); - padding: var(--header-padding-vertical) var(--header-padding-horizontal); - line-height: var(--header-line-height); - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - background: var(--accent-primary); - color: #fff; - border-radius: 6px; - box-shadow: var(--shadow-sm); - letter-spacing: 1px; - font-weight: 700; + transition: margin-right 0.3s ease, border-left-color 0.3s ease; } .chat-messages { @@ -293,7 +276,7 @@ form { .viewer-panel { flex: 1; min-width: 0; - padding: 20px 20px 20px 44px; + padding: 20px 44px 20px 20px; background: var(--bg-tertiary); display: flex; flex-direction: column; @@ -365,22 +348,22 @@ form { /* ---- Chat Toggle ---- */ .chat-toggle { position: fixed; - left: 30%; + right: 30%; top: 50%; transform: translateY(-50%); width: 24px; height: 80px; background: var(--bg-secondary); border: none; - border-left: 1px solid var(--border-color); - border-radius: 0 6px 6px 0; + border-right: 1px solid var(--border-color); + border-radius: 6px 0 0 6px; cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 0; - transition: left 0.3s ease, background 0.2s ease; + transition: right 0.3s ease, background 0.2s ease; } .chat-toggle:hover { @@ -406,12 +389,12 @@ form { } body.chat-collapsed .chat-panel { - margin-left: -30%; - border-right-color: transparent; + margin-right: -30%; + border-left-color: transparent; } body.chat-collapsed .chat-toggle { - left: 0; + right: 0; } /* ---- Modal ---- */ diff --git a/teams-required-pages/builder.html b/teams-required-pages/builder.html index 247f1c4..2eaad6b 100644 --- a/teams-required-pages/builder.html +++ b/teams-required-pages/builder.html @@ -1,20 +1,33 @@ - SynthOS + Teams - + +
+
+
+
+
+
+
+
-
SynthOS
-

SynthOS: What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!

+

Teams: What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!

Save @@ -26,23 +39,9 @@
-
-
-
-
-
-
-
- \ No newline at end of file From d92459f48b1690b9933e54742fadd359697a8f20 Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Fri, 20 Feb 2026 04:43:01 -0800 Subject: [PATCH 09/11] in progress page changes --- UPSTREAM_CHANGES.md | 32 ++ src/customizer/TeamsCustomizer.ts | 7 +- teams-default-themes/teams-dark.json | 86 +-- teams-default-themes/teams-dark.v1.css | 161 +++--- teams-default-themes/teams-light.json | 68 +-- teams-default-themes/teams-light.v1.css | 148 ++--- teams-page-scripts/page-v2.js | 45 +- teams-required-pages/builder.html | 9 +- teams-required-pages/pages.html | 133 +++-- teams-required-pages/settings.html | 683 +++++------------------- 10 files changed, 515 insertions(+), 857 deletions(-) create mode 100644 UPSTREAM_CHANGES.md diff --git a/UPSTREAM_CHANGES.md b/UPSTREAM_CHANGES.md new file mode 100644 index 0000000..fadab4c --- /dev/null +++ b/UPSTREAM_CHANGES.md @@ -0,0 +1,32 @@ +# Upstream Changes to Apply to SynthOS + +## page-v2.js: Fix initial focus race with chat-collapsed check + +The initial `chatInput.focus()` runs before the chat-collapsed localStorage check, +so if the panel was previously collapsed, the input gets focused then immediately +blurred when the panel slides off-screen. The browser moves focus to the body/viewer. + +### Fix + +In `page-scripts/page-v2.js`: + +1. **Remove** the early focus call (around line 100-102): + +```diff +- // 1. Initial focus +- var chatInput = document.getElementById('chatInput'); +- if (chatInput) chatInput.focus(); ++ var chatInput = document.getElementById('chatInput'); +``` + +2. **Add** focus at the very end of the outer IIFE, just before `})();`: + +```diff + })(); ++ ++ // Initial focus — run after all setup (including chat-collapsed check) ++ if (chatInput && !document.body.classList.contains('chat-collapsed')) { ++ chatInput.focus(); ++ } + })(); +``` diff --git a/src/customizer/TeamsCustomizer.ts b/src/customizer/TeamsCustomizer.ts index 69da07f..8f49a18 100644 --- a/src/customizer/TeamsCustomizer.ts +++ b/src/customizer/TeamsCustomizer.ts @@ -36,7 +36,9 @@ export class TeamsCustomizer extends Customizer { } } -const transformInstructions = `Prefer using the below when designing pages: +const transformInstructions = `The viewer panel automatically fills the full available space. App content stretches to fill the full viewer width and height so do not add the "full-viewer" class to the viewer-panel element. +Chat panel collapse/expand: The chat panel uses a header bar (.chat-panel-header) with a close button (.chat-panel-close) and a collapsed rail (.chat-rail) instead of the floating .chat-toggle button. Do NOT create or reference .chat-toggle elements. The page script handles close/expand behaviour and localStorage persistence automatically. +Prefer using the below when designing pages: @@ -368,5 +370,4 @@ const transformInstructions = `Prefer using the below when desig ## Tooltip - -`; +`; \ No newline at end of file diff --git a/teams-default-themes/teams-dark.json b/teams-default-themes/teams-dark.json index 14abade..01360f8 100644 --- a/teams-default-themes/teams-dark.json +++ b/teams-default-themes/teams-dark.json @@ -1,44 +1,44 @@ { "mode": "dark", "colors": { - "bg-primary": "#1B1B1B", - "bg-secondary": "#2B2B2B", - "bg-tertiary": "#242424", - "accent-primary": "#7B83EB", - "accent-secondary": "#A6ABFF", - "accent-tertiary": "#4F52B2", - "accent-glow": "rgba(123,131,235,0.2)", + "bg-primary": "#292929", + "bg-secondary": "#1F1F1F", + "bg-tertiary": "#333333", + "accent-primary": "#4F52B2", + "accent-secondary": "#5B5FC7", + "accent-tertiary": "#444791", + "accent-glow": "rgba(79,82,178,0.2)", "text-primary": "#ffffff", "text-secondary": "#C8C8C8", - "border-color": "#3F3F3F", + "border-color": "#3D3D3D", "header-min-height": "58px", "header-padding-vertical": "14px", "header-padding-horizontal": "20px", "header-line-height": "1.25", - "surface": "#2B2B2B", - "surface-2": "#242424", - "surface-hover": "#3A3A3A", + "surface": "#292929", + "surface-2": "#1F1F1F", + "surface-hover": "#3D3D3D", "surface-pressed": "#444444", - "surface-disabled": "#3A3A3A", + "surface-disabled": "#3D3D3D", "text-disabled": "#8A8886", "border-strong": "#5A5A5A", "accent-contrast": "#ffffff", - "accent-hover": "#A6ABFF", - "accent-pressed": "#4F52B2", + "accent-hover": "#5B5FC7", + "accent-pressed": "#444791", "danger": "#F1707B", "danger-2": "#F1707B", - "focus-ring": "#7B83EB", + "focus-ring": "#4F52B2", "shadow-1": "0 1px 2px rgba(0,0,0,0.35)", "shadow-2": "0 10px 28px rgba(0,0,0,0.6)", "scrim": "rgba(0,0,0,0.75)", - "menu-bg": "#2B2B2B", - "menu-border": "#3F3F3F", + "menu-bg": "#333333", + "menu-border": "#3D3D3D", "menu-shadow": "0 10px 28px rgba(0,0,0,0.6)", "alert-error-bg": "#3E1F25", @@ -54,39 +54,39 @@ "alert-ok-fg": "#7FE07F", "alert-ok-icon": "#7FE07F", "alert-info-bg": "#1F1F1F", - "alert-info-border": "#3F3F3F", + "alert-info-border": "#3D3D3D", "alert-info-fg": "#ffffff", "alert-info-icon": "#C8C8C8", - "input-bg": "#2B2B2B", - "input-border": "#3F3F3F", + "input-bg": "#1F1F1F", + "input-border": "#3D3D3D", "input-border-hover": "#5A5A5A", - "input-border-focus": "#7B83EB", - "input-underline-focus": "#7B83EB", + "input-border-focus": "#4F52B2", + "input-underline-focus": "#4F52B2", "input-placeholder": "#8A8886", - "input-prefix-bg": "#7B83EB", + "input-prefix-bg": "#4F52B2", "input-prefix-fg": "#ffffff", "input-icon-bg": "#C8C8C8", - "picker-bg": "#2B2B2B", - "picker-border": "#3F3F3F", + "picker-bg": "#333333", + "picker-border": "#3D3D3D", "picker-shadow": "0 12px 30px rgba(0,0,0,0.6)", "pivot-fg": "#C8C8C8", - "pivot-active-fg": "#7B83EB", - "pivot-underline-active": "#7B83EB", + "pivot-active-fg": "#4F52B2", + "pivot-underline-active": "#4F52B2", "pivot-underline-hover": "#8A8886", "progress-track": "#5A5A5A", - "progress-fill": "#7B83EB", + "progress-fill": "#4F52B2", "progress-spinner-track": "#5A5A5A", "progress-spinner-head": "#ffffff", "radio-border": "#8A8886", "radio-border-hover": "#C8C8C8", - "radio-dot": "#7B83EB", - "radio-disabled-border": "#3F3F3F", - "radio-disabled-bg": "#2B2B2B", + "radio-dot": "#4F52B2", + "radio-disabled-border": "#3D3D3D", + "radio-disabled-bg": "#1F1F1F", "radio-disabled-dot": "#5A5A5A", "scroll-track": "transparent", @@ -95,10 +95,10 @@ "scroll-thumb-active": "#C8C8C8", "scroll-shadow": "rgba(0,0,0,0.55)", - "search-bg": "#2B2B2B", + "search-bg": "#1F1F1F", "search-icon": "#C8C8C8", "search-placeholder": "#8A8886", - "search-underline": "#7B83EB", + "search-underline": "#4F52B2", "status-critical-bg": "#C4314B", "status-critical-fg": "#ffffff", @@ -107,8 +107,8 @@ "status-success": "#7FE07F", "status-info": "#C8C8C8", - "toast-bg": "#2B2B2B", - "toast-border": "#3F3F3F", + "toast-bg": "#333333", + "toast-border": "#3D3D3D", "toggle-track-off": "#1F1F1F", "toggle-border-off": "#8A8886", @@ -117,14 +117,14 @@ "toggle-border-off-hover": "#C8C8C8", "toggle-track-off-pressed": "#1F1F1F", "toggle-border-off-pressed": "#FFFFFF", - "toggle-track-on": "#7B83EB", - "toggle-border-on": "#7B83EB", - "toggle-track-on-hover": "#A6ABFF", - "toggle-border-on-hover": "#A6ABFF", - "toggle-track-on-pressed": "#4F52B2", - "toggle-border-on-pressed": "#4F52B2", - "toggle-track-disabled": "#2B2B2B", - "toggle-border-disabled": "#3F3F3F", + "toggle-track-on": "#4F52B2", + "toggle-border-on": "#4F52B2", + "toggle-track-on-hover": "#5B5FC7", + "toggle-border-on-hover": "#5B5FC7", + "toggle-track-on-pressed": "#444791", + "toggle-border-on-pressed": "#444791", + "toggle-track-disabled": "#1F1F1F", + "toggle-border-disabled": "#3D3D3D", "toggle-thumb-disabled": "#5A5A5A", "tooltip-bg": "#3B3A39", diff --git a/teams-default-themes/teams-dark.v1.css b/teams-default-themes/teams-dark.v1.css index 5e9a371..588fc23 100644 --- a/teams-default-themes/teams-dark.v1.css +++ b/teams-default-themes/teams-dark.v1.css @@ -1,20 +1,22 @@ :root { /* ---- Core palette ---- */ - --bg-primary: #1B1B1B; - --bg-secondary: #2B2B2B; - --bg-tertiary: #242424; - --accent-primary: #7B83EB; - --accent-secondary: #A6ABFF; - --accent-tertiary: #4F52B2; + --bg-primary: #292929; + --bg-secondary: #1F1F1F; + --bg-tertiary: #333333; + --accent-primary: #4F52B2; + --accent-secondary: #5B5FC7; + --accent-tertiary: #444791; --accent-contrast: #ffffff; - --accent-glow: rgba(123,131,235,0.2); + --accent-hover: #5B5FC7; + --accent-pressed: #444791; + --accent-glow: rgba(79,82,178,0.2); --text-primary: #ffffff; --text-secondary: #C8C8C8; --text-disabled: #8A8886; - --border-color: #3F3F3F; + --border-color: #3D3D3D; --border-strong: #5A5A5A; --danger: #F1707B; - --focus-ring: #7B83EB; + --focus-ring: #4F52B2; --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-lg: 0 10px 28px rgba(0,0,0,0.6); --scrim: rgba(0,0,0,0.75); @@ -33,18 +35,18 @@ --header-line-height: 1.25; /* ---- Menu ---- */ - --menu-bg: #2B2B2B; - --menu-border: #3F3F3F; + --menu-bg: #333333; + --menu-border: #3D3D3D; --menu-shadow: 0 10px 28px rgba(0,0,0,0.6); /* ---- Alert ---- */ --alert-error-bg: #3E1F25; --alert-error-border: #6B2B34; --alert-error-fg: #F1707B; --alert-error-icon: #F1707B; --alert-warn-bg: #463100; --alert-warn-border: #7A5A00; --alert-warn-fg: #FFD86A; --alert-warn-icon: #FFD86A; --alert-ok-bg: #0D2E0D; --alert-ok-border: #1E5A1E; --alert-ok-fg: #7FE07F; --alert-ok-icon: #7FE07F; - --alert-info-bg: #1F1F1F; --alert-info-border: #3F3F3F; --alert-info-fg: #ffffff; --alert-info-icon: #C8C8C8; + --alert-info-bg: #1F1F1F; --alert-info-border: #3D3D3D; --alert-info-fg: #ffffff; --alert-info-icon: #C8C8C8; /* ---- Input ---- */ - --input-bg: #2B2B2B; + --input-bg: #1F1F1F; --input-fg: var(--text-primary); --input-border: var(--border-color); --input-border-hover: var(--border-strong); @@ -56,7 +58,7 @@ --input-icon-bg: #C8C8C8; /* ---- Picker ---- */ - --picker-bg: #2B2B2B; + --picker-bg: #333333; --picker-border: var(--border-color); --picker-shadow: 0 12px 30px rgba(0,0,0,0.6); @@ -76,8 +78,8 @@ --radio-border: #8A8886; --radio-border-hover: #C8C8C8; --radio-dot: var(--accent-primary); - --radio-disabled-border: #3F3F3F; - --radio-disabled-bg: #2B2B2B; + --radio-disabled-border: #3D3D3D; + --radio-disabled-bg: #1F1F1F; --radio-disabled-dot: #5A5A5A; /* ---- Scroll ---- */ @@ -88,7 +90,7 @@ --scroll-shadow: rgba(0,0,0,0.55); /* ---- Search ---- */ - --search-bg: #2B2B2B; + --search-bg: #1F1F1F; --search-icon: #C8C8C8; --search-placeholder: #8A8886; --search-underline: var(--accent-primary); @@ -102,7 +104,7 @@ --status-info: var(--text-secondary); /* ---- Toast ---- */ - --toast-bg: #2B2B2B; + --toast-bg: #333333; --toast-border: var(--border-color); /* ---- Toggle ---- */ @@ -119,8 +121,8 @@ --toggle-border-on-hover: var(--accent-secondary); --toggle-track-on-pressed: var(--accent-tertiary); --toggle-border-on-pressed: var(--accent-tertiary); - --toggle-track-disabled: #2B2B2B; - --toggle-border-disabled: #3F3F3F; + --toggle-track-disabled: #1F1F1F; + --toggle-border-disabled: #3D3D3D; --toggle-thumb-disabled: #5A5A5A; /* ---- Tooltip ---- */ @@ -156,7 +158,6 @@ body { flex-direction: column; border-left: 1px solid var(--border-color); position: relative; - transition: margin-right 0.3s ease, border-left-color 0.3s ease; } .chat-messages { @@ -243,7 +244,6 @@ form { .chat-input:focus { outline: none; - border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } @@ -276,18 +276,18 @@ form { .viewer-panel { flex: 1; min-width: 0; - padding: 20px 44px 20px 20px; + padding: 0; background: var(--bg-tertiary); display: flex; flex-direction: column; - justify-content: center; - align-items: center; position: relative; overflow: hidden; + outline: none; } -.viewer-panel.full-viewer { - padding: 0; +.viewer-panel > div { + flex: 1; + min-height: 0; } .loading-overlay { @@ -345,56 +345,75 @@ form { scrollbar-color: var(--scroll-thumb) transparent; } -/* ---- Chat Toggle ---- */ -.chat-toggle { - position: fixed; - right: 30%; - top: 50%; - transform: translateY(-50%); - width: 24px; - height: 80px; - background: var(--bg-secondary); - border: none; - border-right: 1px solid var(--border-color); - border-radius: 6px 0 0 6px; - cursor: pointer; - z-index: 1000; +/* ---- Chat Panel Header ---- */ +.chat-panel-header { display: flex; align-items: center; - justify-content: center; - padding: 0; - transition: right 0.3s ease, background 0.2s ease; + justify-content: space-between; + margin: -20px -20px 0; + padding: 12px 16px; + border-bottom: 1px solid var(--border-color); + background: var(--bg-tertiary); } -.chat-toggle:hover { - background: #3A3A3A; +.chat-panel-header__title { + font: 600 var(--type-sm); + color: var(--text-primary); } -.chat-toggle-dots { - display: flex; +.chat-panel-close { + width: 28px; + height: 28px; + display: grid; + place-items: center; + border: 0; + border-radius: 4px; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + font-size: 16px; + line-height: 1; +} + +.chat-panel-close:hover { + background: var(--bg-secondary); + color: var(--text-primary); +} + +/* ---- Chat Rail ---- */ +.chat-rail { + width: 28px; + display: none; flex-direction: column; - gap: 6px; + align-items: center; + justify-content: center; + background: var(--bg-secondary); + border-left: 1px solid var(--border-color); + cursor: pointer; + user-select: none; + flex-shrink: 0; } -.chat-toggle-dot { - width: 4px; - height: 4px; - border-radius: 50%; - background: var(--text-secondary); - transition: transform 0.2s ease; +.chat-rail:hover { + background: #3D3D3D; } -.chat-toggle:hover .chat-toggle-dot { - transform: scale(1.4); +.chat-rail-label { + writing-mode: vertical-rl; + transform: rotate(180deg); + font: 600 var(--type-xs); + color: var(--text-secondary); + letter-spacing: 0.5px; + white-space: nowrap; } +/* ---- Chat Collapsed State ---- */ body.chat-collapsed .chat-panel { - margin-right: -30%; - border-left-color: transparent; + display: none; } -body.chat-collapsed .chat-toggle { - right: 0; +body.chat-collapsed .chat-rail { + display: flex; } /* ---- Modal ---- */ @@ -467,7 +486,7 @@ body.chat-collapsed .chat-toggle { box-sizing: border-box; } -.form-input:focus { border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } +.form-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent-primary); } .form-input:read-only { opacity: 0.7; cursor: not-allowed; } .form-input::placeholder { color: var(--text-disabled); } @@ -514,7 +533,7 @@ body.chat-collapsed .chat-toggle { } .modal-btn-secondary:hover { - background: #3A3A3A; + background: #3D3D3D; } .modal-btn-danger { background: var(--danger); color: white; } @@ -640,7 +659,7 @@ body.chat-collapsed .chat-toggle { transition: border-color 0.2s; } -.brainstorm-input:focus { border-color: var(--accent-primary); } +.brainstorm-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent-primary); } .brainstorm-input::placeholder { color: var(--text-disabled); } .brainstorm-send-btn { @@ -847,10 +866,10 @@ body.chat-collapsed .chat-toggle { .mt-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:6px; border:1px solid var(--border-color); - background:var(--bg-secondary); color:var(--text-primary); - box-shadow:var(--shadow-sm); + background:var(--bg-primary); color:var(--text-primary); + box-shadow:0 2px 4px #1D1D1D; transition:background 0.2s, box-shadow 0.2s; } -.mt-card:hover{ box-shadow:var(--shadow-lg); } +.mt-card:hover{ background:#3D3D3D; box-shadow:0 4px 8px #1D1D1D; } .mt-card:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } .mt-card[data-size="xs"]{ width:160px; } .mt-card[data-size="sm"]{ width:220px; } .mt-card[data-size="md"]{ width:280px; } .mt-card[data-size="lg"]{ width:360px; } @@ -1003,6 +1022,11 @@ body.chat-collapsed .chat-toggle { .mt-coachmark__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } .mt-coachmark__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +/* ===== Native select ===== */ +select{ cursor:pointer; appearance:none; background-repeat:no-repeat; background-position:right 12px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23E0E0E0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } +select option{ background:#292929; color:var(--text-primary); padding:8px; } +select option:checked{ background:#3D3D3D; } + /* ===== Input ===== */ .mt-input{ height:32px; padding:0 12px; @@ -1021,8 +1045,7 @@ body.chat-collapsed .chat-toggle { .mt-input[data-size="sm"] .mt-input__control{ font:var(--type-xs); } .mt-input__control::placeholder{ color:var(--input-placeholder); } .mt-input:focus-within{ - border-color:var(--input-border-focus); - box-shadow: inset 0 -2px 0 var(--input-underline-focus); + box-shadow: inset 0 -2px 0 var(--input-border-focus); } .mt-input__control:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } .mt-input[data-disabled="true"]{ background:var(--bg-tertiary); border-color:var(--border-color); color:var(--text-disabled); } diff --git a/teams-default-themes/teams-light.json b/teams-default-themes/teams-light.json index f019c82..bd43496 100644 --- a/teams-default-themes/teams-light.json +++ b/teams-default-themes/teams-light.json @@ -4,13 +4,13 @@ "bg-primary": "#ffffff", "bg-secondary": "#F7F7F7", "bg-tertiary": "#F3F2F1", - "accent-primary": "#6264A7", - "accent-secondary": "#585A96", - "accent-tertiary": "#4F5187", - "accent-glow": "rgba(98,100,167,0.15)", + "accent-primary": "#5B5FC7", + "accent-secondary": "#4F52B2", + "accent-tertiary": "#444791", + "accent-glow": "rgba(91,95,199,0.15)", "text-primary": "#252423", "text-secondary": "#605E5C", - "border-color": "#E1DFDD", + "border-color": "#D1D1D1", "header-min-height": "58px", "header-padding-vertical": "14px", "header-padding-horizontal": "20px", @@ -18,7 +18,7 @@ "surface": "#ffffff", "surface-2": "#F7F7F7", - "surface-hover": "#F3F2F1", + "surface-hover": "#F5F5F5", "surface-pressed": "#EDEBE9", "surface-disabled": "#F3F2F1", @@ -26,19 +26,19 @@ "border-strong": "#C8C6C4", "accent-contrast": "#ffffff", - "accent-hover": "#585A96", - "accent-pressed": "#4F5187", + "accent-hover": "#4F52B2", + "accent-pressed": "#444791", "danger": "#D13438", "danger-2": "#D13438", - "focus-ring": "#6264A7", + "focus-ring": "#5B5FC7", "shadow-1": "0 1px 2px rgba(0,0,0,0.08)", "shadow-2": "0 6px 18px rgba(0,0,0,0.18)", "scrim": "rgba(0,0,0,0.5)", "menu-bg": "#ffffff", - "menu-border": "#E1DFDD", + "menu-border": "#D1D1D1", "menu-shadow": "0 6px 18px rgba(0,0,0,0.18)", "alert-error-bg": "#FCF4F6", @@ -54,38 +54,38 @@ "alert-ok-fg": "#107C10", "alert-ok-icon": "#107C10", "alert-info-bg": "#F5F5F5", - "alert-info-border": "#E1DFDD", + "alert-info-border": "#D1D1D1", "alert-info-fg": "#252423", "alert-info-icon": "#605E5C", - "input-bg": "#ffffff", - "input-border": "#E1DFDD", + "input-bg": "#F5F5F5", + "input-border": "#D1D1D1", "input-border-hover": "#C8C6C4", - "input-border-focus": "#6264A7", - "input-underline-focus": "#6264A7", + "input-border-focus": "#5B5FC7", + "input-underline-focus": "#5B5FC7", "input-placeholder": "#A19F9D", - "input-prefix-bg": "#6264A7", + "input-prefix-bg": "#5B5FC7", "input-prefix-fg": "#ffffff", "input-icon-bg": "#605E5C", "picker-bg": "#ffffff", - "picker-border": "#E1DFDD", + "picker-border": "#D1D1D1", "picker-shadow": "0 8px 24px rgba(0,0,0,0.18)", "pivot-fg": "#605E5C", - "pivot-active-fg": "#6264A7", - "pivot-underline-active": "#6264A7", + "pivot-active-fg": "#5B5FC7", + "pivot-underline-active": "#5B5FC7", "pivot-underline-hover": "#C8C6C4", - "progress-track": "#E1DFDD", - "progress-fill": "#6264A7", - "progress-spinner-track": "#E1DFDD", - "progress-spinner-head": "#6264A7", + "progress-track": "#D1D1D1", + "progress-fill": "#5B5FC7", + "progress-spinner-track": "#D1D1D1", + "progress-spinner-head": "#5B5FC7", "radio-border": "#C8C6C4", "radio-border-hover": "#605E5C", - "radio-dot": "#6264A7", - "radio-disabled-border": "#E1DFDD", + "radio-dot": "#5B5FC7", + "radio-disabled-border": "#D1D1D1", "radio-disabled-bg": "#F3F2F1", "radio-disabled-dot": "#C8C6C4", @@ -98,7 +98,7 @@ "search-bg": "#F3F2F1", "search-icon": "#605E5C", "search-placeholder": "#A19F9D", - "search-underline": "#6264A7", + "search-underline": "#5B5FC7", "status-critical-bg": "#C4314B", "status-critical-fg": "#ffffff", @@ -108,7 +108,7 @@ "status-info": "#605E5C", "toast-bg": "#ffffff", - "toast-border": "#E1DFDD", + "toast-border": "#D1D1D1", "toggle-track-off": "#FFFFFF", "toggle-border-off": "#8A8886", @@ -117,14 +117,14 @@ "toggle-border-off-hover": "#605E5C", "toggle-track-off-pressed": "#FFFFFF", "toggle-border-off-pressed": "#252423", - "toggle-track-on": "#6264A7", - "toggle-border-on": "#6264A7", - "toggle-track-on-hover": "#585A96", - "toggle-border-on-hover": "#585A96", - "toggle-track-on-pressed": "#4F5187", - "toggle-border-on-pressed": "#4F5187", + "toggle-track-on": "#5B5FC7", + "toggle-border-on": "#5B5FC7", + "toggle-track-on-hover": "#4F52B2", + "toggle-border-on-hover": "#4F52B2", + "toggle-track-on-pressed": "#444791", + "toggle-border-on-pressed": "#444791", "toggle-track-disabled": "#F3F2F1", - "toggle-border-disabled": "#E1DFDD", + "toggle-border-disabled": "#D1D1D1", "toggle-thumb-disabled": "#C8C6C4", "tooltip-bg": "#323130", diff --git a/teams-default-themes/teams-light.v1.css b/teams-default-themes/teams-light.v1.css index 1331be1..d6776ab 100644 --- a/teams-default-themes/teams-light.v1.css +++ b/teams-default-themes/teams-light.v1.css @@ -3,18 +3,21 @@ --bg-primary: #ffffff; --bg-secondary: #F7F7F7; --bg-tertiary: #F3F2F1; - --accent-primary: #6264A7; - --accent-secondary: #585A96; - --accent-tertiary: #4F5187; + --accent-primary: #5B5FC7; + --accent-secondary: #4F52B2; + --accent-tertiary: #444791; --accent-contrast: #ffffff; - --accent-glow: rgba(98,100,167,0.15); + --accent-hover: #4F52B2; + --accent-pressed: #444791; + --accent-glow: rgba(91,95,199,0.15); --text-primary: #252423; --text-secondary: #605E5C; --text-disabled: #A19F9D; - --border-color: #E1DFDD; + --border-color: #D1D1D1; --border-strong: #C8C6C4; + --surface-hover: #F5F5F5; --danger: #D13438; - --focus-ring: #6264A7; + --focus-ring: #5B5FC7; --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-lg: 0 6px 18px rgba(0,0,0,0.18); --scrim: rgba(0,0,0,0.5); @@ -34,17 +37,17 @@ /* ---- Menu ---- */ --menu-bg: #ffffff; - --menu-border: #E1DFDD; + --menu-border: #D1D1D1; --menu-shadow: 0 6px 18px rgba(0,0,0,0.18); /* ---- Alert ---- */ --alert-error-bg: #FCF4F6; --alert-error-border: #F3D6DC; --alert-error-fg: #A4262C; --alert-error-icon: #A4262C; --alert-warn-bg: #FBF6D9; --alert-warn-border: #F2E2A5; --alert-warn-fg: #8A6A00; --alert-warn-icon: #8A6A00; --alert-ok-bg: #E7F2DA; --alert-ok-border: #CDE6B3; --alert-ok-fg: #107C10; --alert-ok-icon: #107C10; - --alert-info-bg: #F5F5F5; --alert-info-border: #E1DFDD; --alert-info-fg: #252423; --alert-info-icon: #605E5C; + --alert-info-bg: #F5F5F5; --alert-info-border: #D1D1D1; --alert-info-fg: #252423; --alert-info-icon: #605E5C; /* ---- Input ---- */ - --input-bg: #ffffff; + --input-bg: #F5F5F5; --input-fg: var(--text-primary); --input-border: var(--border-color); --input-border-hover: var(--border-strong); @@ -67,16 +70,16 @@ --pivot-underline-hover: #C8C6C4; /* ---- Progress ---- */ - --progress-track: #E1DFDD; + --progress-track: #D1D1D1; --progress-fill: var(--accent-primary); - --progress-spinner-track: #E1DFDD; + --progress-spinner-track: #D1D1D1; --progress-spinner-head: var(--accent-primary); /* ---- Radio ---- */ --radio-border: #C8C6C4; --radio-border-hover: #605E5C; --radio-dot: var(--accent-primary); - --radio-disabled-border: #E1DFDD; + --radio-disabled-border: #D1D1D1; --radio-disabled-bg: #F3F2F1; --radio-disabled-dot: #C8C6C4; @@ -120,7 +123,7 @@ --toggle-track-on-pressed: var(--accent-tertiary); --toggle-border-on-pressed: var(--accent-tertiary); --toggle-track-disabled: #F3F2F1; - --toggle-border-disabled: #E1DFDD; + --toggle-border-disabled: #D1D1D1; --toggle-thumb-disabled: #C8C6C4; /* ---- Tooltip ---- */ @@ -156,7 +159,6 @@ body { flex-direction: column; border-left: 1px solid var(--border-color); position: relative; - transition: margin-right 0.3s ease, border-left-color 0.3s ease; } .chat-messages { @@ -243,7 +245,6 @@ form { .chat-input:focus { outline: none; - border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } @@ -276,18 +277,18 @@ form { .viewer-panel { flex: 1; min-width: 0; - padding: 20px 44px 20px 20px; + padding: 0; background: var(--bg-tertiary); display: flex; flex-direction: column; - justify-content: center; - align-items: center; position: relative; overflow: hidden; + outline: none; } -.viewer-panel.full-viewer { - padding: 0; +.viewer-panel > div { + flex: 1; + min-height: 0; } .loading-overlay { @@ -345,56 +346,75 @@ form { scrollbar-color: var(--scroll-thumb) transparent; } -/* ---- Chat Toggle ---- */ -.chat-toggle { - position: fixed; - right: 30%; - top: 50%; - transform: translateY(-50%); - width: 24px; - height: 80px; - background: var(--bg-secondary); - border: none; - border-right: 1px solid var(--border-color); - border-radius: 6px 0 0 6px; - cursor: pointer; - z-index: 1000; +/* ---- Chat Panel Header ---- */ +.chat-panel-header { display: flex; align-items: center; - justify-content: center; - padding: 0; - transition: right 0.3s ease, background 0.2s ease; + justify-content: space-between; + margin: -20px -20px 0; + padding: 12px 16px; + border-bottom: 1px solid var(--border-color); + background: var(--bg-tertiary); } -.chat-toggle:hover { - background: var(--bg-tertiary); +.chat-panel-header__title { + font: 600 var(--type-sm); + color: var(--text-primary); } -.chat-toggle-dots { - display: flex; +.chat-panel-close { + width: 28px; + height: 28px; + display: grid; + place-items: center; + border: 0; + border-radius: 4px; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + font-size: 16px; + line-height: 1; +} + +.chat-panel-close:hover { + background: var(--bg-primary); + color: var(--text-primary); +} + +/* ---- Chat Rail ---- */ +.chat-rail { + width: 28px; + display: none; flex-direction: column; - gap: 6px; + align-items: center; + justify-content: center; + background: var(--bg-secondary); + border-left: 1px solid var(--border-color); + cursor: pointer; + user-select: none; + flex-shrink: 0; } -.chat-toggle-dot { - width: 4px; - height: 4px; - border-radius: 50%; - background: var(--text-secondary); - transition: transform 0.2s ease; +.chat-rail:hover { + background: var(--surface-hover); } -.chat-toggle:hover .chat-toggle-dot { - transform: scale(1.4); +.chat-rail-label { + writing-mode: vertical-rl; + transform: rotate(180deg); + font: 600 var(--type-xs); + color: var(--text-secondary); + letter-spacing: 0.5px; + white-space: nowrap; } +/* ---- Chat Collapsed State ---- */ body.chat-collapsed .chat-panel { - margin-right: -30%; - border-left-color: transparent; + display: none; } -body.chat-collapsed .chat-toggle { - right: 0; +body.chat-collapsed .chat-rail { + display: flex; } /* ---- Modal ---- */ @@ -467,7 +487,7 @@ body.chat-collapsed .chat-toggle { box-sizing: border-box; } -.form-input:focus { border-color: var(--accent-primary); box-shadow: inset 0 -2px 0 var(--accent-primary); } +.form-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent-primary); } .form-input:read-only { opacity: 0.7; cursor: not-allowed; } .form-input::placeholder { color: var(--text-disabled); } @@ -640,7 +660,7 @@ body.chat-collapsed .chat-toggle { transition: border-color 0.2s; } -.brainstorm-input:focus { border-color: var(--accent-primary); } +.brainstorm-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--accent-primary); } .brainstorm-input::placeholder { color: var(--text-disabled); } .brainstorm-send-btn { @@ -799,7 +819,7 @@ body.chat-collapsed .chat-toggle { } .mt-btn[data-style="neutral"]{ --btn-bg:var(--bg-primary); --btn-fg:var(--text-primary); --btn-border:var(--border-color); - --btn-hover-bg:var(--bg-tertiary); --btn-pressed-bg:var(--bg-tertiary); + --btn-hover-bg:var(--surface-hover); --btn-pressed-bg:var(--surface-hover); } .mt-btn[data-style="outline"]{ --btn-bg:transparent; --btn-fg:var(--text-primary); --btn-border:var(--border-strong); @@ -846,11 +866,11 @@ body.chat-collapsed .chat-toggle { /* ===== Card ===== */ .mt-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; - border-radius:6px; border:1px solid var(--border-color); + border-radius:6px; border:1px solid #EFEFEF; background:var(--bg-primary); color:var(--text-primary); - box-shadow:var(--shadow-sm); + box-shadow:0 2px 4px #E1E1E1; transition:background 0.2s, box-shadow 0.2s; } -.mt-card:hover{ box-shadow:var(--shadow-lg); } +.mt-card:hover{ background:var(--surface-hover); box-shadow:0 4px 8px #E1E1E1; } .mt-card:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } .mt-card[data-size="xs"]{ width:160px; } .mt-card[data-size="sm"]{ width:220px; } .mt-card[data-size="md"]{ width:280px; } .mt-card[data-size="lg"]{ width:360px; } @@ -1003,6 +1023,11 @@ body.chat-collapsed .chat-toggle { .mt-coachmark__close:hover{ background:var(--bg-tertiary); color:var(--text-primary); } .mt-coachmark__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } +/* ===== Native select ===== */ +select{ cursor:pointer; appearance:none; background-repeat:no-repeat; background-position:right 12px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23605E5C' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } +select option{ background:#ffffff; color:var(--text-primary); padding:8px; } +select option:checked{ background:#F5F5F5; } + /* ===== Input ===== */ .mt-input{ height:32px; padding:0 12px; @@ -1021,8 +1046,7 @@ body.chat-collapsed .chat-toggle { .mt-input[data-size="sm"] .mt-input__control{ font:var(--type-xs); } .mt-input__control::placeholder{ color:var(--input-placeholder); } .mt-input:focus-within{ - border-color:var(--input-border-focus); - box-shadow: inset 0 -2px 0 var(--input-underline-focus); + box-shadow: inset 0 -2px 0 var(--input-border-focus); } .mt-input__control:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px; } .mt-input[data-disabled="true"]{ background:var(--bg-tertiary); border-color:var(--border-color); color:var(--text-disabled); } diff --git a/teams-page-scripts/page-v2.js b/teams-page-scripts/page-v2.js index 9a9f7fe..6a5a7fa 100644 --- a/teams-page-scripts/page-v2.js +++ b/teams-page-scripts/page-v2.js @@ -97,9 +97,7 @@ window.__synthOSTooltip = attach; })(); - // 1. Initial focus var chatInput = document.getElementById('chatInput'); - if (chatInput) chatInput.focus(); // 2. Form submit handler — show overlay + disable inputs var chatForm = document.getElementById('chatForm'); @@ -358,34 +356,30 @@ }); } - // 6. Chat toggle button — create (if not already in markup), persist in localStorage + // 6. Chat panel header close + rail expand, persist in localStorage (function() { - var btn = document.querySelector('.chat-toggle'); - if (!btn) { - btn = document.createElement('button'); - btn.className = 'chat-toggle'; - btn.setAttribute('aria-label', 'Toggle chat panel'); - var dots = document.createElement('span'); - dots.className = 'chat-toggle-dots'; - for (var i = 0; i < 3; i++) { - var dot = document.createElement('span'); - dot.className = 'chat-toggle-dot'; - dots.appendChild(dot); - } - btn.appendChild(dots); - document.body.appendChild(btn); - } - var STORAGE_KEY = 'synthos-chat-collapsed'; + var closeBtn = document.querySelector('.chat-panel-close'); + var rail = document.querySelector('.chat-rail'); if (localStorage.getItem(STORAGE_KEY) === 'true') { document.body.classList.add('chat-collapsed'); } - btn.addEventListener('click', function() { - document.body.classList.toggle('chat-collapsed'); - localStorage.setItem(STORAGE_KEY, document.body.classList.contains('chat-collapsed')); - }); + function collapse() { + document.body.classList.add('chat-collapsed'); + localStorage.setItem(STORAGE_KEY, 'true'); + } + + function expand() { + document.body.classList.remove('chat-collapsed'); + localStorage.setItem(STORAGE_KEY, 'false'); + var ci = document.getElementById('chatInput'); + if (ci) ci.focus(); + } + + if (closeBtn) closeBtn.addEventListener('click', collapse); + if (rail) rail.addEventListener('click', expand); })(); // 7. Focus management — prevent viewer content from stealing keystrokes @@ -653,4 +647,9 @@ } }); })(); + + // Initial focus — run after all setup (including chat-collapsed check) + if (chatInput && !document.body.classList.contains('chat-collapsed')) { + chatInput.focus(); + } })(); diff --git a/teams-required-pages/builder.html b/teams-required-pages/builder.html index 2eaad6b..1d80b9d 100644 --- a/teams-required-pages/builder.html +++ b/teams-required-pages/builder.html @@ -18,14 +18,9 @@
- +
Tab Designer
+
Tab Designer

Teams: What can I create for you? Ask "what can you do?" or "how does this work?" to learn more. Remember to save often!

diff --git a/teams-required-pages/pages.html b/teams-required-pages/pages.html index 3d74315..048e1a4 100644 --- a/teams-required-pages/pages.html +++ b/teams-required-pages/pages.html @@ -1,81 +1,103 @@ - SynthOS - Pages + Teams - Pages @@ -84,26 +106,8 @@ -
-
SynthOS
-
-
-

SynthOS: Here are all of the created pages. Right-click any page to pin it to - favorites, edit its definition, or copy it to a new page.

-
-
-
- Save - Pages - Reset -
-
- - -
-
-
Pages
+
Pages
@@ -233,6 +237,25 @@

Pages

+
Tab Designer
+
+
Tab Designer
+
+
+

Teams: Here are all of the created pages. Right-click any page to pin it to + favorites, edit its definition, or copy it to a new page.

+
+
+
+ Save + Pages + Reset +
+
+ + +
+
@@ -916,4 +939,4 @@

Pages

- + \ No newline at end of file diff --git a/teams-required-pages/settings.html b/teams-required-pages/settings.html index 655e61c..e86322d 100644 --- a/teams-required-pages/settings.html +++ b/teams-required-pages/settings.html @@ -1,40 +1,107 @@ - SynthOS - Settings + Teams - Settings - + -
-
SynthOS
-
-
-

SynthOS: Configure your settings below. Use the accordion sections to navigate between General settings, Model configuration (Page Builder & Chat Completion), and Additional Features.

-

The Page Builder Model is used when building pages via chat. The Chat Model is used by pages that call synthos.generate.completion().

-
- -
-
- Save - Pages - Reset -
-
- - -
-
-
Settings
+
Settings
@@ -65,7 +132,7 @@
@@ -134,26 +201,6 @@
-
- -
-
-
-
- - -
-
-
-
-
-
+
Tab Designer
+
+
Tab Designer
+
+
+

Teams: Configure your settings below. Use the accordion sections to navigate between General settings, Model configuration (Page Builder & Chat Completion), and Additional Features.

+

The Page Builder Model is used when building pages via chat. The Chat Model is used by pages that call synthos.generate.completion().

+
+ +
+
+ Save + Pages + Reset +
+
+ + +
+
- - + \ No newline at end of file From 1010dec337e1ca4b2b1fe82c43a51f362c2f511e Mon Sep 17 00:00:00 2001 From: Steven Ickman Date: Fri, 20 Feb 2026 04:46:55 -0800 Subject: [PATCH 10/11] settings fix --- teams-required-pages/settings.html | 1 + 1 file changed, 1 insertion(+) diff --git a/teams-required-pages/settings.html b/teams-required-pages/settings.html index e86322d..f2a33c3 100644 --- a/teams-required-pages/settings.html +++ b/teams-required-pages/settings.html @@ -7,6 +7,7 @@