Replace "Style" with "Styling" for "Themed" and "ShadowBoxSection" Components

astro/src/components/ShadowBoxSection.astro

@@ -2,23 +2,23 @@
 interface Props {
   id?: string;
   theme?: string;
-  style?: string;
+  styling?: string;
   py?: number;
   fluid?: boolean;
 }
 
 const {
   id = undefined,
   theme = "secondary",
-  style = undefined,
+  styling = undefined,
   py = 5,
   fluid = true,
 } = Astro.props;
 
 import { getBackgroundAndText } from "../lib/themes.ts";
 
 const outerBgAndTextClass = getBackgroundAndText(theme, undefined);
-const innerBgClass = getBackgroundAndText(undefined, style);
+const innerBgClass = getBackgroundAndText(undefined, styling);
 ---
 
 <section id={id} class:list={[outerBgAndTextClass, `p-${py - 1} p-sm-${py}`]}>

astro/src/components/ThemedBox.astro

@@ -1,7 +1,7 @@
 ---
 export interface Props {
   theme?: string;
-  style?: string;
+  styling?: string;
   text?: boolean;
   border?: number;
   class?: string;
@@ -10,7 +10,7 @@ export interface Props {
 
 const {
   theme = undefined,
-  style = undefined,
+  styling = undefined,
   text = true,
   border = 0,
   padding = 4,
@@ -19,8 +19,8 @@ const {
 
 import { getBackgroundAndText, getBorder } from "../lib/themes.ts";
 
-const bgAndTextClasses = getBackgroundAndText(theme, style, text);
-const borderClasses = getBorder(border, theme, style === "subtle");
+const bgAndTextClasses = getBackgroundAndText(theme, styling, text);
+const borderClasses = getBorder(border, theme, styling === "subtle");
 ---
 
 <div class:list={[bgAndTextClasses, borderClasses, `p-${padding}`, extraClasses]}>

astro/src/components/ThemedColumn.astro

@@ -8,7 +8,7 @@ interface Props extends ColumnProps, ThemedBoxProps {}
 
 const {
   theme = undefined,
-  style = undefined,
+  styling = undefined,
   text = true,
   border = 0,
   padding = 4,
@@ -17,8 +17,8 @@ const {
 
 import { getBackgroundAndText, getBorder } from "../lib/themes.ts";
 
-const bgAndTextClasses = getBackgroundAndText(theme, style, text);
-const borderClasses = getBorder(border, theme, style === "subtle");
+const bgAndTextClasses = getBackgroundAndText(theme, styling, text);
+const borderClasses = getBorder(border, theme, styling === "subtle");
 ---
 
 <Column {...columnProps} class:list={[bgAndTextClasses, borderClasses, `p-${padding}`]}><slot /></Column>

astro/src/components/ThemedSection.astro

@@ -2,7 +2,7 @@
 interface Props {
   id?: string;
   theme?: string;
-  style?: string;
+  styling?: string;
   text?: boolean;
   yPaddings?: Array<string>;
   fluid?: boolean;
@@ -11,15 +11,15 @@ interface Props {
 const {
   id = undefined,
   theme = undefined,
-  style = undefined,
+  styling = undefined,
   text = false,
   yPaddings = ["xs-1", "sm-2", "md-3", "lg-4"],
   fluid = false,
 } = Astro.props;
 
 import { getBackgroundAndText } from "../lib/themes.ts";
 
-const bgAndTextClass = getBackgroundAndText(theme, style, text);
+const bgAndTextClass = getBackgroundAndText(theme, styling, text);
 const yPaddingClasses = yPaddings.map((p) => `py-${p}`);
 ---
 

astro/src/layouts/BlogLayout.astro

@@ -87,7 +87,7 @@ import ThemedSection from "@components/ThemedSection.astro";
       <strong>Blog</strong>
     </slot>
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <div class="d-flex gap-4">
       <article class:list={[sidebar ? "d-none d-lg-block" : "col", "col-lg-9"]}>
         <h1 class="display-4 border-bottom mb-3" set:text={blog.data.title} />

astro/src/layouts/PolicyLayout.astro

@@ -22,7 +22,7 @@ const metadata: PageMetadata = {
       {title}
     </slot>
   </ImageHeading>
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <div class="d-print-none text-end pb-2">
       <button class="btn btn-contrast-dark btn-info" onclick="window.print()">
         Print this page

astro/src/layouts/TipLayout.astro

@@ -85,7 +85,7 @@ const metadata: PageMetadata = {
   </Fragment>
 
   <ImageHeading image={tip?.data.theme} slot="header" set:html={header} />
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <FlexColumn
       lgFlexRow gap="3" class="justify-content-lg-between"
     >
@@ -133,7 +133,7 @@ const metadata: PageMetadata = {
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <TipLicense />
   </ThemedSection>
 </Layout>

astro/src/pages/_fixable/index.astro

@@ -39,7 +39,7 @@ const crumbs = [];
     </p>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h1 class="display-4">Headings indicate <strong>structure</strong>.</h1>
     <FlexColumn
       xlFlexRow class="justify-content-xl-evenly align-items-center"
@@ -69,7 +69,7 @@ const crumbs = [];
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection theme="secondary" style="subtle">
+  <ThemedSection theme="secondary" styling="subtle">
     <h2 class="display-4">Color needs <strong>contrast</strong>.</h2>
     <FlexColumn
       lgFlexRow gap="4" class="py-3 justify-content-lg-evenly"
@@ -101,7 +101,7 @@ const crumbs = [];
     </FlexColumn>
   </ThemedSection>
 
-  <ShadowBoxSection theme="info" style="secondary">
+  <ShadowBoxSection theme="info" styling="secondary">
     <div class="p-3">
       <h2 class="display-4 text-center"
         >Forms require <strong>focus</strong>.</h2
@@ -247,7 +247,7 @@ const crumbs = [];
     </div>
   </ShadowBoxSection>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2 class="display-4 my-3"
       >Links should be <strong>described</strong> and <strong>clickable</strong
       >.</h2

astro/src/pages/about/mission.astro

@@ -110,7 +110,7 @@ import partnerImage from "../../images/np_Business-partners-discussing-work-arra
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="display-3 pb-3">Our <strong>motivation</strong>.</h2>
     <p class="lead">
       One in every three households includes someone who has a disability. These
@@ -153,7 +153,7 @@ import partnerImage from "../../images/np_Business-partners-discussing-work-arra
         lg="3"
         xl="3"
         theme="info"
-        style="subtle"
+        styling="subtle"
         class="mx-4 my-auto rounded shadow-sm"
       >
         <Quote q="loneliness" />

astro/src/pages/about/policies.astro

@@ -34,7 +34,7 @@ const crumbs: Breadcrumbs = [
     and on Google Docs.
   </div>
 
-  <ThemedSection style="secondary">
+  <ThemedSection styling="secondary">
     <h2 id="user" class="display-4"><strong>User</strong> Policies</h2>
     <p>
       These are policies for users of the tools that

astro/src/pages/about/story.astro

@@ -31,7 +31,7 @@ const crumbs: Breadcrumbs = [
   <ImageHeading image="blog" slot="header">
     Our Founder's <strong>Story</strong>
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <p>
       People with disabilities are the
       <ExternalLink
@@ -53,7 +53,7 @@ const crumbs: Breadcrumbs = [
       lg="7"
       xxl="10"
       theme="primary"
-      style="subtle"
+      styling="subtle"
       border={1}
       text={true}
       class="mx-auto rounded-1 mb-4"
@@ -93,7 +93,7 @@ const crumbs: Breadcrumbs = [
       lg="9"
       xl="10"
       theme="primary"
-      style="subtle"
+      styling="subtle"
       border={1}
       text={true}
       class="mx-auto rounded-1 mb-4"

astro/src/pages/blog/authors/index.astro

@@ -23,7 +23,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by author
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {

astro/src/pages/blog/dates/index.astro

@@ -24,7 +24,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by date
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {

astro/src/pages/blog/topics/index.astro

@@ -24,7 +24,7 @@ import ThemedSection from "../../../components/ThemedSection.astro";
   <ImageHeading image="blog" slot="header">
     <strong>Blogs</strong> by topic
   </ImageHeading>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="text-info-emphasis display-5" set:text={title} />
     <ul>
       {

astro/src/pages/donate.astro

@@ -98,10 +98,10 @@ if (!letter) throw new Error("Could not find content `markdown/donor-letter`");
     </div>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
 
     <Row class="justify-content-center">
-      <ThemedBox theme="primary" style="subtle" border={1} padding={3} class="mb-5 p-3 rounded">
+      <ThemedBox theme="primary" styling="subtle" border={1} padding={3} class="mb-5 p-3 rounded">
         <div class="announcement lead text-center">
           An anonymous donor is currently <a href="/blog/2026-matching-campaign">matching contributions</a>
           up to&nbsp;$5,000. <br class="d-none d-lg-inline-block" /> Your&nbsp;donation will be doubled!
@@ -157,7 +157,7 @@ if (!letter) throw new Error("Could not find content `markdown/donor-letter`");
     </Row>
   </ThemedSection>
 
-  <ShadowBoxSection theme="info" style="secondary">
+  <ShadowBoxSection theme="info" styling="secondary">
     <h2 class="display-3 text-center fw-bold my-3">How can I help?</h2>
     <Row class="justify-content-center px-3">
       <Column lg="3" xl="2">

astro/src/pages/escape-room/_csun-2025.astro

@@ -63,7 +63,7 @@ const timeSlots = ["7:20", "7:50", "8:20", "8:50", "9:20"];
   </Hero>
 
   <img src="/images/wave.svg" class="wave" />
-  <ThemedSection id="form" theme="secondary" style="subtle">
+  <ThemedSection id="form" theme="secondary" styling="subtle">
     <h2 class="display-3 mb-4">
       CSUN <strong>Escape Room</strong> Registration
     </h2>

astro/src/pages/escape-room/how-it-works.astro

@@ -55,7 +55,7 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
     </p>
   </ThemedSection>
 
-  <ThemedSection style="subtle" theme="secondary">
+  <ThemedSection styling="subtle" theme="secondary">
     <h2 class="text-center text-info mb-4">Quotes from our Customers</h2>
     <Row baseRowCols="1" lgRowCols="3" g="3" class="align-items-stretch align-items-lg-center">
       {
@@ -75,7 +75,7 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
     </Row>
   </ThemedSection>
 
-  <ThemedSection style="tertiary" id="faq">
+  <ThemedSection styling="tertiary" id="faq">
     <h2 class="text-info">Frequently Asked Questions</h2>
     <dl>
       <dt class="text-brand">What comes with an escape room kit?</dt>

astro/src/pages/escape-room/index.astro

@@ -116,7 +116,7 @@ import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
     </FlexColumn>
   </ThemedSection>
 
-  <ThemedSection style="subtle" theme="secondary">
+  <ThemedSection styling="subtle" theme="secondary">
     <h2 class="text-center">Our build-your-own rooms.</h2>
     <p class="lead">
       Requests for the <Branding>Accessible Escape Room</Branding> have gone beyond

astro/src/pages/escape-room/our-story.astro

@@ -68,7 +68,7 @@ import heroBg from "src/images/escape-room/shaded/puzzle-display.jpg";
       </FlexColumn>
     </ThemedSection>
 
-    <ThemedSection theme="secondary" style="subtle">
+    <ThemedSection theme="secondary" styling="subtle">
       <FlexColumn
         lgReverse gap="5" class="justify-content-lg-between align-items-center"
       >

astro/src/pages/escape-room/themes/[id].astro

@@ -112,11 +112,11 @@ import ThemedSection from "@components/ThemedSection.astro";
     </Row>
   </ThemedSection>
   <div class="local-wrapper">
-    <ThemedSection {theme} style="subtle">
+    <ThemedSection {theme} styling="subtle">
       <Content {components} />
     </ThemedSection>
   </div>
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class={`text-${theme}-emphasis`}>This Escape Room Kit includes:</h2>
     <dl>
       <dt class="text-brand">A List of Required Materials</dt>

astro/src/pages/escape-room/themes/index.astro

@@ -39,7 +39,7 @@ const rooms = sortBy(
     </h1>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="display-4 text-dark-emphasis text-center mb-4">Themes</h2>
     <Row
       baseRowCols="1" lgRowCols="2" g="4"

astro/src/pages/evaluations/index.astro

@@ -58,7 +58,7 @@ import ShadowBoxSection from "@components/ShadowBoxSection.astro";
     </div>
   </Hero>
 
-  <ThemedSection style="tertiary">
+  <ThemedSection styling="tertiary">
     <h2 class="display-4 mb-3">
       Are you reaching <strong>everyone</strong> in your community?
     </h2>
@@ -140,7 +140,7 @@ import ShadowBoxSection from "@components/ShadowBoxSection.astro";
       </ThemedBox>
       <ThemedBox
         theme="primary"
-        style="subtle"
+        styling="subtle"
         text={true}
         border={1}
         class="d-flex flex-column justify-content-between col-10 col-lg-5 shadow rounded"
@@ -217,7 +217,7 @@ import ShadowBoxSection from "@components/ShadowBoxSection.astro";
     </Row>
   </ShadowBoxSection>
 
-  <ThemedSection id="request" theme="secondary" style="subtle" text={true}>
+  <ThemedSection id="request" theme="secondary" styling="subtle" text={true}>
     <h2 class="display-4"><strong>Request</strong> an accessibility evaluation.</h2>
     <GoogleForm
       id="info-form"