@troshab/slidev-theme-troshab 0.1.0 → 0.1.1

package/README.md

@@ -10,7 +10,7 @@ A minimal, universal [Slidev](https://sli.dev) theme built around one flexible l
 
 ```md
 ---
-theme: troshab
+theme: @troshab/slidev-theme-troshab
 ---
 ```
 
@@ -22,6 +22,8 @@ theme: troshab
 
 **Design system** - 3-layer Dracula/Alucard palette (11 color families × 11 shades), IBM Plex Sans/Mono typography, and a motion system based on IBM Carbon. All tokens are CSS variables - components never hardcode colors.
 
+**1920×1080 canvas** - optimized for Full HD projectors and screens. All sizing uses `rem` units that scale automatically from the root font-size, so the layout adapts cleanly if the canvas resolution changes.
+
 **v-click auto-registration** - interactive components (AnimatedCounter, Countdown, ImageCompare, Stepper, Conversation, StyledText spoilers) register their own click slots. No `clicks:` frontmatter, no `<v-click>` wrappers needed.
 
 **Accessibility** - WCAG AA contrast (target AAA), BDA dyslexia-friendly spacing (word-spacing 0.08em, letter-spacing 0.02em), keyboard focus styles, 5% safe-zone padding.

package/components/Background.vue

@@ -4,13 +4,15 @@
  * Replaces <div class="bg-primary"></div> and raw ![](image) in bg slots.
  *
  * Gradient prop:
- *   1. Presets (string): "accent" (colorful brand), "subtle" (neutral)
+ *   1. Presets (string): "section", "subtle" (alias), "accent", "primary",
+ *      "success", "warning", "danger", "info"
  *   2. Full control (array): [type, direction, ...colorStops]
  *      - type: 'linear' | 'radial' | 'conic'
  *      - direction: CSS direction ('135deg', 'to right', 'circle', 'from 45deg')
  *      - colorStops: [semanticColor, position] tuples
  *
  * Examples:
+ *   gradient="section"
  *   gradient="accent"
  *   :gradient="['linear', '135deg', ['primary', '0%'], ['info', '100%']]"
  *   :gradient="['radial', 'circle', ['primary', '0%'], ['soft', '100%']]"
@@ -48,15 +50,25 @@ function resolveColor(name: string): string {
   return colorVarMap[name] || name
 }
 
+const gradientPresets: Record<string, string> = {
+  primary: 'var(--gradient-primary)',
+  success: 'var(--gradient-success)',
+  warning: 'var(--gradient-warning)',
+  danger:  'var(--gradient-danger)',
+  info:    'var(--gradient-info)',
+  accent:  'var(--gradient-accent)',
+  section: 'var(--gradient-section)',
+  subtle:  'var(--gradient-section)',
+}
+
 const gradientStyle = computed(() => {
   const g = props.gradient
   if (!g) return undefined
 
   // String presets
   if (typeof g === 'string') {
-    if (g === 'accent') return { background: 'var(--gradient-accent)' }
-    if (g === 'subtle') return { background: 'var(--gradient-section)' }
-    return undefined
+    const v = gradientPresets[g]
+    return v ? { background: v } : undefined
   }
 
   // Array: [type, direction, ...colorStops]

package/components/Callout.vue

@@ -45,7 +45,7 @@ defineProps<{
   padding: 1rem 1rem 1rem 1.25rem;
   margin-block: 1rem;
   background-color: var(--color-bg-soft);
-  border-left: 4px solid var(--color-info);
+  border-left: var(--border-accent) solid var(--color-info);
   border-radius: 0 0.375rem 0.375rem 0;
 }
 

package/components/Card.vue

@@ -35,7 +35,7 @@ const isPhosphorIcon = computed(() => props.icon?.startsWith('ph-'))
   padding: 1.25rem;
   background-color: var(--color-bg-soft);
   border-radius: 0.5rem;
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
   transition:
     border-color var(--dur-fast-02) var(--ease-standard),
     box-shadow var(--dur-fast-02) var(--ease-standard);
@@ -43,11 +43,11 @@ const isPhosphorIcon = computed(() => props.icon?.startsWith('ph-'))
 
 .card:hover {
   border-color: var(--color-border-strong);
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 5%, transparent);
+  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--color-black) 5%, transparent);
 }
 
 .dark .card:hover {
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 20%, transparent);
+  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--color-black) 20%, transparent);
 }
 
 .card-icon {

package/components/CaseStudy.vue

@@ -47,7 +47,7 @@ defineProps<{
   background: var(--color-bg-soft);
   border-radius: 0.5rem;
   padding: var(--space-sm);
-  border-left: 4px solid var(--section-color);
+  border-left: var(--border-accent) solid var(--section-color);
 }
 
 .case-study-title {

package/components/CodeDiff.vue

@@ -199,7 +199,7 @@ const afterDiffLines = computed<CodeLine[]>(() =>
   display: flex;
   border-radius: 0.5rem;
   overflow: hidden;
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
 }
 
 .code-diff-split {
@@ -224,6 +224,6 @@ const afterDiffLines = computed<CodeLine[]>(() =>
 
 /* Divider between panels */
 .code-diff-split > .code-hl:first-child {
-  border-right: 1px solid var(--color-border-strong);
+  border-right: var(--border-thin) solid var(--color-border-strong);
 }
 </style>

package/components/CodeHighlight.vue

@@ -209,7 +209,7 @@ function tokenize(text: string): string {
   word-spacing: normal;
   border-radius: 0.5rem;
   overflow: hidden;
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
   background-color: var(--shiki-color-background, var(--color-bg-muted));
 }
 
@@ -219,7 +219,7 @@ function tokenize(text: string): string {
   align-items: center;
   justify-content: space-between;
   padding: 0.25rem 0.75rem;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-thin) solid var(--color-border);
   background-color: var(--shiki-color-background, var(--color-bg-muted));
 }
 

package/components/ColorSwatch.vue

@@ -83,7 +83,7 @@ watch(() => [isDark.value, props.name], resolveColor)
   display: flex;
   align-items: flex-end;
   padding: 0.5rem;
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
   color: var(--color-white);
 }
 
@@ -95,7 +95,7 @@ watch(() => [isDark.value, props.name], resolveColor)
   font-size: var(--font-size-small);
   font-family: var(--font-mono);
   line-height: 1.3;
-  text-shadow: 0 1px 3px color-mix(in srgb, var(--color-black) 30%, transparent);
+  text-shadow: 0 0.0625rem 0.1875rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 .color-swatch-hex {
@@ -109,6 +109,6 @@ watch(() => [isDark.value, props.name], resolveColor)
 }
 
 .color-swatch-light .color-swatch-label {
-  text-shadow: 0 1px 3px color-mix(in srgb, var(--color-white) 40%, transparent);
+  text-shadow: 0 0.0625rem 0.1875rem color-mix(in srgb, var(--color-white) 40%, transparent);
 }
 </style>

package/components/Confetti.vue

@@ -274,19 +274,19 @@ defineExpose({ fire })
 }
 
 .confetti-square {
-  width: 10px;
-  height: 10px;
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 .confetti-circle {
-  width: 8px;
-  height: 8px;
+  width: 0.5rem;
+  height: 0.5rem;
   border-radius: 50%;
 }
 
 .confetti-strip {
-  width: 3px;
-  height: 12px;
-  border-radius: 1px;
+  width: 0.1875rem;
+  height: 0.75rem;
+  border-radius: 0.0625rem;
 }
 </style>

package/components/Conversation.vue

@@ -205,20 +205,20 @@ function getInitials(name: string): string {
 .conversation {
   display: flex;
   flex-direction: column;
-  gap: var(--space-xs, 8px);
+  gap: var(--space-xs, 0.5rem);
   max-width: 100%;
-  padding: var(--space-sm, 16px) 0;
+  padding: var(--space-sm, 1rem) 0;
 }
 
 /* Row layout */
 .conv-row {
   display: flex;
   align-items: flex-end;
-  gap: var(--space-xs, 8px);
+  gap: var(--space-xs, 0.5rem);
 }
 
 .conv-group-continuation {
-  margin-top: calc(-1 * var(--space-xs, 8px) + 2px);
+  margin-top: calc(-1 * var(--space-xs, 0.5rem) + 0.125rem);
 }
 
 .conv-left {
@@ -273,7 +273,7 @@ function getInitials(name: string): string {
 .conv-sender {
   font-size: 0.75rem;
   color: var(--color-text-tertiary);
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
   padding: 0 0.75rem;
 }
 
@@ -284,7 +284,7 @@ function getInitials(name: string): string {
 /* Bubble */
 .conv-bubble {
   padding: 0.5rem 0.75rem;
-  font-size: var(--font-size-small, 18px);
+  font-size: var(--font-size-small, 1.125rem);
   line-height: var(--line-height-body, 1.35);
   word-wrap: break-word;
 }
@@ -293,7 +293,7 @@ function getInitials(name: string): string {
 .conv-bubble-left {
   background-color: var(--color-bg-soft);
   color: var(--color-text);
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
 }
 
 .conv-bubble-left.conv-bubble-single {
@@ -316,7 +316,7 @@ function getInitials(name: string): string {
 .conv-bubble-right {
   background-color: var(--color-primary);
   color: var(--color-primary-foreground);
-  border: 1px solid transparent;
+  border: var(--border-thin) solid transparent;
 }
 
 .conv-bubble-right.conv-bubble-single {
@@ -395,11 +395,11 @@ function getInitials(name: string): string {
 
 .conv-msg-enter-from {
   opacity: 0;
-  transform: translateY(var(--shift-sm, 12px));
+  transform: translateY(var(--shift-sm, 0.75rem));
 }
 
 .conv-msg-leave-to {
   opacity: 0;
-  transform: translateY(calc(-1 * var(--shift-xs, 6px)));
+  transform: translateY(calc(-1 * var(--shift-xs, 0.375rem)));
 }
 </style>

package/components/Countdown.vue

@@ -377,23 +377,23 @@ defineExpose({ start, pause, resume, stop, reset, toggle })
 }
 
 .countdown-size-sm .countdown-ring {
-  width: 120px;
-  height: 120px;
+  width: 7.5rem;
+  height: 7.5rem;
 }
 
 .countdown-size-md .countdown-ring {
-  width: 160px;
-  height: 160px;
+  width: 10rem;
+  height: 10rem;
 }
 
 .countdown-size-lg .countdown-ring {
-  width: 200px;
-  height: 200px;
+  width: 12.5rem;
+  height: 12.5rem;
 }
 
 .countdown-size-xl .countdown-ring {
-  width: 260px;
-  height: 260px;
+  width: 16.25rem;
+  height: 16.25rem;
 }
 
 .countdown-ring-svg {
@@ -443,8 +443,8 @@ defineExpose({ start, pause, resume, stop, reset, toggle })
 
 /* Ring text needs smaller font to fit inside circle */
 .countdown-size-sm .countdown-ring .countdown-time { font-size: var(--font-size-base); }
-.countdown-size-md .countdown-ring .countdown-time { font-size: 28px; }
-.countdown-size-lg .countdown-ring .countdown-time { font-size: 40px; }
+.countdown-size-md .countdown-ring .countdown-time { font-size: 1.75rem; }
+.countdown-size-lg .countdown-ring .countdown-time { font-size: 2.5rem; }
 .countdown-size-xl .countdown-ring .countdown-time { font-size: var(--font-size-h1); }
 
 /* Controls */

package/components/Definition.vue

@@ -52,7 +52,7 @@ defineProps<{
 .definition-body :deep(h3) {
   color: var(--color-primary);
   font-size: var(--font-size-base);
-  border-top: 2px solid var(--color-border);
+  border-top: var(--border-medium) solid var(--color-border);
   padding-top: var(--space-sm);
   margin-top: var(--space-md);
 }

package/components/DeviceMockup.vue

@@ -131,32 +131,32 @@ const displayUrl = computed(() => {
    ============================================ */
 .iphone-frame {
   position: relative;
-  width: 280px;
-  height: 580px;
+  width: 17.5rem;
+  height: 36.25rem;
   background-color: var(--color-drac-fg-900);
-  border-radius: 40px;
-  padding: 12px;
+  border-radius: 2.5rem;
+  padding: 0.75rem;
   box-shadow:
-    0 0 0 2px var(--color-drac-fg-700),
-    0 20px 40px color-mix(in srgb, var(--color-black) 30%, transparent);
+    0 0 0 0.125rem var(--color-drac-fg-700),
+    0 1.25rem 2.5rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 .dark .iphone-frame {
   background-color: var(--color-drac-fg-800);
   box-shadow:
-    0 0 0 2px var(--color-drac-fg-600),
-    0 20px 40px color-mix(in srgb, var(--color-black) 50%, transparent);
+    0 0 0 0.125rem var(--color-drac-fg-600),
+    0 1.25rem 2.5rem color-mix(in srgb, var(--color-black) 50%, transparent);
 }
 
 .iphone-notch {
   position: absolute;
-  top: 12px;
+  top: 0.75rem;
   left: 50%;
   transform: translateX(-50%);
-  width: 120px;
-  height: 28px;
+  width: 7.5rem;
+  height: 1.75rem;
   background-color: var(--color-drac-fg-900);
-  border-radius: 0 0 16px 16px;
+  border-radius: 0 0 1rem 1rem;
   z-index: 10;
 }
 
@@ -168,7 +168,7 @@ const displayUrl = computed(() => {
   width: 100%;
   height: 100%;
   background-color: var(--color-bg);
-  border-radius: 28px;
+  border-radius: 1.75rem;
   overflow: hidden;
 }
 
@@ -189,11 +189,11 @@ const displayUrl = computed(() => {
 
 .macbook-screen {
   position: relative;
-  width: 560px;
+  width: 35rem;
   background-color: var(--color-drac-fg-900);
-  border-radius: 12px 12px 0 0;
-  padding: 8px 8px 0 8px;
-  box-shadow: 0 -2px 20px color-mix(in srgb, var(--color-black) 20%, transparent);
+  border-radius: 0.75rem 0.75rem 0 0;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  box-shadow: 0 -0.125rem 1.25rem color-mix(in srgb, var(--color-black) 20%, transparent);
 }
 
 .dark .macbook-screen {
@@ -201,11 +201,11 @@ const displayUrl = computed(() => {
 }
 
 .macbook-camera {
-  width: 8px;
-  height: 8px;
+  width: 0.5rem;
+  height: 0.5rem;
   background-color: var(--color-drac-fg-700);
   border-radius: 50%;
-  margin: 4px auto 8px auto;
+  margin: 0.25rem auto 0.5rem auto;
 }
 
 .dark .macbook-camera {
@@ -216,7 +216,7 @@ const displayUrl = computed(() => {
   width: 100%;
   aspect-ratio: 16 / 10;
   background-color: var(--color-bg);
-  border-radius: 4px 4px 0 0;
+  border-radius: 0.25rem 0.25rem 0 0;
   overflow: hidden;
 }
 
@@ -227,10 +227,10 @@ const displayUrl = computed(() => {
 }
 
 .macbook-base {
-  width: 620px;
-  height: 14px;
+  width: 38.75rem;
+  height: 0.875rem;
   background: linear-gradient(to bottom, var(--color-drac-fg-300) 0%, var(--color-drac-fg-400) 100%);
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 0.5rem 0.5rem;
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -241,10 +241,10 @@ const displayUrl = computed(() => {
 }
 
 .macbook-notch {
-  width: 80px;
-  height: 4px;
+  width: 5rem;
+  height: 0.25rem;
   background-color: var(--color-drac-fg-500);
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 0.25rem 0.25rem;
 }
 
 .dark .macbook-notch {
@@ -256,35 +256,35 @@ const displayUrl = computed(() => {
    ============================================ */
 .browser-frame {
   width: 100%;
-  max-width: 640px;
+  max-width: 40rem;
   background-color: var(--color-bg-soft);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border: var(--border-thin) solid var(--color-border);
+  border-radius: 0.5rem;
   overflow: hidden;
-  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-black) 10%, transparent);
+  box-shadow: 0 0.25rem 1.25rem color-mix(in srgb, var(--color-black) 10%, transparent);
 }
 
 .dark .browser-frame {
-  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-black) 30%, transparent);
+  box-shadow: 0 0.25rem 1.25rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 .browser-toolbar {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
   background-color: var(--color-bg-muted);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-thin) solid var(--color-border);
 }
 
 .browser-buttons {
   display: flex;
-  gap: 6px;
+  gap: 0.375rem;
 }
 
 .browser-btn {
-  width: 12px;
-  height: 12px;
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
 }
 
@@ -304,17 +304,17 @@ const displayUrl = computed(() => {
   flex: 1;
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
   background-color: var(--color-bg);
-  border-radius: 6px;
+  border-radius: 0.375rem;
   font-size: 0.75rem;
   color: var(--color-text-secondary);
 }
 
 .browser-lock {
-  width: 12px;
-  height: 12px;
+  width: 0.75rem;
+  height: 0.75rem;
   opacity: 0.6;
 }
 
@@ -344,30 +344,30 @@ const displayUrl = computed(() => {
    ============================================ */
 .tablet-frame {
   position: relative;
-  width: 500px;
-  height: 360px;
+  width: 31.25rem;
+  height: 22.5rem;
   background-color: var(--color-drac-fg-900);
-  border-radius: 20px;
-  padding: 16px;
+  border-radius: 1.25rem;
+  padding: 1rem;
   box-shadow:
-    0 0 0 2px var(--color-drac-fg-700),
-    0 20px 40px color-mix(in srgb, var(--color-black) 30%, transparent);
+    0 0 0 0.125rem var(--color-drac-fg-700),
+    0 1.25rem 2.5rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 .dark .tablet-frame {
   background-color: var(--color-drac-fg-800);
   box-shadow:
-    0 0 0 2px var(--color-drac-fg-600),
-    0 20px 40px color-mix(in srgb, var(--color-black) 50%, transparent);
+    0 0 0 0.125rem var(--color-drac-fg-600),
+    0 1.25rem 2.5rem color-mix(in srgb, var(--color-black) 50%, transparent);
 }
 
 .tablet-camera {
   position: absolute;
   left: 50%;
-  top: 6px;
+  top: 0.375rem;
   transform: translateX(-50%);
-  width: 8px;
-  height: 8px;
+  width: 0.5rem;
+  height: 0.5rem;
   background-color: var(--color-drac-fg-700);
   border-radius: 50%;
 }
@@ -380,7 +380,7 @@ const displayUrl = computed(() => {
   width: 100%;
   height: 100%;
   background-color: var(--color-bg);
-  border-radius: 4px;
+  border-radius: 0.25rem;
   overflow: hidden;
 }
 

package/components/Image.vue

@@ -49,11 +49,11 @@ defineProps<{
 }
 
 .image-border {
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
 }
 
 .image-shadow {
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-black) 15%, transparent);
+  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-black) 15%, transparent);
 }
 
 .image-rounded {

package/components/ImageCompare.vue

@@ -368,46 +368,46 @@ onUnmounted(() => {
 .image-compare-horizontal .image-compare-slider {
   top: 0;
   bottom: 0;
-  width: 4px;
-  margin-left: -2px;
+  width: 0.25rem;
+  margin-left: -0.125rem;
   background-color: var(--color-drac-fg-50);
-  box-shadow: 0 0 4px color-mix(in srgb, var(--color-black) 30%, transparent);
+  box-shadow: 0 0 0.25rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 .image-compare-vertical .image-compare-slider {
   left: 0;
   right: 0;
-  height: 4px;
-  margin-top: -2px;
+  height: 0.25rem;
+  margin-top: -0.125rem;
   background-color: var(--color-drac-fg-50);
-  box-shadow: 0 0 4px color-mix(in srgb, var(--color-black) 30%, transparent);
+  box-shadow: 0 0 0.25rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 /* Handle */
 .image-compare-handle {
   position: absolute;
-  width: 44px;
-  height: 44px;
+  width: 2.75rem;
+  height: 2.75rem;
   background-color: var(--color-drac-fg-50);
   border-radius: 50%;
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 30%, transparent);
+  box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--color-black) 30%, transparent);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .image-compare-arrow {
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   color: var(--color-text);
 }
 
 .image-compare-horizontal .image-compare-arrow-left {
-  margin-right: -2px;
+  margin-right: -0.125rem;
 }
 
 .image-compare-horizontal .image-compare-arrow-right {
-  margin-left: -2px;
+  margin-left: -0.125rem;
 }
 
 .image-compare-vertical .image-compare-handle {
@@ -416,21 +416,21 @@ onUnmounted(() => {
 
 .image-compare-vertical .image-compare-arrow-left {
   transform: rotate(90deg);
-  margin-bottom: -2px;
+  margin-bottom: -0.125rem;
 }
 
 .image-compare-vertical .image-compare-arrow-right {
   transform: rotate(90deg);
-  margin-top: -2px;
+  margin-top: -0.125rem;
 }
 
 /* Focus styles */
 .image-compare-slider:focus {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
+  outline: var(--border-thick) solid var(--color-primary);
+  outline-offset: var(--border-medium);
 }
 
 .image-compare-slider:focus .image-compare-handle {
-  border: 2px solid var(--color-primary);
+  border: var(--border-medium) solid var(--color-primary);
 }
 </style>

package/components/MatrixGrid.vue

@@ -58,7 +58,7 @@ defineProps<{
 }
 
 .matrix-cell {
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
   border-radius: 0.5rem;
   padding: var(--space-xs);
 }

package/components/MermaidChart.vue

@@ -283,7 +283,7 @@ const warning = computed<string | null>(() => {
 .mermaid-chart-warning {
   align-self: stretch;
   padding: 0.375rem 0.75rem;
-  border-left: 3px solid var(--color-danger);
+  border-left: var(--border-thick) solid var(--color-danger);
   background: var(--color-danger-tint);
   color: var(--color-danger);
   font-size: var(--font-size-small);

package/components/Metric.vue

@@ -106,7 +106,7 @@ const sizeClasses: Record<string, string> = {
   padding: var(--space-md);
   background: var(--color-bg-soft);
   border-radius: 0.5rem;
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
 }
 
 .metric-bare {

package/components/PricingTable.vue

@@ -78,24 +78,24 @@ const colorVar: Record<string, string> = {
 .pricing-plan {
   flex: 1;
   background: var(--color-bg-soft);
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
   border-radius: 0.5rem;
   padding: var(--space-md);
 }
 
 .pricing-plan-highlighted {
   border-color: var(--color-primary);
-  border-width: 2px;
+  border-width: var(--border-medium);
   transform: scale(1.03);
-  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 10%, transparent);
+  box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--color-black) 10%, transparent);
 }
 
 .dark .pricing-plan-highlighted {
-  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 30%, transparent);
+  box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 .pricing-plan-header {
-  border-bottom: 2px solid var(--color-border);
+  border-bottom: var(--border-medium) solid var(--color-border);
   padding-bottom: var(--space-xs);
   margin-bottom: var(--space-sm);
 }

package/components/Progress.vue

@@ -73,7 +73,7 @@ const barStyle = computed(() => {
 }
 
 .progress-bar {
-  height: 3px;
+  height: 0.1875rem;
   background-color: var(--color-primary);
   opacity: 0.8;
   transition: width var(--dur-moderate-01) var(--ease-standard);

package/components/Pyramid.vue

@@ -66,7 +66,7 @@ function levelFontSize(index: number, total: number): string {
 .pyramid-level {
   flex: 1;
   text-align: center;
-  border-top: 3px solid;
+  border-top: var(--border-thick) solid;
   padding-top: var(--space-xs);
 }
 

package/components/QRCode.vue

@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<{
   color?: string      // Semantic color name (primary, success, accent, etc.) or 'text' (default)
   bgColor?: string    // Semantic bg name (bg, bg-soft, bg-muted) or omit for 'bg' (default)
 }>(), {
-  size: 200
+  size: 400
 })
 
 const isDark = useIsDark()

package/components/SpeechBubble.vue

@@ -53,7 +53,7 @@ const bubbleStyle = computed(() => {
   display: inline-block;
   padding: 1rem 1.25rem;
   background-color: var(--bubble-bg);
-  border: 1px solid var(--bubble-border);
+  border: var(--border-thin) solid var(--bubble-border);
   border-radius: 1rem;
   max-width: 100%;
   margin-bottom: var(--space-sm);
@@ -71,9 +71,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-bottom::after {
   content: '';
   position: absolute;
-  bottom: -12px;
-  left: 23px;
-  border-width: 13px 9px 0 9px;
+  bottom: -0.75rem;
+  left: 1.4375rem;
+  border-width: 0.8125rem 0.5625rem 0 0.5625rem;
   border-style: solid;
   border-color: var(--bubble-bg) transparent transparent transparent;
 }
@@ -81,9 +81,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-bottom::before {
   content: '';
   position: absolute;
-  bottom: -13px;
-  left: 23px;
-  border-width: 13px 9px 0 9px;
+  bottom: -0.8125rem;
+  left: 1.4375rem;
+  border-width: 0.8125rem 0.5625rem 0 0.5625rem;
   border-style: solid;
   border-color: var(--bubble-border) transparent transparent transparent;
 }
@@ -91,9 +91,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-top::after {
   content: '';
   position: absolute;
-  top: -12px;
-  left: 23px;
-  border-width: 0 9px 13px 9px;
+  top: -0.75rem;
+  left: 1.4375rem;
+  border-width: 0 0.5625rem 0.8125rem 0.5625rem;
   border-style: solid;
   border-color: transparent transparent var(--bubble-bg) transparent;
 }
@@ -101,9 +101,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-top::before {
   content: '';
   position: absolute;
-  top: -13px;
-  left: 23px;
-  border-width: 0 9px 13px 9px;
+  top: -0.8125rem;
+  left: 1.4375rem;
+  border-width: 0 0.5625rem 0.8125rem 0.5625rem;
   border-style: solid;
   border-color: transparent transparent var(--bubble-border) transparent;
 }
@@ -111,9 +111,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-left::after {
   content: '';
   position: absolute;
-  left: -12px;
-  top: 15px;
-  border-width: 9px 13px 9px 0;
+  left: -0.75rem;
+  top: 0.9375rem;
+  border-width: 0.5625rem 0.8125rem 0.5625rem 0;
   border-style: solid;
   border-color: transparent var(--bubble-bg) transparent transparent;
 }
@@ -121,9 +121,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-left::before {
   content: '';
   position: absolute;
-  left: -13px;
-  top: 15px;
-  border-width: 9px 13px 9px 0;
+  left: -0.8125rem;
+  top: 0.9375rem;
+  border-width: 0.5625rem 0.8125rem 0.5625rem 0;
   border-style: solid;
   border-color: transparent var(--bubble-border) transparent transparent;
 }
@@ -131,9 +131,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-right::after {
   content: '';
   position: absolute;
-  right: -12px;
-  top: 15px;
-  border-width: 9px 0 9px 13px;
+  right: -0.75rem;
+  top: 0.9375rem;
+  border-width: 0.5625rem 0 0.5625rem 0.8125rem;
   border-style: solid;
   border-color: transparent transparent transparent var(--bubble-bg);
 }
@@ -141,9 +141,9 @@ const bubbleStyle = computed(() => {
 .bubble-speech.bubble-right::before {
   content: '';
   position: absolute;
-  right: -13px;
-  top: 15px;
-  border-width: 9px 0 9px 13px;
+  right: -0.8125rem;
+  top: 0.9375rem;
+  border-width: 0.5625rem 0 0.5625rem 0.8125rem;
   border-style: solid;
   border-color: transparent transparent transparent var(--bubble-border);
 }
@@ -154,16 +154,16 @@ const bubbleStyle = computed(() => {
   content: '';
   position: absolute;
   background-color: var(--bubble-bg);
-  border: 1px solid var(--bubble-border);
+  border: var(--border-thin) solid var(--bubble-border);
   border-radius: 50%;
 }
 
-.bubble-thought.bubble-bottom::after  { width: 16px; height: 16px; bottom: -10px; left: 32px; }
-.bubble-thought.bubble-bottom::before { width: 10px; height: 10px; bottom: -20px; left: 24px; }
-.bubble-thought.bubble-top::after     { width: 16px; height: 16px; top: -10px; left: 32px; }
-.bubble-thought.bubble-top::before    { width: 10px; height: 10px; top: -20px; left: 24px; }
-.bubble-thought.bubble-left::after    { width: 16px; height: 16px; left: -10px; top: 20px; }
-.bubble-thought.bubble-left::before   { width: 10px; height: 10px; left: -22px; top: 16px; }
-.bubble-thought.bubble-right::after   { width: 16px; height: 16px; right: -10px; top: 20px; }
-.bubble-thought.bubble-right::before  { width: 10px; height: 10px; right: -22px; top: 16px; }
+.bubble-thought.bubble-bottom::after  { width: 1rem; height: 1rem; bottom: -0.625rem; left: 2rem; }
+.bubble-thought.bubble-bottom::before { width: 0.625rem; height: 0.625rem; bottom: -1.25rem; left: 1.5rem; }
+.bubble-thought.bubble-top::after     { width: 1rem; height: 1rem; top: -0.625rem; left: 2rem; }
+.bubble-thought.bubble-top::before    { width: 0.625rem; height: 0.625rem; top: -1.25rem; left: 1.5rem; }
+.bubble-thought.bubble-left::after    { width: 1rem; height: 1rem; left: -0.625rem; top: 1.25rem; }
+.bubble-thought.bubble-left::before   { width: 0.625rem; height: 0.625rem; left: -1.375rem; top: 1rem; }
+.bubble-thought.bubble-right::after   { width: 1rem; height: 1rem; right: -0.625rem; top: 1.25rem; }
+.bubble-thought.bubble-right::before  { width: 0.625rem; height: 0.625rem; right: -1.375rem; top: 1rem; }
 </style>

package/components/Stepper.vue

@@ -238,7 +238,7 @@ function isUpcoming(index: number) {
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 4px;
+  padding: 0.25rem;
 }
 
 /* ===== Track ===== */
@@ -310,7 +310,7 @@ function isUpcoming(index: number) {
 
 .stepper-dots .stepper-step.is-active .stepper-marker {
   background-color: var(--stepper-color);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stepper-color) 30%, transparent);
+  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--stepper-color) 30%, transparent);
 }
 
 .stepper-dots .stepper-step.is-completed .stepper-marker {
@@ -408,11 +408,11 @@ function isUpcoming(index: number) {
 /* Horizontal connectors */
 
 .stepper-horizontal .stepper-connector {
-  height: 2px;
+  height: 0.125rem;
   flex: 0 0 2rem;
   background-color: var(--color-border);
   overflow: hidden;
-  margin-top: calc(var(--stepper-marker-size) / 2 - 1px);
+  margin-top: calc(var(--stepper-marker-size) / 2 - 0.0625rem);
 }
 
 /* dots: same margin-top formula from parent rule applies */
@@ -461,11 +461,11 @@ function isUpcoming(index: number) {
 /* Vertical connectors */
 
 .stepper-vertical .stepper-connector {
-  width: 2px;
+  width: 0.125rem;
   min-height: 1rem;
   flex: 0 0 auto;
   background-color: var(--color-border);
-  margin-left: calc(var(--stepper-marker-size) / 2 - 1px);
+  margin-left: calc(var(--stepper-marker-size) / 2 - 0.0625rem);
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
@@ -532,11 +532,11 @@ function isUpcoming(index: number) {
 
 .stepper-panel-enter-from {
   opacity: 0;
-  transform: translateY(var(--shift-sm, 12px));
+  transform: translateY(var(--shift-sm, 0.75rem));
 }
 
 .stepper-panel-leave-to {
   opacity: 0;
-  transform: translateY(calc(var(--shift-xs, 8px) * -1));
+  transform: translateY(calc(var(--shift-xs, 0.375rem) * -1));
 }
 </style>

package/components/StyledText.vue

@@ -207,8 +207,8 @@ const sizeMap: Record<string, string> = {
 }
 
 .is-spoiler:focus-visible {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
+  outline: var(--border-thick) solid var(--color-primary);
+  outline-offset: var(--border-medium);
 }
 
 .is-spoiler-revealed {
@@ -255,7 +255,7 @@ const sizeMap: Record<string, string> = {
   background-color: color-mix(in srgb, var(--text-highlight-bg) 20%, transparent);
   padding: 0.1em 0.25em;
   border-radius: 0.2em;
-  border-bottom: 2px solid var(--text-highlight-bg);
+  border-bottom: var(--border-medium) solid var(--text-highlight-bg);
   margin: 0 0.1em;
 }
 
@@ -264,11 +264,11 @@ const sizeMap: Record<string, string> = {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 0.85em;
   background: var(--color-bg-soft);
-  border: 1px solid var(--color-border);
-  border-bottom-width: 2px;
+  border: var(--border-thin) solid var(--color-border);
+  border-bottom-width: var(--border-medium);
   padding: 0.1em 0.4em;
   border-radius: 0.25em;
-  box-shadow: 0 1px 0 var(--color-border);
+  box-shadow: 0 0.0625rem 0 var(--color-border);
   white-space: nowrap;
   margin: 0 0.1em;
 }

package/components/Testimonial.vue

@@ -96,13 +96,13 @@ const attribution = computed(() => {
   background-color: var(--color-bg-soft);
   border-radius: 0.5rem;
   padding: var(--space-lg);
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
 }
 
 /* Minimal variant */
 .testimonial-minimal {
   padding: var(--space-md) 0;
-  border-left: 4px solid var(--color-primary);
+  border-left: var(--border-accent) solid var(--color-primary);
   padding-left: var(--space-md);
 }
 
@@ -131,8 +131,8 @@ const attribution = computed(() => {
 
 /* Quote icon */
 .testimonial-quote-icon {
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   opacity: 0.3;
   margin-bottom: var(--space-sm);
 }
@@ -192,8 +192,8 @@ const attribution = computed(() => {
 }
 
 .testimonial-avatar {
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;

package/example_dark.md

@@ -6,5 +6,6 @@ info: |
   Complete theme showcase — all layouts, components, and features
 colorSchema: dark
 transition: slide-left
+canvasWidth: 1920
 src: ./example_content.md
 ---

package/example_white.md

@@ -6,5 +6,6 @@ info: |
   Complete theme showcase — all layouts, components, and features
 colorSchema: light
 transition: slide-left
+canvasWidth: 1920
 src: ./example_content.md
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troshab/slidev-theme-troshab",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A minimal, universal Slidev theme with flexible layouts and ready-to-use slide templates",
   "author": "troshab",
   "license": "PolyForm-Noncommercial-1.0.0",

package/setup/mermaid.ts

@@ -140,11 +140,11 @@ export default defineMermaidSetup(() => {
       pie7: colors.chart7,
       pie8: colors.chart8,
       pieStrokeColor: colors.bg,
-      pieStrokeWidth: '2px',
+      pieStrokeWidth: '4px',
       pieTitleTextColor: colors.text,
       pieSectionTextColor: colors.bg,
       pieLegendTextColor: colors.text,
-      pieOuterStrokeWidth: '2px',
+      pieOuterStrokeWidth: '4px',
       pieOuterStrokeColor: colors.borderStrong,
       pieOpacity: '1',
 
@@ -184,11 +184,11 @@ export default defineMermaidSetup(() => {
       gitBranchLabel7: colors.bg,
       commitLabelColor: colors.text,
       commitLabelBackground: colors.bgMuted,
-      commitLabelFontSize: '12px',
+      commitLabelFontSize: '24px',
       tagLabelColor: colors.text,
       tagLabelBackground: colors.bgSoft,
       tagLabelBorder: colors.borderStrong,
-      tagLabelFontSize: '12px',
+      tagLabelFontSize: '24px',
 
       // Timeline & Mindmap — both use cScale/cScaleLabel (not mindmap* vars)
       // Text on colored blocks: colors.bg contrasts in both themes

package/styles/base.css

@@ -69,17 +69,21 @@
    ============================================ */
 
 :root {
+  /* Canvas: 1920×1080. 1rem = 16 × (1920/980) ≈ 31.347px so all rem values
+     scale proportionally from the original 980×552 design. */
+  font-size: 31.347px;
+
   /* --- Fonts --- */
   --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
   --font-mono: 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;
 
   /* --- Typography Scale (3 main + 1 small) ---
-     h1 = 57px, h2 = 43px (also h3), body = 24px, small = 18px.
+     h1 = 111.7px, h2 = 84.2px (also h3), body = 47px, small = 35.3px.
   */
-  --font-size-h1: 3.5625rem;      /* 57px */
-  --font-size-h2: 2.6875rem;      /* 43px */
-  --font-size-base: 1.5rem;       /* 24px — body text */
-  --font-size-small: 1.125rem;    /* 18px — captions, labels, code */
+  --font-size-h1: 3.5625rem;      /* 111.7px */
+  --font-size-h2: 2.6875rem;      /* 84.2px */
+  --font-size-base: 1.5rem;       /* 47px — body text */
+  --font-size-small: 1.125rem;    /* 35.3px — captions, labels, code */
 
   /* --- Font Weights --- */
   --font-weight-normal: 400;
@@ -132,6 +136,12 @@
   /* --- Safe-zone for projectors/TV overscan (5% default) --- */
   --safe-inset-x: 5%;
   --safe-inset-y: 5%;
+
+  /* --- Border Width Tokens (rem-based, scale with canvas) --- */
+  --border-thin: 0.0625rem;     /* ≈ 1px at 980 → ~2px at 1920 */
+  --border-medium: 0.125rem;    /* ≈ 2px → ~4px */
+  --border-thick: 0.1875rem;    /* ≈ 3px → ~6px */
+  --border-accent: 0.25rem;     /* ≈ 4px → ~8px */
 }
 
 /* ============================================
@@ -290,7 +300,7 @@
 
 /* Border only on native Shiki code blocks (not on pre inside CodeHighlight/CodeDiff) */
 .slidev-layout pre.slidev-code {
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
 }
 
 /* Reset .slidev-layout pre overrides for CodeHighlight/CodeDiff inner pre */
@@ -305,7 +315,7 @@
 .slidev-layout pre[data-lang] {
   position: relative;
   /* Override Slidev's --slidev-code-padding (applied with !important) to make room for the label */
-  --slidev-code-padding: 2.25rem 8px 8px 8px;
+  --slidev-code-padding: 2.25rem 0.5rem 0.5rem 0.5rem;
 }
 
 .slidev-layout pre[data-lang]::before {
@@ -321,7 +331,7 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-text-tertiary);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: var(--border-thin) solid var(--color-border);
   background: var(--shiki-color-background, var(--color-bg-muted));
   border-radius: 0.5rem 0.5rem 0 0;
 }
@@ -358,7 +368,7 @@
   padding-right: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  border: 1px solid var(--color-border);
+  border: var(--border-thin) solid var(--color-border);
   text-align: left;
 }
 
@@ -375,7 +385,7 @@
   padding-left: 1rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  border-left: 4px solid var(--color-border-strong);
+  border-left: var(--border-accent) solid var(--color-border-strong);
   color: var(--color-text-secondary);
   font-style: normal; /* No italic for readability */
   max-width: var(--measure);
@@ -434,7 +444,7 @@
 /* Overlay text: invariant (always light text on dark overlay, regardless of theme) */
 .slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content {
   color: var(--color-drac-fg-50);
-  text-shadow: 0 2px 4px color-mix(in srgb, var(--color-black) 30%, transparent);
+  text-shadow: 0 0.125rem 0.25rem color-mix(in srgb, var(--color-black) 30%, transparent);
 }
 
 .slide-fullscreen .slide-bg:has(.bg-overlay-dark) ~ .slide-content h1,
@@ -533,7 +543,7 @@
 .slide-panel .slide-bg:has(.bg-info) ~ .slide-panel-content p { color: inherit; }
 
 /* bgOverlay detection for split panels */
-.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content { color: var(--color-drac-fg-50); text-shadow: 0 2px 4px color-mix(in srgb, var(--color-black) 30%, transparent); }
+.slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content { color: var(--color-drac-fg-50); text-shadow: 0 0.125rem 0.25rem color-mix(in srgb, var(--color-black) 30%, transparent); }
 .slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content h1,
 .slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content h2,
 .slide-panel .slide-bg:has(.bg-overlay-dark) ~ .slide-panel-content h3,
@@ -569,7 +579,7 @@
 .slide-footnote .slide-single hr {
   margin-top: auto;
   border: none;
-  border-top: 1px solid var(--color-border);
+  border-top: var(--border-thin) solid var(--color-border);
   width: 100%;
 }
 
@@ -618,7 +628,7 @@
 .slide-col-title {
   padding-bottom: var(--space-sm);
   margin-bottom: var(--space-sm);
-  border-bottom: 2px solid var(--color-border);
+  border-bottom: var(--border-medium) solid var(--color-border);
 }
 
 .slide-col-title h3 {
@@ -645,7 +655,7 @@
 .slide-col-bg-info h1, .slide-col-bg-info h2, .slide-col-bg-info h3 { color: inherit; }
 
 /* Per-column border */
-.slide-col-border { border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-border { border: var(--border-thin) solid var(--color-border); border-radius: 0.5rem; padding: 1rem; }
 
 /* --- 7c. Split Mode --- */
 .slide-split {
@@ -701,7 +711,7 @@
   margin-top: auto;
   position: relative;
   z-index: 2;
-  border-top: 1px solid var(--color-border);
+  border-top: var(--border-thin) solid var(--color-border);
 }
 
 /* In padded layouts (columns, fullscreen), extend footer to full slide width */
@@ -809,7 +819,7 @@ a.btn-secondary:hover {
   content: '';
   position: absolute;
   inset: var(--safe-inset-y) var(--safe-inset-x);
-  border: 2px dashed color-mix(in srgb, var(--color-drac-red-500) 50%, transparent);
+  border: var(--border-medium) dashed color-mix(in srgb, var(--color-drac-red-500) 50%, transparent);
   pointer-events: none;
   z-index: 9999;
 }
@@ -827,7 +837,7 @@ a.btn-secondary:hover {
 .safe-zone-border {
   position: absolute;
   inset: 5% 5%;
-  border: 3px dashed var(--color-danger);
+  border: var(--border-thick) dashed var(--color-danger);
   border-radius: 0.5rem;
   pointer-events: none;
 }
@@ -853,7 +863,7 @@ a.btn-secondary:hover {
 
 /* Enhanced blockquote callout base style */
 .slidev-layout blockquote:has(p:first-child strong:first-child) {
-  border-left-width: 4px;
+  border-left-width: var(--border-accent);
   padding: 1rem 1rem 1rem 1.25rem;
   background-color: var(--color-bg-soft);
   border-radius: 0 0.375rem 0.375rem 0;
@@ -885,8 +895,8 @@ a.btn-secondary:hover {
    ============================================ */
 
 .slidev-layout :focus-visible {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
+  outline: var(--border-thick) solid var(--color-primary);
+  outline-offset: var(--border-medium);
 }
 
 /* Ensure focus is not obscured */

package/styles/colors.css

@@ -280,7 +280,7 @@
   --slidev-code-font-family:       var(--font-mono);
   --slidev-code-line-height:       var(--line-height-code);
   --slidev-code-radius:            0.5rem;
-  --slidev-code-padding:           8px;
+  --slidev-code-padding:           0.5rem;
   --shiki-token-comment:           var(--color-drac-comment-700);
   --shiki-token-punctuation:       var(--color-drac-pink-700);
   --shiki-token-keyword:           var(--color-drac-pink-700);
@@ -389,7 +389,7 @@ html.dark {
   --slidev-code-font-family:       var(--font-mono);
   --slidev-code-line-height:       var(--line-height-code);
   --slidev-code-radius:            0.5rem;
-  --slidev-code-padding:           8px;
+  --slidev-code-padding:           0.5rem;
   --shiki-token-comment:           var(--color-drac-comment-200);
   --shiki-token-punctuation:       var(--color-drac-pink-200);
   --shiki-token-keyword:           var(--color-drac-pink-200);

package/styles/motion.css

@@ -41,10 +41,10 @@
   --dur-exit-modifier: 0.8;
 
   /* --- Movement Distances --- */
-  --shift-xs: 6px;   /* subtle */
-  --shift-sm: 12px;  /* small */
-  --shift-md: 20px;  /* medium */
-  --shift-lg: 28px;  /* large */
+  --shift-xs: 0.375rem;   /* subtle */
+  --shift-sm: 0.75rem;    /* small */
+  --shift-md: 1.25rem;    /* medium */
+  --shift-lg: 1.75rem;    /* large */
 
   /* --- Scale Values --- */
   --scale-subtle: 0.985;