section style

figma · Jun 17, 2024 · 50cb8ec · 50cb8ec
1 parent 92ccb63
commit 50cb8ec
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 44 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -46,48 +46,6 @@ function App() {
   return (
     <AuthenticationProvider>
       <Header />
-      <Section padding={sectionPadding}>
-        <Flex
-          container
-          direction="column"
-          alignSecondary="center"
-          gap={flexGap}
-        >
-          <TextContentHeading
-            align="center"
-            heading="Heading"
-            subheading="Subheading"
-          />
-          <FlexItem>
-            <Flex container type="third" alignPrimary="center">
-              <FlexItem size="major">
-                <Accordion>
-                  <AccordionItem title="Title">
-                    Answer the frequently asked question in a simple sentence, a
-                    longish paragraph, or even in a list.
-                  </AccordionItem>
-                  <AccordionItem title="Title">
-                    Answer the frequently asked question in a simple sentence, a
-                    longish paragraph, or even in a list.
-                  </AccordionItem>
-                  <AccordionItem title="Title">
-                    Answer the frequently asked question in a simple sentence, a
-                    longish paragraph, or even in a list.
-                  </AccordionItem>
-                  <AccordionItem title="Title">
-                    Answer the frequently asked question in a simple sentence, a
-                    longish paragraph, or even in a list.
-                  </AccordionItem>
-                  <AccordionItem title="Title">
-                    Answer the frequently asked question in a simple sentence, a
-                    longish paragraph, or even in a list.
-                  </AccordionItem>
-                </Accordion>
-              </FlexItem>
-            </Flex>
-          </FlexItem>
-        </Flex>
-      </Section>
       <Section padding={sectionPadding}>
         <Flex container type="half" wrap gap={flexGap}>
           <Image
@@ -407,6 +365,48 @@ function App() {
           </FlexItem>
         </Panel>
       </Section>
+      <Section padding={sectionPadding}>
+        <Flex
+          container
+          direction="column"
+          alignSecondary="center"
+          gap={flexGap}
+        >
+          <TextContentHeading
+            align="center"
+            heading="Heading"
+            subheading="Subheading"
+          />
+          <FlexItem>
+            <Flex container type="third" alignPrimary="center">
+              <FlexItem size="major">
+                <Accordion>
+                  <AccordionItem title="Title">
+                    Answer the frequently asked question in a simple sentence, a
+                    longish paragraph, or even in a list.
+                  </AccordionItem>
+                  <AccordionItem title="Title">
+                    Answer the frequently asked question in a simple sentence, a
+                    longish paragraph, or even in a list.
+                  </AccordionItem>
+                  <AccordionItem title="Title">
+                    Answer the frequently asked question in a simple sentence, a
+                    longish paragraph, or even in a list.
+                  </AccordionItem>
+                  <AccordionItem title="Title">
+                    Answer the frequently asked question in a simple sentence, a
+                    longish paragraph, or even in a list.
+                  </AccordionItem>
+                  <AccordionItem title="Title">
+                    Answer the frequently asked question in a simple sentence, a
+                    longish paragraph, or even in a list.
+                  </AccordionItem>
+                </Accordion>
+              </FlexItem>
+            </Flex>
+          </FlexItem>
+        </Flex>
+      </Section>
       <Footer />
     </AuthenticationProvider>
   );

diff --git a/src/ui/layout/Section/Section.tsx b/src/ui/layout/Section/Section.tsx
@@ -12,7 +12,7 @@ export type SectionProps = ComponentPropsWithoutRef<
   paddingBottom?: "600" | "800" | "1200" | "1600" | "4000";
 } & (
     | {
-        variant?: "brand" | "secondary" | "stroke" | "subtle";
+        variant?: "brand" | "neutral" | "stroke" | "subtle";
         src?: undefined;
       }
     | {

diff --git a/src/ui/layout/Section/section.css b/src/ui/layout/Section/section.css
@@ -62,7 +62,7 @@
   background: var(--sds-color-background-brand-default);
   color: var(--sds-color-text-brand-on-brand);
 }
-.section-variant-secondary {
+.section-variant-neutral {
   background: var(--sds-color-background-default-tertiary);
 }
 .section-variant-stroke {