@schalkneethling/toolkit 0.1.5 → 0.3.0

package/hooks/auto-approve-safe-commands/hook.mts

@@ -0,0 +1,188 @@
+#!/usr/bin/env -S node
+
+/**
+ * auto-approve-safe-commands: PermissionRequest hook
+ *
+ * Reads a Claude Code hook payload from stdin, inspects tool_input.command,
+ * and allows safe commands that match known-safe patterns.
+ *
+ * Exit 0  = defers to permission prompt
+ */
+
+import { readFileSync } from "node:fs";
+
+// --- Types ---
+
+interface BashToolInput {
+  command: string;
+}
+
+interface PermissionRequestInput {
+  hook_event_name: "PermissionRequest";
+  session_id: string;
+  cwd: string;
+  transcript_path: string;
+  tool_name: string;
+  tool_input: BashToolInput | Record<string, unknown>;
+}
+
+interface ApproveOutput {
+  hookSpecificOutput: {
+    hookEventName: "PermissionRequest";
+    decision: {
+      behavior: "allow";
+    };
+  };
+}
+
+// --- Safe command patterns ---
+//
+// Each entry is a pattern and a label for logging purposes.
+// Order matters — more specific patterns should come before broader ones.
+
+const SAFE_PATTERNS: { pattern: RegExp; label: string }[] = [
+  // Test runners
+  { pattern: /^npm\s+test\b/, label: "npm test" },
+  { pattern: /^npx\s+vitest\b/, label: "vitest" },
+  { pattern: /^vp\s+test\b/, label: "vp test" },
+  { pattern: /^pnpm\s+test\b/, label: "pnpm test" },
+  { pattern: /^yarn\s+test\b/, label: "yarn test" },
+  { pattern: /^bun\s+test\b/, label: "bun test" },
+  { pattern: /^jest\b/, label: "jest" },
+  { pattern: /^vitest\b/, label: "vitest (direct)" },
+
+  // Linting and formatting (analysis only, never destructive)
+  { pattern: /^npm\s+run\s+lint\b/, label: "npm run lint" },
+  { pattern: /^pnpm\s+run\s+lint\b/, label: "pnpm run lint" },
+  { pattern: /^yarn\s+lint\b/, label: "yarn lint" },
+  { pattern: /^bun\s+run\s+lint\b/, label: "bun run lint" },
+  { pattern: /^eslint\b/, label: "eslint" },
+  { pattern: /^prettier\s+--check\b/, label: "prettier --check" },
+  { pattern: /^stylelint\b/, label: "stylelint" },
+
+  // Type checking
+  { pattern: /^tsc\s+--noEmit\b/, label: "tsc --noEmit" },
+  { pattern: /^npx\s+tsc\s+--noEmit\b/, label: "npx tsc --noEmit" },
+  { pattern: /^npm\s+run\s+typecheck\b/, label: "npm run typecheck" },
+  { pattern: /^pnpm\s+run\s+typecheck\b/, label: "pnpm run typecheck" },
+  { pattern: /^bun\s+run\s+typecheck\b/, label: "bun run typecheck" },
+
+  // Build commands
+  { pattern: /^npm\s+run\s+build\b/, label: "npm run build" },
+  { pattern: /^pnpm\s+run\s+build\b/, label: "pnpm run build" },
+  { pattern: /^yarn\s+build\b/, label: "yarn build" },
+  { pattern: /^bun\s+run\s+build\b/, label: "bun run build" },
+  { pattern: /^vite\s+build\b/, label: "vite build" },
+  { pattern: /^tsc\b/, label: "tsc" },
+
+  // Vite+ (vp) commands - https://viteplus.dev/guide/#core-commands
+  { pattern: /^vp\s+test\b/, label: "vp test" },
+  { pattern: /^vp\s+check\b/, label: "vp check" },
+  { pattern: /^vp\s+lint\b/, label: "vp lint" },
+  { pattern: /^vp\s+fmt\b/, label: "vp fmt" },
+  { pattern: /^vp\s+build\b/, label: "vp build" },
+  { pattern: /^vp\s+dev\b/, label: "vp dev" },
+  { pattern: /^vp\s+preview\b/, label: "vp preview" },
+  { pattern: /^vp\s+run\b/, label: "vp run" },
+  { pattern: /^vp\s+outdated\b/, label: "vp outdated" },
+  { pattern: /^vp\s+why\b/, label: "vp why" },
+  { pattern: /^vp\s+info\b/, label: "vp info" },
+  { pattern: /^vpx\b/, label: "vpx" },
+
+  // Dev server
+  { pattern: /^npm\s+run\s+dev\b/, label: "npm run dev" },
+  { pattern: /^pnpm\s+run\s+dev\b/, label: "pnpm run dev" },
+  { pattern: /^yarn\s+dev\b/, label: "yarn dev" },
+  { pattern: /^bun\s+run\s+dev\b/, label: "bun run dev" },
+  { pattern: /^vite\b/, label: "vite" },
+
+  // Git read operations (no side effects)
+  { pattern: /^git\s+status\b/, label: "git status" },
+  { pattern: /^git\s+log\b/, label: "git log" },
+  { pattern: /^git\s+diff\b/, label: "git diff" },
+  { pattern: /^git\s+branch\b/, label: "git branch" },
+  { pattern: /^git\s+show\b/, label: "git show" },
+
+  // Filesystem reads
+  { pattern: /^cat\b/, label: "cat" },
+  { pattern: /^ls\b/, label: "ls" },
+  { pattern: /^find\b/, label: "find" },
+  { pattern: /^grep\b/, label: "grep" },
+  { pattern: /^rg\b/, label: "ripgrep" },
+
+  // Environment checks
+  { pattern: /^node\s+--version\b/, label: "node --version" },
+  { pattern: /^node\s+-v\b/, label: "node -v" },
+  { pattern: /^bun\s+--version\b/, label: "bun --version" },
+  { pattern: /^npm\s+--version\b/, label: "npm --version" },
+  { pattern: /^git\s+--version\b/, label: "git --version" },
+];
+
+// --- Helpers ---
+
+function approve(): void {
+  const output: ApproveOutput = {
+    hookSpecificOutput: {
+      hookEventName: "PermissionRequest",
+      decision: {
+        behavior: "allow",
+      },
+    },
+  };
+
+  process.stdout.write(JSON.stringify(output) + "\n");
+  process.exit(0);
+}
+
+function defer(): void {
+  // Exit 0 with no output — falls through to the normal permission prompt
+  process.exit(0);
+}
+
+// --- Main ---
+
+function main(): void {
+  const raw = readFileSync("/dev/stdin", "utf-8").trim();
+
+  let input: PermissionRequestInput;
+
+  try {
+    input = JSON.parse(raw) as PermissionRequestInput;
+  } catch {
+    process.stderr.write(
+      `[auto-approve-safe-commands] Failed to parse stdin JSON: ${raw}\n`,
+    );
+    defer();
+    return;
+  }
+
+  // Only handle Bash tool permission requests
+  if (input.tool_name !== "Bash") {
+    defer();
+    return;
+  }
+
+  const { command } = input.tool_input as BashToolInput;
+
+  if (typeof command !== "string") {
+    defer();
+    return;
+  }
+
+  const trimmed = command.trim();
+
+  for (const { pattern, label } of SAFE_PATTERNS) {
+    if (pattern.test(trimmed)) {
+      process.stderr.write(
+        `[auto-approve-safe-commands] Auto-approved: ${label}\n`,
+      );
+      approve();
+      return;
+    }
+  }
+
+  // Not on the allowlist — fall through to normal permission prompt
+  defer();
+}
+
+main();

