Add an optional wrapper to tabs (#11897)

Adds an optional argument to the `tabs` shortcode that when set to
`true`, wraps tabs in a border and slight background color. This allows
us to opt specific tabs into being more visually isolated from the
surrounding content.

To better facilitate this, slightly adjusts the inset (code block)
background color to be more distinct from the background of the tab.

Resolves #11784

---

Example from
[/ui/layout](https://flutter-docs-prod--pr11897-feat-tab-wrapper-aofkivvh.web.app/ui/layout#common-layout-widgets):

<img width="420" alt="Light mode version of a wrapped tab"
src="https://github.com/user-attachments/assets/b5e8eedd-fd00-4ec3-8369-1992d97e3141"
/>

Author: parlough

src/_11ty/shortcodes.ts

@@ -35,9 +35,9 @@ function _setupTabs(eleventyConfig: UserConfig) {
   let currentTabWrapperId = 0;
   let currentTabPaneId = 0;
 
-  eleventyConfig.addPairedShortcode('tabs', function (content: string, saveKey: string) {
+  eleventyConfig.addPairedShortcode('tabs', function (content: string, saveKey: string, wrapped: boolean = false) {
     const tabWrapperId = currentTabWrapperId++;
-    let tabMarkup = `<div id="${tabWrapperId}" class="tabs-wrapper" ${saveKey ? `data-tab-save-key="${slugify(saveKey)}"` : ''}><ul class="nav-tabs" role="tablist">`;
+    let tabMarkup = `<div id="${tabWrapperId}" class="tabs-wrapper${wrapped ? " wrapped" : ""}" ${saveKey ? `data-tab-save-key="${slugify(saveKey)}"` : ''}><ul class="nav-tabs" role="tablist">`;
 
     // Only select child tab panes that don't already have a parent wrapper.
     const tabPanes = selectAll('.tab-pane[data-tab-wrapper-id="undefined"]', fromHtml(content));

src/_sass/base/_root.scss

@@ -42,6 +42,7 @@ body {
   --site-base-fgColor-alt: #6a6f71;
 
   --site-raised-bgColor: #e9ecef;
+  --site-raised-bgColor-translucent: #{color.change(#e9ecef, $alpha: 0.2)};
 
   --site-primary-color: #{$base_primary_color};
   --site-accent-color: #833ef2;
@@ -56,8 +57,8 @@ body {
   --site-onPrimary-color-lighter: #{color.mix(#fff, #B8EAFE, 50%)};
   --site-onPrimary-color-lightest: #{color.mix(#fff, #B8EAFE, 75%)};
 
-  --site-inset-bgColor: #F8F9FA;
-  --site-inset-bgColor-translucent: rgba(248, 249, 250, 0.8);
+  --site-inset-bgColor: #F6F7F8;
+  --site-inset-bgColor-translucent: rgba(237, 240, 242, 0.8);
   --site-inset-fgColor: var(--site-base-fgColor);
   --site-inset-borderColor: #DADCE0;
 
@@ -109,6 +110,7 @@ body {
     --site-base-fgColor-alt: #a8acad;
 
     --site-raised-bgColor: #1c1e27;
+    --site-raised-bgColor-translucent: #{color.change(#1c1e27, $alpha: 0.4)};
 
     --site-primary-color: #{$base_primary_color};
     --site-accent-color: #b07fff;

src/_sass/components/_content.scss

@@ -15,7 +15,11 @@
     min-width: 8rem;
     max-width: 960px;
     min-height: calc(100vh - var(--site-header-height) - var(--site-subheader-height));
-    padding: 2rem;
+    padding: 1.5rem;
+
+    @media (min-width: 576px) {
+      padding: 2rem;
+    }
 
     img {
       object-fit: contain;

src/_sass/components/_sidebar.scss

@@ -32,6 +32,7 @@
     border-right: 0.1rem solid var(--site-outline-variant);
     padding: 0.75rem 0.75rem 2.25rem;
     position: sticky;
+    height: calc(100vh - var(--site-header-height));
     top: var(--site-header-height);
     overscroll-behavior: auto;
     width: 16rem;

src/_sass/components/_tabs.scss

@@ -8,15 +8,18 @@
   }
 }
 
+$wrapper-padding: 0.375rem;
+$wrapper-radius: 0.125rem;
+
 ul.nav-tabs {
   list-style: none;
 
   display: flex;
   flex-direction: row;
   align-items: center;
 
-  padding: 0.375rem;
-  border-radius: 0.125rem;
+  padding: $wrapper-padding;
+  border-radius: $wrapper-radius;
   background-color: var(--site-raised-bgColor);
   gap: 0.5rem;
   overflow-x: scroll;
@@ -57,3 +60,27 @@ ul.nav-tabs {
     }
   }
 }
+
+.tabs-wrapper.wrapped {
+  .nav-tabs {
+    margin-bottom: 0;
+  }
+
+  .tab-content {
+    padding: 1rem 1rem 0;
+    background-color: var(--site-raised-bgColor-translucent);
+
+    border: $wrapper-padding solid var(--site-raised-bgColor);
+    border-top: none;
+    border-bottom-left-radius: $wrapper-radius;
+    border-bottom-right-radius: $wrapper-radius;
+
+    ul {
+      padding-left: 1rem;
+    }
+
+    .tab-pane > :first-child {
+      margin-block-start: 0;
+    }
+  }
+}

src/content/ui/layout/index.md

@@ -159,7 +159,7 @@ displays the widget.
 <a id="material-apps" aria-hidden="true"></a>
 <a id="cupertino-apps" aria-hidden="true"></a>
 
-{% tabs "app-type-tabs" %}
+{% tabs "app-type-tabs", true %}
 
 {% tab "Standard apps" %}
 
@@ -772,41 +772,58 @@ only Material apps can use the Material Components library.
 <a id="standard-widgets" aria-hidden="true"></a>
 <a id="materials-widgets" aria-hidden="true"></a>
 
-{% tabs "os-archive-tabs" %}
+{% tabs "widget-types-tabs", true %}
 
 {% tab "Standard widgets" %}
 
-* [`Container`](#container): Adds padding, margins, borders,
+[`Container`](#container)
+: Adds padding, margins, borders,
   background color, or other decorations to a widget.
-* [`GridView`](#gridview): Lays widgets out as a scrollable grid.
-* [`ListView`](#listview): Lays widgets out as a scrollable list.
-* [`Stack`](#stack): Overlaps a widget on top of another.
+
+[`GridView`](#gridview)
+: Lays widgets out as a scrollable grid.
+
+[`ListView`](#listview)
+: Lays widgets out as a scrollable list.
+
+[`Stack`](#stack)
+: Overlaps a widget on top of another.
 
 {% endtab %}
 
 {% tab "Material widgets" %}
 
-* [`Scaffold`][]: Provides a structured layout framework
+[`Scaffold`][]
+: Provides a structured layout framework
   with slots for common Material Design app elements.
-* [`AppBar`][]: Creates a horizontal bar that's typically
+
+[`AppBar`][]
+: Creates a horizontal bar that's typically
   displayed at the top of a screen.
-* [`Card`](#card): Organizes related info into a box with
+
+[`Card`](#card)
+: Organizes related info into a box with
   rounded corners and a drop shadow.
-* [`ListTile`](#listtile): Organizes up to 3 lines of text,
+
+[`ListTile`](#listtile)
+: Organizes up to 3 lines of text,
   and optional leading and trailing icons, into a row.
 
 {% endtab %}
 
 {% tab "Cupertino widgets" %}
 
-* [`CupertinoPageScaffold`][]: Provides the basic layout
-  structure for an iOS-style page.   
-* [`CupertinoNavigationBar`][]: Creates an iOS-style
-  navigation bar at the top of the screen.   
-* [`CupertinoSegmentedControl`][]: Creates a segmented
-  control for selecting.   
-* [`CupertinoTabBar`][] and [`CupertinoTabScaffold`][]:
-  Creates the characteristic iOS bottom tab bar.
+[`CupertinoPageScaffold`][]
+: Provides the basic layout structure for an iOS-style page.
+
+[`CupertinoNavigationBar`][]
+: Creates an iOS-style  navigation bar at the top of the screen.
+
+[`CupertinoSegmentedControl`][]
+: Creates a segmented control for selecting.
+
+[`CupertinoTabBar`][] and [`CupertinoTabScaffold`][]
+: Creates the characteristic iOS bottom tab bar.
 
 {% endtab %}