@dfosco/storyboard 0.7.1 → 0.9.0

package/src/internals/canvas/widgets/LinkPreview.module.css

@@ -9,15 +9,15 @@
   flex-direction: column;
   width: 320px;
   border-radius: 6px;
-  border: 2px solid var(--borderColor-default, #d1d9e0);
-  background: var(--bgColor-default, #ffffff);
+  border: 2px solid var(--color-border, #d1d9e0);
+  background: var(--color-background, #ffffff);
   box-sizing: border-box;
   overflow: hidden;
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
 }
 
 :global([data-sb-canvas-theme^='dark']) .card {
-  border-color: var(--borderColor-default, #3d444d);
+  border-color: var(--color-border, #3d444d);
 }
 
 /* Hide own border when parent widget slot is selected (avoid double focus ring) */
@@ -44,7 +44,7 @@
   font-size: 14px;
   font-weight: 600;
   line-height: 1.35;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   cursor: text;
   word-break: break-word;
 }
@@ -59,7 +59,7 @@
   font-size: 14px;
   font-weight: 600;
   line-height: 1.35;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   width: 100%;
 }
 
@@ -67,7 +67,7 @@
   margin: 0;
   font-size: 12px;
   line-height: 1.4;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -77,7 +77,7 @@
 .url {
   margin: 0;
   font-size: 12px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -87,7 +87,7 @@
 
 .url:hover {
   text-decoration: underline;
-  color: var(--fgColor-accent, #0969da);
+  color: var(--color-foreground-accent, #0969da);
 }
 
 /* ── GitHub issue / discussion card ──────────────────────────────── */
@@ -97,9 +97,8 @@
   flex-direction: column;
   width: 580px;
   min-height: 300px;
-  border-radius: 10px;
-  border: 1px solid var(--borderColor-default, #d1d9e0);
-  background: var(--bgColor-default, #ffffff);
+  border-radius: var(--radius, 12px);
+  background: var(--color-background, #ffffff);
   box-sizing: border-box;
   overflow: hidden;
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
@@ -116,9 +115,9 @@
   padding: 10px 10px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--fgColor-muted, #656d76);
-  background: var(--bgColor-muted, #f6f8fa);
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  color: var(--color-foreground-muted, #656d76);
+  background: var(--color-background-muted, #f6f8fa);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
   white-space: nowrap;
   user-select: none;
 }
@@ -140,29 +139,29 @@
   font-size: 32px;
   font-weight: 400;
   line-height: 1.25;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
 }
 
 .issueTitleLink {
-  color: var(--fgColor-default, #1f2328) !important;
+  color: var(--color-foreground, #1f2328) !important;
   text-decoration: none !important;
 }
 
 .issueTitleLink:hover {
   text-decoration: underline !important;
-  color: var(--fgColor-default, #1f2328) !important;
+  color: var(--color-foreground, #1f2328) !important;
 }
 
 .issueNumber {
   font-size: 32px;
   font-weight: 400;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 .issueContext {
   margin: 0;
   font-size: 12px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 .issueByline {
@@ -171,7 +170,7 @@
   justify-content: space-between;
   gap: 8px;
   padding: 12px 24px;
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
 }
 
 .issueBylineLeft {
@@ -193,7 +192,7 @@
   align-items: center;
   gap: 8px;
   text-decoration: none !important;
-  color: var(--fgColor-default, #1f2328) !important;
+  color: var(--color-foreground, #1f2328) !important;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
@@ -201,12 +200,12 @@
 
 .authorLink:hover {
   text-decoration: underline !important;
-  color: var(--fgColor-default, #1f2328) !important;
+  color: var(--color-foreground, #1f2328) !important;
 }
 
 .bylineText {
   font-size: 13px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -214,7 +213,7 @@
 
 .bylineText strong {
   font-weight: 600;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
 }
 
 /* ── Issue body (rendered markdown) ──────────────────────────────── */
@@ -223,7 +222,7 @@
   padding: 16px 24px 24px;
   font-size: 14px;
   line-height: 1.6;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
 }
 
 .issueBody :global(*) {
@@ -231,7 +230,7 @@
 }
 
 .issueBody a {
-  color: var(--fgColor-accent, #0969da);
+  color: var(--color-foreground-accent, #0969da);
   text-decoration: none;
   pointer-events: auto;
   cursor: pointer;
@@ -243,8 +242,8 @@
 
 /* @mention pills — blue background + text like GitHub */
 .issueBody a[data-mention] {
-  background: var(--bgColor-accent-muted, #ddf4ff);
-  color: var(--fgColor-accent, #0969da);
+  background: var(--color-background-accent-muted, #ddf4ff);
+  color: var(--color-foreground-accent, #0969da);
   padding: 1px 6px;
   border-radius: 4px;
   font-weight: 600;
@@ -252,8 +251,8 @@
 }
 
 .issueBody a[data-mention]:hover {
-  background: var(--bgColor-accent-emphasis, #0969da);
-  color: var(--fgColor-onEmphasis, #ffffff);
+  background: var(--color-background-accent-emphasis, #0969da);
+  color: var(--color-foreground-on-emphasis, #ffffff);
   text-decoration: none;
 }
 
@@ -261,7 +260,7 @@
   max-width: 100%;
   height: auto;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border: 1px solid var(--color-border-muted, #d8dee4);
   margin: 8px 0;
   display: block;
   pointer-events: auto;
@@ -271,18 +270,18 @@
   max-width: 100%;
   height: auto;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border: 1px solid var(--color-border-muted, #d8dee4);
   margin: 8px 0;
   display: block;
   pointer-events: auto;
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
 }
 .issueBody h1 {
   font-size: 20px;
   font-weight: 700;
   margin: 16px 0 8px;
   padding-bottom: 4px;
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
   line-height: 1.3;
 }
 
@@ -295,7 +294,7 @@
   font-weight: 600;
   margin: 14px 0 6px;
   padding-bottom: 3px;
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
   line-height: 1.3;
 }
 
@@ -311,7 +310,7 @@
 }
 
 .issueBody code {
-  background: var(--bgColor-neutral-muted, #afb8c133);
+  background: var(--color-background-neutral-muted, #afb8c133);
   padding: 2px 5px;
   border-radius: 4px;
   font-size: 12px;
@@ -346,7 +345,7 @@
 .issueBody input[type="checkbox"] {
   margin-right: 6px;
   pointer-events: none;
-  accent-color: var(--fgColor-accent, #0969da);
+  accent-color: var(--color-foreground-accent, #0969da);
 }
 
 .issueBody li:has(input[type="checkbox"]) {
@@ -357,7 +356,7 @@
 /* GFM: Strikethrough */
 .issueBody del {
   text-decoration: line-through;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 /* GFM: Tables */
@@ -370,13 +369,13 @@
 
 .issueBody th,
 .issueBody td {
-  border: 1px solid var(--borderColor-default, #d0d7de);
+  border: 1px solid var(--color-border, #d0d7de);
   padding: 6px 12px;
   text-align: left;
 }
 
 .issueBody th {
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--color-background-muted, #f6f8fa);
   font-weight: 600;
 }
 
@@ -384,10 +383,10 @@
 .issueBody pre {
   padding: 12px 16px;
   border-radius: 6px;
-  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border: 1px solid var(--color-border-muted, #d8dee4);
   overflow-x: auto;
   margin: 12px 0;
-  background: var(--bgColor-neutral-muted, #afb8c133);
+  background: var(--color-background-neutral-muted, #afb8c133);
   line-height: 1.4;
 }
 
@@ -403,22 +402,22 @@
 
 /* Blockquotes */
 .issueBody blockquote {
-  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  border-left: 4px solid var(--color-border, #d0d7de);
   margin: 12px 0;
   padding: 4px 16px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 /* Horizontal rules */
 .issueBody hr {
   border: none;
-  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  border-top: 1px solid var(--color-border, #d0d7de);
   margin: 16px 0;
 }
 
 /* Details/summary — interactive collapsible sections */
 .issueBody details {
-  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border: 1px solid var(--color-border-muted, #d8dee4);
   border-radius: 6px;
   margin: 12px 0;
   padding: 0;
@@ -436,7 +435,7 @@
 
 .issueBody details[open] > summary {
   list-style-type: disclosure-open;
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
   margin-bottom: 0;
 }
 
@@ -448,7 +447,7 @@
   margin: 0;
   padding: 0 24px 12px;
   font-size: 12px;
-  color: var(--fgColor-danger, #cf222e);
+  color: var(--color-foreground-danger, #cf222e);
 }
 
 /* ── Expanded issue view in modal ─────────────────────────────────── */
@@ -457,13 +456,13 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--bgColor-default, #ffffff);
+  background: var(--color-background, #ffffff);
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
 }
 
 .expandedIssueHeader {
   padding: 24px 40px 16px;
-  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  border-bottom: 1px solid var(--color-border-muted, #d8dee4);
 }
 
 .expandedIssueTitle {
@@ -471,7 +470,7 @@
   font-size: 28px;
   font-weight: 400;
   line-height: 1.25;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
 }
 
 .expandedIssueTitle a {
@@ -484,7 +483,7 @@
 }
 
 .expandedIssueNumber {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 .expandedByline {
@@ -499,7 +498,7 @@
   align-items: center;
   gap: 6px;
   text-decoration: none;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   font-weight: 600;
 }
 
@@ -508,7 +507,7 @@
 }
 
 .expandedBylineText {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 .expandedIssueBody {
@@ -517,31 +516,31 @@
   padding: 24px 40px;
   font-size: 15px;
   line-height: 1.7;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
   max-width: 800px;
 }
 
 .expandedIssueBody * { pointer-events: auto; }
-.expandedIssueBody a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
+.expandedIssueBody a { color: var(--color-foreground-accent, #0969da); text-decoration: none; }
 .expandedIssueBody a:hover { text-decoration: underline; }
-.expandedIssueBody a[data-mention] { background: var(--bgColor-accent-muted, #ddf4ff); color: var(--fgColor-accent, #0969da); padding: 1px 6px; border-radius: 4px; font-weight: 600; text-decoration: none; }
-.expandedIssueBody a[data-mention]:hover { background: var(--bgColor-accent-emphasis, #0969da); color: var(--fgColor-onEmphasis, #ffffff); text-decoration: none; }
+.expandedIssueBody a[data-mention] { background: var(--color-background-accent-muted, #ddf4ff); color: var(--color-foreground-accent, #0969da); padding: 1px 6px; border-radius: 4px; font-weight: 600; text-decoration: none; }
+.expandedIssueBody a[data-mention]:hover { background: var(--color-background-accent-emphasis, #0969da); color: var(--color-foreground-on-emphasis, #ffffff); text-decoration: none; }
 .expandedIssueBody img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
 .expandedIssueBody video { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
-.expandedIssueBody h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); padding-bottom: 4px; }
+.expandedIssueBody h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; border-bottom: 1px solid var(--color-border-muted, #d8dee4); padding-bottom: 4px; }
 .expandedIssueBody h2 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
 .expandedIssueBody h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
 .expandedIssueBody p { margin: 0 0 12px; }
-.expandedIssueBody code { background: var(--bgColor-neutral-muted, #afb8c133); padding: 2px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
-.expandedIssueBody pre { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--borderColor-muted, #d8dee4); overflow-x: auto; margin: 12px 0; background: var(--bgColor-neutral-muted, #afb8c133); }
+.expandedIssueBody code { background: var(--color-background-neutral-muted, #afb8c133); padding: 2px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
+.expandedIssueBody pre { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--color-border-muted, #d8dee4); overflow-x: auto; margin: 12px 0; background: var(--color-background-neutral-muted, #afb8c133); }
 .expandedIssueBody pre code { background: none; padding: 0; }
 .expandedIssueBody ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
 .expandedIssueBody ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
 .expandedIssueBody li { margin: 0 0 4px; display: list-item; }
-.expandedIssueBody blockquote { border-left: 4px solid var(--borderColor-default, #d0d7de); margin: 12px 0; padding: 4px 16px; color: var(--fgColor-muted, #656d76); }
-.expandedIssueBody details { border: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 6px; margin: 12px 0; padding: 0; }
+.expandedIssueBody blockquote { border-left: 4px solid var(--color-border, #d0d7de); margin: 12px 0; padding: 4px 16px; color: var(--color-foreground-muted, #656d76); }
+.expandedIssueBody details { border: 1px solid var(--color-border-muted, #d8dee4); border-radius: 6px; margin: 12px 0; padding: 0; }
 .expandedIssueBody summary { display: list-item; cursor: pointer; font-weight: 600; padding: 8px 12px; list-style: disclosure-closed inside; user-select: none; }
-.expandedIssueBody details[open] > summary { list-style-type: disclosure-open; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); margin-bottom: 0; }
+.expandedIssueBody details[open] > summary { list-style-type: disclosure-open; border-bottom: 1px solid var(--color-border-muted, #d8dee4); margin-bottom: 0; }
 .expandedIssueBody details > :not(summary) { padding: 0 12px; }
 
 /* ── Expanded plain link view ─────────────────────────────────────── */
@@ -564,19 +563,19 @@
   margin: 0 0 8px;
   font-size: 24px;
   font-weight: 600;
-  color: var(--fgColor-default, #1f2328);
+  color: var(--color-foreground, #1f2328);
 }
 
 .expandedDescription {
   margin: 0 0 12px;
   font-size: 15px;
   line-height: 1.5;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
 }
 
 .expandedUrl {
   font-size: 14px;
-  color: var(--fgColor-accent, #0969da);
+  color: var(--color-foreground-accent, #0969da);
   text-decoration: none;
 }
 
@@ -592,28 +591,28 @@
   gap: 8px;
   flex-wrap: wrap;
   font-size: 12px;
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   min-width: 0;
 }
 
 .prStateBadge {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
+  gap: 6px;
+  padding: 5px 10px 5px 9px;
   border-radius: 2em;
   font-size: 12px;
   font-weight: 500;
   line-height: 1;
-  color: var(--fgColor-onEmphasis, #ffffff);
+  color: var(--color-foreground-on-emphasis, #ffffff);
   white-space: nowrap;
 }
 
-.prStateOpen { background: var(--bgColor-open-emphasis, #1f883d); }
-.prStateMerged { background: var(--bgColor-done-emphasis, #8250df); }
-.prStateClosed { background: var(--bgColor-closed-emphasis, #cf222e); }
+.prStateOpen { background: var(--color-background-open-emphasis, #1f883d); }
+.prStateMerged { background: var(--color-background-done-emphasis, #8250df); }
+.prStateClosed { background: var(--color-background-closed-emphasis, #cf222e); }
 .prStateDraft {
-  background: var(--bgColor-neutral-emphasis, #59636e);
+  background: var(--color-background-neutral-emphasis, #59636e);
 }
 
 .prBranchRef {
@@ -622,8 +621,8 @@
   gap: 4px;
   padding: 2px 6px;
   border-radius: 4px;
-  background: var(--bgColor-muted, #f6f8fa);
-  color: var(--fgColor-default, #1f2328);
+  background: var(--color-background-muted, #f6f8fa);
+  color: var(--color-foreground, #1f2328);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
   max-width: 240px;
@@ -638,7 +637,7 @@
 }
 
 .prBranchArrow {
-  color: var(--fgColor-muted, #656d76);
+  color: var(--color-foreground-muted, #656d76);
   font-family: -apple-system, system-ui, sans-serif;
   flex-shrink: 0;
 }
@@ -652,5 +651,5 @@
   font-weight: 600;
 }
 
-.prDiffAdd { color: var(--fgColor-success, #1a7f37); }
-.prDiffDel { color: var(--fgColor-danger, #cf222e); }
+.prDiffAdd { color: var(--color-foreground-success, #1a7f37); }
+.prDiffDel { color: var(--color-foreground-danger, #cf222e); }