@troshab/slidev-theme-troshab 0.1.0 → 0.1.2

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);
 }