intensify secondary color in platform theme (#1360)

lib/platform-bible-react/src/index.css

@@ -40,7 +40,7 @@
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
+    --secondary: 210 40% 90%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;

lib/platform-bible-react/src/preview/pages/layouts.component.tsx

@@ -8,6 +8,7 @@ import { HasDirection } from '@/preview/preview-components/direction-toggle.comp
 import WindowOrTabExample from './layouts/window.layout.component';
 import Dashboard5Examples from './layouts/dashboard5.layout.component';
 import ToolbarExamples from './layouts/toolbar.layout.component';
+import DialogExamples from './layouts/dialog.layout.component';
 
 function Layouts({ direction }: HasDirection) {
   return (
@@ -19,11 +20,12 @@ function Layouts({ direction }: HasDirection) {
           <VerticalTabsTrigger value="Toolbar">MUI Toolbar</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Settings">Settings (n/a)</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Shadcn Dashboard 5">Shadcn Dashboard 5</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Dialog">Dialog</VerticalTabsTrigger>
         </VerticalTabsList>
 
         <VerticalTabsContent value="Window">
           <div className="tw-mb-2 tw-flex tw-gap-2">
-            <WindowOrTabExample direction={direction} />
+            <WindowOrTabExample direction={direction} isFocused />
             <WindowOrTabExample direction={direction} />
           </div>
           <WindowOrTabExample direction={direction} />
@@ -40,6 +42,10 @@ function Layouts({ direction }: HasDirection) {
             <Dashboard5Examples direction={direction} />
           </div>
         </VerticalTabsContent>
+
+        <VerticalTabsContent value="Dialog">
+          <DialogExamples />
+        </VerticalTabsContent>
       </VerticalTabs>
     </div>
   );

lib/platform-bible-react/src/preview/pages/layouts/dialog.layout.component.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@/components/shadcn-ui/button';
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/shadcn-ui/card';
+
+export default function DialogExamples() {
+  return (
+    <>
+      <Card className="tw-w-[350px]">
+        <CardHeader>
+          <CardTitle>Confirm</CardTitle>
+          <CardDescription>Are you really sure</CardDescription>
+        </CardHeader>
+        <CardFooter className="tw-flex tw-justify-between">
+          <Button variant="outline">Cancel</Button>
+          <Button>Save</Button>
+        </CardFooter>
+      </Card>
+
+      <div className="tw-h-4" />
+
+      <div className="tw-w-[350px] tw-rounded-md tw-border tw-p-4">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+        <div className="tw-flex tw-gap-2 tw-pt-4">
+          <Button variant="secondary">Proceed with unsaved changes</Button>
+          <Button>Save</Button>
+        </div>
+      </div>
+    </>
+  );
+}

lib/platform-bible-react/src/preview/pages/layouts/window.layout.component.tsx

@@ -15,8 +15,15 @@ import { HasDirection } from '@/preview/preview-components/direction-toggle.comp
 import { defaultScrRef } from 'platform-bible-utils';
 import { useState } from 'react';
 
-export default function WindowOrTabExample({ direction }: HasDirection) {
+export type HasIsFocused = {
+  isFocused?: boolean;
+};
+
+export default function WindowOrTabExample({ direction, isFocused }: HasDirection & HasIsFocused) {
   const [scrRef, setScrRef] = useState(defaultScrRef);
+  const highlightClassName = isFocused
+    ? 'tw-bg-primary tw-text-primary-foreground'
+    : 'tw-bg-secondary tw-text-secondary-foreground';
   return (
     <div className="tw-rounded-md tw-border">
       <div className="tw-flex tw-flex-row tw-rounded-se-md tw-bg-muted/50">
@@ -117,12 +124,13 @@ export default function WindowOrTabExample({ direction }: HasDirection) {
         </p>
         <br />
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
+          Lorem{' '}
+          <span className={highlightClassName}>ipsum dolor sit amet, consectetur adipiscing</span>{' '}
+          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+          deserunt mollit anim id est laborum.
         </p>
         <br />
         <p>