decktile 0.2.0__py3-none-any.whl

decktile/theme/parser.py

@@ -0,0 +1,264 @@
+"""Parse base.css + theme CSS with tinycss2 into PPTX styling rules."""
+
+import tinycss2
+
+
+def parse_theme(base_css: str, theme_css: str) -> dict:
+    """Parse base.css + theme CSS into a flat style map for ODP rendering."""
+    styles: dict[str, str] = {}
+    _parse_sheet(base_css, styles)
+    _parse_sheet(theme_css, styles)
+    return _build_theme_dict(styles)
+
+
+def parse_dark_theme(base_css: str, theme_css: str) -> dict:
+    """Parse dark-mode CSS variables from [data-variant='dark'] blocks."""
+    import tinycss2
+    for sheet in [base_css, theme_css]:
+        rules = tinycss2.parse_stylesheet(sheet, skip_comments=True, skip_whitespace=True)
+        in_dark = False
+        for rule in rules:
+            if rule.type != "qualified-rule":
+                continue
+            selector = tinycss2.serialize(rule.prelude).strip()
+            if selector in ("[data-variant=\"dark\"]"):
+                in_dark = True
+                continue
+            elif selector.startswith("section[data-variant"):
+                in_dark = False
+                continue
+            if in_dark:
+                # Check if this is still inside a dark block or the start of another
+                pass
+        # Simpler: just concatenate all declarations from dark-mode blocks
+    # Simpler approach: extract -- variables from the dark blocks
+    styles: dict[str, str] = {}
+    _parse_sheet(base_css, styles)
+    _parse_sheet(theme_css, styles)
+    # Parse dark-specific CSS to get dark variable values
+    _parse_dark_variables(base_css, theme_css, styles)
+    return _build_theme_dict(styles)
+
+
+def _parse_dark_variables(base_css: str, theme_css: str, styles: dict) -> None:
+    """Extract dark mode CSS variables and override light mode values."""
+    import tinycss2
+    for sheet in [base_css, theme_css]:
+        rules = tinycss2.parse_stylesheet(sheet, skip_comments=True, skip_whitespace=True)
+        for rule in rules:
+            if rule.type != "qualified-rule":
+                continue
+            selector = tinycss2.serialize(rule.prelude).strip()
+            if selector not in ("section[data-variant=\"dark\"]"):
+                continue
+            decls = tinycss2.parse_declaration_list(rule.content)
+            for decl in decls:
+                if decl.type != "declaration":
+                    continue
+                name = decl.name
+                val = tinycss2.serialize(decl.value).strip()
+                if name.startswith("--"):
+                    styles[name] = val
+
+
+
+    _parse_sheet(base_css, styles)
+    _parse_sheet(theme_css, styles)
+    # Also parse the dark mode overrides
+def _extract_tag_colors(styles: dict) -> dict[str, tuple[str, str]]:
+    """Extract per-tag fill and border colors from CSS .tag-* selectors."""
+    import re
+    result: dict[str, list[str]] = {}
+
+    # From :root CSS variables
+    for key, val in styles.items():
+        m = re.match(r"--tag-(\w+)-(bg|border)", key)
+        if m:
+            tag, prop = m.group(1), m.group(2)
+            if tag not in result:
+                result[tag] = ["", ""]
+            result[tag][0 if prop == "bg" else 1] = _resolve_color_var(val, styles)
+
+    # From .tag-* selectors (fallback)
+    for key, val in styles.items():
+        m = re.match(r"tag_(\w+)_(border|background)", key)
+        if m:
+            tag, prop = m.group(1), m.group(2)
+            if tag not in result:
+                result[tag] = ["", ""]
+            result[tag][0 if prop == "background" else 1] = val
+
+    return {tag: (fill, border) for tag, (fill, border) in result.items()}
+
+
+def _parse_sheet(css: str, styles: dict) -> None:
+    """Parse a CSS string and extract relevant property values into styles dict."""
+    rules = tinycss2.parse_stylesheet(css, skip_comments=True, skip_whitespace=True)
+
+    for rule in rules:
+        if rule.type != "qualified-rule":
+            continue
+
+        selector = tinycss2.serialize(rule.prelude).strip()
+        decls = tinycss2.parse_declaration_list(rule.content)
+
+        for decl in decls:
+            if decl.type != "declaration":
+                continue
+            name = decl.name
+            val = tinycss2.serialize(decl.value).strip()
+
+            # CSS variables
+            if selector == ":root" and name.startswith("--"):
+                styles[name] = val
+                continue
+
+            # Named selectors -> prefixed props
+            if val.startswith("var("):
+                continue
+            key = _prop_for(name, selector)
+            if key:
+                styles[key] = val
+
+            # Tag selectors (.tag-green, .tag-red, etc.)
+            import re
+            tm = re.match(r"\.tag-(\w+)", selector.strip())
+            if tm and name in ("background", "border-color"):
+                tag_key = f"tag_{tm.group(1)}_{'border' if name == 'border-color' else 'background'}"
+                styles[tag_key] = val
+
+
+_PROPS = {
+    "section": {"padding": "section_padding", "font-family": "font_body_family", "text-align": "section_text_align", "font-size": "font_body_size"},
+    ".layout-title": {"text-align": "title_text_align"},
+    "code": {"font-family": "font_code_family", "font-size": "font_code_size"},
+    ".quote": {"font-size": "font_quote_size"},
+    ".kicker": {"font-size": "font_kicker_size"},
+    ".subtitle": {"font-size": "font_subtitle_size"},
+    ".speaker": {"font-size": "font_speaker_size"},
+    ".tiny": {"font-size": "font_tiny_size"},
+}
+
+_FONT_SIZES = {
+    "h1": "font_h1_size", "h2": "font_h2_size", "h3": "font_h3_size",
+    "h4": "font_h4_size", "h5": "font_h5_size", "h6": "font_h6_size",
+    "p": "font_body_size", "li": "font_li_size",
+}
+
+def _prop_for(name: str, selector: str) -> str | None:
+    if name == "font-size" and selector in _FONT_SIZES:
+        return _FONT_SIZES[selector]
+    return _PROPS.get(selector, {}).get(name)
+
+
+def _to_rgb(value: str) -> tuple[int, int, int]:
+    value = value.strip()
+    if value.startswith("#"):
+        value = value.lstrip("#")
+        if len(value) == 3:
+            value = "".join(c * 2 for c in value)
+        if len(value) == 6:
+            return int(value[0:2], 16), int(value[2:4], 16), int(value[4:6], 16)
+    if value.startswith("rgb"):
+        import re
+        m = re.findall(r"\d+", value)
+        if len(m) >= 3:
+            return int(m[0]), int(m[1]), int(m[2])
+    return 0x33, 0x33, 0x33
+
+
+def _parse_size(value: str, default: int) -> int:
+    """Parse a CSS size value to integer points."""
+    if not value or value.startswith("var("):
+        return default
+    value = value.strip().rstrip(";")
+    if value.endswith("px"):
+        return int(float(value[:-2]))
+    if value.endswith("pt"):
+        return int(float(value[:-2]))
+    if value.endswith("em"):
+        return int(float(value[:-2]) * 18)
+    return default
+
+
+def _parse_padding(value: str) -> tuple[int, int, int, int]:
+    """Parse CSS padding into (top, right, bottom, left) in px."""
+    if not value:
+        return (50, 64, 50, 64)
+    parts = [p for p in value.split() if not p.startswith("var(")]
+    if not parts:
+        return (50, 64, 50, 64)
+    vals = [int(float(p.rstrip("pxem;"))) for p in parts]
+    if len(vals) == 1:
+        return (vals[0], vals[0], vals[0], vals[0])
+    if len(vals) == 2:
+        return (vals[0], vals[1], vals[0], vals[1])
+    if len(vals) == 4:
+        return (vals[0], vals[1], vals[2], vals[3])
+    return (50, 64, 50, 64)
+
+
+def _parse_border_width(border: str) -> str:
+    """Extract border width from CSS border shorthand (e.g. '1px solid #ddd')."""
+    parts = border.split()
+    return parts[0] if parts else "1px"
+
+
+def _parse_border_color(border: str) -> str:
+    """Extract border color from CSS border shorthand, after the style keyword."""
+    parts = border.split()
+    for i, p in enumerate(parts):
+        if p in ("solid", "dashed", "dotted", "double", "none"):
+            if i + 1 < len(parts):
+                return parts[i + 1]
+    return parts[-1] if parts else ""
+
+
+def _resolve_color_var(color: str, styles: dict) -> str:
+    """Resolve var(--name) to its value from CSS variables."""
+    import re
+    m = re.match(r"var\((--[\w-]+)\)", color.strip())
+    if m:
+        return styles.get(m.group(1), color)
+    return color
+
+
+
+def _build_theme_dict(styles: dict) -> dict:
+    ink = _to_rgb(styles.get("--ink", styles.get("--color-foreground", "")))
+    return {
+        "ink_rgb": ink,
+        "ink_rgb_hex": _rgb_to_hex(ink),
+        "muted_rgb": _to_rgb(styles.get("--muted", styles.get("--color-dimmed", ""))),
+        "accent_rgb": _to_rgb(styles.get("--accent", styles.get("--color-accent", ""))),
+        "font_body_family": styles.get("font_body_family", "Segoe UI"),
+        "font_code_family": styles.get("font_code_family",
+                                        styles.get("--font-mono", "Noto Sans Mono")),
+        "font_h1": _parse_size(styles.get("font_h1_size", ""), 32),
+        "font_h2": _parse_size(styles.get("font_h2_size", ""), 32),
+        "font_h3": _parse_size(styles.get("font_h3_size", ""), 23),
+        "font_h4": _parse_size(styles.get("font_h4_size", ""), 15),
+        "font_h5": _parse_size(styles.get("font_h5_size", ""), 13),
+        "font_h6": _parse_size(styles.get("font_h6_size", ""), 11),
+        "font_body": _parse_size(styles.get("font_body_size", ""), 18),
+        "font_code": _parse_size(styles.get("font_code_size", ""), 14),
+        "font_quote": _parse_size(styles.get("font_quote_size", ""), 24),
+        "font_kicker": _parse_size(styles.get("font_kicker_size", ""), 14),
+        "font_subtitle": _parse_size(styles.get("font_subtitle_size", ""), 32),
+        "font_speaker": _parse_size(styles.get("font_speaker_size", ""), 18),
+        "font_tiny": _parse_size(styles.get("font_tiny_size", ""), 13),
+        "font_li": _parse_size(styles.get("font_li_size", ""), 16),
+        "section_text_align": styles.get("section_text_align", "left"),
+        "title_text_align": styles.get("title_text_align", "left"),
+        "section_padding": _parse_padding(styles.get("section_padding", "")),
+        "border_radius": styles.get("--radius", "0.4em"),
+        "card_border_color": _resolve_color_var(
+            _parse_border_color(styles.get("--card-border", "")),
+            styles,
+        ),
+        "card_bg": styles.get("--color-card-bg", ""),
+        "tag_colors": _extract_tag_colors(styles),
+    }
+
+def _rgb_to_hex(rgb: tuple) -> str:
+    return f"#{rgb[0]:02x}{rgb[1]:02x}{rgb[2]:02x}"

