chore(v2): let the theme toolbar drive every lib story (#5150)

frontend/src/v2/lib/data/RTable/RTable.stories.ts

@@ -110,13 +110,18 @@ export const Default: Story = {
     components: { RTable },
     setup: () => ({ args }),
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f;">
+      <div style="padding: 32px;">
         <RTable v-bind="args" />
       </div>
     `,
   }),
 };
 
+export const Light: Story = {
+  ...Default,
+  globals: { theme: "light" },
+};
+
 export const Loading: Story = {
   args: {
     columns: COLUMNS,
@@ -128,7 +133,7 @@ export const Loading: Story = {
     components: { RTable },
     setup: () => ({ args }),
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f;">
+      <div style="padding: 32px;">
         <RTable v-bind="args" />
       </div>
     `,
@@ -147,7 +152,7 @@ export const Empty: Story = {
     components: { RTable },
     setup: () => ({ args }),
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f;">
+      <div style="padding: 32px;">
         <RTable v-bind="args" />
       </div>
     `,
@@ -171,7 +176,7 @@ export const MobileCardStack: Story = {
     components: { RTable },
     setup: () => ({ args }),
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 24px; background: #07070f;">
+      <div style="padding: 24px;">
         <RTable v-bind="args" />
       </div>
     `,

frontend/src/v2/lib/forms/RSwitch/RSwitch.stories.ts

@@ -18,7 +18,7 @@ const meta: Meta<typeof RSwitch> = {
       return { args, value };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f;">
+      <div style="padding: 32px;">
         <RSwitch v-model="value" v-bind="args" />
       </div>
     `,
@@ -33,6 +33,11 @@ export const Default: Story = {
   args: { ariaLabel: "Toggle setting" },
 };
 
+export const Light: Story = {
+  ...Default,
+  globals: { theme: "light" },
+};
+
 export const WithLabel: Story = {
   args: { label: "Notifications" },
 };
@@ -42,7 +47,7 @@ export const LabelSlot: Story = {
     components: { RSwitch },
     setup: () => ({ value: ref(false) }),
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: var(--r-color-bg);">
+      <div style="padding: 32px;">
         <RSwitch v-model="value" aria-label="Notifications">
           <template #label><strong>Notifications</strong> (email)</template>
         </RSwitch>
@@ -59,7 +64,7 @@ export const Checked: Story = {
       return { args, value };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f;">
+      <div style="padding: 32px;">
         <RSwitch v-model="value" v-bind="args" />
       </div>
     `,

frontend/src/v2/lib/overlays/RCarousel/RCarousel.stories.ts

@@ -57,7 +57,7 @@ export const Inline: Story = {
       return { args, index };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f; min-height: 540px;">
+      <div style="padding: 32px; min-height: 540px;">
         <RCarousel
           v-bind="args"
           v-model="index"
@@ -112,6 +112,7 @@ export const Inline: Story = {
 };
 
 export const InlineLight: Story = {
+  globals: { theme: "light" },
   args: {
     items: SAMPLES,
     showThumbnails: true,
@@ -123,7 +124,7 @@ export const InlineLight: Story = {
       return { args, index };
     },
     template: `
-      <div class="r-v2 r-v2-light" style="padding: 32px; background: #f4f4f8; min-height: 540px;">
+      <div style="padding: 32px; min-height: 540px;">
         <RCarousel
           v-bind="args"
           v-model="index"
@@ -157,7 +158,7 @@ export const Fullscreen: Story = {
       return { args, index, onClose };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f; min-height: 540px;">
+      <div style="padding: 32px; min-height: 540px;">
         <RBtn @click="index = 0">Open lightbox</RBtn>
         <RCarousel
           v-if="index !== null"
@@ -214,7 +215,7 @@ export const NoLoop: Story = {
       return { args, index };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f; min-height: 360px;">
+      <div style="padding: 32px; min-height: 360px;">
         <RCarousel
           v-bind="args"
           v-model="index"
@@ -240,7 +241,7 @@ export const SingleItem: Story = {
       return { args, index };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 32px; background: #07070f; min-height: 360px;">
+      <div style="padding: 32px; min-height: 360px;">
         <RCarousel
           v-bind="args"
           v-model="index"

frontend/src/v2/lib/overlays/RDialog/RDialog.stories.ts

@@ -39,7 +39,7 @@ export const Basic: Story = {
       return { args, open };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 48px; background: #07070f; min-height: 300px;">
+      <div style="padding: 48px; min-height: 300px;">
         <RBtn @click="open = true">Open dialog</RBtn>
         <RDialog v-bind="args" v-model="open" cancelable>
           <template #header>
@@ -81,6 +81,11 @@ export const Basic: Story = {
   },
 };
 
+export const Light: Story = {
+  ...Basic,
+  globals: { theme: "light" },
+};
+
 // Loading and empty states aren't built into the primitive any more:
 // the consumer renders them inside `#content` from REmptyState /
 // RProgressCircular. These stories demonstrate the recipe.
@@ -94,7 +99,7 @@ export const Loading: Story = {
       return { args, open };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 48px; background: #07070f; min-height: 300px;">
+      <div style="padding: 48px; min-height: 300px;">
         <RBtn @click="open = true">Open loading dialog</RBtn>
         <RDialog v-bind="args" v-model="open">
           <template #header>
@@ -121,7 +126,7 @@ export const EmptyState: Story = {
       return { args, open };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 48px; background: #07070f; min-height: 300px;">
+      <div style="padding: 48px; min-height: 300px;">
         <RBtn @click="open = true">Open empty dialog</RBtn>
         <RDialog v-bind="args" v-model="open">
           <template #header>
@@ -150,7 +155,7 @@ export const WithToolbarAndFooter: Story = {
       return { args, open };
     },
     template: `
-      <div class="r-v2 r-v2-dark" style="padding: 48px; background: #07070f; min-height: 300px;">
+      <div style="padding: 48px; min-height: 300px;">
         <RBtn @click="open = true">Open full dialog</RBtn>
         <RDialog v-bind="args" v-model="open" cancelable>
           <template #header><span>Edit ROM</span></template>

frontend/src/v2/lib/structural/RTooltip/RTooltip.stories.ts

@@ -94,6 +94,12 @@ export const Default: Story = {
   }),
 };
 
+export const Light: Story = {
+  ...Default,
+  name: "Light",
+  globals: { theme: "light" },
+};
+
 // An RBtn with a string `icon` drops its default slot, so icon buttons use
 // RBtn's own `tooltip` prop; parent-attach is for plain elements like this.
 export const ParentAttach: Story = {
@@ -409,7 +415,7 @@ export const TouchGating: Story = {
     components: { RTooltip, RBtn },
     setup: () => ({ args }),
     template: `
-      <div class="r-v2 r-v2-dark" style="padding:48px;display:flex;justify-content:center;background:#07070f">
+      <div style="padding:48px;display:flex;justify-content:center;">
         <RTooltip v-bind="args">
           <template #activator="{ props }">
             <RBtn v-bind="props">Hover target</RBtn>
@@ -457,7 +463,7 @@ export const OpenOnTap: Story = {
     components: { RTooltip, RBtn },
     setup: () => ({ args }),
     template: `
-      <div class="r-v2 r-v2-dark" style="padding:48px;display:flex;justify-content:center;background:#07070f">
+      <div style="padding:48px;display:flex;justify-content:center;">
         <RTooltip v-bind="args">
           <template #activator="{ props }">
             <RBtn v-bind="props">Tap target</RBtn>