package/hooks/auto-approve-safe-commands/settings-fragment.json

@@ -0,0 +1,17 @@
+{
+  "hooks": {
+    "PermissionRequest": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node .claude/hooks/auto-approve-safe-commands.mjs",
+            "timeout": 5,
+            "statusMessage": "Checking if command can be auto-approved..."
+          }
+        ]
+      }
+    ]
+  }
+}

package/hooks/block-dangerous-commands/hook.mjs

@@ -31,8 +31,7 @@ const rules = [
     },
     {
         id: "chmod-777",
-        test: (c) => /\bchmod\s+(?:-[a-zA-Z]*\s+)*(?:777|[ugoa]*[+=][rwx]*w[rwx]*(?:\s|$))/.test(c) &&
-            /-R|--recursive|777/.test(c),
+        test: (c) => /\bchmod\s+(?:-[a-zA-Z]*\s+)*(?:777|[ugoa]*[+=][rwx]*w[rwx]*(?:\s|$))/.test(c) && /-R|--recursive|777/.test(c),
         message: "`chmod 777` or recursive world-writable chmod is blocked. Grant the minimum permissions required.",
     },
     {
@@ -47,7 +46,8 @@ const rules = [
     },
     {
         id: "fork-bomb",
-        test: (c) => /:\(\)\s*\{\s*:\s*\|\s*:\s*&\s*\}\s*;\s*:/.test(c) || /\.\s*\|\s*\.\s*&/.test(c),
+        test: (c) => /:\(\)\s*\{\s*:\s*\|\s*:\s*&\s*\}\s*;\s*:/.test(c) ||
+            /\.\s*\|\s*\.\s*&/.test(c),
         message: "Fork bomb pattern detected and blocked.",
     },
     {

package/hooks/block-dangerous-commands/hook.mts

@@ -1,4 +1,5 @@
 #!/usr/bin/env -S node
+
 /**
  * block-dangerous-commands: PreToolUse hook for Bash.
  *
@@ -18,13 +19,15 @@ type Rule = {
 const rules: Rule[] = [
   {
     id: "rm-rf",
-    test: (c) => /\brm\s+(?:-[a-zA-Z]*[rRf][a-zA-Z]*|--recursive|--force)(?:\s|$)/.test(c),
+    test: (c) =>
+      /\brm\s+(?:-[a-zA-Z]*[rRf][a-zA-Z]*|--recursive|--force)(?:\s|$)/.test(c),
     message:
       "`rm -rf` (and flag variants) is blocked. Delete specific paths with a non-recursive `rm`, or move them to a backup location.",
   },
   {
     id: "git-push-force",
-    test: (c) => /\bgit\s+push\b.*\s(?:--force\b|--force-with-lease\b|-f\b)/.test(c),
+    test: (c) =>
+      /\bgit\s+push\b.*\s(?:--force\b|--force-with-lease\b|-f\b)/.test(c),
     message:
       "`git push --force` is blocked. Use `--force-with-lease` only after coordinating with collaborators, or create a new branch.",
   },
@@ -46,8 +49,9 @@ const rules: Rule[] = [
   {
     id: "chmod-777",
     test: (c) =>
-      /\bchmod\s+(?:-[a-zA-Z]*\s+)*(?:777|[ugoa]*[+=][rwx]*w[rwx]*(?:\s|$))/.test(c) &&
-      /-R|--recursive|777/.test(c),
+      /\bchmod\s+(?:-[a-zA-Z]*\s+)*(?:777|[ugoa]*[+=][rwx]*w[rwx]*(?:\s|$))/.test(
+        c,
+      ) && /-R|--recursive|777/.test(c),
     message:
       "`chmod 777` or recursive world-writable chmod is blocked. Grant the minimum permissions required.",
   },
@@ -58,19 +62,24 @@ const rules: Rule[] = [
   },
   {
     id: "system-redirect",
-    test: (c) => /(?:>|>>|tee(?:\s+-[a-zA-Z]*)?)\s+\/(?:etc|boot|usr|bin|sbin)\//.test(c),
+    test: (c) =>
+      /(?:>|>>|tee(?:\s+-[a-zA-Z]*)?)\s+\/(?:etc|boot|usr|bin|sbin)\//.test(c),
     message:
       "Writing into /etc, /boot, /usr, /bin, or /sbin is blocked. These are system directories; use a user-writable path.",
   },
   {
     id: "fork-bomb",
-    test: (c) => /:\(\)\s*\{\s*:\s*\|\s*:\s*&\s*\}\s*;\s*:/.test(c) || /\.\s*\|\s*\.\s*&/.test(c),
+    test: (c) =>
+      /:\(\)\s*\{\s*:\s*\|\s*:\s*&\s*\}\s*;\s*:/.test(c) ||
+      /\.\s*\|\s*\.\s*&/.test(c),
     message: "Fork bomb pattern detected and blocked.",
   },
   {
     id: "curl-pipe-shell",
     test: (c) =>
-      /\b(?:curl|wget|fetch)\b[^|;]*\|\s*(?:sudo\s+)?(?:bash|sh|zsh|fish|ksh|dash)\b/.test(c),
+      /\b(?:curl|wget|fetch)\b[^|;]*\|\s*(?:sudo\s+)?(?:bash|sh|zsh|fish|ksh|dash)\b/.test(
+        c,
+      ),
     message:
       "Piping remote content directly into a shell is blocked. Download the script, inspect it, then run it.",
   },
@@ -83,8 +92,11 @@ const rules: Rule[] = [
   {
     id: "kill-9",
     test: (c) =>
-      /\bkill\s+(?:-[a-zA-Z]*\s+)*-9\b|\bkill\s+-s\s+(?:9|SIGKILL)\b|\bkill\s+-SIGKILL\b/.test(c),
-    message: "`kill -9` is blocked — it prevents cleanup. Try SIGTERM (default) first.",
+      /\bkill\s+(?:-[a-zA-Z]*\s+)*-9\b|\bkill\s+-s\s+(?:9|SIGKILL)\b|\bkill\s+-SIGKILL\b/.test(
+        c,
+      ),
+    message:
+      "`kill -9` is blocked — it prevents cleanup. Try SIGTERM (default) first.",
   },
   {
     id: "npm-publish",
@@ -95,7 +107,8 @@ const rules: Rule[] = [
   {
     id: "history-clear",
     test: (c) => /\bhistory\s+-c\b/.test(c),
-    message: "`history -c` is blocked — erasing shell history hides what happened.",
+    message:
+      "`history -c` is blocked — erasing shell history hides what happened.",
   },
 ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schalkneethling/toolkit",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "CLI for managing Claude Code hooks and skills across projects.",
   "license": "MIT",
   "bin": {
@@ -18,18 +18,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "toolkit": "tsx src/index.ts",
-    "prepare": "vp pack && vp run build:hooks",
-    "build:hooks": "tsc --project tsconfig.hooks.json"
-  },
   "dependencies": {
     "vite-plus": "^0.1.18"
   },
   "devDependencies": {
-    "@types/node": "^22.19.17",
+    "@types/node": "^25.6.0",
     "tsx": "^4.21.0",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.2"
   },
-  "packageManager": "pnpm@10.33.0"
-}
+  "scripts": {
+    "toolkit": "tsx src/index.ts",
+    "build:hooks": "tsc --project tsconfig.hooks.json"
+  }
+}

package/skills/css-coder/SKILL.md

@@ -0,0 +1,95 @@
+---
+name: css-coder
+description: CSS authoring guidance emphasizing web standards, accessibility, and performance. Use when writing, reviewing, or refactoring CSS. Provides patterns, snippets, and conventions that prioritize native CSS over frameworks, semantic structure, and maintainable code. Refer to references/patterns.md for specific patterns and snippets.
+---
+
+# CSS Coder
+
+Guidance for writing CSS that prioritizes web standards, accessibility, performance, and maintainability.
+
+## Core Principles
+
+1. **Web standards first** — Use native CSS features before reaching for libraries or frameworks. No Tailwind, no CSS-in-JS unless explicitly requested.
+2. **Accessibility as a requirement** — Ensure styles support, never hinder, assistive technologies. Respect user preferences (motion, color scheme, contrast).
+3. **Performance matters** — Minimize repaints, avoid layout thrashing, use efficient selectors.
+4. **Readable over clever** — Future maintainers (including the author) should understand the code at a glance.
+5. **Explicit over implicit** — Avoid magic numbers and unexplained values. Use custom properties for shared values.
+
+## Workflow
+
+1. **Check references first** — Before writing CSS, consult `references/patterns.md` for established patterns and snippets.
+2. **Validate against specs** — When uncertain, reference MDN Web Docs or CSS specifications.
+3. **Suggest alternatives** — Offer ideas beyond the skill's patterns when appropriate, but always aligned with the core principles above.
+
+## Writing Guidelines
+
+### Selectors
+
+- Prefer class selectors over element or ID selectors for styling.
+- Keep specificity low and predictable.
+- Avoid deep nesting (aim for 2-3 levels maximum).
+
+### Custom Properties
+
+- Use `--` prefixed custom properties for colors, spacing, typography, and other repeated values.
+- Define at `:root` or appropriate scope.
+- Name descriptively: `--color-primary`, `--spacing-md`, `--font-size-body`.
+
+### Logical Properties
+
+- Always use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`, `block-size`, etc.) instead of physical properties (`margin-left`, `padding-top`, `left`, `height`, etc.).
+- Logical properties support internationalization and different writing modes automatically.
+- Only fall back to physical properties where logical equivalents do not yet exist.
+
+### Units
+
+- Use `rem` for typography and spacing (respects user font-size preferences).
+- Use `em` for component-relative sizing when appropriate.
+- Use viewport units (`vw`, `vh`, `dvh`) thoughtfully, with fallbacks where needed.
+- Avoid `px` for font sizes; acceptable for borders, shadows, and fine details.
+
+### Colors
+
+- Use modern space-separated syntax for all color functions (`rgb()`, `hsl()`, `oklch()`).
+- Recommend `oklch()` for vibrant or wide-gamut colors.
+- Use relative color syntax to derive hover states or transparent variants from existing variables.
+- See `references/patterns.md` for syntax examples.
+
+### Layout
+
+- Use CSS Grid for two-dimensional layouts, or when vertical flow is needed without extra declarations.
+- Use Flexbox for one-dimensional alignment, noting it defaults to `row` direction.
+- Avoid floats for layout (legacy use only).
+
+### Media Queries
+
+- Use modern range syntax: `@media (width < 48rem)`, `@media (width >= 48rem)`.
+- Prefer **Shared First** over mobile-first: define shared styles outside queries, scope viewport-specific styles with bounded queries.
+- Keep breakpoints to a minimum — add more only when there's a clear need.
+- See `references/patterns.md` for detailed examples.
+
+### Accessibility
+
+- Never use `display: none` or `visibility: hidden` to hide content that should remain accessible to screen readers. Use appropriate techniques from the references.
+- Respect `prefers-reduced-motion`, `prefers-color-scheme`, and `prefers-contrast`.
+- Ensure sufficient color contrast (WCAG AA minimum, AAA preferred).
+- Maintain visible focus indicators — never remove `:focus` styles without replacement.
+
+### Performance
+
+- Avoid expensive properties in animations (prefer `transform` and `opacity`).
+- Use `will-change` sparingly and only when needed.
+- Minimize use of `*` selectors.
+- Prefer `@layer` for managing cascade when working with larger codebases.
+
+## References
+
+Consult `references/patterns.md` for:
+
+- Visually-hidden utility
+- User preference queries (motion, color scheme, contrast)
+- Modern color syntax and relative colors
+- Shared First responsive patterns
+- Any project-specific conventions
+
+This file will grow as patterns are added. If a needed pattern doesn't exist, suggest one aligned with the core principles.

package/skills/css-coder/references/patterns.md

@@ -0,0 +1,224 @@
+# CSS Patterns and Snippets
+
+This file contains reusable CSS patterns, snippets, and conventions. Consult before writing CSS.
+
+---
+
+## Utility Patterns
+
+### Visually Hidden (Screen Reader Only)
+
+Use when content should be accessible to assistive technologies but not visible on screen.
+
+```css
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+```
+
+---
+
+## User Preference Queries
+
+### Reduced Motion
+
+Always wrap animations and transitions for users who prefer reduced motion.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+### Color Scheme
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* dark mode custom properties */
+  }
+}
+```
+
+### High Contrast
+
+```css
+@media (prefers-contrast: more) {
+  :root {
+    /* increased contrast custom properties */
+  }
+}
+```
+
+---
+
+## Color Patterns
+
+### Modern Color Syntax
+
+Always use space-separated syntax for color functions. This is the current standard and required for modern color features.
+
+```css
+/* Legacy — avoid */
+.legacy {
+  background-color: hsla(10, 100%, 50%, 0.75);
+  color: rgba(0, 0, 0, 0.9);
+}
+
+/* Modern — preferred */
+.modern {
+  background-color: hsl(10 100% 50% / 0.75);
+  color: rgb(0 0 0 / 0.9);
+}
+```
+
+Key points:
+
+- Use `rgb()` and `hsl()` — the `a` suffix (`rgba`, `hsla`) is no longer needed.
+- Separate components with spaces, not commas.
+- Use `/` before the alpha value for transparency.
+
+### Wide Gamut Colors (oklch, oklab)
+
+Use `oklch()` when users request "vibrant", "bright", or "punchy" colors. It supports a wider gamut than sRGB and is perceptually uniform, making adjustments more predictable.
+
+```css
+:root {
+  --color-accent: oklch(65% 0.25 340);
+}
+```
+
+Note: `oklch()`, `oklab()`, and `color()` only support space-separated syntax.
+
+### Relative Color Syntax
+
+Use relative colors to derive variations (hover states, overlays, tints) from existing brand variables without defining new custom properties.
+
+Syntax: `function(from [base-color] [components] / [alpha])`
+
+```css
+:root {
+  --color-brand: oklch(55% 0.2 250);
+}
+
+.button {
+  background-color: var(--color-brand);
+}
+
+.button:hover {
+  /* Lighten by adjusting the L channel */
+  background-color: oklch(from var(--color-brand) calc(l + 0.1) c h);
+}
+
+.overlay {
+  /* Apply 50% opacity to brand color */
+  background-color: oklch(from var(--color-brand) l c h / 0.5);
+}
+```
+
+---
+
+## Responsive Patterns
+
+### Shared First (Preferred over Mobile First)
+
+Avoid traditional mobile-first CSS where styles "bleed up" through open-ended `min-width` queries, requiring constant overrides. Instead, use a **Shared First** approach:
+
+1. Define only truly shared styles outside media queries.
+2. Use bounded media queries to scope styles to specific viewport ranges.
+3. Keep breakpoints to a minimum — add more only when there's a clear need.
+
+Use modern range syntax for all media queries:
+
+```css
+@media (width < 48rem) {
+  /* below breakpoint */
+}
+@media (width >= 48rem) {
+  /* at or above breakpoint */
+}
+@media (48rem <= width < 64rem) {
+  /* between breakpoints */
+}
+```
+
+**Why Shared First?**
+
+- **Fewer side effects** — Changes to one viewport don't accidentally affect others.
+- **Easier debugging** — DevTools shows fewer overridden (struck-through) properties.
+- **Clearer intent** — Each viewport's styles are self-contained.
+
+```css
+/* Mobile First — avoid */
+body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+@media (min-width: 48rem) {
+  body {
+    flex-direction: row;
+    gap: 2rem;
+  }
+}
+```
+
+```css
+/* Shared First — preferred */
+body {
+  display: flex;
+}
+
+@media (width < 48rem) {
+  body {
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+@media (width >= 48rem) {
+  body {
+    flex-direction: row;
+    gap: 2rem;
+  }
+}
+```
+
+The Shared First approach may use more lines, but results in more maintainable, predictable CSS with fewer debugging headaches.
+
+#### Using Custom Properties with Shared First
+
+Custom properties can reduce repetition by keeping the property declaration shared while scoping only the value to each viewport. Use sparingly — overuse can make code harder to follow.
+
+```css
+.Dialog-container {
+  padding-block: var(--Dialog-block-padding);
+}
+
+@media (width < 48rem) {
+  .Dialog-container {
+    --Dialog-block-padding: var(--size-16);
+  }
+}
+
+@media (width >= 48rem) {
+  .Dialog-container {
+    --Dialog-block-padding: var(--size-32);
+  }
+}
+```