decktile/themes/default.css

@@ -0,0 +1,146 @@
+/* decktile default theme -- overridable via frontmatter style: block */
+
+:root {
+  --color-background: #fff;
+  --color-background-stripe: #f5f5f5;
+  --color-foreground: #333;
+  --color-dimmed: #777;
+  --color-accent: #0288d1;
+  --color-accent-bg: rgba(2, 136, 209, 0.1);
+  --color-border: #ddd;
+  --color-card-bg: #fafafa;
+  --tag-green-bg: #e8f5e9;
+  --tag-cyan-bg: #e0f7fa;
+  --tag-yellow-bg: #fff9c4;
+  --tag-red-bg: #ffebee;
+  --tag-default-bg: #f5f5f5;
+  --tag-green-border: #0fd05d;
+  --tag-cyan-border: #67d8ff;
+  --tag-yellow-border: #ffd166;
+  --tag-red-border: #ff7a7a;
+  --tag-default-border: #ccc;
+  --list-style: "\25B8  ";
+  /* keep titles clear of the side-image QR: match kubecon sizing */
+  --title-h1-size: 2.5em;
+  --title-subtitle-size: 1.2em;
+  /* watermark size + clearance from the page-number column (both
+     anchored to --section-padding-h so they stay in sync) -- override
+     --watermark-w/-h per deck if the watermark image's own aspect
+     ratio needs it */
+  --watermark-w: 4em;
+  --watermark-h: 1em;
+  --watermark-gap: 1em;
+}
+
+/* per-slide variant override */
+section[data-theme="light"] {
+  --color-background: #fff;
+  --color-background-stripe: #f5f5f5;
+  --color-foreground: #333;
+  --color-dimmed: #777;
+  --color-accent: #0288d1;
+  --color-accent-bg: rgba(2, 136, 209, 0.1);
+  --color-border: #ddd;
+  --color-card-bg: #fafafa;
+  --tag-green-bg: #e8f5e9;
+  --tag-cyan-bg: #e0f7fa;
+  --tag-yellow-bg: #fff9c4;
+  --tag-red-bg: #ffebee;
+  --tag-green-border: #0fd05d;
+  --tag-cyan-border: #67d8ff;
+  --tag-yellow-border: #ffd166;
+  --tag-red-border: #ff7a7a;
+}
+section[data-theme="dark"] {
+  --color-background: #1a1a2e;
+  --color-background-stripe: #16213e;
+  --color-foreground: #e0e0e0;
+  --color-dimmed: #999;
+  --color-accent: #4fc3f7;
+  --color-accent-bg: rgba(79, 195, 247, 0.15);
+  --color-border: #333;
+  --color-card-bg: #252535;
+  --tag-green-bg: #1a2e1a;
+  --tag-cyan-bg: #1a2a2e;
+  --tag-yellow-bg: #2e2a1a;
+  --tag-red-bg: #2e1a1a;
+  --tag-default-bg: #2a2a2a;
+  --tag-default-border: #444;
+  --tag-green-border: #2d8a3e;
+  --tag-cyan-border: #2d8aaa;
+  --tag-yellow-border: #8a7a2d;
+  --tag-red-border: #8a2d2d;
+  --tag-default-border: #444;
+}
+
+section {
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
+}
+
+/* Watermark sits left of, and vertically centered against, the page-
+   number column: anchored to --section-padding-h (same var .slide-num's
+   right offset uses) so the two stay clear of each other regardless of
+   watermark image size. bottom: 0.48em centers the watermark against
+   .slide-num's own 0.6em-font-size text box -- not the naive full 1em
+   (watermark sits too high) or a plain box-bottom match at 0.6em
+   (watermark sits slightly too high still, since the two boxes aren't
+   the same height). */
+section::after {
+  right: calc(var(--section-padding-h) + var(--watermark-gap));
+  bottom: 0.48em;
+  width: var(--watermark-w);
+  height: var(--watermark-h);
+  background-position: center;
+}
+
+h1, h2, h3, h4, h5, h6 { color: var(--color-foreground); }
+h1 { font-size: 2.5em; font-weight: 700; }
+h2 { font-size: 1.8em; }
+h3 { font-size: 1.15em; }
+h4 { font-size: 0.85em; }
+
+li { font-size: 0.9em; padding-left: 0.3em; }
+
+blockquote {
+  border-left-color: var(--color-accent);
+  color: var(--color-dimmed);
+}
+
+th { background: var(--color-accent-bg); color: var(--color-foreground); }
+th, td { border: 1px solid var(--color-border); }
+tr:nth-child(even) { background: var(--color-background-stripe); }
+
+a { color: var(--color-accent); }
+
+.card {
+  background: var(--color-card-bg);
+  border: var(--card-border);
+}
+.card p { font-size: 0.9em; }
+
+.quote { border-left-color: var(--color-accent); color: var(--color-accent); }
+
+.kicker { color: var(--color-accent); }
+.speaker { color: var(--color-foreground); }
+.speaker .role { color: var(--color-dimmed); }
+
+footer { color: var(--color-dimmed); }
+.slide-num { color: var(--color-dimmed); }
+
+.subtitle { color: var(--color-dimmed); }
+.tiny { font-size: 0.7em; color: var(--color-dimmed); }
+.muted { color: var(--color-dimmed); }
+
+.note-green  { border-left-color: #0fd05d; background: #e8f5e9; }
+.note-yellow { border-left-color: #ffd166; background: #fff9c4; }
+.note-red    { border-left-color: #ff7a7a; background: #ffebee; }
+
+/* ---- tag colors ---- */
+.tag-green  { border-color: var(--tag-green-border); background: var(--tag-green-bg); }
+.tag-cyan   { border-color: var(--tag-cyan-border); background: var(--tag-cyan-bg); }
+.tag-yellow { border-color: var(--tag-yellow-border); background: var(--tag-yellow-bg); }
+.tag-red    { border-color: var(--tag-red-border); background: var(--tag-red-bg); }
+.tag-default   { border-color: var(--tag-default-border); background: var(--tag-default-bg); }
+.tag-quote  { border-left: 0.25em solid var(--color-accent); font-style: italic; background: none; }

decktile/themes/kcd_vietnam.css

@@ -0,0 +1,159 @@
+/* decktile KCD Vietnam 2026 theme */
+
+:root {
+  --color-background: #ffffff;
+  --color-background-stripe: #f0ede6;
+  --color-foreground: #3a2020;
+  --color-dimmed: #7a6a5a;
+  --color-accent: #7A0504;
+  --color-accent-bg: rgba(122, 5, 4, 0.12);
+  --color-border: #d6c8b8;
+  --color-card-bg: #F6ECD9;
+  --bg-image: url("assets/brand/kcd_vietnam/title_background.png");
+  --bg-overlay: rgba(255,255,255,0.96);
+  --watermark: url("assets/brand/kcd_vietnam/watermark.png");
+  --logo-dark: url("assets/brand/dynamia-logo-white.png");
+  --tag-green-bg: #e8f5e9;
+  --tag-cyan-bg: #fce8e8;
+  --tag-yellow-bg: #fef8e6;
+  --tag-red-bg: #fff3e0;
+  --tag-default-bg: #f5f5f5;
+  --tag-green-border: #2e7d32;
+  --tag-cyan-border: #7A0504;
+  --tag-yellow-border: #F1C560;
+  --tag-red-border: #F1C560;
+  --tag-default-border: #ccc;
+
+  --color-accent-primary: #7A0504;
+  --color-accent-secondary: #F1C560;
+  --color-accent-contrast: #1a0000;
+  --list-style: "\25B8  ";
+  --card-border: 2px solid #F1C560;
+  --title-h1-size: 2.5em;
+  --title-subtitle-size: 1.2em;
+}
+
+body {
+  background: #1a0000;
+}
+
+[data-theme="dark"] {
+  --color-background: #1a0000;
+  --color-background-stripe: #2d0808;
+  --color-foreground: #f0e8d0;
+  --color-dimmed: #a09080;
+  --color-accent: #c04040;
+  --color-accent-bg: rgba(192, 64, 64, 0.15);
+  --color-border: #3a1818;
+  --color-card-bg: #2d0808;
+  --bg-overlay: rgba(26, 0, 0, 0.90);
+  --tag-green-bg: #1a2e1a;
+  --tag-cyan-bg: #2e1a1a;
+  --tag-yellow-bg: #2e2a1a;
+  --tag-red-bg: #2e1a1a;
+  --tag-default-bg: #1a1a2e;
+  --tag-green-border: #2d8a3e;
+  --tag-cyan-border: #c04040;
+  --tag-yellow-border: #F1C560;
+  --tag-red-border: #F1C560;
+  --tag-default-border: #2a2a4a;
+
+  --color-accent-primary: #c04040;
+  --color-accent-secondary: #f5d68a;
+  --color-accent-contrast: #c0a080;
+  --card-border: 2px solid #F1C560;
+}
+
+section {
+  background: linear-gradient(var(--bg-overlay), var(--bg-overlay)), var(--bg-image) left top / cover no-repeat;
+  color: var(--color-foreground);
+  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
+}
+
+/* Title slide hides watermark */
+.layout-title section::after {
+  background-image: none;
+}
+section::after {
+  opacity: 0.9;
+}
+.layout-title {
+  background: linear-gradient(135deg, rgba(26,0,0,0.85) 0%, rgba(122,5,4,0.85) 60%, rgba(40,2,2,0.85) 100%), var(--bg-image) left top / cover no-repeat;
+  color: #ffffff;
+}
+.layout-title h1,
+.layout-title h2,
+.layout-title h3,
+.layout-title h4,
+.layout-title h5,
+.layout-title h6 { color: #ffffff; }
+.layout-title .kicker { color: rgba(255,255,255,0.8); }
+.layout-title .subtitle { color: #F7DE9C; }
+.layout-title .speaker { color: rgba(255,255,255,0.8); }
+.layout-title .speaker .role { color: rgba(255,255,255,0.5); }
+.layout-title .speaker-links a { color: rgba(255,255,255,0.75); }
+.layout-title .speaker-links svg { stroke: rgba(255,255,255,0.75); }
+
+.layout-title { --logo: var(--logo-dark); }
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-foreground);
+  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
+}
+h1 { font-size: 2.5em; font-weight: 700; }
+h2 { font-size: 1.8em; padding-top: 0; }
+h3 { font-size: 1.15em; }
+h4 { font-size: 0.85em; }
+h3::after {
+  display: block;
+  content: "";
+  width: 100%;
+  height: 0;
+  border-bottom: 2px solid var(--color-accent-primary);
+  margin-top: 0.3em;
+  opacity: 0.4;
+}
+
+li { font-size: 0.9em; padding-left: 0.3em; }
+ul li::marker { color: var(--color-accent-primary); font-weight: bold; }
+
+blockquote {
+  border-left-color: var(--color-accent-primary);
+  color: var(--color-dimmed);
+}
+
+th { background: var(--color-accent-bg); color: var(--color-foreground); font-weight: 700; }
+th, td { border: 1px solid var(--color-border); }
+tr:nth-child(even) { background: var(--color-background-stripe); }
+
+a { color: var(--color-accent-primary); }
+
+.card {
+  background: var(--color-card-bg);
+  border: var(--card-border);
+}
+.card p { font-size: 0.9em; }
+
+.quote { border-left-color: var(--color-accent-primary); color: var(--color-accent-primary); }
+
+.kicker { color: var(--color-accent-primary); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.75em; }
+.speaker { color: var(--color-foreground); }
+.speaker .role { color: var(--color-dimmed); }
+
+footer { color: var(--color-dimmed); }
+.slide-num { color: var(--color-dimmed); }
+
+.subtitle { color: var(--color-dimmed); }
+h2 + .subtitle { font-size: 0.85em; }
+.tiny { font-size: 0.7em; color: var(--color-dimmed); }
+.muted { color: var(--color-dimmed); }
+
+.accent-primary { color: var(--color-accent-primary); fill: var(--color-accent-primary); stroke: var(--color-accent-primary); }
+.accent-secondary { color: var(--color-accent-secondary); fill: var(--color-accent-secondary); stroke: var(--color-accent-secondary); }
+.accent-contrast { color: var(--color-accent-contrast); fill: var(--color-accent-contrast); stroke: var(--color-accent-contrast); }
+
+.tag-green  { border-color: var(--tag-green-border); background: var(--tag-green-bg); }
+.tag-cyan   { border-color: var(--tag-cyan-border); background: var(--tag-cyan-bg); }
+.tag-yellow { border-color: var(--tag-yellow-border); background: var(--tag-yellow-bg); }
+.tag-red    { border-color: var(--tag-red-border); background: var(--tag-red-bg); }
+.tag-quote  { border-left: 0.25em solid var(--color-accent-primary); font-style: italic; background: none; }