NTP: Restyle Customize drawer behind rebrand flag

special-pages/pages/new-tab/app/customizer/components/Customizer.module.css

@@ -43,6 +43,38 @@
     }
 }
 
+[data-rebrand="true"] .customizeButton {
+    backdrop-filter: none;
+    background-color: var(--ds-color-theme-control-fill-primary);
+    border: none;
+    border-radius: var(--ds-radius-x06);
+    padding: var(--ds-space-x02) var(--ds-space-x04);
+
+    &:hover {
+        background-color: var(--ds-color-theme-control-fill-secondary);
+    }
+
+    &:active {
+        background-color: var(--ds-color-theme-control-fill-tertiary);
+    }
+
+    @media screen and (max-width: 800px) {
+        padding: var(--ds-space-x02);
+    }
+}
+
+[data-rebrand="true"][data-platform-name="windows"] .customizeButton {
+    background-color: transparent;
+
+    &:hover {
+        background-color: var(--ds-color-theme-control-fill-primary);
+    }
+
+    &:active {
+        background-color: var(--ds-color-theme-control-fill-secondary);
+    }
+}
+
 .popover {
     --popover-offset-x: -10px;
     --popover-offset-y: -3px;

special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css

@@ -261,3 +261,78 @@
         outline: none;
     }
 }
+
+[data-rebrand="true"] {
+    .header h2 {
+        margin: 0;
+        font-size: var(--title-2-font-size);
+        font-weight: var(--title-2-font-weight);
+        line-height: var(--title-2-line-height);
+        color: var(--ds-color-theme-text-primary);
+    }
+
+    .closeBtn {
+        background-color: var(--ds-color-theme-surface-decoration-primary);
+    }
+
+    .col {
+        padding-top: 0;
+    }
+
+    .sections {
+        grid-row-gap: 0;
+    }
+
+    .sectionTitle {
+        padding-top: var(--ds-space-x08);
+        color: var(--ds-color-theme-text-primary);
+    }
+
+    .sectionBody {
+        margin-top: var(--ds-space-x04);
+    }
+
+    .borderedSection {
+        padding-top: var(--ds-space-x08);
+    }
+
+    .bgList {
+        gap: var(--ds-space-x03);
+    }
+
+    .bgListItem {
+        grid-row-gap: var(--ds-space-x1-5);
+
+        > span {
+            color: var(--ds-color-theme-text-primary);
+        }
+    }
+
+    .bgPanel {
+        --selection-ring-offset: 2px;
+        --selection-ring-width: 2px;
+
+        border-radius: var(--ds-radius-x01);
+        box-shadow: none;
+        border: 1px solid var(--ds-color-theme-container-border-primary);
+        position: relative;
+
+        &[aria-checked="true"],
+        &:focus-visible {
+            box-shadow: none;
+
+            &::after {
+                content: "";
+                position: absolute;
+                inset: calc(-1 * var(--selection-ring-offset));
+                border: var(--selection-ring-width) solid var(--ds-color-theme-accent-primary);
+                border-radius: calc(var(--ds-radius-x01) + var(--selection-ring-offset));
+                pointer-events: none;
+            }
+        }
+    }
+
+    .bgPanelEmpty {
+        background-color: var(--ds-color-theme-control-fill-primary);
+    }
+}

special-pages/pages/new-tab/app/customizer/components/ThemeSection.module.css

@@ -84,6 +84,52 @@
     visibility: hidden;
 }
 
+[data-rebrand="true"] {
+    .root {
+        gap: var(--ds-space-x04);
+    }
+
+    .segmentedControl {
+        border-radius: var(--ds-radius-x06);
+    }
+
+    .segment {
+        flex: 1 0 0;
+        gap: var(--ds-space-x01);
+        border-radius: var(--ds-radius-x06);
+        padding-inline: var(--ds-space-x03);
+    }
+
+    .variantGrid {
+        gap: var(--ds-space-x03);
+    }
+
+    .variantButton {
+        border-radius: var(--ds-radius-x02);
+
+        &[aria-checked="true"]::after {
+            border-radius: calc(var(--ds-radius-x02) + var(--selection-ring-offset));
+        }
+    }
+
+    .swatch,
+    .swatchBackdrop {
+        border-radius: var(--ds-radius-x02);
+    }
+}
+
+[data-rebrand="true"][data-platform-name="macos"] {
+    .segment[aria-checked="true"]:not(:focus-visible) {
+        /* Mac/Control/Standard */
+        box-shadow:
+            0 0.5px 0 0 rgba(255, 255, 255, 0.2) inset,
+            0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
+            0 0 0 0.5px rgba(0, 0, 0, 0.1),
+            0 0 1px 0 rgba(0, 0, 0, 0.05),
+            0 1px 1px 0 rgba(0, 0, 0, 0.2);
+    }
+}
+
 .variantGrid {
     display: flex;
     flex-wrap: wrap;

special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.module.css

@@ -47,3 +47,19 @@
     height: 1rem;
     display: flex;
 }
+
+[data-rebrand="true"] {
+    .embedded {
+        gap: var(--ds-space-x03);
+        font-weight: var(--body-font-weight);
+        line-height: var(--body-line-height);
+    }
+
+    .svg {
+        color: var(--ds-color-theme-icons-secondary);
+    }
+
+    .title {
+        color: var(--ds-color-theme-text-primary);
+    }
+}

special-pages/pages/new-tab/app/styles/ntp-theme.css

@@ -41,6 +41,12 @@
     --ntp-combined-width: calc(var(--ntp-drawer-width) + var(--ntp-drawer-scroll-width));
 }
 
+body[data-rebrand="true"],
+body[data-rebrand="true"] [data-has-theme-variants="true"] {
+    --ntp-drawer-width: calc(264 * var(--px-in-rem));
+    --ntp-combined-width: calc(var(--ntp-drawer-width) + var(--ntp-drawer-scroll-width));
+}
+
 [data-theme="light"],
 [data-theme="dark"] {
     --ntp-surface-background-color: var(--ds-color-theme-tone-tint-primary);

special-pages/shared/components/Switch/Switch.module.css

@@ -97,6 +97,18 @@
         --switch-handle-size: 16px;
     }
 
+    /* Windows rebrand medium — Figma 26062:35898 */
+    :global([data-rebrand="true"]) &[data-platform-name="windows"][data-size="medium"] {
+        --switch-width: 32px;
+        --switch-height: 16px;
+        --switch-handle-size: 10px;
+        --switch-handle-offset: 3px;
+        --switch-checked-offset: translateX(calc(100% + 6px));
+        --track-border-radius: var(--ds-radius-x02);
+        --track-border: 0;
+        --switch-handle-color-checked: white;
+    }
+
     &[data-platform-name="macos"][data-theme="dark"] {
         /* Off state - use system colors */
         --track-bg-color: var(--color-white-at-9);
@@ -218,6 +230,10 @@
         background: var(--switch-handle-color);
     }
 
+    :global([data-rebrand="true"]) [data-platform-name="windows"][data-size="medium"] &:before {
+        border: 1px solid var(--ds-color-theme-surface-decoration-secondary);
+    }
+
     [data-platform-name="macos"] &:before {
         box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.10) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.10) inset;
         filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.10)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.05));