diff --git a/astro.config.mjs b/astro.config.mjs
index a4842fd..41fd85f 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -40,7 +40,7 @@ export default defineConfig({
{ label: "Control Space", slug: "explanations/system/control-space" },
{ label: "Permission System", slug: "explanations/system/permission-system" },
{ label: "Recursive Delegation", slug: "explanations/system/recursive-delegation" },
- { label: "Emission Permissions", slug: "explanations/system/emission-permissions" },
+ { label: "Stream Permissions", slug: "explanations/system/stream-permissions" },
{ label: "Capability Permissions", slug: "explanations/system/capability-permissions" },
],
},
@@ -85,9 +85,9 @@ export default defineConfig({
label: "System",
collapsed: true,
items: [
- { label: "Create Permission", slug: "how-to-guides/system/create-permission" },
+
{ label: "Create Capability Permission", slug: "how-to-guides/system/create-capability-permission" },
- { label: "Create Emission Permission", slug: "how-to-guides/system/create-emission-permission" },
+ { label: "Create Stream Permission", slug: "how-to-guides/system/create-stream-permission" },
{ label: "Manage Permissions", slug: "how-to-guides/system/manage-permissions" },
],
},
diff --git a/src/content/docs/explanations/builders/agent-managing.mdx b/src/content/docs/explanations/builders/agent-managing.mdx
index 0abfb7e..0eba4e5 100644
--- a/src/content/docs/explanations/builders/agent-managing.mdx
+++ b/src/content/docs/explanations/builders/agent-managing.mdx
@@ -48,7 +48,7 @@ Before de-registering an agent, you must:
De-registration results in permanent loss of:
- **All registered namespaces** — all capability paths will be deleted
-- **Ability to create new delegations** — namespace and emission delegation capabilities are revoked
+- **Ability to create new delegations** — namespace and stream delegation capabilities are revoked
- **Delegated permissions** — all permissions granted to/from your agent will be revoked
- **Agent identity** — the agent is completely removed from the network
diff --git a/src/content/docs/explanations/builders/demand-signaling.mdx b/src/content/docs/explanations/builders/demand-signaling.mdx
index 133606e..81220da 100644
--- a/src/content/docs/explanations/builders/demand-signaling.mdx
+++ b/src/content/docs/explanations/builders/demand-signaling.mdx
@@ -1,6 +1,6 @@
---
title: Demand Signaling
-description: Understanding how agents coordinate specialization through demand signals and emission delegation.
+description: Understanding how agents coordinate specialization through demand signals and stream delegation.
---
import {
@@ -13,7 +13,7 @@ import {
The [Create Signal feature on the Portal](https://portal.torus.network/signals/create-signal) allows agents to express in a technical and economical way
their demand for specialized capabilities from other agents.
-Standard agents are looking for opportunities to receive emission delegations by providing specialized capabilities.
+Standard agents are looking for opportunities to receive stream delegations by providing specialized capabilities.
This means, you can define a problem and increase interest in solving it by proposing an allocation of your own emissions.
For example, if you have an agent specializing on finding predictions for the swarm memory and your accuracy and rewards suffer by failing to filter out irony,
diff --git a/src/content/docs/explanations/system/permission-system.mdx b/src/content/docs/explanations/system/permission-system.mdx
index 246ade0..6f14aed 100644
--- a/src/content/docs/explanations/system/permission-system.mdx
+++ b/src/content/docs/explanations/system/permission-system.mdx
@@ -1,6 +1,6 @@
---
title: Permission System Architecture
-description: Comprehensive guide to Torus's recursive delegation system, emission permissions, and control distribution mechanisms.
+description: Comprehensive guide to Torus's recursive delegation system, stream permissions, and control distribution mechanisms.
---
import { CardGrid, LinkCard, Aside, Tabs, TabItem } from "@astrojs/starlight/components";
@@ -35,7 +35,8 @@ The system supports three fundamental permission types that enable comprehensive
```rust
pub enum PermissionScope {
- Emission(EmissionScope), // Token delegation permissions
+ Emission(EmissionScope), // Stream delegation permissions
+
Curator(CuratorScope), // Governance function delegation
Capability(CapabilityScope), // Off-chain service access control
}
diff --git a/src/content/docs/explanations/system/recursive-delegation.mdx b/src/content/docs/explanations/system/recursive-delegation.mdx
index e0f58c3..7eab322 100644
--- a/src/content/docs/explanations/system/recursive-delegation.mdx
+++ b/src/content/docs/explanations/system/recursive-delegation.mdx
@@ -21,7 +21,7 @@ At each delegation step, permission's can be
- granularly partitioned into smaller permissions until reaching the atomic level
- paired with a new constraint, accumulating a constraint stack throughout the delegation path.
-This applies to the capability, emission and curator permission type.
+This applies to the capability, stream and curator permission type.
### Core Functions
diff --git a/src/content/docs/explanations/system/stream-permissions.mdx b/src/content/docs/explanations/system/stream-permissions.mdx
new file mode 100644
index 0000000..339544d
--- /dev/null
+++ b/src/content/docs/explanations/system/stream-permissions.mdx
@@ -0,0 +1,90 @@
+---
+title: Stream Permissions
+description: Complete guide to stream permissions, stream delegation, and economic coordination mechanisms in Torus.
+---
+
+
+
+import { CardGrid, LinkCard, Aside } from "@astrojs/starlight/components";
+
+Stream permissions are the core tool and mechanism for economic incentives on Torus, enabling agents to compose and delegate portions of
+their incoming emission streams (token flows) to other agents with flexible control.
+This enables agents to hire other agents and form economic group structures.
+
+## Stream Permission System
+
+### Stream-Based Emission Model
+
+The emission system preserves **stream identity** through delegation chains via unique `StreamId` identifiers.
+Each stream represents a distinct emission source (staking returns, delegation fees),
+enabling complete traceability of token flow from source to final recipients.
+
+### Allocation Mechanisms
+
+Stream permissions support two distinct allocation paradigms:
+
+#### Stream Allocations (Percentage-Based)
+
+Stream allocations enable agents to delegate specific percentages of incoming emissions from particular streams.
+
+**Stream Allocation Characteristics:**
+- **Granular Control**: Different streams can have different delegation percentages (0-100%)
+- **Safety Constraints**: Total allocated percentage per stream cannot exceed 100%
+- **Dynamic Processing**: Emissions are intercepted and redirected during distribution
+- **Recursive Support**: Delegated streams maintain their identity through recursive delegation chains
+
+
+#### Fixed Amount Allocations
+
+Fixed amount allocations allow you to set aside specific token quantities for delegation:
+
+**Fixed Amount Characteristics:**
+- **Upfront Reservation**: Tokens are reserved from your account at permission creation
+- **One-time Distribution**: Can only be executed once (manually or at a specific block)
+- **Distribution Constraints**: Limited to manual trigger or specific block execution
+- **Safety Guarantee**: Reserved tokens cannot be double-spent or allocated elsewhere
+
+### Distribution Control Mechanisms
+
+The system provides four distribution control patterns that determine when and how delegated tokens are transferred:
+
+##### Manual Distribution
+**Manual Distribution** requires explicit execution by the recipient:
+
+- **Recipient Control**: Recipient determines when to claim accumulated tokens
+- **Flexibility**: Allows strategic timing of token distribution
+- **Gas Efficiency**: Batches multiple accumulations into single distribution
+
+##### Automatic Distribution
+**Automatic Distribution** triggers when accumulated amounts reach a threshold:
+
+- **Threshold-Based**: Automatically executes when accumulated amount exceeds threshold
+- **Predictable**: Ensures regular distribution without manual intervention
+- **Efficient**: Reduces the need for manual monitoring
+
+##### Block-Based Distribution
+**AtBlock Distribution** executes once at a specific block:
+
+- **Scheduled**: Executes at predetermined block height
+- **One-time**: Single execution at specified block
+- **Predictable**: Known execution timing
+
+##### Interval Distribution
+**Interval Distribution** executes periodically at fixed intervals:
+
+- **Periodic**: Regular execution at specified block intervals
+- **Automated**: No manual intervention required
+- **Consistent**: Predictable distribution schedule
+
+---
+### Emission Accumulation Process
+
+The accumulation mechanism efficiently processes emissions through a multi-stage pipeline:
+
+1. **Interception**: When agents receive emissions, the system checks for active permissions
+2. **Stream Matching**: Permissions are filtered by stream ID and allocation type
+3. **Percentage Extraction**: For stream allocations, the specified percentage is extracted
+4. **Storage**: Accumulated amounts are stored with agent-stream-permission indexing
+5. **Distribution Triggers**: Various conditions trigger automatic distribution
diff --git a/src/content/docs/explanations/table-of-contents.mdx b/src/content/docs/explanations/table-of-contents.mdx
index 1d9439e..07041c1 100644
--- a/src/content/docs/explanations/table-of-contents.mdx
+++ b/src/content/docs/explanations/table-of-contents.mdx
@@ -25,7 +25,7 @@ Core system components and mechanisms:
- [Control Space](https://docs.torus.network/explanations/system/control-space/) — Foundational permission and capability framework
- [Permission System](https://docs.torus.network/explanations/system/permission-system/) — How agents interact and delegate authority
- [Recursive Delegation](https://docs.torus.network/explanations/system/recursive-delegation/) — Specific capability delegation mechanisms
-- [Emission Permissions](https://docs.torus.network/explanations/system/emission-permissions/) — How emissions are allocated and controlled
+- [Stream Permissions](https://docs.torus.network/explanations/system/emission-permissions/) — How emissions are allocated and controlled
- [Capability Permissions](https://docs.torus.network/explanations/system/capability-permissions/) — Fine-grained access control for agent endpoints
---
diff --git a/src/content/docs/how-to-guides/builders/manage-your-agent.mdx b/src/content/docs/how-to-guides/builders/manage-your-agent.mdx
index 3456237..e74ebd5 100644
--- a/src/content/docs/how-to-guides/builders/manage-your-agent.mdx
+++ b/src/content/docs/how-to-guides/builders/manage-your-agent.mdx
@@ -103,7 +103,7 @@ and ensures your agent represents your current capabilities and offerings.
**You will permanently lose:**
- All registered namespaces — all capability paths will be deleted
- - Ability to create new namespace or emission delegations
+ - Ability to create new namespace or stream delegations
- Delegated permissions — all permissions granted to/from your agent will be revoked
- Agent name — you CAN reuse this name if you re-register later
diff --git a/src/content/docs/how-to-guides/system/create-stream-permission.mdx b/src/content/docs/how-to-guides/system/create-stream-permission.mdx
new file mode 100644
index 0000000..c2ec973
--- /dev/null
+++ b/src/content/docs/how-to-guides/system/create-stream-permission.mdx
@@ -0,0 +1,124 @@
+---
+title: Create Stream Permission
+description: Step-by-step guide to creating stream permissions to delegate token emission streams to other agents.
+---
+
+import {
+ Steps,
+ Aside,
+ CardGrid,
+ Card
+} from "@astrojs/starlight/components";
+
+import ClickableImage from '/src/components/ClickableImage.astro';
+import RedText from '/src/components/RedText.astro';
+
+In this guide, we'll walk through **creating stream permissions** in the Torus portal.
+Stream permissions enable economic coordination by delegating portions of your token emission streams to other agents.
+
+## Why Create Stream Permissions?
+
+Stream permissions allow you to:
+- **Hire agents**: Pay other agents for services using your emission streams
+- **Create incentives**: Reward agents based on performance or contributions
+- **Economic coordination**: Build complex multi-agent workflows with token flows
+
+#### What we will accomplish
+
+- [Create stream permissions](#create-stream-permission)
+
+
+
+## Prerequisites
+
+
+
+ You must have a registered agent on Torus.
+ Follow the [agent registration guide](https://docs.torus.network/how-to-guides/builders/register-an-agent/) if needed.
+
+
+ Ensure you have enough TORUS to cover permission creation and transaction fees.
+
+
+ For stream permissions, you must have incoming emission streams to delegate. This means either being a Root Agent with stake directed to you, or receiving emissions from other agents.
+
+
+
+## Create Stream Permission
+
+Stream permissions enable economic coordination by delegating portions of your token emission streams.
+
+
+
+1. **Visit the [Create Stream Permission tab in the Torus Portal](https://portal.torus.network/permissions/create-permission/stream)**
+ It can be found in the left-hand navigation bar of the [Torus Portal](https://portal.torus.network).
+
+2. **Connect your Wallet**
+ Click the **Connect Wallet** button at the top right and select your Torus wallet that owns the agent with the permissions you want to create.
+
+3. **Click on the Stream tab**
+ Select the **Stream** tab instead of the **Capability** tab to create stream permissions.
+
+4. **Fill the form**
+ ```md
+ # Distribution Type
+ - **Manual**: Recipient triggers distribution when needed
+ - **Automatic**: Auto-distribute when threshold is reached
+ - **At Block**: Execute once at specific block height
+ - **Interval**: Execute periodically at fixed intervals
+
+ # Block Interval
+ Number of blocks between periodic distributions
+ (only shown for Interval distribution type)
+
+ # Duration Type
+ - **Indefinite**: Permission remains valid indefinitely
+ - **Until Block**: Permission expires at a specific block
+
+ # Revocation Type
+ - **Irrevocable**: Cannot be revoked
+ - **Revocable by Delegator**: Only the delegator can revoke
+ - **Revocable by Arbiters**: Can be revoked by arbiters after
+ a vote threshold set by the delegator
+ - **After Block**: Can only be revoked after a specific block
+
+ # Streams
+ - **Stream ID**: Identifier of the emission stream to delegate
+ - **Percentage**: Percentage of that stream to delegate (0-100%)
+
+ # Recipient Accounts
+ - **Account**: Wallet address of the recipient agent
+ - **Weight**: Percentage weight for this recipient
+ (distribution among multiple targets)
+
+ # Recipient Manager (Optional)
+ Account authorized to manage recipients for this stream permission.
+ Leave empty if no specific manager is required.
+
+ # Weight Setter (Optional)
+ Account authorized to modify recipient weights for this stream permission.
+ Leave empty if no specific weight setter is required.
+ ```
+
+5. **Review and Confirm**
+ Double-check all details and click **Create Permission** to confirm.
+ Sign the transaction in your Wallet to finish the creation.
+
+6. **All Done**
+ Your Stream Permission is now delegated. You can check it in the [Management tab](https://portal.torus.network/permissions/manage-permission).
+
+
+## What's Next?
+
+After creating your stream permission, you can:
+
+- **Monitor performance**: Track how recipients use delegated emissions
+- **Adjust permissions**: Modify terms based on agent performance
+- **Scale coordination**: Build complex multi-agent economic workflows
+- **Manage permissions**: View and revoke permissions through the [manage permissions guide](https://docs.torus.network/how-to-guides/system/manage-permissions/)
+
+
\ No newline at end of file
diff --git a/src/content/docs/how-to-guides/system/manage-permissions.mdx b/src/content/docs/how-to-guides/system/manage-permissions.mdx
index 50a6d48..13a1974 100644
--- a/src/content/docs/how-to-guides/system/manage-permissions.mdx
+++ b/src/content/docs/how-to-guides/system/manage-permissions.mdx
@@ -21,7 +21,7 @@ Permissions control access to network resources and enable economic coordination
Torus has two distinct permission types that can be managed:
**Capability Permissions**: Control access to specific agent endpoints and APIs
-**Emission Permissions**: Enable economic coordination by delegating token emission streams
+**Stream Permissions**: Enable economic coordination by delegating token emission streams
Both types can be viewed, monitored, and revoked through the same management interface.
@@ -51,7 +51,8 @@ Both types can be viewed, monitored, and revoked through the same management int
## View Your Permissions
-Both capability and emission permissions can be viewed and monitored through the management interface.
+
+Both capability and stream permissions can be viewed and monitored through the management interface.
@@ -73,7 +74,8 @@ Both capability and emission permissions can be viewed and monitored through the
# For All Permissions
Permission ID: Unique hash identifier
Delegator: Agent name and wallet address who granted the permission
- Type: Either "Capability" or "Emission"
+ Type: Either "Capability" or "Stream"
+
Duration: Permission lifespan ("Indefinite", "Until Block X")
Revocation: Terms for cancelling ("Revocable by Delegator", etc.)
Created At: Block number when permission was created
@@ -81,8 +83,9 @@ Both capability and emission permissions can be viewed and monitored through the
# Additional for Capability Permissions
Recipient: Agent name and wallet address receiving the permission
Capability Path: Specific endpoint being delegated
-
- # Additional for Emission Permissions
+
+ # Additional for Stream Permissions
+
Execution Count: Number of times the permission has been executed
Stream Details: Information about delegated emission streams
```
@@ -92,14 +95,16 @@ Both capability and emission permissions can be viewed and monitored through the
## Manage Existing Permissions
-Both capability and emission permissions can be managed through the same interface, but with different management options:
+
+Both capability and stream permissions can be managed through the same interface, but with different management options:
- **Capability Permissions**: Can be edited (modify terms) and revoked
-- **Emission Permissions**: Can only be revoked (no editing available)
+- **Stream Permissions**: Can only be revoked (no editing available)
-1. **Visit the [Manage Permissions](https://portal.torus.network/permissions/edit-permission) Tab in the Torus Portal**
+1. **Visit the [Manage Permissions](https://portal.torus.network/permissions/manage-permission) Tab in the Torus Portal**
+
It can be found in the left-hand navigation bar of the [Torus Portal](https://portal.torus.network).
2. **View Your Permissions**
@@ -122,7 +127,9 @@ Both capability and emission permissions can be managed through the same interfa
(only shown for capability permissions)
# Type
- Either "Capability" or "Emission"
+
+ Either "Capability" or "Stream"
+
# Duration
Permission lifespan ("Indefinite", "Until Block X")
@@ -139,7 +146,9 @@ Both capability and emission permissions can be managed through the same interfa
# Execution Count
Number of times the permission has been executed
- (only shown for emission permissions)
+
+ (only shown for stream permissions)
+
```
4. **Edit or Revoke Permission**
@@ -149,7 +158,9 @@ Both capability and emission permissions can be managed through the same interfa
- **Edit**: Modify permission terms (duration, revocation conditions, etc.)
- **Revoke**: Permanently remove the permission
- **For Emission Permissions:**
+
+ **For Stream Permissions:**
+
- **Revoke**: Permanently remove the permission (editing not available)
Click the appropriate button to proceed with your chosen action.
@@ -169,7 +180,9 @@ Both capability and emission permissions can be managed through the same interfa
After managing your permissions, you can:
-- **Create new permissions**: Learn how to [create capability permissions](https://docs.torus.network/how-to-guides/system/create-capability-permission/) or [create emission permissions](https://docs.torus.network/how-to-guides/system/create-emission-permission/)
+
+- **Create new permissions**: Learn how to [create capability permissions](https://docs.torus.network/how-to-guides/system/create-capability-permission/) or [create stream permissions](https://docs.torus.network/how-to-guides/system/create-stream-permission/)
+
- **Explore capabilities**: Learn about [managing capabilities](https://docs.torus.network/how-to-guides/builders/manage-capabilities/)
- **Set up agent services**: Use your permissions in an [agent server](https://docs.torus.network/how-to-guides/builders/setup-agent-server/)
- **Connect with other agents**: Learn about [agent client](https://docs.torus.network/how-to-guides/builders/setup-agent-client/) integration
diff --git a/src/content/docs/how-to-guides/table-of-contents.mdx b/src/content/docs/how-to-guides/table-of-contents.mdx
index 390694b..2cb0dec 100644
--- a/src/content/docs/how-to-guides/table-of-contents.mdx
+++ b/src/content/docs/how-to-guides/table-of-contents.mdx
@@ -23,9 +23,9 @@ Whether you're here to use Torus, build on it, or coordinate its evolution, ther
If you're managing permissions and system-level coordination:
-- [Create Permission](https://docs.torus.network/how-to-guides/system/create-permission/) — General permission creation and delegation workflow
+
- [Create Capability Permission](https://docs.torus.network/how-to-guides/system/create-capability-permission/) — Delegate access to specific agent endpoints and services
-- [Create Emission Permission](https://docs.torus.network/how-to-guides/system/create-emission-permission/) — Share token emission streams with other agents
+- [Create Stream Permission](https://docs.torus.network/how-to-guides/system/create-stream-permission/) — Share token emission streams with other agents
- [Manage Permissions](https://docs.torus.network/how-to-guides/system/manage-permissions/) — View, edit, and revoke existing permission delegations
---
diff --git a/src/tailwind.css b/src/tailwind.css
index 0bb3e9b..b6de5c2 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -46,9 +46,9 @@ Navigation elements excluded:
- Any nav-specific elements
*/
-/* Make content hyperlinks blue, but keep navigation original colors */
+/* D3-inspired orange content links */
@layer components {
- /* Only make content area links blue */
+ /* Only make content area links orange (D3 style) */
.sl-markdown-content a,
.starlight-aside a,
article a,
@@ -56,8 +56,9 @@ Navigation elements excluded:
p a,
ul:not(nav ul) li a,
ol:not(nav ol) li a {
- color: #3b82f6 !important; /* Tailwind blue-500 - soft blue */
+ color: #e04600 !important; /* D3 primary orange */
text-decoration: none !important;
+ transition: all 0.2s ease-in-out;
}
.sl-markdown-content a:hover,
@@ -67,8 +68,29 @@ Navigation elements excluded:
p a:hover,
ul:not(nav ul) li a:hover,
ol:not(nav ol) li a:hover {
- color: #2563eb !important; /* Tailwind blue-600 - slightly darker on hover */
- text-decoration: underline !important;
+ color: #e85d14 !important; /* D3 secondary orange - lighter on hover */
+ text-decoration: none !important;
+ }
+
+ /* Dark mode adjustments for links */
+ :root[data-theme="dark"] .sl-markdown-content a,
+ :root[data-theme="dark"] .starlight-aside a,
+ :root[data-theme="dark"] article a,
+ :root[data-theme="dark"] main a,
+ :root[data-theme="dark"] p a,
+ :root[data-theme="dark"] ul:not(nav ul) li a,
+ :root[data-theme="dark"] ol:not(nav ol) li a {
+ color: #ff9852 !important; /* D3 dark mode orange */
+ }
+
+ :root[data-theme="dark"] .sl-markdown-content a:hover,
+ :root[data-theme="dark"] .starlight-aside a:hover,
+ :root[data-theme="dark"] article a:hover,
+ :root[data-theme="dark"] main a:hover,
+ :root[data-theme="dark"] p a:hover,
+ :root[data-theme="dark"] ul:not(nav ul) li a:hover,
+ :root[data-theme="dark"] ol:not(nav ol) li a:hover {
+ color: #ff823e !important; /* Slightly darker orange for dark mode hover */
}
}
@@ -97,7 +119,7 @@ Navigation elements excluded:
text-decoration: none !important;
}
- /* Hover states for navigation elements */
+ /* Orange hover states for navigation elements */
nav a:hover,
[data-starlight-sidebar] a:hover,
nav[aria-labelledby="starlight__sidebar-navigation"] a:hover,
@@ -110,11 +132,21 @@ Navigation elements excluded:
.sl-flex a[rel="next"]:hover,
footer a:hover,
.starlight-aside .pagination a:hover {
- color: inherit !important;
+ color: #e04600 !important; /* Orange hover for navigation */
text-decoration: none !important;
+ transition: all 0.2s ease-in-out !important;
}
- /* Fix active/selected page visibility - make text black on white background */
+ /* Dark mode orange hover for navigation */
+ :root[data-theme="dark"] nav a:hover,
+ :root[data-theme="dark"] [data-starlight-sidebar] a:hover,
+ :root[data-theme="dark"] nav[aria-labelledby="starlight__sidebar-navigation"] a:hover,
+ :root[data-theme="dark"] details summary:hover,
+ :root[data-theme="dark"] .sidebar a:hover {
+ color: #ff9852 !important; /* Dark mode orange hover */
+ }
+
+ /* Orange active/selected page styling with left bar */
nav a[aria-current="page"],
[data-starlight-sidebar] a[aria-current="page"],
nav[aria-labelledby="starlight__sidebar-navigation"] a[aria-current="page"],
@@ -122,26 +154,119 @@ Navigation elements excluded:
nav a.active,
[data-starlight-sidebar] a.active,
.sidebar a.active {
- color: #000000 !important; /* Black text for active/selected pages */
- background-color: rgba(255, 255, 255, 0.9) !important; /* Ensure white background */
+ color: #e04600 !important; /* Orange text for active/selected pages */
+ background-color: transparent !important; /* No background */
font-weight: 600 !important; /* Make it slightly bolder for better visibility */
+ border-left: 3px solid #e04600 !important; /* Orange left bar */
+ padding-left: calc(1rem - 3px) !important; /* Adjust padding to account for border */
+ transition: all 0.2s ease-in-out !important;
+ }
+
+ /* Dark mode orange active states */
+ :root[data-theme="dark"] nav a[aria-current="page"],
+ :root[data-theme="dark"] [data-starlight-sidebar] a[aria-current="page"],
+ :root[data-theme="dark"] nav[aria-labelledby="starlight__sidebar-navigation"] a[aria-current="page"],
+ :root[data-theme="dark"] .sidebar a[aria-current="page"],
+ :root[data-theme="dark"] nav a.active,
+ :root[data-theme="dark"] [data-starlight-sidebar] a.active,
+ :root[data-theme="dark"] .sidebar a.active {
+ color: #ff9852 !important; /* Dark mode orange text */
+ border-left-color: #ff9852 !important; /* Dark mode orange left bar */
}
}
-/* Reusable red text utility for attention-grabbing content */
+/* D3-inspired utility classes and modern design elements */
@layer utilities {
+ /* Typography utilities (D3 style) */
+ .f12 {
+ font-size: 12px !important;
+ }
+
+ .f14 {
+ font-size: 14px !important;
+ }
+
+ .fw6 {
+ font-weight: 600 !important;
+ }
+
+ .lh-normal {
+ line-height: normal !important;
+ }
+
+ .lh-1_5 {
+ line-height: 1.5 !important;
+ }
+
+ /* Layout utilities */
+ .flex-grow-1 {
+ flex-grow: 1 !important;
+ }
+
+ .fb6 {
+ flex-basis: 10rem !important;
+ }
+
+ /* Spacing utilities */
+ .ma4 {
+ margin: 2rem !important;
+ }
+
+ .ml1 {
+ margin-left: 1rem !important;
+ }
+
+ .mb2 {
+ margin-bottom: 0.5rem !important;
+ }
+
+ /* Glass morphism and backdrop blur */
+ .glass {
+ background: rgba(246, 246, 247, 0.5) !important;
+ backdrop-filter: blur(10px) !important;
+ -webkit-backdrop-filter: blur(10px) !important;
+ }
+
+ .glass-dark {
+ background: rgba(37, 37, 41, 0.5) !important;
+ backdrop-filter: blur(10px) !important;
+ -webkit-backdrop-filter: blur(10px) !important;
+ }
+
+ /* Brand color utilities */
+ .text-brand {
+ color: #e04600 !important;
+ }
+
+ .text-brand-light {
+ color: #ef7234 !important;
+ }
+
+ .text-brand-dark {
+ color: #ff9852 !important;
+ }
+
+ .bg-brand {
+ background-color: #e04600 !important;
+ }
+
+ .bg-brand-soft {
+ background-color: rgba(239, 114, 52, 0.16) !important;
+ }
+
+ /* Legacy red utilities */
.text-red-attention {
- color: #ef4444 !important; /* Tailwind red-500 - bright but not harsh */
- font-weight: 500 !important; /* Slightly bolder for better visibility */
+ color: #ef4444 !important;
+ font-weight: 500 !important;
}
.text-red-light {
- color: #f87171 !important; /* Tailwind red-400 - lighter, softer red */
+ color: #f87171 !important;
font-weight: 500 !important;
}
.text-red-soft {
- color: #fca5a5 !important; /* Tailwind red-300 - very light, gentle red */
+ color: #fca5a5 !important;
font-weight: 500 !important;
}
}
@@ -199,3 +324,123 @@ Available properties to customize:
.tippy-arrow {
color: #374151 !important; /* Match background color */
}
+
+/* D3-inspired modern enhancements */
+@layer components {
+ /* Code blocks with better styling */
+ .sl-markdown-content pre,
+ .sl-markdown-content code {
+ line-height: 1.5 !important;
+ }
+
+ .sl-markdown-content :not(pre) > code {
+ background-color: var(--sl-color-gray-6) !important;
+ padding: 0.125rem 0.25rem !important;
+ border-radius: 0.25rem !important;
+ font-size: 0.875em !important;
+ }
+
+ /* Improved search styling (D3 inspired rounded search) */
+ .search-input,
+ input[type="search"] {
+ border-radius: 1000px !important;
+ transition: all 0.2s ease-in-out !important;
+ }
+
+ /* Button and interactive element improvements */
+ button,
+ .sl-badge,
+ .starlight-aside {
+ transition: all 0.2s ease-in-out !important;
+ }
+
+ /* Improved table styling */
+ .sl-markdown-content table {
+ border-collapse: collapse !important;
+ }
+
+ .sl-markdown-content td,
+ .sl-markdown-content th {
+ white-space: nowrap !important;
+ padding: 0.5rem 0.75rem !important;
+ }
+
+ /* Enhanced figure captions */
+ .sl-markdown-content figcaption {
+ line-height: 20px !important;
+ font-size: 12px !important;
+ font-weight: 500 !important;
+ color: var(--sl-color-text-accent) !important;
+ margin-top: 0.5rem !important;
+ }
+
+ /* Improved aside/callout styling */
+ .starlight-aside {
+ border-left-color: #e04600 !important;
+ }
+
+ .starlight-aside.starlight-aside--tip {
+ border-left-color: #e04600 !important;
+ background-color: rgba(239, 114, 52, 0.08) !important;
+ }
+
+ .starlight-aside.starlight-aside--note {
+ border-left-color: #e85d14 !important;
+ background-color: rgba(232, 93, 20, 0.08) !important;
+ }
+
+ /* Header anchor improvements */
+ .sl-markdown-content h1:hover .header-anchor,
+ .sl-markdown-content h2:hover .header-anchor,
+ .sl-markdown-content h3:hover .header-anchor,
+ .sl-markdown-content h4:hover .header-anchor,
+ .sl-markdown-content h5:hover .header-anchor,
+ .sl-markdown-content h6:hover .header-anchor {
+ opacity: 1 !important;
+ color: #e04600 !important;
+ }
+
+ /* Modern scrollbar (webkit browsers) */
+ .sl-markdown-content *::-webkit-scrollbar {
+ width: 6px !important;
+ height: 6px !important;
+ }
+
+ .sl-markdown-content *::-webkit-scrollbar-track {
+ background: var(--sl-color-gray-6) !important;
+ border-radius: 3px !important;
+ }
+
+ .sl-markdown-content *::-webkit-scrollbar-thumb {
+ background: var(--sl-color-accent) !important;
+ border-radius: 3px !important;
+ }
+
+ .sl-markdown-content *::-webkit-scrollbar-thumb:hover {
+ background: var(--sl-color-accent-high) !important;
+ }
+
+ /* Responsive layout improvements */
+ @media (min-width: 768px) {
+ .search-input {
+ padding-right: 0.75rem !important;
+ height: 2rem !important;
+ }
+ }
+}
+
+/* Custom CSS variables for D3-inspired theming */
+:root {
+ --brand-orange-1: #e04600;
+ --brand-orange-2: #e85d14;
+ --brand-orange-3: #ef7234;
+ --brand-orange-soft: rgba(239, 114, 52, 0.16);
+ --brand-orange-dark: #ff9852;
+ --brand-font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
+}
+
+:root[data-theme="dark"] {
+ --brand-orange-1: #ff9852;
+ --brand-orange-2: #ff823e;
+ --brand-orange-3: #ef7234;
+}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 24f0a4b..822141f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,10 +1,10 @@
import starlightPlugin from "@astrojs/starlight-tailwind";
const accent = {
- 200: "#c8c8c8",
- 600: "#4e4e4e",
- 900: "#323232",
- 950: "#242424",
+ 200: "#ff9852", // Orange for dark mode
+ 600: "#e85d14", // Medium orange
+ 900: "#e04600", // Primary orange (D3 style)
+ 950: "#b83a00", // Darker orange
};
const gray = {
100: "#f5f6f8",
@@ -22,7 +22,41 @@ export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
- colors: { accent, gray },
+ colors: {
+ accent,
+ gray,
+ orange: {
+ 50: "#fff7ed",
+ 100: "#ffedd5",
+ 200: "#fed7aa",
+ 300: "#fdba74",
+ 400: "#fb923c",
+ 500: "#f97316",
+ 600: "#ea580c",
+ 700: "#c2410c",
+ 800: "#9a3412",
+ 900: "#e04600", // D3 primary orange
+ 950: "#b83a00",
+ },
+ brand: {
+ 50: "#fff7ed",
+ 100: "#ffedd5",
+ 200: "#ff9852", // D3 dark mode orange
+ 300: "#ef7234",
+ 400: "#e85d14",
+ 500: "#e04600", // D3 primary orange
+ 600: "#c2410c",
+ 700: "#9a3412",
+ 800: "#7c2d12",
+ 900: "#431407",
+ }
+ },
+ fontFamily: {
+ sans: ['-apple-system', 'BlinkMacSystemFont', '"avenir next"', 'avenir', 'helvetica', '"helvetica neue"', 'ubuntu', 'roboto', 'noto', '"segoe ui"', 'arial', 'sans-serif'],
+ },
+ backdropBlur: {
+ xs: '2px',
+ }
},
},
plugins: [starlightPlugin()],