diff --git a/packages/preview/calmly-touying/0.2.0/LICENSE b/packages/preview/calmly-touying/0.2.0/LICENSE new file mode 100644 index 0000000000..4ebda371ea --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Yichen Han + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/preview/calmly-touying/0.2.0/README.md b/packages/preview/calmly-touying/0.2.0/README.md new file mode 100644 index 0000000000..b7fe3af7e6 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/README.md @@ -0,0 +1,533 @@ +# Calmly - Touying Presentation Theme + +A modern, minimalist presentation theme for [Touying](https://github.com/touying-typ/touying). Calm, approachable, and intelligent—designed to let your content shine. + +[![Typst Universe](https://img.shields.io/badge/Typst_Universe-calmly--touying-blue)](https://typst.app/universe/package/calmly-touying) +![License](https://img.shields.io/badge/license-MIT-blue.svg) +![Typst](https://img.shields.io/badge/typst-0.12+-blue.svg) +![Touying](https://img.shields.io/badge/touying-0.6.1-orange.svg) + +## Installation + +### From [Typst Universe](https://typst.app/universe/package/calmly-touying) + +Use the template directly: + +```bash +# Create a new presentation from template +typst init @preview/calmly-touying:0.2.0 my-presentation +cd my-presentation +typst compile main.typ +``` + +Or import it in an existing project: + +```typst +#import "@preview/calmly-touying:0.2.0": * +``` + +### Local Development + +For local development or contributing, see the [GitHub repository](https://github.com/YHan228/calmly-touying). + +## Features + +- **Four Color Themes**: Tomorrow, Warm Amber, Paper, and Dracula palettes +- **Light/Dark Variants**: Adapt to different venues and preferences +- **Moloch-Inspired Design**: Clean headers, progress bars, and academic styling +- **Multiple Slide Types**: Title, content, focus, standout, section, figure, equation, and more +- **Rich Components**: Highlight boxes, alert/example boxes, algorithm containers, citation gadgets +- **Progressive Reveals**: `#only()` and `#pause` for animations +- **Golden Ratio Spacing**: Mathematically pleasing proportions +- **Bibliography Integration**: Styled citations and reference slides + +## Quick Start + +```typst +#import "@preview/calmly-touying:0.2.0": * + +#show: calmly.with( + config-info( + title: [Your Presentation Title], + subtitle: [Event or Context], + author: [Your Name], + date: datetime.today(), + institution: [Your Institution], + ), +) + +#title-slide() + +== First Slide + +Your content here... + +- Bullet points are styled automatically +- *Emphasis* and **strong text** work as expected + +#focus-slide[ + Key Takeaway Message +] + +#ending-slide( + contact: ("email@example.com", "github.com/username"), +) +``` + +## Configuration Options + +The theme supports extensive customization through configuration options: + +```typst +#show: calmly.with( + config-info( + title: [Your Title], + author: [Your Name], + ), + variant: "light", // "light" | "dark" + colortheme: "tomorrow", // "tomorrow" | "warm-amber" | "paper" | "dracula" + progressbar: "foot", // "foot" | "head" | "frametitle" | "none" + header-style: "moloch", // "moloch" | "minimal" + title-layout: "moloch", // "moloch" | "centered" | "split" +) +``` + +| Option | Values | Description | +|--------|--------|-------------| +| `variant` | `"light"`, `"dark"` | Color mode for the presentation | +| `colortheme` | `"tomorrow"`, `"warm-amber"`, `"paper"`, `"dracula"` | Color palette (tomorrow is default) | +| `progressbar` | `"foot"`, `"head"`, `"frametitle"`, `"none"` | Progress bar position | +| `header-style` | `"moloch"`, `"minimal"` | Slide header style (colored bar vs underline) | +| `title-layout` | `"moloch"`, `"centered"`, `"split"` | Title slide layout variant | + +### Color Themes + +- **Tomorrow** (default): Programmer-friendly palette based on Tomorrow theme. Balanced colors. +- **Warm Amber**: Soft, warm tones with amber accents. Premium, modern feel. +- **Paper**: High contrast black/white with blue accents. Academic style. +- **Dracula**: Purple and pink accents. + +## Slide Types + +### Title Slide +```typst +#title-slide() +#title-slide(layout: "centered") // Alternative layouts +#title-slide(layout: "split") +``` + +### Content Slides +Standard slides are created automatically with level-2 headings: +```typst +== Slide Title + +Content goes here... +``` + +### Focus Slide +Full-bleed accent gradient background for emphasis: +```typst +#focus-slide[ + Important statement or takeaway +] +``` + +### Standout Slide +High-contrast background for maximum emphasis: +```typst +#standout-slide[ + Key Message +] +``` + +### Section Slide +Clean section dividers with optional progress: +```typst +#section-slide[Methods] +#section-slide(show-progress: true)[Results] +``` + +### Figure Slide +Centered figure with optional caption: +```typst +#figure-slide( + image("figure.svg"), + title: [Figure Title], + caption: [Description of the figure], +) +``` + +### Split Figure Slide +Two figures side-by-side: +```typst +#figure-slide-split( + image("left.svg"), + image("right.svg"), + title: [Comparison], + caption-left: [Before], + caption-right: [After], +) +``` + +### Equation Slide +Centered equation with definition box and optional citation: +```typst +#equation-slide( + $E = m c^2$, + title: [Mass-Energy Equivalence], + subtitle: [Einstein's famous equation], + definitions: [ + $E$ — Energy \ + $m$ — Mass \ + $c$ — Speed of light + ], + citation: (bib-key: "einstein1905", label: "Einstein 1905"), +) +``` + +### Bibliography Slide +```typst +#bibliography-slide(bib-content: bibliography("refs.bib", title: none, style: "apa")) +``` + +### Acknowledgement Slide +```typst +#acknowledgement-slide( + subtitle: [We thank the following], + people: ( + (name: "Prof. Smith", role: "Supervisor"), + (name: "Dr. Jones", role: "Advisor"), + ), + institutions: ("University A", "Lab B"), + extra: [Special thanks to all contributors.], +) +``` + +### Ending Slide +```typst +#ending-slide( + title: [Thank You], + subtitle: [Questions?], + contact: ("email@example.com", "github.com/username"), +) +``` + +## Components + +### Box Components + +```typst +// Key concepts and summaries +#highlight-box(title: "Key Point")[ + Important information here. +] + +// Warnings and critical notes +#alert-box(title: "Warning")[ + Critical information. +] + +// Examples and demonstrations +#example-box(title: "Example")[ + Illustrative content. +] + +// Generic themed container +#themed-block(title: "Block Title")[ + General content. +] +#themed-block(title: "Filled", fill-mode: "fill")[Filled background.] +``` + +### Algorithm Box +```typst +#algorithm-box(title: "Algorithm 1: Example")[ + *Input:* Data $X$ \ + *Output:* Result $Y$ \ + 1: Process data \ + 2: Return result +] +``` + +### Text Helpers +```typst +This is #alert[important] information. // Accent colored +This is #muted[secondary] information. // Muted grey +This is #subtle[tertiary] information. // Light subtle +``` + +### Citations + +**Inline Citations** (grey-boxed): +```typst +Recent work has shown improvements @smith2023. +``` +Renders with a subtle grey background pill. + +**Citation Box** (positioned in corners): +```typst +#cite-box("key", display-label: "Author 2023", position: "bottom-right") + +// Multiple citations +#cite-box( + ("key1", "key2"), + display-label: "Author1; Author2", + position: "top-right" +) +``` +Positions: `"top-right"`, `"bottom-left"`, `"bottom-right"` + +### Multi-Column Layouts +```typst +#two-col( + [Left column content], + [Right column content], +) + +#three-col([A], [B], [C]) +``` + +## Progressive Reveals + +### Using `#only(n)[...]` +Show content only on specific sub-slides: +```typst +== Building Concepts + +#only(1)[Step 1: Introduction] +#only(2)[Step 2: Details] +#only(3)[Step 3: Conclusion] +``` + +### Using `#pause` +Reveal content progressively: +```typst +== Points + +- First point +#pause +- Second point (appears after click) +#pause +- Third point +``` + +## Spacing Utilities + +### Flexible Spacing +```typst +#v(1fr) // Flexible vertical space +#v(spacing-md) // Fixed spacing (16pt) +``` + +### Vertical Centering +```typst +#v(1fr) +#align(center)[Centered content] +#v(1fr) +``` + +### Spacing Constants +| Constant | Size | +|----------|------| +| `spacing-xs` | 6pt | +| `spacing-sm` | 10pt | +| `spacing-md` | 16pt | +| `spacing-lg` | 24pt | +| `spacing-xl` | 36pt | +| `spacing-2xl` | 48pt | + +### Typography Constants +| Constant | Size | +|----------|------| +| `size-display` | 42pt | +| `size-title` | 34pt | +| `size-slide-title` | 26pt | +| `size-body` | 17pt | +| `size-small` | 15pt | +| `size-caption` | 13pt | + +### Golden Ratio Utilities +| Constant | Description | +|----------|-------------| +| `phi` | 1.618... golden ratio constant | +| `golden-major` | ~0.618 proportion | +| `golden-minor` | ~0.382 proportion | +| `golden-center(body)` | Vertically center with golden ratio offset | + +## Customization + +### Colors +Edit `theme/colors.typ` to customize the color palette. Each theme defines: +- Accent colors (primary, secondary, subtle) +- Background hierarchy (base, elevated, muted, surface) +- Text hierarchy (primary, secondary, muted) +- Functional colors (alert, example, focus) + +### Typography +Edit `theme/typography.typ` for font settings: + +```typst +#let font-heading = ("Source Sans Pro", "Noto Sans", "sans-serif") +#let font-body = ("Source Sans Pro", "Noto Sans", "sans-serif") +#let font-mono = ("JetBrains Mono", "Fira Code", "monospace") +``` + +### Recommended Fonts +For best results, install: +- [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+3) +- [JetBrains Mono](https://www.jetbrains.com/lp/mono/) +- [STIX Two Math](https://github.com/stipub/stixfonts) + +The theme will gracefully fall back to system fonts if these aren't available. + +## Examples + +The `examples/` directory contains several templates: + +| File | Description | +|------|-------------| +| `feature-showcase.typ` | Complete feature demonstration | +| `academic-talk.typ` | Realistic research presentation | +| `dark-variant.typ` | Dark mode example | +| `paper-theme.typ` | Paper color theme | +| `dracula-theme.typ` | Dracula color theme | +| `centered-title.typ` | Centered title layout | + +## File Structure + +```text +calmly-touying/ +├── typst.toml # Package manifest +├── lib.typ # Package entrypoint +├── LICENSE # MIT License +├── README.md +├── thumbnail.png # Package thumbnail (for Universe listing) +├── theme/ +│ ├── theme.typ # Main theme configuration +│ ├── colors.typ # Color palettes (4 themes × 2 variants) +│ ├── typography.typ # Font settings and spacing +│ ├── components.typ # Reusable components (30+) +│ ├── slides.typ # Slide type definitions +│ └── syntax-themes/ # .tmTheme files for code syntax highlighting +├── template/ # Starter template (for typst init) +│ └── main.typ # Template entry point +└── examples/ # Example presentations +``` + +## Building + +```bash +typst compile main.typ +``` + +Or use `typst watch main.typ` for live preview. + +## License + +MIT License - feel free to use and modify for your presentations. + +## Credits & References + +- Built on [Touying](https://github.com/touying-typ/touying) presentation framework by OrangeX4 +- Layout inspired by [Moloch](https://github.com/jolars/moloch) (Beamer theme) by Johan Larsson, itself based on [Metropolis](https://github.com/matze/mtheme) by Matthias Vogelgesang +- Color palette based on [Tailwind CSS](https://tailwindcss.com/docs/colors) Stone and Amber scales + +--- + +## Function Reference + +### Modified from Touying + +These functions wrap or extend Touying's base functionality: + +| Function | Description | +|----------|-------------| +| `slide()` | Enhanced slide with Moloch headers and progress bars | +| `title-slide()` | Router for title layout variants | +| `title-slide-moloch()` | Left-aligned title with separator line | +| `title-slide-centered()` | Centered title with accent underline | +| `title-slide-split()` | Two-column title with vertical separator | +| `focus-slide()` | Gradient background emphasis slide | +| `standout-slide()` | High-contrast emphasis slide | +| `section-slide()` | Section divider with optional progress | +| `figure-slide()` | Single centered figure display | +| `figure-slide-split()` | Side-by-side figure comparison | +| `equation-slide()` | Equation with definitions and citation | +| `acknowledgement-slide()` | People and institution cards | +| `ending-slide()` | Thank you / closing slide | +| `bibliography-slide()` | Styled references slide | + +### Created for This Theme + +**Layout Helpers** (`components.typ`): +| Function | Description | +|----------|-------------| +| `two-col()` | Two-column grid layout | +| `three-col()` | Three-column grid layout | +| `spacer()` | Vertical spacing helper | + +**Box Components** (`components.typ`): +| Function | Description | +|----------|-------------| +| `highlight-box()` | Left-accent gradient box with title | +| `alert-box()` | Red-accented warning box | +| `example-box()` | Green-accented example box | +| `themed-block()` | Generic themed container | +| `algorithm-box()` | Code/algorithm container with header | +| `quote-block()` | Blockquote with attribution | +| `code-block()` | Styled code display | +| `soft-shadow-box()` | Elevated box with subtle stroke | + +**Text Helpers** (`components.typ`): +| Function | Description | +|----------|-------------| +| `alert()` | Accent-colored inline text | +| `muted()` | Grey muted text | +| `subtle()` | Light subtle text | +| `fig-caption()` | Italic figure caption | + +**Visual Elements** (`components.typ`): +| Function | Description | +|----------|-------------| +| `cite-box()` | Corner-positioned citation gadget | +| `accent-line()` | Gradient accent line | +| `soft-divider()` | Subtle horizontal divider | +| `pill()` | Rounded tag/label | +| `bullet-circle()` | Level 1 bullet marker | +| `bullet-square()` | Level 2 bullet marker | +| `bullet-dash()` | Level 3 bullet marker | + +**Card Components** (`components.typ`): +| Function | Description | +|----------|-------------| +| `person-card()` | Person display with optional image | +| `institution-card()` | Institution logo/name display | +| `contact-item()` | Contact info helper | + +**Color System** (`colors.typ`): +| Function | Description | +|----------|-------------| +| `get-theme-colors()` | Get color palette by theme/variant | +| `make-gradients()` | Generate gradient definitions | +| `resolve-theme-colors()` | Resolve colors from param or state | +| `get-color-from()` | Safe dictionary access with fallback | + +**Golden Ratio** (`typography.typ`): +| Function | Description | +|----------|-------------| +| `phi` | Golden ratio constant (1.618...) | +| `golden-center()` | Golden-ratio vertical centering | +| `golden-major` | ~0.618 proportion | +| `golden-minor` | ~0.382 proportion | +| `golden-split-left` | ~38.2% width for layouts | +| `golden-split-right` | ~61.8% width for layouts | + +**Theme Entry** (`theme.typ`): +| Function | Description | +|----------|-------------| +| `calmly()` | Main theme configuration function | +| `warm-amber-theme` | Backward compatibility alias | +| `thesis-theme` | Alias for calmly | +| `moloch-style-theme` | Preconfigured Moloch settings | +| `minimal-style-theme` | Preconfigured minimal settings | +| `dark-theme` | Preconfigured dark variant | diff --git a/packages/preview/calmly-touying/0.2.0/lib.typ b/packages/preview/calmly-touying/0.2.0/lib.typ new file mode 100644 index 0000000000..b4466ab9b2 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/lib.typ @@ -0,0 +1,8 @@ +// Calmly-Touying - A calm, modern presentation theme +// https://github.com/YHan228/calmly-touying + +// Re-export everything from the theme module +#import "theme/theme.typ": * + +// Re-export Touying core utilities that users commonly need +#import "@preview/touying:0.6.1": pause, only, uncover, alternatives, config-info diff --git a/packages/preview/calmly-touying/0.2.0/template/main.typ b/packages/preview/calmly-touying/0.2.0/template/main.typ new file mode 100644 index 0000000000..a267414a5b --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/template/main.typ @@ -0,0 +1,194 @@ +// Calmly-Touying Presentation Template +// A calm, modern presentation theme with Moloch-inspired design +// +// Documentation: https://github.com/YHan228/calmly-touying + +#import "@preview/calmly-touying:0.2.0": * + +// Configure your presentation +#show: calmly.with( + config-info( + title: [Your Presentation Title], + subtitle: [Conference or Event Name], + author: [Your Name], + date: datetime.today(), + institution: [Your Institution], + ), + // Theme options (all optional): + // variant: "light", // "light" | "dark" + // colortheme: "tomorrow", // "tomorrow" | "warm-amber" | "paper" | "dracula" + // progressbar: "foot", // "foot" | "head" | "frametitle" | "none" + // header-style: "moloch", // "moloch" | "minimal" + // title-layout: "moloch", // "moloch" | "centered" | "split" +) + +#title-slide() + +// ============================================================================= +// Introduction +// ============================================================================= + +#section-slide[Introduction] + +== Motivation + +#highlight-box(title: "Research Question")[ + What problem are you solving, and why does it matter? +] + +#v(0.8em) + +- Provide context and background +- State the gap in existing work +- #alert[Highlight] the key challenge + +#v(1fr) + +== Approach + +#v(1fr) + +#two-col( + [ + #alert-box(title: "Existing Methods")[ + Describe limitations of prior approaches. + ] + ], + [ + #example-box(title: "Our Contribution")[ + Explain what your work adds. + ] + ], +) + +#v(2fr) + +// ============================================================================= +// Methods +// ============================================================================= + +#section-slide[Methods] + +== Algorithm + +Code blocks get automatic syntax highlighting matched to your color theme: + +```python +def gradient_descent(f, x0, lr=0.01): + x = x0 + for _ in range(1000): + x -= lr * grad(f, x) + return x +``` + +#themed-block(title: "Complexity")[ + Time: $O(n dot T)$ where $T$ is the number of iterations. +] + +== Pseudocode + +#algorithm-box(title: "Algorithm 1: Gradient Descent")[ + *Input:* Function $f$, initial point $x_0$, learning rate $eta$ \ + *Output:* Approximate minimizer $x^*$ + + 1: $x <- x_0$ \ + 2: *for* $t = 1, 2, dots, T$ *do* \ + 3: #h(1em) $g <- nabla f(x)$ \ + 4: #h(1em) $x <- x - eta dot g$ \ + 5: *end for* \ + 6: *return* $x$ +] + +#v(1fr) + +== Formulation + +#v(1fr) + +#two-col( + [ + The objective function: + + $ min_theta L(theta) = -1/n sum_(i=1)^n log p(x_i | theta) $ + ], + [ + *Key variables* + + - $theta$ --- model parameters + - $x_i$ --- observed data points + - $n$ --- sample size + ], +) + +#v(2fr) + +// ============================================================================= +// Results +// ============================================================================= + +#section-slide(show-progress: true)[Results] + +== Comparison + +#v(1fr) + +#table( + columns: (1fr, auto, auto, auto), + stroke: 0.5pt + luma(200), + inset: 8pt, + table.header( + [*Method*], [*Precision*], [*Recall*], [*F1*], + ), + [Baseline], [0.72], [0.68], [0.70], + [Improved], [0.85], [0.81], [0.83], + [*Ours*], [*0.91*], [*0.89*], [*0.90*], +) + +#v(2fr) + +// ============================================================================= +// Conclusion +// ============================================================================= + +// Use #focus-slide for high-impact statements: +// #focus-slide[Key Takeaway Message] + +#section-slide[Conclusion] + +== Summary + +#three-col( + [ + *Problem* + + Clearly defined the research gap. + ], + [ + *Method* + + Proposed a novel approach with formal guarantees. + ], + [ + *Result* + + Achieved state-of-the-art on standard benchmarks. + ], +) + +#v(1em) + +#alert-box(title: "Future Work")[ + - Extend to larger-scale datasets + - Explore alternative architectures +] + +#v(1fr) + +#ending-slide( + title: [Thank You], + subtitle: [Questions?], + contact: ( + "your.email@example.com", + "github.com/yourusername", + ), +) diff --git a/packages/preview/calmly-touying/0.2.0/theme/colors.typ b/packages/preview/calmly-touying/0.2.0/theme/colors.typ new file mode 100644 index 0000000000..5bd2a589d4 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/colors.typ @@ -0,0 +1,500 @@ +// Warm Amber Theme - Color System with Light/Dark Variants +// Inspired by Moloch's semantic color system with persistent customization + +// ============================================================================= +// THEME STATE FOR DYNAMIC COMPONENTS +// ============================================================================= + +// State to store current theme colors - set by theme, read by components +#let theme-colors-state = state("theme-colors-state", none) + +// ============================================================================= +// COLOR THEME PRESETS +// ============================================================================= + +// Warm Amber theme (default) - Light variant +#let warm-amber-light = ( + // Primary accent colors + accent-primary: rgb("#C2762E"), + accent-secondary: rgb("#D4915A"), + accent-subtle: rgb("#FDF6EE"), + accent-glow: rgb("#E8A756"), + accent-deep: rgb("#9E5F23"), + + // Background hierarchy + bg-base: rgb("#FDFCFA"), + bg-elevated: rgb("#FFFFFF"), + bg-muted: rgb("#F9F7F4"), + bg-surface: rgb("#F5F2EE"), + bg-wash: rgb("#FAF8F5"), + + // Text hierarchy + text-primary: rgb("#2D2A26"), + text-secondary: rgb("#5C564E"), + text-muted: rgb("#8C857B"), + text-light: rgb("#B5AFA6"), + text-subtle: rgb("#A49E95"), + + // Borders + border-subtle: rgb("#EAE6E1"), + border-soft: rgb("#E0DBD4"), + border-medium: rgb("#D4CEC5"), + progress-track: rgb("#E8E4DE"), + + // Functional colors + alert-bg: rgb("#FEF3F2"), + alert-border: rgb("#F87171"), + alert-text: rgb("#DC2626"), + example-bg: rgb("#F0FDF4"), + example-border: rgb("#4ADE80"), + example-text: rgb("#16A34A"), + + // Focus slide (gradient amber) + focus-bg: rgb("#C2762E"), + focus-text: rgb("#FFFEFA"), + + // Standout slide - deep amber with warm cream (elegant, cohesive) + standout-bg: rgb("#8B5A2B"), // Deep sienna brown + standout-text: rgb("#FFF8F0"), // Warm cream text + + // Header bar (Moloch-style) - using warm amber tones + header-bg: rgb("#9E5F23"), // Deep amber for header + header-text: rgb("#FFFEFA"), // Warm white text +) + +// Warm Amber theme - Dark variant +#let warm-amber-dark = ( + // Primary accent colors (slightly brighter for dark bg) + accent-primary: rgb("#E8A756"), + accent-secondary: rgb("#D4915A"), + accent-subtle: rgb("#3D3530"), + accent-glow: rgb("#F0B866"), + accent-deep: rgb("#C2762E"), + + // Background hierarchy (inverted) + bg-base: rgb("#1C1917"), + bg-elevated: rgb("#292524"), + bg-muted: rgb("#1F1C1A"), + bg-surface: rgb("#262220"), + bg-wash: rgb("#211E1C"), + + // Text hierarchy (inverted) + text-primary: rgb("#FAFAF9"), + text-secondary: rgb("#D6D3D1"), + text-muted: rgb("#A8A29E"), + text-light: rgb("#78716C"), + text-subtle: rgb("#57534E"), + + // Borders (inverted) + border-subtle: rgb("#3D3835"), + border-soft: rgb("#44403C"), + border-medium: rgb("#57534E"), + progress-track: rgb("#44403C"), + + // Functional colors (adjusted for dark) + alert-bg: rgb("#450A0A"), + alert-border: rgb("#DC2626"), + alert-text: rgb("#FCA5A5"), + example-bg: rgb("#052E16"), + example-border: rgb("#16A34A"), + example-text: rgb("#86EFAC"), + + // Focus slide (gradient amber) + focus-bg: rgb("#E8A756"), + focus-text: rgb("#1C1917"), + + // Standout slide - warm cream with deep amber (inverted from light) + standout-bg: rgb("#FFF8F0"), // Warm cream background + standout-text: rgb("#8B5A2B"), // Deep sienna text + + // Header bar - amber accent on dark + header-bg: rgb("#C2762E"), // Warm amber header + header-text: rgb("#FAFAF9"), // Light text +) + +// Tomorrow theme (programmer-friendly) - Light variant +#let tomorrow-light = ( + accent-primary: rgb("#4271AE"), + accent-secondary: rgb("#718C00"), + accent-subtle: rgb("#EFF1F5"), + accent-glow: rgb("#3E999F"), + accent-deep: rgb("#8959A8"), + + bg-base: rgb("#FFFFFF"), + bg-elevated: rgb("#FFFFFF"), + bg-muted: rgb("#F2F2F2"), + bg-surface: rgb("#EFEFEF"), + bg-wash: rgb("#F7F7F7"), + + text-primary: rgb("#1D1F21"), + text-secondary: rgb("#4D4D4C"), + text-muted: rgb("#8E908C"), + text-light: rgb("#C5C8C6"), + text-subtle: rgb("#A0A1A0"), + + border-subtle: rgb("#E0E0E0"), + border-soft: rgb("#D6D6D6"), + border-medium: rgb("#C8C8C8"), + progress-track: rgb("#E0E0E0"), + + alert-bg: rgb("#FDF2F2"), + alert-border: rgb("#C82829"), + alert-text: rgb("#C82829"), + example-bg: rgb("#F2FDF5"), + example-border: rgb("#718C00"), + example-text: rgb("#718C00"), + + focus-bg: rgb("#4271AE"), + focus-text: rgb("#FFFFFF"), + + // Standout slide + standout-bg: rgb("#1D1F21"), + standout-text: rgb("#81A2BE"), + + // Header bar - using blue accent + header-bg: rgb("#4271AE"), + header-text: rgb("#FFFFFF"), +) + +// Tomorrow theme - Dark variant +#let tomorrow-dark = ( + accent-primary: rgb("#81A2BE"), + accent-secondary: rgb("#B5BD68"), + accent-subtle: rgb("#373B41"), + accent-glow: rgb("#8ABEB7"), + accent-deep: rgb("#B294BB"), + + bg-base: rgb("#1D1F21"), + bg-elevated: rgb("#282A2E"), + bg-muted: rgb("#232527"), + bg-surface: rgb("#2D2F33"), + bg-wash: rgb("#252729"), + + text-primary: rgb("#C5C8C6"), + text-secondary: rgb("#969896"), + text-muted: rgb("#707070"), + text-light: rgb("#4D4D4C"), + text-subtle: rgb("#5C5E5C"), + + border-subtle: rgb("#373B41"), + border-soft: rgb("#444850"), + border-medium: rgb("#555960"), + progress-track: rgb("#373B41"), + + alert-bg: rgb("#3A1F1F"), + alert-border: rgb("#CC6666"), + alert-text: rgb("#CC6666"), + example-bg: rgb("#1F3A1F"), + example-border: rgb("#B5BD68"), + example-text: rgb("#B5BD68"), + + focus-bg: rgb("#81A2BE"), + focus-text: rgb("#1D1F21"), + + // Standout slide + standout-bg: rgb("#C5C8C6"), + standout-text: rgb("#1D1F21"), + + // Header bar - lighter blue on dark + header-bg: rgb("#81A2BE"), + header-text: rgb("#1D1F21"), +) + +// Paper theme (high contrast, academic) - Light variant +#let paper-light = ( + accent-primary: rgb("#1A1A1A"), + accent-secondary: rgb("#2563EB"), + accent-subtle: rgb("#F5F5F5"), + accent-glow: rgb("#3B82F6"), + accent-deep: rgb("#0F172A"), + + bg-base: rgb("#FFFFFF"), + bg-elevated: rgb("#FFFFFF"), + bg-muted: rgb("#F8F8F8"), + bg-surface: rgb("#F3F3F3"), + bg-wash: rgb("#FAFAFA"), + + text-primary: rgb("#000000"), + text-secondary: rgb("#333333"), + text-muted: rgb("#666666"), + text-light: rgb("#999999"), + text-subtle: rgb("#808080"), + + border-subtle: rgb("#E5E5E5"), + border-soft: rgb("#D4D4D4"), + border-medium: rgb("#A3A3A3"), + progress-track: rgb("#E5E5E5"), + + alert-bg: rgb("#FEF2F2"), + alert-border: rgb("#EF4444"), + alert-text: rgb("#DC2626"), + example-bg: rgb("#EFF6FF"), + example-border: rgb("#2563EB"), + example-text: rgb("#1D4ED8"), + + focus-bg: rgb("#2563EB"), + focus-text: rgb("#FFFFFF"), + + // Standout slide + standout-bg: rgb("#000000"), + standout-text: rgb("#FFFFFF"), + + // Header bar - blue accent for paper theme + header-bg: rgb("#2563EB"), + header-text: rgb("#FFFFFF"), +) + +// Paper theme - Dark variant +#let paper-dark = ( + accent-primary: rgb("#FFFFFF"), + accent-secondary: rgb("#60A5FA"), + accent-subtle: rgb("#262626"), + accent-glow: rgb("#93C5FD"), + accent-deep: rgb("#F8FAFC"), + + bg-base: rgb("#0A0A0A"), + bg-elevated: rgb("#171717"), + bg-muted: rgb("#0F0F0F"), + bg-surface: rgb("#1A1A1A"), + bg-wash: rgb("#141414"), + + text-primary: rgb("#FFFFFF"), + text-secondary: rgb("#E5E5E5"), + text-muted: rgb("#A3A3A3"), + text-light: rgb("#737373"), + text-subtle: rgb("#525252"), + + border-subtle: rgb("#262626"), + border-soft: rgb("#404040"), + border-medium: rgb("#525252"), + progress-track: rgb("#262626"), + + alert-bg: rgb("#450A0A"), + alert-border: rgb("#F87171"), + alert-text: rgb("#FCA5A5"), + example-bg: rgb("#172554"), + example-border: rgb("#60A5FA"), + example-text: rgb("#93C5FD"), + + focus-bg: rgb("#60A5FA"), + focus-text: rgb("#0A0A0A"), + + // Standout slide + standout-bg: rgb("#FFFFFF"), + standout-text: rgb("#0A0A0A"), + + // Header bar - lighter blue on dark paper + header-bg: rgb("#60A5FA"), + header-text: rgb("#0A0A0A"), +) + +// Dracula theme - Light variant +#let dracula-light = ( + accent-primary: rgb("#BD93F9"), + accent-secondary: rgb("#FF79C6"), + accent-subtle: rgb("#F8F8F2"), + accent-glow: rgb("#8BE9FD"), + accent-deep: rgb("#6272A4"), + + bg-base: rgb("#F8F8F2"), + bg-elevated: rgb("#FFFFFF"), + bg-muted: rgb("#F0F0EB"), + bg-surface: rgb("#E8E8E3"), + bg-wash: rgb("#F5F5F0"), + + text-primary: rgb("#282A36"), + text-secondary: rgb("#44475A"), + text-muted: rgb("#6272A4"), + text-light: rgb("#9090A0"), + text-subtle: rgb("#7575A0"), + + border-subtle: rgb("#E0E0D8"), + border-soft: rgb("#D0D0C8"), + border-medium: rgb("#B0B0A8"), + progress-track: rgb("#E0E0D8"), + + alert-bg: rgb("#FFF0F0"), + alert-border: rgb("#FF5555"), + alert-text: rgb("#FF5555"), + example-bg: rgb("#F0FFF4"), + example-border: rgb("#50FA7B"), + example-text: rgb("#50FA7B"), + + focus-bg: rgb("#BD93F9"), + focus-text: rgb("#282A36"), + + standout-bg: rgb("#FF79C6"), + standout-text: rgb("#282A36"), + + header-bg: rgb("#BD93F9"), + header-text: rgb("#282A36"), +) + +// Dracula theme - Dark variant +#let dracula-dark = ( + accent-primary: rgb("#BD93F9"), + accent-secondary: rgb("#FF79C6"), + accent-subtle: rgb("#44475A"), + accent-glow: rgb("#8BE9FD"), + accent-deep: rgb("#6272A4"), + + bg-base: rgb("#282A36"), + bg-elevated: rgb("#343746"), + bg-muted: rgb("#21222C"), + bg-surface: rgb("#3A3C4E"), + bg-wash: rgb("#2E303E"), + + text-primary: rgb("#F8F8F2"), + text-secondary: rgb("#E0E0E0"), + text-muted: rgb("#BFBFBF"), + text-light: rgb("#6272A4"), + text-subtle: rgb("#7580A0"), + + border-subtle: rgb("#44475A"), + border-soft: rgb("#4A4D5E"), + border-medium: rgb("#6272A4"), + progress-track: rgb("#44475A"), + + alert-bg: rgb("#3A1F2A"), + alert-border: rgb("#FF5555"), + alert-text: rgb("#FF6E6E"), + example-bg: rgb("#253D2A"), + example-border: rgb("#50FA7B"), + example-text: rgb("#69FF94"), + + focus-bg: rgb("#BD93F9"), + focus-text: rgb("#282A36"), + + standout-bg: rgb("#FF79C6"), + standout-text: rgb("#282A36"), + + header-bg: rgb("#BD93F9"), + header-text: rgb("#282A36"), +) + +// ============================================================================= +// COLOR GETTER SYSTEM +// ============================================================================= + +// Get colors for a given theme and variant +#let get-theme-colors(theme: "warm-amber", variant: "light") = { + let themes = ( + "warm-amber": (light: warm-amber-light, dark: warm-amber-dark), + "tomorrow": (light: tomorrow-light, dark: tomorrow-dark), + "paper": (light: paper-light, dark: paper-dark), + "dracula": (light: dracula-light, dark: dracula-dark), + ) + + let selected-theme = themes.at(theme, default: themes.warm-amber) + selected-theme.at(variant, default: selected-theme.light) +} + +// ============================================================================= +// DEFAULT COLORS (backwards compatibility - warm-amber light) +// ============================================================================= + +#let accent-primary = warm-amber-light.accent-primary +#let accent-secondary = warm-amber-light.accent-secondary +#let accent-subtle = warm-amber-light.accent-subtle +#let accent-glow = warm-amber-light.accent-glow +#let accent-deep = warm-amber-light.accent-deep + +#let bg-base = warm-amber-light.bg-base +#let bg-elevated = warm-amber-light.bg-elevated +#let bg-muted = warm-amber-light.bg-muted +#let bg-surface = warm-amber-light.bg-surface +#let bg-wash = warm-amber-light.bg-wash + +#let text-primary = warm-amber-light.text-primary +#let text-secondary = warm-amber-light.text-secondary +#let text-muted = warm-amber-light.text-muted +#let text-light = warm-amber-light.text-light +#let text-subtle = warm-amber-light.text-subtle + +#let border-subtle = warm-amber-light.border-subtle +#let border-soft = warm-amber-light.border-soft +#let border-medium = warm-amber-light.border-medium +#let progress-track = warm-amber-light.progress-track + +#let alert-bg = warm-amber-light.alert-bg +#let alert-border = warm-amber-light.alert-border +#let alert-text = warm-amber-light.alert-text +#let example-bg = warm-amber-light.example-bg +#let example-border = warm-amber-light.example-border +#let example-text = warm-amber-light.example-text + +#let focus-bg = warm-amber-light.focus-bg +#let focus-text = warm-amber-light.focus-text + +#let standout-bg = warm-amber-light.standout-bg +#let standout-text = warm-amber-light.standout-text + +#let header-bg = warm-amber-light.header-bg +#let header-text = warm-amber-light.header-text + +// ============================================================================= +// GRADIENTS (generated based on colors) +// ============================================================================= + +#let make-gradients(colors) = { + ( + bg-gradient: gradient.linear( + angle: 180deg, + (colors.bg-base, 0%), + (colors.bg-muted, 100%) + ), + accent-gradient: gradient.linear( + angle: 135deg, + (colors.accent-secondary, 0%), + (colors.accent-primary, 50%), + (colors.accent-deep, 100%) + ), + title-gradient: gradient.linear( + angle: 180deg, + (colors.bg-base, 0%), + (colors.accent-subtle, 100%) + ), + header-gradient: gradient.linear( + angle: 0deg, + (colors.accent-primary.transparentize(20%), 0%), + (colors.accent-secondary.transparentize(60%), 30%), + (colors.border-subtle, 100%) + ), + progress-gradient: gradient.linear( + angle: 0deg, + (colors.accent-secondary, 0%), + (colors.accent-primary, 100%) + ), + ) +} + +// Default gradients +#let bg-gradient = gradient.linear( + angle: 180deg, + (rgb("#FDFCFA"), 0%), + (rgb("#F9F7F4"), 100%) +) + +#let accent-gradient = gradient.linear( + angle: 135deg, + (rgb("#D4915A"), 0%), + (rgb("#C2762E"), 50%), + (rgb("#A86B2D"), 100%) +) + +#let title-gradient = gradient.linear( + angle: 180deg, + (rgb("#FDFCFA"), 0%), + (rgb("#FDF6EE"), 100%) +) + +// ============================================================================= +// SHADOWS +// ============================================================================= + +#let shadow-soft = rgb("#2D2A26").transparentize(96%) +#let shadow-medium = rgb("#2D2A26").transparentize(92%) +#let shadow-strong = rgb("#2D2A26").transparentize(88%) + +#let overlay-light = rgb("#FFFFFF").transparentize(40%) +#let overlay-dark = rgb("#2D2A26").transparentize(95%) diff --git a/packages/preview/calmly-touying/0.2.0/theme/components.typ b/packages/preview/calmly-touying/0.2.0/theme/components.typ new file mode 100644 index 0000000000..6e129609da --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/components.typ @@ -0,0 +1,525 @@ +// Reusable Components - Theme-Aware +// All components accept optional `colors` parameter for theming +#import "colors.typ": * +#import "typography.typ": * + +// ============================================================================= +// HELPER: Get colors from theme or state +// ============================================================================= + +// Resolve colors - either from explicit parameter, or from state, or fallback +// This must be called INSIDE a context block to work with state +#let resolve-theme-colors(colors-param) = { + if colors-param != none { + colors-param + } else { + let from-state = theme-colors-state.get() + if from-state != none { from-state } else { warm-amber-light } + } +} + +// Get a specific color from a colors dict +#let get-color-from(colors, key) = { + colors.at(key, default: rgb("#888888")) +} + +// ============================================================================= +// LAYOUT COMPONENTS +// ============================================================================= + +// Two-column layout with proper gutter +#let two-col(left, right, gutter: spacing-xl) = { + grid( + columns: (1fr, 1fr), + column-gutter: gutter, + left, right + ) +} + +// Three-column layout +#let three-col(a, b, c, gutter: spacing-lg) = { + grid( + columns: (1fr, 1fr, 1fr), + column-gutter: gutter, + a, b, c + ) +} + +// Spacer helper +#let spacer(size: spacing-lg) = v(size) + +// ============================================================================= +// BOX COMPONENTS +// ============================================================================= + +// Soft shadow box helper +#let soft-shadow-box( + body, + fill: none, + radius: radius-lg, + inset: spacing-lg, + width: 100%, + colors: none, +) = context { + let c = resolve-theme-colors(colors) + let bg = if fill != none { fill } else { get-color-from(c, "bg-elevated") } + let border = get-color-from(c, "border-subtle") + + block( + width: width, + inset: 0pt, + outset: 0pt, + )[ + #box( + width: 100%, + radius: radius, + fill: bg, + stroke: 0.5pt + border, + inset: inset, + )[ + #body + ] + ] +} + +// Elegant highlight box with soft left accent +#let highlight-box(body, title: none, colors: none) = context { + let c = resolve-theme-colors(colors) + + block( + fill: gradient.linear( + angle: 90deg, + (get-color-from(c, "accent-subtle"), 0%), + (get-color-from(c, "bg-elevated"), 15%), + (get-color-from(c, "bg-elevated"), 100%), + ), + stroke: ( + left: 2.5pt + get-color-from(c, "accent-primary"), + rest: 0.5pt + get-color-from(c, "border-subtle"), + ), + inset: (left: spacing-lg, right: spacing-md, top: spacing-md, bottom: spacing-md), + radius: (left: 2pt, right: radius-md), + width: 100%, + )[ + #if title != none { + text( + weight: "medium", + fill: get-color-from(c, "accent-deep"), + size: size-small, + )[#title] + v(spacing-xs) + } + #text(fill: get-color-from(c, "text-secondary"))[#body] + ] +} + +// Elegant algorithm box with refined header +#let algorithm-box(body, title: none, colors: none) = context { + let c = resolve-theme-colors(colors) + + block( + fill: get-color-from(c, "bg-elevated"), + stroke: 0.5pt + get-color-from(c, "border-soft"), + radius: radius-lg, + width: 100%, + clip: true, + )[ + #if title != none { + block( + fill: get-color-from(c, "bg-wash"), + width: 100%, + inset: (x: spacing-md, y: spacing-sm), + )[ + #text( + weight: "medium", + fill: get-color-from(c, "accent-primary"), + size: size-small, + tracking: tracking-wide, + )[#title] + ] + } + #block(inset: spacing-md)[ + #set text(font: font-mono, size: size-code, fill: get-color-from(c, "text-secondary")) + #set par(leading: 1em) + #show math.equation: set text(size: size-body) + #body + ] + ] +} + +// Elegant code block with soft styling +#let code-block(code, lang: none, colors: none) = context { + let c = resolve-theme-colors(colors) + + block( + fill: get-color-from(c, "bg-surface"), + stroke: 0.5pt + get-color-from(c, "border-soft"), + radius: radius-md, + inset: spacing-md, + width: 100%, + )[ + #set text(font: font-mono, size: size-code, fill: get-color-from(c, "text-secondary")) + #raw(code, lang: lang) + ] +} + +// ============================================================================= +// TEXT HELPERS +// ============================================================================= + +// Soft alert/emphasis text +#let alert(body, colors: none) = context { + let c = resolve-theme-colors(colors) + text(fill: get-color-from(c, "accent-primary"), weight: "medium")[#body] +} + +// Muted text helper +#let muted(body, colors: none) = context { + let c = resolve-theme-colors(colors) + text(fill: get-color-from(c, "text-muted"), size: size-caption)[#body] +} + +// Subtle text +#let subtle(body, colors: none) = context { + let c = resolve-theme-colors(colors) + text(fill: get-color-from(c, "text-light"), size: size-small)[#body] +} + +// Elegant figure caption +#let fig-caption(body, colors: none) = context { + let c = resolve-theme-colors(colors) + text( + fill: get-color-from(c, "text-muted"), + size: size-caption, + style: "italic", + tracking: tracking-wide, + )[#body] +} + +// ============================================================================= +// VISUAL ELEMENTS +// ============================================================================= + +// Elegant accent line with gradient fade +#let accent-line(width: 64pt, colors: none) = context { + let c = resolve-theme-colors(colors) + + box(width: width, height: 2pt)[ + #rect( + width: 100%, + height: 100%, + radius: 1pt, + fill: gradient.linear( + angle: 0deg, + (get-color-from(c, "accent-secondary"), 0%), + (get-color-from(c, "accent-primary"), 50%), + (get-color-from(c, "accent-secondary"), 100%), + ), + ) + ] +} + +// Soft divider line +#let soft-divider(width: 100%, colors: none) = context { + let c = resolve-theme-colors(colors) + line(length: width, stroke: 0.5pt + get-color-from(c, "border-subtle")) +} + +// Refined bullet point with soft accent +#let bullet(body, colors: none) = context { + let c = resolve-theme-colors(colors) + grid( + columns: (auto, 1fr), + column-gutter: spacing-sm, + align(top)[ + #box( + width: 5pt, + height: 5pt, + radius: radius-full, + fill: get-color-from(c, "accent-secondary"), + baseline: 0.4em, + ) + ], + body + ) +} + +// Pill/tag component +#let pill(body, accent: false, colors: none) = context { + let c = resolve-theme-colors(colors) + let c-accent-subtle = get-color-from(c, "accent-subtle") + let c-bg-surface = get-color-from(c, "bg-surface") + let c-accent-secondary = get-color-from(c, "accent-secondary") + let c-border-subtle = get-color-from(c, "border-subtle") + let c-accent-deep = get-color-from(c, "accent-deep") + let c-text-muted = get-color-from(c, "text-muted") + + box( + fill: if accent { c-accent-subtle } else { c-bg-surface }, + stroke: 0.5pt + if accent { c-accent-secondary.transparentize(50%) } else { c-border-subtle }, + radius: radius-full, + inset: (x: spacing-sm, y: spacing-2xs), + )[ + #text( + size: size-micro, + weight: "medium", + fill: if accent { c-accent-deep } else { c-text-muted }, + )[#body] + ] +} + +// Quote block +#let quote-block(body, attribution: none, colors: none) = context { + let c = resolve-theme-colors(colors) + + block( + inset: (left: spacing-lg, y: spacing-sm), + stroke: (left: 2pt + get-color-from(c, "border-soft")), + )[ + #text(style: "italic", fill: get-color-from(c, "text-secondary"), size: size-body)[#body] + #if attribution != none { + v(spacing-xs) + text(fill: get-color-from(c, "text-muted"), size: size-caption)[— #attribution] + } + ] +} + +// ============================================================================= +// CARD COMPONENTS +// ============================================================================= + +// Refined person card for acknowledgements +#let person-card(name, role, image-path: none, colors: none) = context { + let c = resolve-theme-colors(colors) + + align(center)[ + #if image-path != none { + box( + width: 72pt, + height: 72pt, + radius: radius-full, + clip: true, + stroke: 1.5pt + get-color-from(c, "border-soft"), + fill: get-color-from(c, "bg-muted"), + )[ + #image(image-path, width: 100%, height: 100%, fit: "cover") + ] + } else { + // Elegant placeholder with initials-style circle + box( + width: 72pt, + height: 72pt, + radius: radius-full, + fill: gradient.radial( + (get-color-from(c, "bg-muted"), 0%), + (get-color-from(c, "bg-surface"), 100%), + ), + stroke: 1.5pt + get-color-from(c, "border-soft"), + )[ + #align(center + horizon)[ + #text(fill: get-color-from(c, "text-light"), size: 28pt, weight: "light")[#name.first()] + ] + ] + } + #v(spacing-sm) + #text(weight: "medium", size: size-body, fill: get-color-from(c, "text-primary"))[#name] + #v(spacing-3xs) + #text(fill: get-color-from(c, "text-muted"), size: size-caption)[#role] + ] +} + +// Refined institution card +#let institution-card(name, logo-path: none, colors: none) = context { + let c = resolve-theme-colors(colors) + + align(center)[ + #if logo-path != none { + box(height: 48pt)[ + #image(logo-path, height: 100%) + ] + } else { + box( + width: 100pt, + height: 48pt, + fill: get-color-from(c, "bg-surface"), + radius: radius-md, + stroke: 0.5pt + get-color-from(c, "border-subtle"), + )[ + #align(center + horizon)[ + #text(fill: get-color-from(c, "text-light"), size: size-caption, weight: "medium")[#name] + ] + ] + } + #v(spacing-xs) + #text(fill: get-color-from(c, "text-muted"), size: size-caption)[#name] + ] +} + +// Contact info item with icon placeholder +#let contact-item(content, colors: none) = context { + let c = resolve-theme-colors(colors) + text(fill: get-color-from(c, "text-muted"), size: size-caption)[#content] +} + +// ============================================================================= +// ALERT AND EXAMPLE BOXES (Moloch-inspired) +// ============================================================================= + +// Alert box - for warnings, important notes, critical information +#let alert-box(body, title: none, colors: none) = context { + let c = resolve-theme-colors(colors) + let c-alert-bg = get-color-from(c, "alert-bg") + let c-alert-border = get-color-from(c, "alert-border") + let c-alert-text = get-color-from(c, "alert-text") + let c-text-secondary = get-color-from(c, "text-secondary") + + block( + fill: c-alert-bg, + stroke: ( + left: 3pt + c-alert-border, + rest: 0.5pt + c-alert-border.transparentize(60%), + ), + inset: (left: spacing-lg, right: spacing-md, top: spacing-md, bottom: spacing-md), + radius: (left: 2pt, right: radius-md), + width: 100%, + )[ + #if title != none { + text( + weight: "semibold", + fill: c-alert-text, + size: size-small, + tracking: tracking-wide, + )[#title] + v(spacing-xs) + } + #text(fill: c-text-secondary)[#body] + ] +} + +// Example box - for examples, code samples, demonstrations +#let example-box(body, title: none, colors: none) = context { + let c = resolve-theme-colors(colors) + let c-example-bg = get-color-from(c, "example-bg") + let c-example-border = get-color-from(c, "example-border") + let c-example-text = get-color-from(c, "example-text") + let c-text-secondary = get-color-from(c, "text-secondary") + + block( + fill: c-example-bg, + stroke: ( + left: 3pt + c-example-border, + rest: 0.5pt + c-example-border.transparentize(60%), + ), + inset: (left: spacing-lg, right: spacing-md, top: spacing-md, bottom: spacing-md), + radius: (left: 2pt, right: radius-md), + width: 100%, + )[ + #if title != none { + text( + weight: "semibold", + fill: c-example-text, + size: size-small, + tracking: tracking-wide, + )[#title] + v(spacing-xs) + } + #text(fill: c-text-secondary)[#body] + ] +} + +// Generic block with transparent or filled mode (Moloch-style) +#let themed-block(body, title: none, fill-mode: "transparent", colors: none) = context { + let c = resolve-theme-colors(colors) + let c-bg-surface = get-color-from(c, "bg-surface") + let c-bg-elevated = get-color-from(c, "bg-elevated") + let c-border-soft = get-color-from(c, "border-soft") + let c-accent-primary = get-color-from(c, "accent-primary") + let c-text-secondary = get-color-from(c, "text-secondary") + + let bg = if fill-mode == "fill" { c-bg-surface } else { c-bg-elevated } + + block( + fill: bg, + stroke: 0.5pt + c-border-soft, + inset: spacing-md, + radius: radius-lg, + width: 100%, + )[ + #if title != none { + text( + weight: "semibold", + fill: c-accent-primary, + size: size-body, + )[#title] + v(spacing-sm) + } + #text(fill: c-text-secondary)[#body] + ] +} + +// ============================================================================= +// HAND-DRAWN LIST SYMBOLS (Moloch-inspired) +// ============================================================================= + +// Level 1: Filled circle +#let bullet-circle(size: 6pt, color: accent-secondary) = { + circle(radius: size / 2, fill: color) +} + +// Level 2: Filled square +#let bullet-square(size: 5pt, color: accent-secondary) = { + rect(width: size, height: size, fill: color) +} + +// Level 3: Dash/line +#let bullet-dash(size: 8pt, color: accent-secondary) = { + rect(width: size, height: 2pt, fill: color, radius: 1pt) +} + +// ============================================================================= +// CITATION GADGET +// ============================================================================= + +// Citation gadget - small box shown at slide corner with integrated bibliography citation +// bib-key: single key (string) or multiple keys (array of strings) +// display-label: display text - if none, uses the citation key(s) +// Position options: "top-right", "bottom-left", "bottom-right" +#let cite-box(bib-key, display-label: none, position: "bottom-right", colors: none) = context { + let c = resolve-theme-colors(colors) + + // Handle single or multiple keys + let keys = if type(bib-key) == array { bib-key } else { (bib-key,) } + + // Use provided label or show citation key(s) + let display-content = if display-label != none { display-label } else { keys.join(", ") } + + // Hidden citations to register with bibliography (placed outside box) + place(hide[#for key in keys { cite(label(key)) }]) + + let cite-pill = box( + fill: get-color-from(c, "bg-wash"), + stroke: ( + left: 1.5pt + get-color-from(c, "accent-primary"), + rest: 0.5pt + get-color-from(c, "border-subtle"), + ), + radius: (right: 4pt), + inset: (left: spacing-xs, right: spacing-sm, y: spacing-2xs), + )[ + // Clickable link to bibliography slide + #link()[ + #text( + size: size-micro, + fill: get-color-from(c, "text-secondary"), + )[#emph[#display-content]] + ] + ] + + // Position in corner + if position == "top-right" { + place(top + right, dx: -spacing-md, dy: spacing-md)[#cite-pill] + } else if position == "bottom-left" { + place(bottom + left, dx: spacing-md, dy: -spacing-md)[#cite-pill] + } else { + place(bottom + right, dx: -spacing-md, dy: -spacing-md)[#cite-pill] + } +} diff --git a/packages/preview/calmly-touying/0.2.0/theme/slides.typ b/packages/preview/calmly-touying/0.2.0/theme/slides.typ new file mode 100644 index 0000000000..fc23499050 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/slides.typ @@ -0,0 +1,1076 @@ +// Slide Type Definitions - Enhanced with Moloch-inspired Features +// Includes: progress bar placement, Moloch-style headers, title variants, standout slides +#import "@preview/touying:0.6.1": * +#import "colors.typ": * +#import "typography.typ": * +#import "components.typ": * + +// ============================================================================= +// MOLOCH HEADER BAR COMPONENT +// ============================================================================= + +// Header bar for use in Touying's header area (all slides) +// Outset extends to page edges (horizontal and top), comfortable padding +#let moloch-header-bar-touying(title, colors) = { + block( + width: 100%, + fill: colors.header-bg, + inset: (x: spacing-lg, top: spacing-md, bottom: 14pt), + outset: (x: spacing-2xl, top: spacing-2xl + spacing-md), // Match the increased top margin + )[ + #text( + size: size-slide-title, + weight: "semibold", + fill: colors.header-text, + tracking: tracking-tight, + )[#title] + ] +} + +// ============================================================================= +// PROGRESS BAR COMPONENT +// ============================================================================= + +// Progress bar that can be placed in different locations +// position: "head", "foot", "frametitle", "none" +#let make-progress-bar(colors, height: 2pt, position: "foot") = { + if position == "none" { return none } + + // Use Touying's built-in progress bar approach + // The key is to use context with separate counter access + context { + let current = utils.slide-counter.get().first() + let total = utils.last-slide-counter.final().first() + let ratio = if total > 0 { calc.min(current / total, 1.0) } else { 0 } + + box(width: 100%, height: height)[ + #rect(width: 100%, height: height, radius: height / 2, fill: colors.progress-track) + #place(left)[ + #rect( + width: ratio * 100%, + height: height, + radius: height / 2, + fill: gradient.linear( + angle: 0deg, + (colors.accent-secondary, 0%), + (colors.accent-primary, 100%), + ), + ) + ] + ] + } +} + +// ============================================================================= +// DEFAULT SLIDE WITH MOLOCH-STYLE HEADER +// ============================================================================= + +/// Default slide function with configurable header style and progress bar placement +/// header-style: "moloch" (colored bar) or "minimal" (gradient underline) +/// progressbar: "head", "foot", "frametitle", "none" +#let slide( + config: (:), + repeat: auto, + setting: body => body, + composer: auto, + colors: none, + header-style: "moloch", + progressbar: "foot", + ..bodies, +) = touying-slide-wrapper(self => { + // Get colors from self or use defaults + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + // Moloch-style header with colored background + let moloch-header(self) = { + let title = utils.display-current-heading(level: 2, depth: self.slide-level) + if title != none { + // Use the Touying-specific header bar (for header area) + moloch-header-bar-touying(title, c) + + // Progress bar under header if frametitle position + if progressbar == "frametitle" { + v(-spacing-sm) + make-progress-bar(c, height: 2pt, position: "frametitle") + } + } + } + + // Minimal header with gradient underline (original style) + let minimal-header(self) = { + let title = utils.display-current-heading(level: 2, depth: self.slide-level) + if title != none { + // Stack everything vertically + stack(dir: ttb, spacing: spacing-xs)[ + #text(size: size-slide-title, weight: "semibold", fill: c.text-primary)[#title] + ][ + #box(width: 100%, height: 1.5pt)[ + #rect( + width: 100%, + height: 100%, + fill: gradient.linear( + angle: 0deg, + (c.accent-primary.transparentize(20%), 0%), + (c.accent-secondary.transparentize(60%), 30%), + (c.border-subtle, 100%), + ), + ) + ] + ] + + // Progress bar under title if frametitle position + if progressbar == "frametitle" { + v(spacing-xs) + make-progress-bar(c, height: 2pt, position: "frametitle") + } + + v(spacing-sm) + } + } + + // Choose header based on style + let header-fn = if header-style == "moloch" { moloch-header } else { minimal-header } + + // Footer with optional progress bar + let footer(self) = context { + let current = utils.slide-counter.get().first() + let total = utils.last-slide-counter.final().first() + + v(spacing-sm) + + if progressbar == "foot" { + components.left-and-right( + make-progress-bar(c, height: 2pt, position: "foot"), + text(fill: c.text-secondary, size: size-small)[ + #current #text(fill: c.text-muted)[/] #total + ] + ) + } else { + // Just show page numbers without progress bar + align(right)[ + #text(fill: c.text-secondary, size: size-small)[ + #current #text(fill: c.text-muted)[/] #total + ] + ] + } + } + + // Header at top with progress bar if head position + let header-with-progress(self) = { + if progressbar == "head" { + make-progress-bar(c, height: 3pt, position: "head") + v(spacing-sm) + } + header-fn(self) + } + + let self = utils.merge-dicts( + self, + config-page( + header: header-with-progress, + footer: footer, + ), + ) + + touying-slide(self: self, config: config, repeat: repeat, setting: setting, composer: composer, ..bodies) +}) + +// ============================================================================= +// TITLE SLIDE VARIANTS +// ============================================================================= + +/// Centered title slide (original style) +#let title-slide-centered( + config: (:), + logo: none, + extra: none, + colors: none, + use-golden-ratio: false, +) = touying-slide-wrapper(self => { + let info = self.info + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + let self = utils.merge-dicts( + self, + config-common(freeze-slide-counter: true), + config-page( + margin: spacing-3xl, + header: none, + footer: none, + fill: c.bg-base, + ), + ) + + let body = { + set align(center) + + // Use golden ratio or equal spacing + if use-golden-ratio { + v(1fr * phi) + } else { + v(1fr) + } + + // Optional logo + if logo != none { + box(height: 56pt, inset: spacing-sm)[#logo] + v(spacing-2xl) + } + + // Title + text( + size: size-title, + weight: "semibold", + fill: c.text-primary, + tracking: tracking-tight, + )[#info.title] + + // Subtitle + if info.subtitle != none { + v(spacing-sm) + text( + size: size-subtitle, + weight: "regular", + fill: c.text-muted, + )[#info.subtitle] + } + + // Accent line + v(spacing-xl) + accent-line(width: 56pt, colors: c) + v(spacing-xl) + + // Author + text( + size: size-body, + weight: "medium", + fill: c.text-secondary, + )[#info.author] + + // Institution + if info.institution != none { + v(spacing-xs) + text( + size: size-caption, + fill: c.text-muted, + weight: "regular", + )[#info.institution] + } + + // Date + if info.date != none { + v(spacing-md) + text( + size: size-caption, + fill: c.text-light, + weight: "light", + )[ + #if type(info.date) == datetime { + info.date.display("[month repr:long] [day], [year]") + } else { + info.date + } + ] + } + + // Extra content + if extra != none { + v(spacing-lg) + extra + } + + v(1fr) + } + + touying-slide(self: self, config: config, body) +}) + +/// Moloch-style title slide (left-aligned with horizontal separator) +#let title-slide-moloch( + config: (:), + logo: none, + extra: none, + colors: none, +) = touying-slide-wrapper(self => { + let info = self.info + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + let self = utils.merge-dicts( + self, + config-common(freeze-slide-counter: true), + config-page( + margin: spacing-3xl, + header: none, + footer: none, + fill: c.bg-base, + ), + ) + + let body = { + // Golden ratio spacing above + v(1fr * phi) + + // Left-aligned title block + set align(left) + + // Optional logo + if logo != none { + box(height: 48pt)[#logo] + v(spacing-xl) + } + + // Title + text( + size: size-title, + weight: "semibold", + fill: c.text-primary, + tracking: tracking-tight, + )[#info.title] + + // Subtitle + if info.subtitle != none { + v(spacing-sm) + text( + size: size-subtitle, + weight: "regular", + fill: c.text-muted, + )[#info.subtitle] + } + + // Horizontal separator line (full width) + v(spacing-lg) + line(length: 100%, stroke: 1pt + c.border-medium) + v(spacing-lg) + + // Author, institution, date (left-aligned) + text( + size: size-body, + weight: "medium", + fill: c.text-secondary, + )[#info.author] + + if info.institution != none { + v(spacing-2xs) + text( + size: size-caption, + fill: c.text-muted, + )[#info.institution] + } + + if info.date != none { + v(spacing-sm) + text( + size: size-caption, + fill: c.text-light, + weight: "light", + )[ + #if type(info.date) == datetime { + info.date.display("[month repr:long] [day], [year]") + } else { + info.date + } + ] + } + + // Extra content + if extra != none { + v(spacing-lg) + extra + } + + // Golden ratio spacing below + v(1fr) + } + + touying-slide(self: self, config: config, body) +}) + +/// Split title slide (two-column with vertical separator) +#let title-slide-split( + config: (:), + logo: none, + extra: none, + colors: none, + graphic: none, // Optional graphic for right side +) = touying-slide-wrapper(self => { + let info = self.info + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + let self = utils.merge-dicts( + self, + config-common(freeze-slide-counter: true), + config-page( + margin: spacing-2xl, + header: none, + footer: none, + fill: c.bg-base, + ), + ) + + let body = { + grid( + columns: (golden-split-left, 2pt, 1fr), + column-gutter: spacing-xl, + rows: (1fr,), + // Left side: Title and subtitle + { + set align(left + horizon) + block(width: 100%)[ + // Logo at top + #if logo != none { + box(height: 40pt)[#logo] + v(spacing-xl) + } + + // Title + #text( + size: size-title, + weight: "semibold", + fill: c.text-primary, + tracking: tracking-tight, + )[#info.title] + + // Subtitle + #if info.subtitle != none { + v(spacing-sm) + text( + size: size-subtitle, + weight: "regular", + fill: c.text-muted, + )[#info.subtitle] + } + ] + }, + // Vertical separator + { + align(center + horizon)[ + #rect( + width: 2pt, + height: 60%, + fill: c.border-medium, + radius: 1pt, + ) + ] + }, + // Right side: Author info or graphic + { + set align(left + horizon) + block(width: 100%)[ + #if graphic != none { + align(center)[#graphic] + v(spacing-xl) + } + + // Author + #text( + size: size-body, + weight: "medium", + fill: c.text-secondary, + )[#info.author] + + // Institution + #if info.institution != none { + v(spacing-xs) + text( + size: size-caption, + fill: c.text-muted, + )[#info.institution] + } + + // Date + #if info.date != none { + v(spacing-md) + text( + size: size-caption, + fill: c.text-light, + weight: "light", + )[ + #if type(info.date) == datetime { + info.date.display("[month repr:long] [day], [year]") + } else { + info.date + } + ] + } + + // Extra content + #if extra != none { + v(spacing-lg) + extra + } + ] + } + ) + } + + touying-slide(self: self, config: config, body) +}) + +/// Main title slide function with layout selection +/// layout: "moloch" (default), "centered", "split" +#let title-slide( + config: (:), + logo: none, + extra: none, + colors: none, + layout: "moloch", + use-golden-ratio: true, + graphic: none, +) = { + if layout == "moloch" { + title-slide-moloch(config: config, logo: logo, extra: extra, colors: colors) + } else if layout == "split" { + title-slide-split(config: config, logo: logo, extra: extra, colors: colors, graphic: graphic) + } else { + title-slide-centered(config: config, logo: logo, extra: extra, colors: colors, use-golden-ratio: use-golden-ratio) + } +} + +// ============================================================================= +// STANDOUT SLIDE (Moloch-inspired) +// ============================================================================= + +/// Standout slide with contrast colors for emphasis +/// Perfect for "Thank you", "Questions?", key takeaways +/// Uses dark bg with accent text (different from focus slide's gradient) +#let standout-slide(config: (:), body, colors: none) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + let self = utils.merge-dicts( + self, + config-common(freeze-slide-counter: true), + config-page( + fill: c.standout-bg, // Dark/contrast background + margin: spacing-3xl, + header: none, + footer: none, + ), + ) + + set text( + size: size-focus, + weight: "semibold", + fill: c.standout-text, // Accent color text + tracking: tracking-tight, + ) + + // True vertical centering using fil spacing (Moloch fix) + touying-slide(self: self, config: config)[ + #v(1fr) + #align(center)[#body] + #v(1fr) + ] +}) + +// ============================================================================= +// FOCUS SLIDE (Gradient background - original style) +// ============================================================================= + +/// Focus slide with gradient background +#let focus-slide(config: (:), body, colors: none) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + let accent-grad = gradient.linear( + angle: 135deg, + (c.accent-secondary, 0%), + (c.accent-primary, 50%), + (c.accent-deep, 100%) + ) + + let self = utils.merge-dicts( + self, + config-common(freeze-slide-counter: true), + config-page( + fill: accent-grad, + margin: spacing-3xl, + header: none, + footer: none, + ), + ) + + set text( + size: size-focus, + weight: "medium", + fill: c.focus-text, + tracking: tracking-tight, + ) + + touying-slide(self: self, config: config, align(center + horizon, body)) +}) + +// ============================================================================= +// SECTION SLIDE +// ============================================================================= + +/// Section slide with optional progress bar +#let section-slide(config: (:), body, colors: none, show-progress: false) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + let self = utils.merge-dicts( + self, + config-common(freeze-slide-counter: true), + config-page( + margin: spacing-3xl, + header: none, + footer: none, + fill: c.bg-base, + ), + ) + + let content = { + set align(center) + v(1fr * phi) + + text( + size: size-title, + weight: "semibold", + fill: c.text-primary, + tracking: tracking-tight, + )[#body] + + v(spacing-md) + + // Show either progress bar OR accent line, not both + if show-progress { + block(width: 50%)[ + #make-progress-bar(c, height: 3pt, position: "foot") + ] + } else { + accent-line(width: 72pt, colors: c) + } + + v(1fr) + } + + touying-slide(self: self, config: config, content) +}) + +/// New section slide function (auto-called by Touying) +#let new-section-slide(config: (:), body, colors: none) = section-slide(config: config, colors: colors)[ + #utils.display-current-heading(level: 1) + #body +] + +// ============================================================================= +// CENTERED SLIDE HELPER +// ============================================================================= + +/// Centered slide helper +#let centered-slide(config: (:), ..args) = touying-slide-wrapper(self => { + touying-slide( + self: self, + ..args.named(), + config: config, + align(center + horizon, args.pos().sum(default: none)) + ) +}) + +// ============================================================================= +// FIGURE SLIDES +// ============================================================================= + +/// Figure slide with elegant framing +#let figure-slide( + fig, + config: (:), + title: none, + caption: none, + colors: none, +) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + // Use Touying's header mechanism (identical to regular slides) + let header-fn(self) = { + if title != none { + moloch-header-bar-touying(title, c) + } + } + + let self = utils.merge-dicts( + self, + config-page(header: header-fn), + ) + + let body = { + v(1fr) + + set align(center) + block( + width: 85%, + inset: spacing-sm, + )[#fig] + + if caption != none { + v(spacing-md) + fig-caption(caption, colors: c) + } + + v(1fr) + } + + touying-slide(self: self, config: config, body) +}) + +/// Split figure slide +#let figure-slide-split( + fig-left, + fig-right, + config: (:), + title: none, + caption-left: none, + caption-right: none, + colors: none, +) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + // Use Touying's header mechanism (identical to regular slides) + let header-fn(self) = { + if title != none { + moloch-header-bar-touying(title, c) + } + } + + let self = utils.merge-dicts( + self, + config-page(header: header-fn), + ) + + let body = { + v(1fr) + + grid( + columns: (1fr, 1fr), + column-gutter: spacing-xl, + { + set align(center) + fig-left + if caption-left != none { + v(spacing-sm) + fig-caption(caption-left, colors: c) + } + }, + { + set align(center) + fig-right + if caption-right != none { + v(spacing-sm) + fig-caption(caption-right, colors: c) + } + } + ) + + v(1fr) + } + + touying-slide(self: self, config: config, body) +}) + +// ============================================================================= +// EQUATION SLIDE +// ============================================================================= + +/// Equation slide with elegant definition box +/// citation: optional (bib-key: "...", label: "...") for cite-box +#let equation-slide( + eq, + config: (:), + title: none, + subtitle: none, + definitions: none, + citation: none, + colors: none, +) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + let progressbar = self.store.at("progressbar", default: "foot") + + // Use Touying's header mechanism (identical to regular slides) + let header-fn(self) = { + if title != none { + moloch-header-bar-touying(title, c) + } + } + + // Footer with progress bar and page numbers (same as regular slide) + let footer-fn(self) = context { + let current = utils.slide-counter.get().first() + let total = utils.last-slide-counter.final().first() + + v(spacing-sm) + + if progressbar == "foot" { + components.left-and-right( + make-progress-bar(c, height: 2pt, position: "foot"), + text(fill: c.text-secondary, size: size-small)[ + #current #text(fill: c.text-muted)[/] #total + ] + ) + } else { + align(right)[ + #text(fill: c.text-secondary, size: size-small)[ + #current #text(fill: c.text-muted)[/] #total + ] + ] + } + } + + let self = utils.merge-dicts( + self, + config-page(header: header-fn, footer: footer-fn), + ) + + let body = { + // Subtitle below header (in body) + if subtitle != none { + text(size: size-small, fill: c.text-muted)[#subtitle] + v(spacing-md) + } + + v(1fr) + + set align(center) + text(size: 22pt, fill: c.text-primary)[#eq] + + if definitions != none { + v(spacing-2xl) + block( + fill: c.bg-wash, + stroke: 0.5pt + c.border-subtle, + radius: radius-lg, + inset: spacing-lg, + width: auto, + )[ + #set align(left) + #set text(size: size-small, fill: c.text-secondary) + #definitions + ] + } + + v(1fr) + + // Citation box if provided + if citation != none { + cite-box( + citation.at("bib-key"), + display-label: citation.at("label", default: none), + position: citation.at("position", default: "bottom-right"), + colors: c, + ) + } + } + + touying-slide(self: self, config: config, body) +}) + +// ============================================================================= +// ACKNOWLEDGEMENT SLIDE +// ============================================================================= + +/// Acknowledgement slide with refined cards +#let acknowledgement-slide( + config: (:), + title: [Acknowledgements], + subtitle: none, + people: (), + institutions: (), + extra: none, + colors: none, +) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + // Use Touying's header mechanism (identical to regular slides) + let header-fn(self) = { + moloch-header-bar-touying(title, c) + } + + let self = utils.merge-dicts( + self, + config-page(header: header-fn), + ) + + let body = { + // Subtitle below header (in body) + if subtitle != none { + text(size: size-small, fill: c.text-muted)[#subtitle] + v(spacing-md) + } + + // People grid + if people.len() > 0 { + let cols = calc.min(people.len(), 4) + grid( + columns: (1fr,) * cols, + column-gutter: spacing-xl, + ..people.map(p => { + person-card( + p.at("name", default: "Name"), + p.at("role", default: "Role"), + image-path: p.at("image", default: none), + ) + }) + ) + v(spacing-2xl) + } + + // Institutions + if institutions.len() > 0 { + let cols = calc.min(institutions.len(), 4) + grid( + columns: (1fr,) * cols, + column-gutter: spacing-xl, + ..institutions.map(inst => { + if type(inst) == str { + institution-card(inst) + } else { + institution-card( + inst.at("name", default: "Institution"), + logo-path: inst.at("logo", default: none), + ) + } + }) + ) + v(spacing-lg) + } + + // Extra content + if extra != none { + v(spacing-md) + text(fill: c.text-muted, size: size-small)[#extra] + } + } + + touying-slide(self: self, config: config, body) +}) + +// ============================================================================= +// ENDING SLIDE +// ============================================================================= + +/// Elegant ending/thank you slide +#let ending-slide( + config: (:), + title: [Thank You], + subtitle: [Questions?], + contact: (), + colors: none, +) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + let self = utils.merge-dicts( + self, + config-page( + margin: spacing-3xl, + header: none, + footer: none, + fill: c.bg-base, + ), + ) + + let body = { + set align(center) + + v(1fr * phi) + + // Elegant title + text( + size: size-display, + weight: "light", + fill: c.text-primary, + tracking: tracking-tight, + )[#title] + + // Accent line + v(spacing-lg) + accent-line(width: 48pt, colors: c) + v(spacing-lg) + + // Subtitle + if subtitle != none { + text( + size: size-subtitle, + weight: "regular", + fill: c.text-muted, + )[#subtitle] + } + + // Contact info + if contact.len() > 0 { + v(spacing-2xl) + for item in contact { + text(fill: c.text-light, size: size-caption, weight: "light")[#item] + v(spacing-2xs) + } + } + + v(1fr) + } + + touying-slide(self: self, config: config, body) +}) + +// ============================================================================= +// BIBLIOGRAPHY SLIDE +// ============================================================================= + +/// Bibliography slide using Typst's native bibliography support +/// bib-content: pass `bibliography("path/to/file.bib")` directly +#let bibliography-slide( + config: (:), + title: [References], + bib-content: none, + colors: none, +) = touying-slide-wrapper(self => { + let c = if colors != none { colors } else { + self.store.at("theme-colors", default: get-theme-colors()) + } + + // Use Touying's header mechanism + let header-fn(self) = { + moloch-header-bar-touying(title, c) + } + + let self = utils.merge-dicts( + self, + config-page(header: header-fn), + ) + + let body = { + // Add label for cite-box linking + [#metadata("bibliography") ] + + v(spacing-sm) + + // Display the bibliography content + set text(size: size-small, fill: c.text-secondary) + if bib-content != none { + bib-content + } else { + text(fill: c.text-muted)[No bibliography specified.] + } + } + + touying-slide(self: self, config: config, body) +}) diff --git a/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Dracula.tmTheme b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Dracula.tmTheme new file mode 100644 index 0000000000..b45d2f988b --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Dracula.tmTheme @@ -0,0 +1,535 @@ + + + + + + + + name + Dracula + settings + + + settings + + background + #282a36 + caret + #f8f8f0 + foreground + #f8f8f2 + invisibles + #3B3A32 + lineHighlight + #44475a + selection + #44475a + findHighlight + #effb7b + findHighlightForeground + #000000 + selectionBorder + #222218 + activeGuide + #9D550FB0 + bracketsForeground + #F8F8F2A5 + bracketsOptions + underline + bracketContentsForeground + #F8F8F2A5 + bracketContentsOptions + underline + tagsOptions + stippled_underline + + + + name + Comment + scope + comment + settings + + foreground + #6272a4 + fontStyle + + + + + name + String + scope + string + settings + + foreground + #f1fa8c + + + + name + Number + scope + constant.numeric + settings + + foreground + #bd93f9 + + + + name + Built-in constant + scope + constant.language + settings + + foreground + #bd93f9 + + + + name + User-defined constant + scope + constant.character, constant.other + settings + + foreground + #bd93f9 + + + + name + Variable + scope + variable + settings + + fontStyle + + + + + name + Ruby's @variable + scope + variable.other.readwrite.instance + settings + + fontStyle + + foreground + #ffb86c + + + + name + String interpolation + scope + constant.character.escaped, constant.character.escape, string source, string source.ruby + settings + + fontStyle + + foreground + #ff79c6 + + + + name + Keyword + scope + keyword + settings + + foreground + #ff79c6 + + + + name + Storage + scope + storage + settings + + fontStyle + + foreground + #ff79c6 + + + + name + Storage type + scope + storage.type + settings + + fontStyle + italic + foreground + #8be9fd + + + + name + Class name + scope + entity.name.class + settings + + fontStyle + underline + foreground + #50fa7b + + + + name + Inherited class + scope + entity.other.inherited-class + settings + + fontStyle + italic underline + foreground + #50fa7b + + + + name + Function name + scope + entity.name.function + settings + + fontStyle + + foreground + #50fa7b + + + + name + Function argument + scope + variable.parameter + settings + + fontStyle + italic + foreground + #ffb86c + + + + name + Tag name + scope + entity.name.tag + settings + + fontStyle + + foreground + #ff79c6 + + + + name + Tag attribute + scope + entity.other.attribute-name + settings + + fontStyle + + foreground + #50fa7b + + + + name + Library function + scope + support.function + settings + + fontStyle + + foreground + #8be9fd + + + + name + Library constant + scope + support.constant + settings + + fontStyle + + foreground + #6be5fd + + + + name + Library class/type + scope + support.type, support.class + settings + + fontStyle + italic + foreground + #66d9ef + + + + name + Library variable + scope + support.other.variable + settings + + fontStyle + + + + + name + Invalid + scope + invalid + settings + + background + #ff79c6 + fontStyle + + foreground + #F8F8F0 + + + + name + Invalid deprecated + scope + invalid.deprecated + settings + + background + #bd93f9 + foreground + #F8F8F0 + + + + name + JSON String + scope + meta.structure.dictionary.json string.quoted.double.json + settings + + foreground + #CFCFC2 + + + + name + diff.header + scope + meta.diff, meta.diff.header + settings + + foreground + #6272a4 + + + + name + diff.deleted + scope + markup.deleted + settings + + foreground + #ff79c6 + + + + name + diff.inserted + scope + markup.inserted + settings + + foreground + #50fa7b + + + + name + diff.changed + scope + markup.changed + settings + + foreground + #E6DB74 + + + + scope + constant.numeric.line-number.find-in-files - match + settings + + foreground + #bd93f9 + + + + scope + entity.name.filename + settings + + foreground + #E6DB74 + + + + scope + message.error + settings + + foreground + #F83333 + + + + name + JSON Punctuation + scope + punctuation.definition.string.begin.json - meta.structure.dictionary.value.json, punctuation.definition.string.end.json - meta.structure.dictionary.value.json + settings + + foreground + #EEEEEE + + + + name + JSON Structure + scope + meta.structure.dictionary.json string.quoted.double.json + settings + + foreground + #8be9fd + + + + name + JSON String + scope + meta.structure.dictionary.value.json string.quoted.double.json + settings + + foreground + #f1fa8c + + + + name + JSON: 6 deep + scope + meta meta meta meta meta meta meta.structure.dictionary.value string + settings + + foreground + #50fa7b + + + + name + JSON: 5 deep + scope + meta meta meta meta meta meta.structure.dictionary.value string + settings + + foreground + #ffb86c + + + + name + JSON: 4 deep + scope + meta meta meta meta meta.structure.dictionary.value string + settings + + foreground + #ff79c6 + + + + name + JSON: 3 deep + scope + meta meta meta meta.structure.dictionary.value string + settings + + foreground + #bd93f9 + + + + name + JSON: 2 deep + scope + meta meta meta.structure.dictionary.value string + settings + + foreground + #50fa7b + + + + name + JSON: 1 deep + scope + meta meta.structure.dictionary.value string + settings + + foreground + #ffb86c + + + + uuid + 83091B89-765E-4F0D-9275-0EC6CB084126 + colorSpaceName + sRGB + semanticClass + theme.dark.dracula + author + Zeno Rocha + + diff --git a/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/GitHub-Dark.tmTheme b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/GitHub-Dark.tmTheme new file mode 100644 index 0000000000..0aba8c4fe1 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/GitHub-Dark.tmTheme @@ -0,0 +1,641 @@ + + + + + author + GitHub + settings + + + settings + + background + #24292e + foreground + #f6f8fa + lineHighlight + #444d56 + invisibles + #6a737d + selection + #4c2889 + caret + #fff + diffRenamed + #fafbfc + diffModified + #f9c513 + diffDeleted + #d73a49 + diffAdded + #34d058 + inactiveSelection + #444d56 + selectionBorder + #444d56 + findHighlight + #fb8532 + findHighlightForeground + #24292e + guide + #6a737d + activeGuide + #f6f8fa + stackGuide + #959da5 + highlight + #f6f8fa + popupCss + <![CDATA[html { background-color: #444d56; } h1, h2, h3, h4, h5, h6 { color: #0366d6; margin-top: 0.2em; margin-bottom: 0.2em; } h1 { font-size: 1.5em; } h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } blockquote { color: #c8e1ff; display: block; font-style: italic; } pre { display: block; } a { color: #79b8ff; font-style: underline; } body { color: #f6f8fa; background-color: #24292e; margin: 1px; font-size: 1em; padding: 0.2em; } .danger { color: #d73a49; } .important, .attention { color: #b392f0; } .caution, .warning { color: #fb8532; } .note { color: #fb8532; }]]> + highlightForeground + #f6f8fa + tagsOptions + underline + bracketContentsOptions + underline + bracketContentsForeground + #e1e4e8 + bracketsOptions + underline + bracketsForeground + #e1e4e8 + gutterForeground + #f6f8fa + + + + scope + comment, punctuation.definition.comment, string.comment + settings + + foreground + #959da5 + + name + Comment + + + scope + constant, entity.name.constant, variable.other.constant, variable.language + settings + + foreground + #c8e1ff + + name + Constant + + + scope + keyword.operator.symbole, keyword.other.mark + name + Clojure workaround; don't highlight these separately from their enclosing scope + settings + + + + scope + entity, entity.name + settings + + fontStyle + + foreground + #b392f0 + + name + Entity + + + scope + variable.parameter.function + settings + + foreground + #f6f8fa + + + + scope + entity.name.tag + settings + + fontStyle + + foreground + #7bcc72 + + + + scope + keyword + settings + + fontStyle + + foreground + #ea4a5a + + name + Keyword + + + scope + storage, storage.type + settings + + foreground + #ea4a5a + + name + Storage + + + scope + storage.modifier.package, storage.modifier.import, storage.type.java + settings + + foreground + #f6f8fa + + + + scope + string, punctuation.definition.string, string punctuation.section.embedded source + settings + + fontStyle + + foreground + #79b8ff + + name + String + + + name + Ada workaround; don't highlight imports as strings + scope + string.unquoted.import.ada + settings + + + + scope + support + settings + + fontStyle + + foreground + #c8e1ff + + name + Support + + + scope + meta.property-name + settings + + fontStyle + + foreground + #c8e1ff + + + + scope + variable + settings + + fontStyle + + foreground + #fb8532 + + name + Variable + + + scope + variable.other + settings + + foreground + #f6f8fa + + + + scope + invalid.broken + settings + + fontStyle + bold italic underline + foreground + #d73a49 + + name + Invalid - Broken + + + scope + invalid.deprecated + settings + + fontStyle + bold italic underline + foreground + #d73a49 + + name + Invalid – Deprecated + + + scope + invalid.illegal + settings + + fontStyle + italic underline + foreground + #fafbfc + background + #d73a49 + + name + Invalid – Illegal + + + scope + carriage-return + settings + + fontStyle + italic underline + foreground + #fafbfc + background + #d73a49 + content + ^M + + name + Carriage Return + + + scope + invalid.unimplemented + settings + + fontStyle + bold italic underline + foreground + #d73a49 + + name + Invalid - Unimplemented + + + scope + message.error + settings + + foreground + #d73a49 + + + + scope + string source + settings + + fontStyle + + foreground + #f6f8fa + + name + String embedded-source + + + scope + string variable + settings + + fontStyle + + foreground + #c8e1ff + + name + String variable + + + scope + source.regexp, string.regexp + settings + + fontStyle + + foreground + #79b8ff + + name + String.regexp + + + scope + string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition + settings + + foreground + #79b8ff + + name + String.regexp.«special» + + + scope + string.regexp constant.character.escape + settings + + fontStyle + bold + foreground + #7bcc72 + + name + String.regexp constant.character.escape + + + scope + support.constant + settings + + fontStyle + + foreground + #c8e1ff + + name + Support.constant + + + scope + support.variable + settings + + foreground + #c8e1ff + + name + Support.variable + + + scope + meta.module-reference + settings + + foreground + #c8e1ff + + name + meta module-reference + + + scope + markup.list + settings + + foreground + #fb8532 + + name + Markup.list + + + scope + markup.heading, markup.heading entity.name + settings + + fontStyle + bold + foreground + #0366d6 + + name + Markup.heading + + + scope + markup.quote + settings + + foreground + #c8e1ff + + name + Markup.quote + + + scope + markup.italic + settings + + fontStyle + italic + foreground + #f6f8fa + + name + Markup.italic + + + scope + markup.bold + settings + + fontStyle + bold + foreground + #f6f8fa + + name + Markup.bold + + + scope + markup.raw + settings + + fontStyle + + foreground + #c8e1ff + + name + Markup.raw + + + scope + markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted + settings + + background + #ffeef0 + foreground + #b31d28 + + name + Markup.deleted + + + scope + markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted + settings + + background + #f0fff4 + foreground + #176f2c + + name + Markup.inserted + + + scope + markup.changed, punctuation.definition.changed + settings + + background + #fffdef + foreground + #b08800 + + + + scope + markup.ignored, markup.untracked + settings + + foreground + #2f363d + background + #959da5 + + + + scope + meta.diff.range + settings + + fontStyle + bold + foreground + #b392f0 + + + + scope + meta.diff.header + settings + + foreground + #c8e1ff + + + + scope + meta.separator + settings + + fontStyle + bold + foreground + #0366d6 + + name + Meta.separator + + + name + Output + scope + meta.output + settings + + foreground + #0366d6 + + + + scope + brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote + settings + + foreground + #ffeef0 + + + + scope + brackethighlighter.unmatched + settings + + foreground + #d73a49 + + + + scope + sublimelinter.mark.error + settings + + foreground + #d73a49 + + + + scope + sublimelinter.mark.warning + settings + + foreground + #fb8532 + + + + scope + sublimelinter.gutter-mark + settings + + foreground + #6a737d + + + + scope + constant.other.reference.link, string.other.link + settings + + foreground + #79b8ff + fontStyle + underline + + + + comment + GitHub Dark syntax theme + name + GitHub Dark + semanticClass + theme.dark.github + filename + github-dark + uuid + C8E24EAE-6212-41E3-AC1A-F49362B6150D + + \ No newline at end of file diff --git a/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/GitHub-Light.tmTheme b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/GitHub-Light.tmTheme new file mode 100644 index 0000000000..6150769ea9 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/GitHub-Light.tmTheme @@ -0,0 +1,643 @@ + + + + + author + GitHub + settings + + + settings + + selection + #c8c8fa + lineHighlight + #fafbfc + background + #fff + foreground + #24292e + invisibles + #959da5 + caret + #24292e + diffRenamed + #fafbfc + diffModified + #f9c513 + diffDeleted + #d73a49 + diffAdded + #34d058 + markdown + #f7f7f7 + inactiveSelection + #fafbfc + selectionBorder + #fafbfc + findHighlight + #e36209 + findHighlightForeground + #fff8f2 + guide + #959da5 + activeGuide + #24292e + stackGuide + #959da5 + highlight + #444d56 + popupCss + <![CDATA[html { background-color: #e0e0e0; } h1, h2, h3, h4, h5, h6 { color: #005cc5; margin-top: 0.2em; margin-bottom: 0.2em; } h1 { font-size: 1.5em; } h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } blockquote { color: #22863a; display: block; font-style: italic; } pre { display: block; } a { color: #032f62; font-style: underline; } body { color: #24292e; background-color: #fff; margin: 1px; font-size: 1em; padding: 0.2em; } .danger { color: #b31d28; } .important, .attention { color: #6f42c1; } .caution, .warning { color: #e36209; } .note { color: #735c0f; }]]> + highlightForeground + #444d56 + tagsOptions + underline + bracketContentsOptions + underline + bracketContentsForeground + #24292e + bracketsOptions + underline + bracketsForeground + #24292e + gutterForeground + #24292e + + + + scope + comment, punctuation.definition.comment, string.comment + settings + + foreground + #6a737d + + name + Comment + + + scope + constant, entity.name.constant, variable.other.constant, variable.language + settings + + foreground + #005cc5 + + name + Constant + + + scope + keyword.operator.symbole, keyword.other.mark + name + Clojure workaround; don't highlight these separately from their enclosing scope + settings + + + + scope + entity, entity.name + settings + + fontStyle + + foreground + #6f42c1 + + name + Entity + + + scope + variable.parameter.function + settings + + foreground + #24292e + + + + scope + entity.name.tag + settings + + fontStyle + + foreground + #22863a + + + + scope + keyword + settings + + fontStyle + + foreground + #d73a49 + + name + Keyword + + + scope + storage, storage.type + settings + + foreground + #d73a49 + + name + Storage + + + scope + storage.modifier.package, storage.modifier.import, storage.type.java + settings + + foreground + #24292e + + + + scope + string, punctuation.definition.string, string punctuation.section.embedded source + settings + + fontStyle + + foreground + #032f62 + + name + String + + + name + Ada workaround; don't highlight imports as strings + scope + string.unquoted.import.ada + settings + + + + scope + support + settings + + fontStyle + + foreground + #005cc5 + + name + Support + + + scope + meta.property-name + settings + + fontStyle + + foreground + #005cc5 + + + + scope + variable + settings + + fontStyle + + foreground + #e36209 + + name + Variable + + + scope + variable.other + settings + + foreground + #24292e + + + + scope + invalid.broken + settings + + fontStyle + bold italic underline + foreground + #b31d28 + + name + Invalid - Broken + + + scope + invalid.deprecated + settings + + fontStyle + bold italic underline + foreground + #b31d28 + + name + Invalid – Deprecated + + + scope + invalid.illegal + settings + + fontStyle + italic underline + background + #b31d28 + foreground + #fafbfc + + name + Invalid – Illegal + + + scope + carriage-return + settings + + fontStyle + italic underline + background + #d73a49 + foreground + #fafbfc + content + ^M + + name + Carriage Return + + + scope + invalid.unimplemented + settings + + fontStyle + bold italic underline + foreground + #b31d28 + + name + Invalid - Unimplemented + + + scope + message.error + settings + + foreground + #b31d28 + + + + scope + string source + settings + + fontStyle + + foreground + #24292e + + name + String embedded-source + + + scope + string variable + settings + + fontStyle + + foreground + #005cc5 + + name + String variable + + + scope + source.regexp, string.regexp + settings + + fontStyle + + foreground + #032f62 + + name + String.regexp + + + scope + string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition + settings + + foreground + #032f62 + + name + String.regexp.«special» + + + scope + string.regexp constant.character.escape + settings + + fontStyle + bold + foreground + #22863a + + name + String.regexp constant.character.escape + + + scope + support.constant + settings + + fontStyle + + foreground + #005cc5 + + name + Support.constant + + + scope + support.variable + settings + + foreground + #005cc5 + + name + Support.variable + + + scope + meta.module-reference + settings + + foreground + #005cc5 + + name + meta module-reference + + + scope + markup.list + settings + + foreground + #735c0f + + name + Markup.list + + + scope + markup.heading, markup.heading entity.name + settings + + fontStyle + bold + foreground + #005cc5 + + name + Markup.heading + + + scope + markup.quote + settings + + foreground + #22863a + + name + Markup.quote + + + scope + markup.italic + settings + + fontStyle + italic + foreground + #24292e + + name + Markup.italic + + + scope + markup.bold + settings + + fontStyle + bold + foreground + #24292e + + name + Markup.bold + + + scope + markup.raw + settings + + fontStyle + + foreground + #005cc5 + + name + Markup.raw + + + scope + markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted + settings + + background + #ffeef0 + foreground + #b31d28 + + name + Markup.deleted + + + scope + markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted + settings + + background + #f0fff4 + foreground + #22863a + + name + Markup.inserted + + + scope + markup.changed, punctuation.definition.changed + settings + + background + #ffebda + foreground + #e36209 + + + + scope + markup.ignored, markup.untracked + settings + + foreground + #f6f8fa + background + #005cc5 + + + + scope + meta.diff.range + settings + + foreground + #6f42c1 + fontStyle + bold + + + + scope + meta.diff.header + settings + + foreground + #005cc5 + + + + scope + meta.separator + settings + + fontStyle + bold + foreground + #005cc5 + + name + Meta.separator + + + name + Output + scope + meta.output + settings + + foreground + #005cc5 + + + + scope + brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote + settings + + foreground + #586069 + + + + scope + brackethighlighter.unmatched + settings + + foreground + #b31d28 + + + + scope + sublimelinter.mark.error + settings + + foreground + #b31d28 + + + + scope + sublimelinter.mark.warning + settings + + foreground + #e36209 + + + + scope + sublimelinter.gutter-mark + settings + + foreground + #959da5 + + + + scope + constant.other.reference.link, string.other.link + settings + + foreground + #032f62 + fontStyle + underline + + + + comment + GitHub Light syntax theme + name + GitHub Light + semanticClass + theme.light.github + filename + github-light + uuid + A1C4DFA0-7031-11E4-9803-0800200C9A66 + + \ No newline at end of file diff --git a/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow-Night-Eighties.tmTheme b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow-Night-Eighties.tmTheme new file mode 100644 index 0000000000..4c6b8eeb69 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow-Night-Eighties.tmTheme @@ -0,0 +1,247 @@ + + + + + comment + http://chriskempson.com + name + Tomorrow Night - Eighties + settings + + + settings + + background + #2D2D2D + caret + #CCCCCC + foreground + #CCCCCC + invisibles + #6A6A6A + lineHighlight + #393939 + selection + #515151 + + + + name + Comment + scope + comment + settings + + foreground + #999999 + + + + name + Foreground + scope + keyword.operator.class, constant.other, source.php.embedded.line + settings + + fontStyle + + foreground + #CCCCCC + + + + name + Variable, String Link, Tag Name, GitGutter deleted + scope + variable, support.other.variable, string.other.link, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter + settings + + foreground + #F2777A + + + + name + Number, Constant, Function Argument, Tag Attribute, Embedded + scope + constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit + settings + + fontStyle + + foreground + #F99157 + + + + name + Class, Support + scope + entity.name.class, entity.name.type.class, support.type, support.class + settings + + fontStyle + + foreground + #FFCC66 + + + + name + String, Symbols, Inherited Class, Markup Heading, GitGutter inserted + scope + string, constant.other.symbol, entity.other.inherited-class, entity.name.filename, markup.heading, markup.inserted.git_gutter + settings + + fontStyle + + foreground + #99CC99 + + + + name + Operator, Misc + scope + keyword.operator, constant.other.color + settings + + foreground + #66CCCC + + + + name + Function, Special Method, Block Level, GitGutter changed + scope + entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter + settings + + fontStyle + + foreground + #6699CC + + + + name + Keyword, Storage + scope + keyword, storage, storage.type, entity.name.tag.css + settings + + fontStyle + + foreground + #CC99CC + + + + name + Invalid + scope + invalid + settings + + background + #F2777A + fontStyle + + foreground + #CDCDCD + + + + name + Separator + scope + meta.separator + settings + + background + #99CCCC + foreground + #CDCDCD + + + + name + Deprecated + scope + invalid.deprecated + settings + + background + #CC99CC + fontStyle + + foreground + #CDCDCD + + + + name + Diff foreground + scope + markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.from-file + settings + + foreground + #FFFFFF + + + + name + Diff insertion + scope + markup.inserted.diff, meta.diff.header.to-file + settings + + foreground + #718c00 + + + + name + Diff deletion + scope + markup.deleted.diff, meta.diff.header.from-file + settings + + foreground + #c82829 + + + + name + Diff header + scope + meta.diff.header.from-file, meta.diff.header.to-file + settings + + foreground + #FFFFFF + background + #4271ae + + + + name + Diff range + scope + meta.diff.range + settings + + fontStyle + italic + foreground + #3e999f + + + + uuid + DE477E5B-BD4D-46B0-BF80-2EA32A2814D5 + colorSpaceName + sRGB + + diff --git a/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow-Night.tmTheme b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow-Night.tmTheme new file mode 100644 index 0000000000..e0c504341b --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow-Night.tmTheme @@ -0,0 +1,247 @@ + + + + + comment + http://chriskempson.com + name + Tomorrow Night + settings + + + settings + + background + #1D1F21 + caret + #AEAFAD + foreground + #C5C8C6 + invisibles + #4B4E55 + lineHighlight + #282A2E + selection + #373B41 + + + + name + Comment + scope + comment + settings + + foreground + #969896 + + + + name + Foreground + scope + keyword.operator.class, constant.other, source.php.embedded.line + settings + + fontStyle + + foreground + #CED1CF + + + + name + Variable, String Link, Regular Expression, Tag Name, GitGutter deleted + scope + variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter + settings + + foreground + #CC6666 + + + + name + Number, Constant, Function Argument, Tag Attribute, Embedded + scope + constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit + settings + + fontStyle + + foreground + #DE935F + + + + name + Class, Support + scope + entity.name.class, entity.name.type.class, support.type, support.class + settings + + fontStyle + + foreground + #F0C674 + + + + name + String, Symbols, Inherited Class, Markup Heading, GitGutter inserted + scope + string, constant.other.symbol, entity.other.inherited-class, entity.name.filename, markup.heading, markup.inserted.git_gutter + settings + + fontStyle + + foreground + #B5BD68 + + + + name + Operator, Misc + scope + keyword.operator, constant.other.color + settings + + foreground + #8ABEB7 + + + + name + Function, Special Method, Block Level, GitGutter changed + scope + entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter + settings + + fontStyle + + foreground + #81A2BE + + + + name + Keyword, Storage + scope + keyword, storage, storage.type, entity.name.tag.css + settings + + fontStyle + + foreground + #B294BB + + + + name + Invalid + scope + invalid + settings + + background + #DF5F5F + fontStyle + + foreground + #CED2CF + + + + name + Separator + scope + meta.separator + settings + + background + #82A3BF + foreground + #CED2CF + + + + name + Deprecated + scope + invalid.deprecated + settings + + background + #B798BF + fontStyle + + foreground + #CED2CF + + + + name + Diff foreground + scope + markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.from-file + settings + + foreground + #FFFFFF + + + + name + Diff insertion + scope + markup.inserted.diff, meta.diff.header.to-file + settings + + foreground + #718c00 + + + + name + Diff deletion + scope + markup.deleted.diff, meta.diff.header.from-file + settings + + foreground + #c82829 + + + + name + Diff header + scope + meta.diff.header.from-file, meta.diff.header.to-file + settings + + foreground + #FFFFFF + background + #4271ae + + + + name + Diff range + scope + meta.diff.range + settings + + fontStyle + italic + foreground + #3e999f + + + + uuid + F96223EB-1A60-4617-92F3-D24D4F13DB09 + colorSpaceName + sRGB + + diff --git a/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow.tmTheme b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow.tmTheme new file mode 100644 index 0000000000..2b26f3cd0a --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/syntax-themes/Tomorrow.tmTheme @@ -0,0 +1,247 @@ + + + + + comment + http://chriskempson.com + name + Tomorrow + settings + + + settings + + background + #FFFFFF + caret + #AEAFAD + foreground + #4D4D4C + invisibles + #D1D1D1 + lineHighlight + #EFEFEF + selection + #D6D6D6 + + + + name + Comment + scope + comment + settings + + foreground + #8E908C + + + + name + Foreground + scope + keyword.operator.class, constant.other, source.php.embedded.line + settings + + fontStyle + + foreground + #666969 + + + + name + Variable, String Link, Regular Expression, Tag Name, GitGutter deleted + scope + variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter + settings + + foreground + #C82829 + + + + name + Number, Constant, Function Argument, Tag Attribute, Embedded + scope + constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit + settings + + fontStyle + + foreground + #F5871F + + + + name + Class, Support + scope + entity.name.class, entity.name.type.class, support.type, support.class + settings + + fontStyle + + foreground + #C99E00 + + + + name + String, Symbols, Inherited Class, Markup Heading, GitGutter inserted + scope + string, constant.other.symbol, entity.other.inherited-class, entity.name.filename, markup.heading, markup.inserted.git_gutter + settings + + fontStyle + + foreground + #718C00 + + + + name + Operator, Misc + scope + keyword.operator, constant.other.color + settings + + foreground + #3E999F + + + + name + Function, Special Method, Block Level, GitGutter changed + scope + entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter + settings + + fontStyle + + foreground + #4271AE + + + + name + Keyword, Storage + scope + keyword, storage, storage.type + settings + + fontStyle + + foreground + #8959A8 + + + + name + Invalid + scope + invalid + settings + + background + #C82829 + fontStyle + + foreground + #FFFFFF + + + + name + Separator + scope + meta.separator + settings + + background + #4271AE + foreground + #FFFFFF + + + + name + Deprecated + scope + invalid.deprecated + settings + + background + #8959A8 + fontStyle + + foreground + #FFFFFF + + + + name + Diff foreground + scope + markup.inserted.diff, markup.deleted.diff, meta.diff.header.to-file, meta.diff.header.from-file + settings + + foreground + #FFFFFF + + + + name + Diff insertion + scope + markup.inserted.diff, meta.diff.header.to-file + settings + + background + #718c00 + + + + name + Diff deletion + scope + markup.deleted.diff, meta.diff.header.from-file + settings + + background + #c82829 + + + + name + Diff header + scope + meta.diff.header.from-file, meta.diff.header.to-file + settings + + foreground + #FFFFFF + background + #4271ae + + + + name + Diff range + scope + meta.diff.range + settings + + fontStyle + italic + foreground + #3e999f + + + + uuid + 82CCD69C-F1B1-4529-B39E-780F91F07604 + colorSpaceName + sRGB + + diff --git a/packages/preview/calmly-touying/0.2.0/theme/theme.typ b/packages/preview/calmly-touying/0.2.0/theme/theme.typ new file mode 100644 index 0000000000..10b91da6ff --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/theme.typ @@ -0,0 +1,313 @@ +// Warm Amber Touying Theme - Enhanced Edition +// A soft, smooth, modern presentation theme with Moloch-inspired features +// Supports: light/dark variants, multiple color themes, progress bar placement, +// Moloch-style headers, title page variants, standout slides + +#import "@preview/touying:0.6.1": * +#import "colors.typ": * +#import "typography.typ": * +#import "components.typ": * +#import "slides.typ": * + +// ============================================================================= +// RE-EXPORT COMPONENTS +// ============================================================================= + +// Layout components (don't need colors) +#let two-col = two-col +#let three-col = three-col +#let spacer = spacer + +// Components that accept optional colors parameter +// These are re-exported as-is; colors will be passed from slides when needed +#let highlight-box = highlight-box +#let algorithm-box = algorithm-box +#let alert-box = alert-box +#let example-box = example-box +#let themed-block = themed-block +#let code-block = code-block +#let quote-block = quote-block +#let soft-shadow-box = soft-shadow-box + +// Text helpers +#let alert = alert +#let muted = muted +#let subtle = subtle +#let fig-caption = fig-caption + +// Visual elements +#let accent-line = accent-line +#let soft-divider = soft-divider +#let bullet = bullet +#let pill = pill + +// Cards +#let person-card = person-card +#let institution-card = institution-card + +// Bullet markers +#let bullet-circle = bullet-circle +#let bullet-square = bullet-square +#let bullet-dash = bullet-dash + +// Citation gadget +#let cite-box = cite-box + +// Golden ratio utilities +#let phi = phi +#let golden-center = golden-center +#let golden-major = golden-major +#let golden-minor = golden-minor +#let golden-split-left = golden-split-left +#let golden-split-right = golden-split-right + +// ============================================================================= +// RE-EXPORT SLIDE TYPES +// ============================================================================= + +#let title-slide = title-slide +#let title-slide-centered = title-slide-centered +#let title-slide-moloch = title-slide-moloch +#let title-slide-split = title-slide-split +#let focus-slide = focus-slide +#let standout-slide = standout-slide +#let figure-slide = figure-slide +#let figure-slide-split = figure-slide-split +#let equation-slide = equation-slide +#let acknowledgement-slide = acknowledgement-slide +#let ending-slide = ending-slide +#let section-slide = section-slide +#let bibliography-slide = bibliography-slide + +// ============================================================================= +// RE-EXPORT COLOR UTILITIES +// ============================================================================= + +#let get-theme-colors = get-theme-colors +#let make-gradients = make-gradients + +// ============================================================================= +// SYNTAX THEME MAPPING +// ============================================================================= + +#let _get-syntax-theme(colortheme, variant) = { + let themes = ( + "tomorrow": (light: "syntax-themes/Tomorrow.tmTheme", dark: "syntax-themes/Tomorrow-Night.tmTheme"), + "warm-amber": (light: "syntax-themes/GitHub-Light.tmTheme", dark: "syntax-themes/Tomorrow-Night-Eighties.tmTheme"), + "paper": (light: "syntax-themes/GitHub-Light.tmTheme", dark: "syntax-themes/GitHub-Dark.tmTheme"), + "dracula": (light: "syntax-themes/Tomorrow.tmTheme", dark: "syntax-themes/Dracula.tmTheme"), + ) + let t = themes.at(colortheme, default: themes.at("tomorrow")) + t.at(variant, default: t.at("light")) +} + +// ============================================================================= +// MAIN THEME FUNCTION +// ============================================================================= + +/// Main theme function with Moloch-inspired configuration options +/// +/// Arguments: +/// - aspect-ratio: "16-9" (default), "4-3" +/// - variant: "light" (default), "dark" +/// - colortheme: "tomorrow" (default), "warm-amber", "paper", "dracula" +/// - progressbar: "foot" (default), "head", "frametitle", "none" +/// - header-style: "moloch" (default, colored bar), "minimal" (gradient underline) +/// - title-layout: "moloch" (default), "centered", "split" +/// - block-fill: false (default, transparent), true (filled background) +#let calmly( + aspect-ratio: "16-9", + variant: "light", + colortheme: "tomorrow", + progressbar: "foot", + header-style: "moloch", + title-layout: "moloch", + block-fill: false, + ..args, + body, +) = { + // Get colors and syntax theme for the selected theme and variant + let colors = get-theme-colors(theme: colortheme, variant: variant) + let gradients = make-gradients(colors) + let syntax-theme-path = _get-syntax-theme(colortheme, variant) + + // Create the slide function with theme colors baked in + let themed-slide( + config: (:), + repeat: auto, + setting: body => body, + composer: auto, + ..bodies, + ) = slide( + config: config, + repeat: repeat, + setting: setting, + composer: composer, + colors: colors, + header-style: header-style, + progressbar: progressbar, + ..bodies, + ) + + // Create new-section-slide with colors + let themed-new-section-slide(config: (:), body) = new-section-slide( + config: config, + colors: colors, + body, + ) + + show: touying-slides.with( + config-page( + paper: "presentation-" + aspect-ratio, + margin: (x: spacing-2xl, top: spacing-2xl + spacing-md, bottom: 32pt), // Extra top margin for header breathing room + fill: colors.bg-base, + ), + config-common( + slide-fn: themed-slide, + new-section-slide-fn: themed-new-section-slide, + datetime-format: "[month repr:long] [day], [year]", + ), + config-store( + // Store theme colors for access in slides + theme-colors: colors, + theme-gradients: gradients, + theme-variant: variant, + theme-name: colortheme, + progressbar: progressbar, + header-style: header-style, + title-layout: title-layout, + block-fill: block-fill, + ), + config-methods( + init: (self: none, body) => { + // Get colors from store and set global state for components + let c = self.store.theme-colors + theme-colors-state.update(c) + + // Refined typography setup + set text( + font: font-body, + size: size-body, + fill: c.text-secondary, + weight: "regular", + ) + + // Elegant heading styles + set heading(numbering: none) + show heading.where(level: 1): set text( + size: size-title, + weight: "semibold", + fill: c.text-primary, + tracking: tracking-tight, + ) + show heading.where(level: 2): set text( + size: size-slide-title, + weight: "semibold", + fill: c.text-primary, + tracking: tracking-tight, + ) + + // Refined list styling with custom bullets + set list( + marker: ( + bullet-circle(color: c.accent-secondary), + bullet-square(color: c.accent-secondary), + bullet-dash(color: c.accent-secondary), + ), + indent: spacing-md, + body-indent: spacing-sm, + ) + + // Elegant numbered lists + set enum( + numbering: n => text( + fill: c.accent-primary, + weight: "medium", + size: size-small, + )[#n.], + indent: spacing-md, + body-indent: spacing-sm, + ) + + // Subtle link styling + show link: it => text(fill: c.accent-primary, weight: "medium")[#it] + + // Refined code styling with per-theme syntax highlighting + set raw(theme: syntax-theme-path) + show raw: set text(font: font-mono, size: size-code, fill: c.text-secondary) + show raw.where(block: true): block.with( + fill: c.bg-surface, + stroke: 0.5pt + c.border-subtle, + radius: radius-md, + inset: spacing-md, + width: 100%, + ) + + // Elegant emphasis + show strong: it => text(fill: c.text-primary, weight: "semibold")[#it.body] + show emph: it => text(fill: c.text-secondary, style: "italic")[#it.body] + + // Citation styling - light grey background pill + show cite: it => box( + fill: c.bg-muted, + radius: 3pt, + inset: (x: 4pt, y: 2pt), + )[#text(size: 0.9em)[#it]] + + // Math styling - larger and clearer + set math.equation(numbering: none) + show math.equation: set text(size: 1.15em) + + // Refined paragraph spacing + set par(leading: 0.7em, justify: false) + + body + }, + alert: utils.alert-with-primary-color, + cover: (self: none, body) => { + let c = self.store.theme-colors + box( + fill: c.bg-base.transparentize(30%), + radius: radius-sm, + )[#body] + }, + ), + config-colors( + primary: colors.accent-primary, + secondary: colors.accent-secondary, + tertiary: colors.accent-subtle, + neutral-lightest: colors.bg-base, + neutral-light: colors.bg-muted, + neutral-dark: colors.text-secondary, + neutral-darkest: colors.text-primary, + ), + ..args, + ) + + body +} + +// ============================================================================= +// ALIASES AND BACKWARD COMPATIBILITY +// ============================================================================= + +// Backward compatibility aliases +#let warm-amber-theme = calmly +#let thesis-theme = calmly + +// Convenience function to create a presentation with specific settings +#let moloch-style-theme = calmly.with( + header-style: "moloch", + progressbar: "foot", + title-layout: "moloch", +) + +#let minimal-style-theme = calmly.with( + header-style: "minimal", + progressbar: "foot", + title-layout: "centered", +) + +#let dark-theme = calmly.with( + variant: "dark", +) diff --git a/packages/preview/calmly-touying/0.2.0/theme/typography.typ b/packages/preview/calmly-touying/0.2.0/theme/typography.typ new file mode 100644 index 0000000000..1978061cb8 --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/theme/typography.typ @@ -0,0 +1,95 @@ +// Typography Settings - Refined & Elegant +// Optimized for readability with generous breathing room +// Includes golden ratio spacing utilities inspired by Moloch + +// ============================================================================= +// GOLDEN RATIO UTILITIES +// ============================================================================= + +// The golden ratio constant (φ ≈ 1.618) +#let phi = 1.618033988749895 + +// Golden ratio spacing - mathematically pleasing proportions +// Use for title pages and special layouts +#let golden-space-above = 1fr * phi // Larger space above +#let golden-space-below = 1fr // Smaller space below + +// Golden ratio helper for vertical centering with offset +// Creates mathematically-informed spacing above/below content +#let golden-center(body) = { + v(golden-space-above) + body + v(golden-space-below) +} + +// Golden ratio proportions for layouts +#let golden-major = phi / (1 + phi) // ~0.618 (larger portion) +#let golden-minor = 1 / (1 + phi) // ~0.382 (smaller portion) + +// Split layout using golden ratio (e.g., for title pages) +#let golden-split-left = golden-minor * 100% // ~38.2% +#let golden-split-right = golden-major * 100% // ~61.8% + +// ============================================================================= +// FONT FAMILIES +// ============================================================================= + +// Font families (prioritize installed fonts) +#let font-heading = ("Source Sans 3", "Inter", "Noto Sans", "sans-serif") +#let font-body = ("Source Sans 3", "Inter", "Noto Sans", "sans-serif") +#let font-mono = ("JetBrains Mono", "Fira Code", "Noto Sans Mono", "monospace") +#let font-math = ("STIX Two Math", "Latin Modern Math") + +// Type scale - refined sizing with more contrast +#let size-display = 42pt // Hero text +#let size-title = 34pt // Section/title slides +#let size-slide-title = 26pt // Slide headings +#let size-subtitle = 18pt // Subtitles +#let size-body = 17pt // Body text +#let size-small = 15pt // Smaller body +#let size-caption = 13pt // Captions, labels +#let size-code = 13pt // Code blocks +#let size-footnote = 11pt // Footnotes +#let size-focus = 38pt // Focus slide text +#let size-micro = 10pt // Very small text + +// Font weights - using lighter weights for elegance +#let weight-black = 900 +#let weight-bold = 700 +#let weight-semibold = 600 +#let weight-medium = 500 +#let weight-regular = 400 +#let weight-light = 300 + +// Spacing constants - generous whitespace +#let spacing-3xs = 2pt +#let spacing-2xs = 4pt +#let spacing-xs = 6pt +#let spacing-sm = 10pt +#let spacing-md = 16pt +#let spacing-lg = 24pt +#let spacing-xl = 36pt +#let spacing-2xl = 48pt +#let spacing-3xl = 64pt + +// Border radius - softer, more rounded +#let radius-sm = 6pt +#let radius-md = 10pt +#let radius-lg = 14pt +#let radius-xl = 20pt +#let radius-full = 9999pt + +// Line heights +#let leading-tight = 1.15 +#let leading-snug = 1.3 +#let leading-normal = 1.5 +#let leading-relaxed = 1.7 + +// Letter spacing +#let tracking-tight = -0.02em +#let tracking-normal = 0em +#let tracking-wide = 0.02em +#let tracking-wider = 0.04em + +// Paragraph spacing +#let par-spacing = 0.8em diff --git a/packages/preview/calmly-touying/0.2.0/thumbnail.png b/packages/preview/calmly-touying/0.2.0/thumbnail.png new file mode 100644 index 0000000000..65a905d740 Binary files /dev/null and b/packages/preview/calmly-touying/0.2.0/thumbnail.png differ diff --git a/packages/preview/calmly-touying/0.2.0/typst.toml b/packages/preview/calmly-touying/0.2.0/typst.toml new file mode 100644 index 0000000000..a3728b90af --- /dev/null +++ b/packages/preview/calmly-touying/0.2.0/typst.toml @@ -0,0 +1,23 @@ +[package] +name = "calmly-touying" +version = "0.2.0" +entrypoint = "lib.typ" +authors = ["Yichen Han"] +license = "MIT" +description = "A calm, modern presentation theme for Touying with Moloch-inspired design." +repository = "https://github.com/YHan228/calmly-touying" +keywords = ["presentation", "slides", "theme", "touying", "academic"] +categories = ["presentation", "layout"] +disciplines = ["computer-science", "mathematics", "engineering"] +compiler = "0.12.0" +exclude = [ + "examples", + "*.pdf", + ".gitignore", + ".claude", +] + +[template] +path = "template" +entrypoint = "main.typ" +thumbnail = "thumbnail.png"