From a8941e5d5a4d970c811c2b09f69008a3b0836f76 Mon Sep 17 00:00:00 2001
From: Alex Ring <aring4k@gmail.com>
Date: Tue, 24 Sep 2024 13:28:13 -0500
Subject: [PATCH] fix: Paris color migration (#46)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Paris color migration

* updated all Paris components to use “new” variables
* Button medium size
* Tag new kinds and small size
* Drawer new sizes, and glass bottomPanel
* Tabs new kind and glass option
* Misc updates to storybook pages

* fix: Button and Tag props

* Button: added `corners` prop, removed “rounded” shape
* Callout: remvoed `hideIcon` prop, instead hides when `icon={null}`
* Input: reverted to using `data-status={disabled}` so that disabled styling will overrule the status states (error, success), change applies across all input types
* Drawer: removed bottomPanel padding change
* Tabs: fixes to glass style
* Tag: removed “small” size, instead added `shape` prop as “rectangle” or “square”, plus `corners` prop to control border and border-radius

* fix: overlayStyle grey

* renamed `overlayStyle` from “greyed” to “grey”
* changed Dialog default to “blur”
---
 .changeset/angry-steaks-occur.md              |   5 +
 .changeset/dirty-garlics-enjoy.md             |   5 +
 .changeset/giant-pants-breathe.md             |   5 +
 .changeset/giant-taxis-think.md               |   5 +
 .changeset/hip-baboons-watch.md               |   5 +
 .changeset/metal-dogs-suffer.md               |   5 +
 .changeset/orange-trains-reflect.md           |   5 +
 .changeset/polite-vans-shave.md               |   5 +
 .changeset/real-carrots-end.md                |   5 +
 .changeset/real-kids-suffer.md                |   5 +
 .changeset/rich-geckos-draw.md                |   5 +
 .changeset/seven-walls-dance.md               |   5 +
 .changeset/silver-hornets-begin.md            |   5 +
 .changeset/spicy-cats-buy.md                  |   5 +
 .changeset/spicy-geese-appear.md              |   5 +
 .changeset/spotty-cameras-count.md            |   5 +
 .changeset/tender-drinks-play.md              |   5 +
 .changeset/tough-ghosts-type.md               |   5 +
 .changeset/warm-badgers-attend.md             |   5 +
 .changeset/wicked-parrots-watch.md            |   5 +
 .changeset/wild-wasps-rescue.md               |   5 +
 .storybook/main.ts                            |   4 +-
 .storybook/themes.ts                          |   6 +-
 public/pte.css                                | 452 +++++++++++++++++-
 src/helpers/useIsMounted.ts                   |  17 +
 src/helpers/useResizeObserver.ts              |  97 ++++
 src/stories/accordion/Accordion.module.scss   |   8 +-
 src/stories/avatar/Avatar.module.scss         |   2 +-
 src/stories/avatar/Avatar.tsx                 |   2 +-
 src/stories/button/Button.module.scss         |  70 ++-
 src/stories/button/Button.stories.ts          |  24 +
 src/stories/button/Button.tsx                 | 165 ++++---
 src/stories/callout/Callout.module.scss       |  14 +-
 src/stories/callout/Callout.stories.ts        |   8 +
 src/stories/callout/Callout.tsx               |   7 +-
 src/stories/card/Card.module.scss             |   6 +-
 src/stories/card/Card.stories.ts              |   5 -
 src/stories/checkbox/Checkbox.module.scss     |  25 +-
 src/stories/checkbox/Checkbox.tsx             |   3 +-
 src/stories/combobox/Combobox.stories.ts      |  16 +-
 src/stories/combobox/Combobox.tsx             |  15 +-
 src/stories/dialog/Dialog.module.scss         |  62 ++-
 src/stories/dialog/Dialog.stories.tsx         |  40 ++
 src/stories/dialog/Dialog.tsx                 |  45 +-
 src/stories/drawer/Drawer.module.scss         | 187 ++++++--
 src/stories/drawer/Drawer.stories.tsx         | 151 ++++++
 src/stories/drawer/Drawer.tsx                 | 203 ++++----
 src/stories/field/Field.stories.ts            |   2 +-
 src/stories/icon/ArrowRight.tsx               |  11 +
 src/stories/icon/Check.tsx                    |  11 +
 src/stories/icon/Icon.stories.ts              |   6 +-
 src/stories/icon/index.ts                     |   3 +
 src/stories/input/Input.module.scss           |  74 +--
 src/stories/input/Input.stories.ts            |  14 +-
 src/stories/input/Input.tsx                   |  19 +-
 src/stories/menu/Menu.module.scss             |  12 +-
 src/stories/menu/Menu.stories.tsx             |  52 +-
 src/stories/popover/Popover.module.scss       |   6 +-
 src/stories/select/Select.module.scss         |  54 ++-
 src/stories/select/Select.stories.ts          |  36 +-
 src/stories/select/Select.tsx                 |  20 +-
 src/stories/styledlink/StyledLink.module.scss |   4 +-
 src/stories/table/Table.module.scss           |  11 +-
 src/stories/table/Table.stories.ts            |  18 +-
 src/stories/table/Table.tsx                   |   8 +-
 src/stories/tabs/Tabs.module.scss             | 195 ++++++--
 src/stories/tabs/Tabs.stories.ts              |  39 --
 src/stories/tabs/Tabs.stories.tsx             | 125 +++++
 src/stories/tabs/Tabs.tsx                     | 106 ++--
 src/stories/tag/Tag.module.scss               | 181 ++++++-
 src/stories/tag/Tag.stories.ts                |  23 +-
 src/stories/tag/Tag.tsx                       |  79 ++-
 src/stories/textarea/TextArea.stories.ts      |   4 +-
 src/stories/textarea/TextArea.tsx             |  17 +-
 src/stories/theme/themes.ts                   | 189 +++++---
 src/stories/theme/tw-preflight.css            |   6 +-
 src/stories/tilt/Tilt.stories.tsx             |   8 +-
 src/stories/toast/Toast.module.scss           |   8 +-
 78 files changed, 2395 insertions(+), 685 deletions(-)
 create mode 100644 .changeset/angry-steaks-occur.md
 create mode 100644 .changeset/dirty-garlics-enjoy.md
 create mode 100644 .changeset/giant-pants-breathe.md
 create mode 100644 .changeset/giant-taxis-think.md
 create mode 100644 .changeset/hip-baboons-watch.md
 create mode 100644 .changeset/metal-dogs-suffer.md
 create mode 100644 .changeset/orange-trains-reflect.md
 create mode 100644 .changeset/polite-vans-shave.md
 create mode 100644 .changeset/real-carrots-end.md
 create mode 100644 .changeset/real-kids-suffer.md
 create mode 100644 .changeset/rich-geckos-draw.md
 create mode 100644 .changeset/seven-walls-dance.md
 create mode 100644 .changeset/silver-hornets-begin.md
 create mode 100644 .changeset/spicy-cats-buy.md
 create mode 100644 .changeset/spicy-geese-appear.md
 create mode 100644 .changeset/spotty-cameras-count.md
 create mode 100644 .changeset/tender-drinks-play.md
 create mode 100644 .changeset/tough-ghosts-type.md
 create mode 100644 .changeset/warm-badgers-attend.md
 create mode 100644 .changeset/wicked-parrots-watch.md
 create mode 100644 .changeset/wild-wasps-rescue.md
 create mode 100644 src/helpers/useIsMounted.ts
 create mode 100644 src/helpers/useResizeObserver.ts
 create mode 100644 src/stories/icon/ArrowRight.tsx
 create mode 100644 src/stories/icon/Check.tsx
 delete mode 100644 src/stories/tabs/Tabs.stories.ts
 create mode 100644 src/stories/tabs/Tabs.stories.tsx

diff --git a/.changeset/angry-steaks-occur.md b/.changeset/angry-steaks-occur.md
new file mode 100644
index 0000000..ba1c769
--- /dev/null
+++ b/.changeset/angry-steaks-occur.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Accordion: color updates
diff --git a/.changeset/dirty-garlics-enjoy.md b/.changeset/dirty-garlics-enjoy.md
new file mode 100644
index 0000000..cacdbac
--- /dev/null
+++ b/.changeset/dirty-garlics-enjoy.md
@@ -0,0 +1,5 @@
+---
+"paris": minor
+---
+
+Tabs: color and styling updates, kind `full`, `barStyle` thick or thin, `backgroundStyle` with glass option
diff --git a/.changeset/giant-pants-breathe.md b/.changeset/giant-pants-breathe.md
new file mode 100644
index 0000000..609f0c8
--- /dev/null
+++ b/.changeset/giant-pants-breathe.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Styled Link: color updates
diff --git a/.changeset/giant-taxis-think.md b/.changeset/giant-taxis-think.md
new file mode 100644
index 0000000..f74cdad
--- /dev/null
+++ b/.changeset/giant-taxis-think.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Table: color and styling updates
diff --git a/.changeset/hip-baboons-watch.md b/.changeset/hip-baboons-watch.md
new file mode 100644
index 0000000..d2e3cc1
--- /dev/null
+++ b/.changeset/hip-baboons-watch.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Toast: color updates
diff --git a/.changeset/metal-dogs-suffer.md b/.changeset/metal-dogs-suffer.md
new file mode 100644
index 0000000..8ae6e5b
--- /dev/null
+++ b/.changeset/metal-dogs-suffer.md
@@ -0,0 +1,5 @@
+---
+"paris": minor
+---
+
+Theme: updated “materials” variables, added accent glows to “lighting”
diff --git a/.changeset/orange-trains-reflect.md b/.changeset/orange-trains-reflect.md
new file mode 100644
index 0000000..d4baa97
--- /dev/null
+++ b/.changeset/orange-trains-reflect.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Popover: color updates
diff --git a/.changeset/polite-vans-shave.md b/.changeset/polite-vans-shave.md
new file mode 100644
index 0000000..4c6bb09
--- /dev/null
+++ b/.changeset/polite-vans-shave.md
@@ -0,0 +1,5 @@
+---
+"paris": minor
+---
+
+Drawer: color and styling updates, new sizes `fullWithMargin` and `fullOnMobile` with tweaked `full` behavior, `bottomPanel` with glass material and removed padding, `additionalActions` available on paginated drawers, `overlayStyle` "greyed" renamed to "grey"
diff --git a/.changeset/real-carrots-end.md b/.changeset/real-carrots-end.md
new file mode 100644
index 0000000..9f100ff
--- /dev/null
+++ b/.changeset/real-carrots-end.md
@@ -0,0 +1,5 @@
+---
+"paris": minor
+---
+
+Dialog: color and styling updates, `overlayStyle` with default `blur` and option `grey`
diff --git a/.changeset/real-kids-suffer.md b/.changeset/real-kids-suffer.md
new file mode 100644
index 0000000..f4408d0
--- /dev/null
+++ b/.changeset/real-kids-suffer.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Checkbox: color updates
diff --git a/.changeset/rich-geckos-draw.md b/.changeset/rich-geckos-draw.md
new file mode 100644
index 0000000..ea5cec6
--- /dev/null
+++ b/.changeset/rich-geckos-draw.md
@@ -0,0 +1,5 @@
+---
+"paris": minor
+---
+
+Callout: color updates, default ArrowRight icon
diff --git a/.changeset/seven-walls-dance.md b/.changeset/seven-walls-dance.md
new file mode 100644
index 0000000..bddb909
--- /dev/null
+++ b/.changeset/seven-walls-dance.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Select: color and styling updates, fixed disabled states
diff --git a/.changeset/silver-hornets-begin.md b/.changeset/silver-hornets-begin.md
new file mode 100644
index 0000000..6292a90
--- /dev/null
+++ b/.changeset/silver-hornets-begin.md
@@ -0,0 +1,5 @@
+---
+"paris": minor
+---
+
+Tag: color and styling updates, `shape` prop for `square` variant with `icon`, `corners` prop for border and radius, planned` and `void` kinds, `colorLevel` to adjust color background
diff --git a/.changeset/spicy-cats-buy.md b/.changeset/spicy-cats-buy.md
new file mode 100644
index 0000000..a190f0b
--- /dev/null
+++ b/.changeset/spicy-cats-buy.md
@@ -0,0 +1,5 @@
+---
+"paris": minor
+---
+
+Button: color updates, added `medium` size, `corners` prop for border-radius, removed `rounded` shape
diff --git a/.changeset/spicy-geese-appear.md b/.changeset/spicy-geese-appear.md
new file mode 100644
index 0000000..874620a
--- /dev/null
+++ b/.changeset/spicy-geese-appear.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Menu: color updates
diff --git a/.changeset/spotty-cameras-count.md b/.changeset/spotty-cameras-count.md
new file mode 100644
index 0000000..d174cbf
--- /dev/null
+++ b/.changeset/spotty-cameras-count.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+TextArea: color updates, enhancer updates to match Input
diff --git a/.changeset/tender-drinks-play.md b/.changeset/tender-drinks-play.md
new file mode 100644
index 0000000..077e7aa
--- /dev/null
+++ b/.changeset/tender-drinks-play.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Card: color updates
diff --git a/.changeset/tough-ghosts-type.md b/.changeset/tough-ghosts-type.md
new file mode 100644
index 0000000..47625d9
--- /dev/null
+++ b/.changeset/tough-ghosts-type.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Avatar: color updates
diff --git a/.changeset/warm-badgers-attend.md b/.changeset/warm-badgers-attend.md
new file mode 100644
index 0000000..931ecc1
--- /dev/null
+++ b/.changeset/warm-badgers-attend.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Combobox: color and styling updates
diff --git a/.changeset/wicked-parrots-watch.md b/.changeset/wicked-parrots-watch.md
new file mode 100644
index 0000000..00d3928
--- /dev/null
+++ b/.changeset/wicked-parrots-watch.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Icon: `Check` and `ArrowRight`
diff --git a/.changeset/wild-wasps-rescue.md b/.changeset/wild-wasps-rescue.md
new file mode 100644
index 0000000..a2e3993
--- /dev/null
+++ b/.changeset/wild-wasps-rescue.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Input: color and styling updates, enhancer color states
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 56c26e1..c9c28fa 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -17,8 +17,8 @@ const config: StorybookConfig = {
   previewHead: head => `${head}
 <style>
     body {
-        color: var(--pte-colors-contentPrimary);
-        background-color: var(--pte-colors-backgroundPrimary);
+        color: var(--pte-new-colors-contentPrimary);
+        background-color: var(--pte-new-colors-backgroundPrimary);
         transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     }
     
diff --git a/.storybook/themes.ts b/.storybook/themes.ts
index 6b54f37..ff53451 100644
--- a/.storybook/themes.ts
+++ b/.storybook/themes.ts
@@ -18,13 +18,13 @@ export const Light = create({
     ...sharedConfig,
     base: 'light',
     brandImage: 'https://fast.slingshot.fm/sling/logo/paris-sb.png',
-    appBg: LightTheme.colors.backgroundPrimary,
+    appBg: LightTheme.new.colors.backgroundPrimary,
 });
 
 export const Dark = create({
     ...sharedConfig,
     base: 'dark',
     brandImage: 'https://fast.slingshot.fm/sling/logo/paris-sb-white.png',
-    appBg: DarkTheme.colors.backgroundPrimary,
-    appContentBg: DarkTheme.colors.backgroundPrimary,
+    appBg: DarkTheme.new.colors.backgroundPrimary,
+    appContentBg: DarkTheme.new.colors.backgroundPrimary,
 });
diff --git a/public/pte.css b/public/pte.css
index bb57239..863a1e9 100644
--- a/public/pte.css
+++ b/public/pte.css
@@ -2,6 +2,375 @@
 /* This is automatically generated. Do not edit directly. */
 
 :root {
+    --pte-new-tokens-colors-white: #ffffff;
+    --pte-new-tokens-colors-black: #000000;
+    --pte-new-tokens-colors-grey100: #fcfcfc;
+    --pte-new-tokens-colors-grey200: #f8f8f8;
+    --pte-new-tokens-colors-grey300: #f3f3f3;
+    --pte-new-tokens-colors-grey400: #eeeeee;
+    --pte-new-tokens-colors-grey500: #e8e8e8;
+    --pte-new-tokens-colors-grey600: #e2e2e2;
+    --pte-new-tokens-colors-grey700: #dbdbdb;
+    --pte-new-tokens-colors-grey800: #d1d1d1;
+    --pte-new-tokens-colors-grey900: #c7c7c7;
+    --pte-new-tokens-colors-grey1000: #afafaf;
+    --pte-new-tokens-colors-grey1100: #9d9d9d;
+    --pte-new-tokens-colors-grey1200: #8a8a8a;
+    --pte-new-tokens-colors-grey1300: #7f7f7f;
+    --pte-new-tokens-colors-grey1400: #6e6e6e;
+    --pte-new-tokens-colors-grey1500: #5f5f5f;
+    --pte-new-tokens-colors-grey1600: #4f4f4f;
+    --pte-new-tokens-colors-grey1700: #3e3e3e;
+    --pte-new-tokens-colors-grey1800: #343434;
+    --pte-new-tokens-colors-grey1900: #2e2e2e;
+    --pte-new-tokens-colors-grey2000: #282828;
+    --pte-new-tokens-colors-grey2100: #212121;
+    --pte-new-tokens-colors-grey2200: #1c1c1c;
+    --pte-new-tokens-colors-grey2300: #171717;
+    --pte-new-tokens-colors-grey2400: #121212;
+    --pte-new-tokens-colors-red100: #fff0ee;
+    --pte-new-tokens-colors-red200: #ffe1dc;
+    --pte-new-tokens-colors-red300: #ffd4cc;
+    --pte-new-tokens-colors-red400: #fd4d2e;
+    --pte-new-tokens-colors-red500: #eb2a07;
+    --pte-new-tokens-colors-red600: #541a0f;
+    --pte-new-tokens-colors-red700: #3f1811;
+    --pte-new-tokens-colors-red800: #2d130e;
+    --pte-new-tokens-colors-yellow100: #fff8e8;
+    --pte-new-tokens-colors-yellow200: #fff3db;
+    --pte-new-tokens-colors-yellow300: #ffefcf;
+    --pte-new-tokens-colors-yellow400: #ffbf3f;
+    --pte-new-tokens-colors-yellow500: #f4a60b;
+    --pte-new-tokens-colors-yellow600: #6c4b0b;
+    --pte-new-tokens-colors-yellow700: #402c05;
+    --pte-new-tokens-colors-yellow800: #2b1e02;
+    --pte-new-tokens-colors-green100: #edfcf2;
+    --pte-new-tokens-colors-green200: #dffae8;
+    --pte-new-tokens-colors-green300: #d0f8df;
+    --pte-new-tokens-colors-green400: #08c94e;
+    --pte-new-tokens-colors-green500: #05ab41;
+    --pte-new-tokens-colors-green600: #053917;
+    --pte-new-tokens-colors-green700: #052a12;
+    --pte-new-tokens-colors-green800: #021d0b;
+    --pte-new-tokens-colors-teal100: #ecfefb;
+    --pte-new-tokens-colors-teal200: #ddfffa;
+    --pte-new-tokens-colors-teal300: #cffbf4;
+    --pte-new-tokens-colors-teal400: #1deecd;
+    --pte-new-tokens-colors-teal500: #1ad4b6;
+    --pte-new-tokens-colors-teal600: #005548;
+    --pte-new-tokens-colors-teal700: #004137;
+    --pte-new-tokens-colors-teal800: #002620;
+    --pte-new-tokens-colors-gradientTeal: linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%);
+    --pte-new-tokens-colors-gradientOrange: linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%);
+    --pte-new-tokens-colors-gradientPink: linear-gradient(90deg, #FF4BED 0%, #F6418D 100%);
+    --pte-new-tokens-colors-gradientRainbow: linear-gradient(90deg, #1DEECD 0%, #26EDED 12.5%, #FFA8F1 71.35%, #FFD7A8 100%);
+    --pte-new-utils-defaultUserSelect: none;
+    --pte-new-colors-contentPrimary: #121212;
+    --pte-new-colors-contentSecondary: #4f4f4f;
+    --pte-new-colors-contentTertiary: #6e6e6e;
+    --pte-new-colors-contentDisabled: #9d9d9d;
+    --pte-new-colors-contentAccent: #1deecd;
+    --pte-new-colors-contentNegative: #fd4d2e;
+    --pte-new-colors-contentWarning: #f4a60b;
+    --pte-new-colors-contentPositive: #08c94e;
+    --pte-new-colors-contentInversePrimary: #ffffff;
+    --pte-new-colors-contentInverseSecondary: #e2e2e2;
+    --pte-new-colors-contentInverseTertiary: #afafaf;
+    --pte-new-colors-contentInverseDisabled: #6e6e6e;
+    --pte-new-colors-backgroundPrimary: #ffffff;
+    --pte-new-colors-backgroundSecondary: #fcfcfc;
+    --pte-new-colors-backgroundMobilePrimary: #ffffff;
+    --pte-new-colors-backgroundMobileSecondary: #fcfcfc;
+    --pte-new-colors-backgroundNegative: #fff0ee;
+    --pte-new-colors-backgroundNegativeMedium: #ffe1dc;
+    --pte-new-colors-backgroundNegativeStrong: #ffd4cc;
+    --pte-new-colors-backgroundWarning: #fff8e8;
+    --pte-new-colors-backgroundWarningMedium: #fff3db;
+    --pte-new-colors-backgroundWarningStrong: #ffefcf;
+    --pte-new-colors-backgroundPositive: #edfcf2;
+    --pte-new-colors-backgroundPositiveMedium: #dffae8;
+    --pte-new-colors-backgroundPositiveStrong: #d0f8df;
+    --pte-new-colors-backgroundAccent: #ecfefb;
+    --pte-new-colors-backgroundAccentMedium: #ddfffa;
+    --pte-new-colors-backgroundAccentStrong: #cffbf4;
+    --pte-new-colors-surfacePrimary: #ffffff;
+    --pte-new-colors-surfaceSecondary: #f8f8f8;
+    --pte-new-colors-surfaceTertiary: #eeeeee;
+    --pte-new-colors-surfaceQuaternary: #fcfcfc;
+    --pte-new-colors-borderSubtle: #eeeeee;
+    --pte-new-colors-borderMedium: #e2e2e2;
+    --pte-new-colors-borderStrong: #dbdbdb;
+    --pte-new-colors-borderUltrastrong: #6e6e6e;
+    --pte-new-colors-buttonFill: #121212;
+    --pte-new-colors-buttonFillHover: #2e2e2e;
+    --pte-new-colors-buttonFillDisabled: #e8e8e8;
+    --pte-new-colors-buttonFillHoverAlt: #f3f3f3;
+    --pte-new-colors-buttonFillHoverNegative: #fff0ee;
+    --pte-new-colors-buttonBorder: #121212;
+    --pte-new-colors-buttonBorderDisabled: #afafaf;
+    --pte-new-colors-buttonBorderNegative: #fd4d2e;
+    --pte-new-colors-inputFill: #f3f3f3;
+    --pte-new-colors-inputFillFocus: #eeeeee;
+    --pte-new-colors-inputFillNegative: #fff0ee;
+    --pte-new-colors-inputFillDisabled: #f8f8f8;
+    --pte-new-colors-inputBorderFocus: #6e6e6e;
+    --pte-new-colors-inputBorderNegative: #fd4d2e;
+    --pte-new-colors-overlaySubtle: rgba(0, 0, 0, 0.02);
+    --pte-new-colors-overlayMedium: rgba(0, 0, 0, 0.03);
+    --pte-new-colors-overlayStrong: rgba(0, 0, 0, 0.05);
+    --pte-new-colors-overlayInverseSubtle: rgba(255, 255, 255, 0.02);
+    --pte-new-colors-overlayInverseMedium: rgba(255, 255, 255, 0.05);
+    --pte-new-colors-overlayWhiteSubtle: rgba(255, 255, 255, 0.04);
+    --pte-new-colors-overlayWhiteMedium: rgba(255, 255, 255, 0.09);
+    --pte-new-colors-overlayWhiteStrong: rgba(255, 255, 255, 0.11);
+    --pte-new-colors-overlayWhiteUltrastrong: rgba(255, 255, 255, 0.85);
+    --pte-new-colors-overlayBlackSubtle: rgba(0, 0, 0, 0.04);
+    --pte-new-colors-overlayBlackMedium: rgba(0, 0, 0, 0.07);
+    --pte-new-colors-overlayBlackStrong: rgba(0, 0, 0, 0.1);
+    --pte-new-colors-overlayPageBackground: rgba(60, 60, 60, 0.65);
+    --pte-new-colors-overlayRed: rgba(253, 77, 46, 0.07);
+    --pte-new-colors-overlayTeal: rgba(29, 238, 205, 0.1);
+    --pte-new-blurs-strong: blur(17.5px);
+    --pte-new-blurs-ultrastrong: blur(37.5px);
+    --pte-new-typography-fontFamily: "Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+    --pte-new-typography-italicLetterSpacing: -0.01em;
+    --pte-new-typography-verticalMetricsAdjust: 1px;
+    --pte-new-typography-fontWeights-thin: 100;
+    --pte-new-typography-fontWeights-extralight: 200;
+    --pte-new-typography-fontWeights-light: 300;
+    --pte-new-typography-fontWeights-normal: 400;
+    --pte-new-typography-fontWeights-medium: 500;
+    --pte-new-typography-fontWeights-semibold: 600;
+    --pte-new-typography-fontWeights-bold: 700;
+    --pte-new-typography-fontWeights-extrabold: 800;
+    --pte-new-typography-fontWeights-black: 900;
+    --pte-new-typography-fontWeights-extrablack: 950;
+    --pte-new-typography-fontStyles-italic: italic;
+    --pte-new-typography-fontStyles-normal: normal;
+    --pte-new-typography-styles-displayLarge-fontStyle: normal;
+    --pte-new-typography-styles-displayLarge-letterSpacing: -0.01em;
+    --pte-new-typography-styles-displayLarge-fontWeight: 600;
+    --pte-new-typography-styles-displayLarge-textTransform: none;
+    --pte-new-typography-styles-displayLarge-fontSize: 72px;
+    --pte-new-typography-styles-displayLarge-lineHeight: 86px;
+    --pte-new-typography-styles-displayMedium-fontStyle: normal;
+    --pte-new-typography-styles-displayMedium-letterSpacing: -0.01em;
+    --pte-new-typography-styles-displayMedium-fontWeight: 600;
+    --pte-new-typography-styles-displayMedium-textTransform: none;
+    --pte-new-typography-styles-displayMedium-fontSize: 52px;
+    --pte-new-typography-styles-displayMedium-lineHeight: 62px;
+    --pte-new-typography-styles-display-fontStyle: normal;
+    --pte-new-typography-styles-display-letterSpacing: -0.01em;
+    --pte-new-typography-styles-display-fontWeight: 600;
+    --pte-new-typography-styles-display-textTransform: none;
+    --pte-new-typography-styles-display-fontSize: 42px;
+    --pte-new-typography-styles-display-lineHeight: 50.4px;
+    --pte-new-typography-styles-displaySmall-fontStyle: normal;
+    --pte-new-typography-styles-displaySmall-letterSpacing: -0.01em;
+    --pte-new-typography-styles-displaySmall-fontWeight: 600;
+    --pte-new-typography-styles-displaySmall-textTransform: none;
+    --pte-new-typography-styles-displaySmall-fontSize: 34px;
+    --pte-new-typography-styles-displaySmall-lineHeight: 41px;
+    --pte-new-typography-styles-headingLarge-fontStyle: normal;
+    --pte-new-typography-styles-headingLarge-letterSpacing: normal;
+    --pte-new-typography-styles-headingLarge-fontWeight: 600;
+    --pte-new-typography-styles-headingLarge-textTransform: none;
+    --pte-new-typography-styles-headingLarge-fontSize: 32px;
+    --pte-new-typography-styles-headingLarge-lineHeight: 38px;
+    --pte-new-typography-styles-headingMedium-fontStyle: normal;
+    --pte-new-typography-styles-headingMedium-letterSpacing: normal;
+    --pte-new-typography-styles-headingMedium-fontWeight: 600;
+    --pte-new-typography-styles-headingMedium-textTransform: none;
+    --pte-new-typography-styles-headingMedium-fontSize: 28px;
+    --pte-new-typography-styles-headingMedium-lineHeight: 34px;
+    --pte-new-typography-styles-headingSmall-fontStyle: normal;
+    --pte-new-typography-styles-headingSmall-letterSpacing: normal;
+    --pte-new-typography-styles-headingSmall-fontWeight: 600;
+    --pte-new-typography-styles-headingSmall-textTransform: none;
+    --pte-new-typography-styles-headingSmall-fontSize: 24px;
+    --pte-new-typography-styles-headingSmall-lineHeight: 29px;
+    --pte-new-typography-styles-headingXSmall-fontStyle: normal;
+    --pte-new-typography-styles-headingXSmall-letterSpacing: normal;
+    --pte-new-typography-styles-headingXSmall-fontWeight: 600;
+    --pte-new-typography-styles-headingXSmall-textTransform: none;
+    --pte-new-typography-styles-headingXSmall-fontSize: 20px;
+    --pte-new-typography-styles-headingXSmall-lineHeight: 24px;
+    --pte-new-typography-styles-headingXXSmall-fontStyle: normal;
+    --pte-new-typography-styles-headingXXSmall-letterSpacing: normal;
+    --pte-new-typography-styles-headingXXSmall-fontWeight: 600;
+    --pte-new-typography-styles-headingXXSmall-textTransform: none;
+    --pte-new-typography-styles-headingXXSmall-fontSize: 18px;
+    --pte-new-typography-styles-headingXXSmall-lineHeight: 22px;
+    --pte-new-typography-styles-labelXLarge-fontStyle: normal;
+    --pte-new-typography-styles-labelXLarge-letterSpacing: 0.1em;
+    --pte-new-typography-styles-labelXLarge-fontWeight: 600;
+    --pte-new-typography-styles-labelXLarge-textTransform: uppercase;
+    --pte-new-typography-styles-labelXLarge-fontSize: 18px;
+    --pte-new-typography-styles-labelXLarge-lineHeight: 22px;
+    --pte-new-typography-styles-labelLarge-fontStyle: normal;
+    --pte-new-typography-styles-labelLarge-letterSpacing: 0.1em;
+    --pte-new-typography-styles-labelLarge-fontWeight: 600;
+    --pte-new-typography-styles-labelLarge-textTransform: uppercase;
+    --pte-new-typography-styles-labelLarge-fontSize: 16px;
+    --pte-new-typography-styles-labelLarge-lineHeight: 19px;
+    --pte-new-typography-styles-labelMedium-fontStyle: normal;
+    --pte-new-typography-styles-labelMedium-letterSpacing: 0.1em;
+    --pte-new-typography-styles-labelMedium-fontWeight: 600;
+    --pte-new-typography-styles-labelMedium-textTransform: uppercase;
+    --pte-new-typography-styles-labelMedium-fontSize: 14px;
+    --pte-new-typography-styles-labelMedium-lineHeight: 17px;
+    --pte-new-typography-styles-labelSmall-fontStyle: normal;
+    --pte-new-typography-styles-labelSmall-letterSpacing: 0.1em;
+    --pte-new-typography-styles-labelSmall-fontWeight: 600;
+    --pte-new-typography-styles-labelSmall-textTransform: uppercase;
+    --pte-new-typography-styles-labelSmall-fontSize: 12px;
+    --pte-new-typography-styles-labelSmall-lineHeight: 14px;
+    --pte-new-typography-styles-labelXSmall-fontStyle: normal;
+    --pte-new-typography-styles-labelXSmall-letterSpacing: 0.1em;
+    --pte-new-typography-styles-labelXSmall-fontWeight: 600;
+    --pte-new-typography-styles-labelXSmall-textTransform: uppercase;
+    --pte-new-typography-styles-labelXSmall-fontSize: 10px;
+    --pte-new-typography-styles-labelXSmall-lineHeight: 12px;
+    --pte-new-typography-styles-labelXXSmall-fontStyle: normal;
+    --pte-new-typography-styles-labelXXSmall-letterSpacing: 0.1em;
+    --pte-new-typography-styles-labelXXSmall-fontWeight: 600;
+    --pte-new-typography-styles-labelXXSmall-textTransform: uppercase;
+    --pte-new-typography-styles-labelXXSmall-fontSize: 9px;
+    --pte-new-typography-styles-labelXXSmall-lineHeight: 10.8px;
+    --pte-new-typography-styles-paragraphLarge-fontStyle: normal;
+    --pte-new-typography-styles-paragraphLarge-letterSpacing: normal;
+    --pte-new-typography-styles-paragraphLarge-fontWeight: 400;
+    --pte-new-typography-styles-paragraphLarge-textTransform: none;
+    --pte-new-typography-styles-paragraphLarge-fontSize: 18px;
+    --pte-new-typography-styles-paragraphLarge-lineHeight: 150%;
+    --pte-new-typography-styles-paragraphMedium-fontStyle: normal;
+    --pte-new-typography-styles-paragraphMedium-letterSpacing: normal;
+    --pte-new-typography-styles-paragraphMedium-fontWeight: 400;
+    --pte-new-typography-styles-paragraphMedium-textTransform: none;
+    --pte-new-typography-styles-paragraphMedium-fontSize: 16px;
+    --pte-new-typography-styles-paragraphMedium-lineHeight: 150%;
+    --pte-new-typography-styles-paragraphSmall-fontStyle: normal;
+    --pte-new-typography-styles-paragraphSmall-letterSpacing: normal;
+    --pte-new-typography-styles-paragraphSmall-fontWeight: 400;
+    --pte-new-typography-styles-paragraphSmall-textTransform: none;
+    --pte-new-typography-styles-paragraphSmall-fontSize: 14px;
+    --pte-new-typography-styles-paragraphSmall-lineHeight: 150%;
+    --pte-new-typography-styles-paragraphXSmall-fontStyle: normal;
+    --pte-new-typography-styles-paragraphXSmall-letterSpacing: normal;
+    --pte-new-typography-styles-paragraphXSmall-fontWeight: 400;
+    --pte-new-typography-styles-paragraphXSmall-textTransform: none;
+    --pte-new-typography-styles-paragraphXSmall-fontSize: 12px;
+    --pte-new-typography-styles-paragraphXSmall-lineHeight: 150%;
+    --pte-new-typography-styles-paragraphXXSmall-fontStyle: normal;
+    --pte-new-typography-styles-paragraphXXSmall-letterSpacing: normal;
+    --pte-new-typography-styles-paragraphXXSmall-fontWeight: 400;
+    --pte-new-typography-styles-paragraphXXSmall-textTransform: none;
+    --pte-new-typography-styles-paragraphXXSmall-fontSize: 10px;
+    --pte-new-typography-styles-paragraphXXSmall-lineHeight: 150%;
+    --pte-new-lighting-shallowAbove: 0px -4px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-new-lighting-deepAbove: 0px -8px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-new-lighting-shallowBelow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-new-lighting-deepBelow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-new-lighting-shallowLeft: -20px 0px 40px 0px rgba(0, 0, 0, 0.1);
+    --pte-new-lighting-shallowRight: 20px 0px 40px 0px rgba(0, 0, 0, 0.1);
+    --pte-new-lighting-subtlePopup: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+    --pte-new-lighting-shallowPopup: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
+    --pte-new-lighting-deepPopup: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
+    --pte-new-lighting-glowSubtle1: 0px 0px 3px 0px rgba(29, 238, 205, 0.3);
+    --pte-new-lighting-glowSubtle2: 0px 0px 6px 0px rgba(29, 238, 205, 0.2);
+    --pte-new-lighting-glowSubtle3: 0px 0px 9px 0px rgba(29, 238, 205, 0.1);
+    --pte-new-lighting-glowDeep1: 0px 0px 3px 1px rgba(29, 238, 205, 0.3);
+    --pte-new-lighting-glowDeep2: 0px 0px 9px 3px rgba(29, 238, 205, 0.3);
+    --pte-new-lighting-glowDeep3: 0px 0px 15px 0px rgba(29, 238, 205, 0.2);
+    --pte-new-materials-whiteThin-background: rgba(255, 255, 255, 0.5);
+    --pte-new-materials-whiteRegular-background: rgba(255, 255, 255, 0.85);
+    --pte-new-materials-whiteThick-background: rgba(255, 255, 255, 0.93);
+    --pte-new-materials-blackThin-background: rgba(0, 0, 0, 0.3);
+    --pte-new-materials-blackRegular-background: rgba(0, 0, 0, 0.75);
+    --pte-new-materials-blackThick-background: rgba(0, 0, 0, 0.85);
+    --pte-new-materials-lightGreyUltrathin-background: rgba(191, 191, 191, 0.44);
+    --pte-new-materials-lightGreyUltrathin-backgroundBlend: #303030;
+    --pte-new-materials-lightGreyUltrathin-mixBlendMode: color-dodge;
+    --pte-new-materials-lightGreyThin-background: rgba(166, 166, 166, 0.70);
+    --pte-new-materials-lightGreyThin-backgroundBlend: #3D3D3D;
+    --pte-new-materials-lightGreyThin-mixBlendMode: color-dodge;
+    --pte-new-materials-lightGreyRegular-background: rgba(179, 179, 179, 0.82);
+    --pte-new-materials-lightGreyRegular-backgroundBlend: #434343;
+    --pte-new-materials-lightGreyRegular-mixBlendMode: color-dodge;
+    --pte-new-materials-lightGreyThick-background: rgba(153, 153, 153, 0.97);
+    --pte-new-materials-lightGreyThick-backgroundBlend: #5F5F5F;
+    --pte-new-materials-lightGreyThick-mixBlendMode: color-dodge;
+    --pte-new-materials-darkGreyUltrathin-background: rgba(37, 37, 37, 0.55);
+    --pte-new-materials-darkGreyUltrathin-backgroundBlend: #9C9C9C;
+    --pte-new-materials-darkGreyUltrathin-mixBlendMode: overlay;
+    --pte-new-materials-darkGreyThin-background: rgba(37, 37, 37, 0.70);
+    --pte-new-materials-darkGreyThin-backgroundBlend: #9C9C9C;
+    --pte-new-materials-darkGreyThin-mixBlendMode: overlay;
+    --pte-new-materials-darkGreyRegular-background: rgba(37, 37, 37, 0.82);
+    --pte-new-materials-darkGreyRegular-backgroundBlend: #8C8C8C;
+    --pte-new-materials-darkGreyRegular-mixBlendMode: overlay;
+    --pte-new-materials-darkGreyThick-background: rgba(37, 37, 37, 0.90);
+    --pte-new-materials-darkGreyThick-backgroundBlend: #7C7C7C;
+    --pte-new-materials-darkGreyThick-mixBlendMode: overlay;
+    --pte-new-materials-greyUltrathin-background: rgba(37, 37, 37, 0.55);
+    --pte-new-materials-greyUltrathin-backgroundBlend: #D2D2D2;
+    --pte-new-materials-greyUltrathin-mixBlendMode: overlay;
+    --pte-new-materials-greyThin-background: rgba(37, 37, 37, 0.70);
+    --pte-new-materials-greyThin-backgroundBlend: #CFCFCF;
+    --pte-new-materials-greyThin-mixBlendMode: overlay;
+    --pte-new-materials-greyRegular-background: rgba(37, 37, 37, 0.82);
+    --pte-new-materials-greyRegular-backgroundBlend: #BCBCBC;
+    --pte-new-materials-greyRegular-mixBlendMode: overlay;
+    --pte-new-materials-greyThick-background: rgba(37, 37, 37, 0.90);
+    --pte-new-materials-greyThick-backgroundBlend: #B6B6B6;
+    --pte-new-materials-greyThick-mixBlendMode: overlay;
+    --pte-new-materials-primaryThin-background: rgba(255, 255, 255, 0.5);
+    --pte-new-materials-primaryRegular-background: rgba(255, 255, 255, 0.85);
+    --pte-new-materials-primaryThick-background: rgba(255, 255, 255, 0.93);
+    --pte-new-materials-secondaryUltrathin-background: rgba(191, 191, 191, 0.44);
+    --pte-new-materials-secondaryUltrathin-backgroundBlend: #303030;
+    --pte-new-materials-secondaryUltrathin-mixBlendMode: color-dodge;
+    --pte-new-materials-secondaryThin-background: rgba(166, 166, 166, 0.70);
+    --pte-new-materials-secondaryThin-backgroundBlend: #3D3D3D;
+    --pte-new-materials-secondaryThin-mixBlendMode: color-dodge;
+    --pte-new-materials-secondaryRegular-background: rgba(179, 179, 179, 0.82);
+    --pte-new-materials-secondaryRegular-backgroundBlend: #434343;
+    --pte-new-materials-secondaryRegular-mixBlendMode: color-dodge;
+    --pte-new-materials-secondaryThick-background: rgba(153, 153, 153, 0.97);
+    --pte-new-materials-secondaryThick-backgroundBlend: #5F5F5F;
+    --pte-new-materials-secondaryThick-mixBlendMode: color-dodge;
+    --pte-new-borders-radius-pill: 1000px;
+    --pte-new-borders-radius-circle: 100%;
+    --pte-new-borders-radius-rectangle: 0px;
+    --pte-new-borders-radius-rounded: 8px;
+    --pte-new-borders-radius-roundedSmall: 4px;
+    --pte-new-borders-radius-roundedLarge: 12px;
+    --pte-new-borders-radius-roundedXL: 16px;
+    --pte-new-borders-dropdown-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-new-borders-dropdown-color: transparent;
+    --pte-new-borders-dropdown-border: none;
+    --pte-new-surfaces-dialog-border: 8px solid rgba(0, 0, 0, 0.2);
+    --pte-new-surfaces-dialog-outline: 1px solid rgba(0, 0, 0, 0.25);
+    --pte-new-surfaces-dialog-background: rgba(255, 255, 255, 0.9);
+    --pte-new-surfaces-dialog-backdropFilter: blur(6px);
+    --pte-new-animations-interaction: 200ms cubic-bezier(0.5, 1, 0.89, 1);
+    --pte-new-animations-timing-easeInOut: cubic-bezier(0.42, 0.0, 0.58, 1.0);
+    --pte-new-animations-timing-easeOut: cubic-bezier(0.0, 0.0, 0.58, 1.0);
+    --pte-new-animations-timing-easeIn: cubic-bezier(0.42, 0.0, 1.0, 1.0);
+    --pte-new-animations-timing-easeOutQuad: cubic-bezier(0.5, 1, 0.89, 1);
+    --pte-new-animations-timing-easeInQuad: cubic-bezier(0.11, 0, 0.5, 0);
+    --pte-new-animations-timing-easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
+    --pte-new-animations-timing-default: cubic-bezier(0.0, 0.0, 0.58, 1.0);
+    --pte-new-animations-duration-rapid: 50ms;
+    --pte-new-animations-duration-fast: 100ms;
+    --pte-new-animations-duration-normal: 200ms;
+    --pte-new-animations-duration-relaxed: 300ms;
+    --pte-new-animations-duration-slow: 400ms;
+    --pte-new-animations-duration-gradual: 600ms;
+    --pte-new-breakpoints-sm: 480px;
+    --pte-new-breakpoints-md: 640px;
+    --pte-new-breakpoints-lg: 768px;
+    --pte-new-breakpoints-xl: 1024px;
     --pte-tokens-colors-black: #060606;
     --pte-tokens-colors-white: #ffffff;
     --pte-tokens-colors-teal: #1deecd;
@@ -55,6 +424,68 @@
     --pte-tokens-colors-gradientTeal: linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%);
     --pte-tokens-colors-gradientOrange: linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%);
     --pte-tokens-colors-gradientPink: linear-gradient(90deg, #FF4BED 0%, #F7418D 100%);
+    --pte-tokens-new-colors-white: #ffffff;
+    --pte-tokens-new-colors-black: #000000;
+    --pte-tokens-new-colors-grey100: #fcfcfc;
+    --pte-tokens-new-colors-grey200: #f8f8f8;
+    --pte-tokens-new-colors-grey300: #f3f3f3;
+    --pte-tokens-new-colors-grey400: #eeeeee;
+    --pte-tokens-new-colors-grey500: #e8e8e8;
+    --pte-tokens-new-colors-grey600: #e2e2e2;
+    --pte-tokens-new-colors-grey700: #dbdbdb;
+    --pte-tokens-new-colors-grey800: #d1d1d1;
+    --pte-tokens-new-colors-grey900: #c7c7c7;
+    --pte-tokens-new-colors-grey1000: #afafaf;
+    --pte-tokens-new-colors-grey1100: #9d9d9d;
+    --pte-tokens-new-colors-grey1200: #8a8a8a;
+    --pte-tokens-new-colors-grey1300: #7f7f7f;
+    --pte-tokens-new-colors-grey1400: #6e6e6e;
+    --pte-tokens-new-colors-grey1500: #5f5f5f;
+    --pte-tokens-new-colors-grey1600: #4f4f4f;
+    --pte-tokens-new-colors-grey1700: #3e3e3e;
+    --pte-tokens-new-colors-grey1800: #343434;
+    --pte-tokens-new-colors-grey1900: #2e2e2e;
+    --pte-tokens-new-colors-grey2000: #282828;
+    --pte-tokens-new-colors-grey2100: #212121;
+    --pte-tokens-new-colors-grey2200: #1c1c1c;
+    --pte-tokens-new-colors-grey2300: #171717;
+    --pte-tokens-new-colors-grey2400: #121212;
+    --pte-tokens-new-colors-red100: #fff0ee;
+    --pte-tokens-new-colors-red200: #ffe1dc;
+    --pte-tokens-new-colors-red300: #ffd4cc;
+    --pte-tokens-new-colors-red400: #fd4d2e;
+    --pte-tokens-new-colors-red500: #eb2a07;
+    --pte-tokens-new-colors-red600: #541a0f;
+    --pte-tokens-new-colors-red700: #3f1811;
+    --pte-tokens-new-colors-red800: #2d130e;
+    --pte-tokens-new-colors-yellow100: #fff8e8;
+    --pte-tokens-new-colors-yellow200: #fff3db;
+    --pte-tokens-new-colors-yellow300: #ffefcf;
+    --pte-tokens-new-colors-yellow400: #ffbf3f;
+    --pte-tokens-new-colors-yellow500: #f4a60b;
+    --pte-tokens-new-colors-yellow600: #6c4b0b;
+    --pte-tokens-new-colors-yellow700: #402c05;
+    --pte-tokens-new-colors-yellow800: #2b1e02;
+    --pte-tokens-new-colors-green100: #edfcf2;
+    --pte-tokens-new-colors-green200: #dffae8;
+    --pte-tokens-new-colors-green300: #d0f8df;
+    --pte-tokens-new-colors-green400: #08c94e;
+    --pte-tokens-new-colors-green500: #05ab41;
+    --pte-tokens-new-colors-green600: #053917;
+    --pte-tokens-new-colors-green700: #052a12;
+    --pte-tokens-new-colors-green800: #021d0b;
+    --pte-tokens-new-colors-teal100: #ecfefb;
+    --pte-tokens-new-colors-teal200: #ddfffa;
+    --pte-tokens-new-colors-teal300: #cffbf4;
+    --pte-tokens-new-colors-teal400: #1deecd;
+    --pte-tokens-new-colors-teal500: #1ad4b6;
+    --pte-tokens-new-colors-teal600: #005548;
+    --pte-tokens-new-colors-teal700: #004137;
+    --pte-tokens-new-colors-teal800: #002620;
+    --pte-tokens-new-colors-gradientTeal: linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%);
+    --pte-tokens-new-colors-gradientOrange: linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%);
+    --pte-tokens-new-colors-gradientPink: linear-gradient(90deg, #FF4BED 0%, #F6418D 100%);
+    --pte-tokens-new-colors-gradientRainbow: linear-gradient(90deg, #1DEECD 0%, #26EDED 12.5%, #FFA8F1 71.35%, #FFD7A8 100%);
     --pte-utils-defaultUserSelect: none;
     --pte-colors-black: #060606;
     --pte-colors-white: #ffffff;
@@ -87,6 +518,7 @@
     --pte-colors-backgroundInverseSecondary: #252525;
     --pte-colors-backgroundInverseTertiary: #2e2e2e;
     --pte-colors-backgroundInverseNegative: #331611;
+    --pte-colors-backgroundInverseWarning: #554016;
     --pte-colors-backgroundInversePositive: #063717;
     --pte-colors-backgroundOverlayLight: rgba(255, 255, 255, 0.07);
     --pte-colors-backgroundOverlayXLight: rgba(255, 255, 255, 0.1);
@@ -236,15 +668,15 @@
     --pte-typography-styles-paragraphXXSmall-textTransform: none;
     --pte-typography-styles-paragraphXXSmall-fontSize: 10px;
     --pte-typography-styles-paragraphXXSmall-lineHeight: 150%;
-    --pte-lighting-shallowBelow: 0px 4px 20px rgba(0, 0, 0, 0.2);
-    --pte-lighting-deepBelow: 0px 8px 20px rgba(0, 0, 0, 0.2);
-    --pte-lighting-shallowAbove: 0px -4px 20px rgba(0, 0, 0, 0.2);
-    --pte-lighting-deepAbove: 0px -8px 20px rgba(0, 0, 0, 0.2);
-    --pte-lighting-shallowPopup: 0px 0px 30px rgba(0, 0, 0, 0.2);
-    --pte-lighting-deepPopup: 0px 0px 40px rgba(0, 0, 0, 0.2);
-    --pte-lighting-subtlePopup: 0px 0px 10px rgba(0, 0, 0, 0.1);
-    --pte-lighting-shallowLeft: -20px 0px 40px rgba(0, 0, 0, 0.1);
-    --pte-lighting-shallowRight: 20px 0px 40px rgba(0, 0, 0, 0.1);
+    --pte-lighting-shallowAbove: 0px -4px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-lighting-deepAbove: 0px -8px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-lighting-shallowBelow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-lighting-deepBelow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
+    --pte-lighting-shallowLeft: -20px 0px 40px 0px rgba(0, 0, 0, 0.1);
+    --pte-lighting-shallowRight: 20px 0px 40px 0px rgba(0, 0, 0, 0.1);
+    --pte-lighting-subtlePopup: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+    --pte-lighting-shallowPopup: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
+    --pte-lighting-deepPopup: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
     --pte-borders-radius-pill: 1000px;
     --pte-borders-radius-circle: 100%;
     --pte-borders-radius-rectangle: 0px;
@@ -252,7 +684,7 @@
     --pte-borders-radius-roundedSmall: 4px;
     --pte-borders-radius-roundedLarge: 12px;
     --pte-borders-radius-roundedXL: 16px;
-    --pte-borders-dropdown-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+    --pte-borders-dropdown-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
     --pte-borders-dropdown-color: transparent;
     --pte-borders-dropdown-border: none;
     --pte-surfaces-dialog-border: 8px solid rgba(0, 0, 0, 0.2);
diff --git a/src/helpers/useIsMounted.ts b/src/helpers/useIsMounted.ts
new file mode 100644
index 0000000..63d9d0c
--- /dev/null
+++ b/src/helpers/useIsMounted.ts
@@ -0,0 +1,17 @@
+// Copied from https://usehooks-ts.com/react-hook/use-is-mounted
+
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useIsMounted(): () => boolean {
+    const isMounted = useRef(false);
+
+    useEffect(() => {
+        isMounted.current = true;
+
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+    return useCallback(() => isMounted.current, []);
+}
diff --git a/src/helpers/useResizeObserver.ts b/src/helpers/useResizeObserver.ts
new file mode 100644
index 0000000..7c8f452
--- /dev/null
+++ b/src/helpers/useResizeObserver.ts
@@ -0,0 +1,97 @@
+// Copied from https://usehooks-ts.com/react-hook/use-resize-observer
+
+import { useEffect, useRef, useState } from 'react';
+
+import type { RefObject } from 'react';
+
+import { useIsMounted } from './useIsMounted';
+
+type Size = {
+    width: number | undefined
+    height: number | undefined
+};
+
+type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+    ref: RefObject<T>
+    onResize?: (size: Size) => void
+    box?: 'border-box' | 'content-box' | 'device-pixel-content-box'
+};
+
+const initialSize: Size = {
+    width: undefined,
+    height: undefined,
+};
+
+export function useResizeObserver<T extends HTMLElement = HTMLElement>(
+    options: UseResizeObserverOptions<T>,
+): Size {
+    const { ref, box = 'content-box' } = options;
+    const [{ width, height }, setSize] = useState<Size>(initialSize);
+    const isMounted = useIsMounted();
+    const previousSize = useRef<Size>({ ...initialSize });
+    const onResize = useRef<((size: Size) => void) | undefined>(undefined);
+    onResize.current = options.onResize;
+
+    useEffect(() => {
+        if (!ref.current) return;
+
+        if (typeof window === 'undefined' || !('ResizeObserver' in window)) return;
+
+        const observer = new ResizeObserver(([entry]) => {
+            const boxProp = box === 'border-box'
+                ? 'borderBoxSize'
+                : box === 'device-pixel-content-box'
+                    ? 'devicePixelContentBoxSize'
+                    : 'contentBoxSize';
+
+            const newWidth = extractSize(entry, boxProp, 'inlineSize');
+            const newHeight = extractSize(entry, boxProp, 'blockSize');
+
+            const hasChanged = previousSize.current.width !== newWidth
+                || previousSize.current.height !== newHeight;
+
+            if (hasChanged) {
+                const newSize: Size = { width: newWidth, height: newHeight };
+                previousSize.current.width = newWidth;
+                previousSize.current.height = newHeight;
+
+                if (onResize.current) {
+                    onResize.current(newSize);
+                } else if (isMounted()) {
+                    setSize(newSize);
+                }
+            }
+        });
+
+        observer.observe(ref.current, { box });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [box, ref, isMounted]);
+
+    return { width, height };
+}
+
+type BoxSizesKey = keyof Pick<
+ResizeObserverEntry,
+'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize'
+>;
+
+function extractSize(
+    entry: ResizeObserverEntry,
+    box: BoxSizesKey,
+    sizeType: keyof ResizeObserverSize,
+): number | undefined {
+    if (!entry[box]) {
+        if (box === 'contentBoxSize') {
+            return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
+        }
+        return undefined;
+    }
+
+    return Array.isArray(entry[box])
+        ? entry[box][0][sizeType]
+        : // @ts-ignore Support Firefox's non-standard behavior
+        (entry[box][sizeType] as number);
+}
diff --git a/src/stories/accordion/Accordion.module.scss b/src/stories/accordion/Accordion.module.scss
index 34073b8..47a1e79 100644
--- a/src/stories/accordion/Accordion.module.scss
+++ b/src/stories/accordion/Accordion.module.scss
@@ -1,6 +1,6 @@
 .container {
-    color: var(--pte-colors-contentPrimary);
-    border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    color: var(--pte-new-colors-contentPrimary);
+    border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
     cursor: pointer;
     transition: all var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeInOutExpo);
 
@@ -19,7 +19,7 @@
         border-bottom: 1px solid transparent;
         transition: border-bottom-color var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
         &.open {
-            border-bottom-color: var(--pte-colors-borderOpaque);
+            border-bottom-color: var(--pte-new-colors-borderSubtle);
         }
     }
 
@@ -48,6 +48,6 @@
         display: flex;
         flex-direction: column;
         gap: 12px;
-        background-color: var(--pte-colors-backgroundSecondary);
+        background-color: var(--pte-new-colors-overlaySubtle);
     }
 }
diff --git a/src/stories/avatar/Avatar.module.scss b/src/stories/avatar/Avatar.module.scss
index 4b41b03..383f448 100644
--- a/src/stories/avatar/Avatar.module.scss
+++ b/src/stories/avatar/Avatar.module.scss
@@ -3,5 +3,5 @@
     aspect-ratio: 1;
     border: 1px solid var(--frame-color);
     overflow: clip;
-    box-shadow: var(--pte-lighting-subtlePopup);
+    box-shadow: var(--pte-new-lighting-subtlePopup);
 }
diff --git a/src/stories/avatar/Avatar.tsx b/src/stories/avatar/Avatar.tsx
index f4365ab..bb6c889 100644
--- a/src/stories/avatar/Avatar.tsx
+++ b/src/stories/avatar/Avatar.tsx
@@ -28,7 +28,7 @@ export type AvatarProps = {
  * @constructor
  */
 export const Avatar: FC<AvatarProps> = ({
-    frameColor = pvar('colors.borderOpaque'),
+    frameColor = pvar('new.colors.borderMedium'),
     width = 'fit-content',
     children,
     className,
diff --git a/src/stories/button/Button.module.scss b/src/stories/button/Button.module.scss
index 66fd068..fc077e7 100644
--- a/src/stories/button/Button.module.scss
+++ b/src/stories/button/Button.module.scss
@@ -21,7 +21,7 @@
 
     &:hover {
         cursor: default;
-        background-color: var(--pte-colors-backgroundInverseTertiary);
+        background-color: var(--pte-new-colors-buttonFillHover);
     }
 
     &[aria-disabled=false]:active {
@@ -40,45 +40,47 @@
  */
 
 .primary {
-    color: var(--pte-colors-contentInversePrimary);
-    background-color: var(--pte-colors-backgroundInversePrimary);
-    border-color: var(--pte-colors-backgroundInversePrimary);
+    color: var(--pte-new-colors-contentInversePrimary);
+    background-color: var(--pte-new-colors-buttonFill);
+    border-color: var(--pte-new-colors-buttonFill);
 
     &:hover {
-        border-color: var(--pte-colors-backgroundInverseTertiary);
+        border-color: var(-pte-new-colors-buttonFillHover);
     }
 
     &[aria-disabled=true] {
-        color: var(--pte-colors-contentDisabled);
-        background-color: var(--pte-colors-backgroundTertiary);
-        border-color: var(--pte-colors-backgroundTertiary);
+        color: var(--pte-new-colors-contentDisabled);
+        background-color: var(--pte-new-colors-buttonFillDisabled);
+        border-color: var(--pte-new-colors-buttonFillDisabled);
     }
 }
 
 .secondary {
-    color: var(--pte-colors-contentPrimary);
+    color: var(--pte-new-colors-contentPrimary);
     background-color: transparent;
-    border-color: var(--pte-colors-contentPrimary);
+    border-color: var(--pte-new-colors-buttonBorder);
+
+    &:hover {
+        background-color: var(--pte-new-colors-overlayMedium);
+    }
 
     &[aria-disabled=true] {
-        color: var(--pte-colors-contentDisabled);
-        border-color: var(--pte-colors-contentDisabled);
+        color: var(--pte-new-colors-contentDisabled);
+        border-color: var(--pte-new-colors-buttonBorderDisabled);
     }
 }
 
 .tertiary {
-    color: var(--pte-colors-contentPrimary);
+    color: var(--pte-new-colors-contentPrimary);
     background-color: transparent;
     border-color: transparent;
-}
 
-.secondary, .tertiary {
     &:hover {
-        background-color: var(--pte-colors-backgroundTertiary);
+        background-color: var(--pte-new-colors-overlayMedium);
     }
 
     &[aria-disabled=true] {
-        color: var(--pte-colors-contentDisabled);
+        color: var(--pte-new-colors-contentDisabled);
     }
 }
 
@@ -92,6 +94,11 @@
     padding: 8px 15px;
 }
 
+.medium {
+    height: 28px;
+    padding: 6px 14px;
+}
+
 .small {
     height: 20px;
     padding: 4px 15px;
@@ -115,16 +122,26 @@
     border-radius: var(--pte-borders-radius-circle);
 }
 
-.rounded {
-    border-radius: var(--pte-borders-radius-rounded);
+.square, .rectangle {
+    &.sharp {
+        border-radius: var(--pte-borders-radius-rectangle);
+    }
 
-    &.small {
-        border-radius: var(--pte-borders-radius-roundedSmall);
+    &.rounded {
+        border-radius: var(--pte-borders-radius-rounded);
+
+        &.small {
+            border-radius: var(--pte-borders-radius-roundedSmall);
+        }
     }
-}
 
-.square, .rectangle {
-    border-radius: var(--pte-borders-radius-rectangle);
+    &.roundedXL {
+        border-radius: var(--pte-borders-radius-roundedLarge);
+
+        &.small {
+            border-radius: var(--pte-borders-radius-rounded);
+        }
+    }
 }
 
 .circle, .square {
@@ -133,6 +150,11 @@
         padding: 8px;
     }
 
+    &.medium {
+        width: 28px;
+        padding: 4px;
+    }
+
     &.small {
         width: 20px;
         padding: 4px;
diff --git a/src/stories/button/Button.stories.ts b/src/stories/button/Button.stories.ts
index 1438db1..3e04f25 100644
--- a/src/stories/button/Button.stories.ts
+++ b/src/stories/button/Button.stories.ts
@@ -57,3 +57,27 @@ export const WithEnhancer: Story = {
         }),
     },
 };
+
+export const Circle: Story = {
+    args: {
+        children: 'Button',
+        shape: 'circle',
+        kind: 'tertiary',
+        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
+            icon: faPlus,
+            width: `${size}px`,
+        }),
+    },
+};
+
+export const Rounded: Story = {
+    args: {
+        children: 'Button',
+        shape: 'rectangle',
+        corners: 'rounded',
+        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
+            icon: faPlus,
+            width: `${size}px`,
+        }),
+    },
+};
diff --git a/src/stories/button/Button.tsx b/src/stories/button/Button.tsx
index d7a2dc6..4f9b46a 100644
--- a/src/stories/button/Button.tsx
+++ b/src/stories/button/Button.tsx
@@ -3,10 +3,12 @@
 import type {
     CSSProperties, FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode,
 } from 'react';
+import { useMemo } from 'react';
 import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
 import { Button as AriaButton } from '@ariakit/react';
 import clsx from 'clsx';
 import fontColorContrast from 'font-color-contrast';
+import type { CSSLength } from '@ssh/csstypes';
 import styles from './Button.module.scss';
 import { Text } from '../text';
 import type { Enhancer } from '../../types/Enhancer';
@@ -17,22 +19,31 @@ import { NotificationDot } from '../icon/NotificationDot';
 
 const EnhancerSizes = {
     large: 13,
+    medium: 12,
     small: 11,
     xs: 9,
 };
 
+export const CornerPresets = ['sharp', 'rounded', 'roundedXL'] as const;
+
 export const ButtonThemes = {
     negative: {
-        primary: pvar('colors.contentNegative'),
-        secondary: pvar('colors.backgroundNegative'),
+        primary: pvar('new.colors.buttonBorderNegative'),
+        secondary: pvar('new.colors.buttonFillHoverNegative'),
+        primaryAlt: pvar('new.colors.contentNegative'),
+        secondaryAlt: pvar('new.colors.backgroundNegativeStrong'),
     },
     positive: {
-        primary: pvar('colors.contentPositive'),
-        secondary: pvar('colors.backgroundPositive'),
+        primary: pvar('new.colors.contentPositive'),
+        secondary: pvar('new.colors.backgroundPositive'),
+        primaryAlt: pvar('new.colors.contentPositive'),
+        secondaryAlt: pvar('new.colors.backgroundPositiveStrong'),
     },
     warning: {
-        primary: pvar('colors.contentWarning'),
-        secondary: pvar('colors.backgroundWarning'),
+        primary: pvar('new.colors.contentWarning'),
+        secondary: pvar('new.colors.backgroundWarning'),
+        primaryAlt: pvar('new.colors.contentWarning'),
+        secondaryAlt: pvar('new.colors.backgroundWarningStrong'),
     },
 } as const;
 
@@ -46,12 +57,19 @@ export type ButtonProps = {
      * The size of the Button.
      * @default large
      */
-    size?: 'large' | 'small' | 'xs';
+    size?: 'large' | 'medium' | 'small' | 'xs';
     /**
      * The shape of the Button.
      * @default pill
      */
-    shape?: 'pill' | 'circle' | 'rectangle' | 'square' | 'rounded';
+    shape?: 'pill' | 'circle' | 'rectangle' | 'square';
+    /**
+     * The radius of the corners for the `rectangle` and `square` Button shapes. Either a preset or a valid {@link CSSLength} string.
+     * `sharp` will have no rounding, `rounded` will have a slight rounding, and `roundedXL` will have a large rounding.
+     * @see CornerPresets
+     * @default rounded
+     */
+    corners?: typeof CornerPresets[number] | CSSLength;
     /**
      * A color to apply for the Button. Provide an object with `primary` and `secondary` properties to set the primary and hover colors.
      */
@@ -126,6 +144,7 @@ export const Button: FC<ButtonProps> = ({
     kind = 'primary',
     size = 'large',
     shape = 'pill',
+    corners = 'rounded',
     colors,
     theme,
     type = 'button',
@@ -139,66 +158,72 @@ export const Button: FC<ButtonProps> = ({
     displayNotificationDot = false,
     style,
     ...props
-}) => (
-    <AriaButton
-        {...props}
-        style={(theme || colors) ? {
-            '--pte-colors-contentInversePrimary': fontColorContrast(theme ? ButtonThemes[theme].primary : colors?.primary || pvar('colors.contentPrimary')),
-            '--pte-colors-backgroundInversePrimary': theme ? ButtonThemes[theme].primary : colors?.primary,
-            '--pte-colors-backgroundInverseTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
-            '--pte-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary,
-            '--pte-colors-backgroundTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
-            ...style,
-        } as CSSProperties : style}
-        className={clsx(
-            styles.button,
-            styles[kind],
-            styles[shape],
-            styles[size],
-            props?.className,
-        )}
-        aria-disabled={disabled ?? false}
-        type={type}
-        aria-details={typeof children === 'string' ? children : undefined}
-        onClick={!disabled && !href && !loading ? onClick : () => {}}
-        disabled={false}
-        {...href ? {
-            render: (properties) => (
-                // eslint-disable-next-line jsx-a11y/anchor-has-content
-                <a
-                    {...properties}
-                    href={href}
-                    target={props.hreftarget ?? '_self'}
-                    rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
+}) => {
+    const cornersIsPreset = useMemo(() => (CornerPresets as readonly string[]).includes(corners), [corners]);
+    return (
+        <AriaButton
+            {...props}
+            style={(theme || colors) ? {
+                '--pte-new-colors-contentInversePrimary': fontColorContrast(theme ? ButtonThemes[theme].primary : colors?.primary || pvar('new.colors.contentPrimary')), // text for primary
+                '--pte-new-colors-buttonFill': theme ? ButtonThemes[theme].primaryAlt : colors?.primary, // background for primary
+                '--pte-new-colors-buttonFillHover': theme ? ButtonThemes[theme].secondaryAlt : colors?.secondary, // hover background for primary
+                '--pte-new-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary, // text for secondary/tertiary
+                '--pte-new-colors-buttonBorder': theme ? ButtonThemes[theme].primary : colors?.primary, // border for secondary/tertiary
+                '--pte-new-colors-overlayMedium': theme ? ButtonThemes[theme].secondary : colors?.secondary, // hover background for secondary/tertiary
+                borderRadius: !cornersIsPreset ? corners : '',
+                ...style,
+            } as CSSProperties : ({ borderRadius: !cornersIsPreset ? corners : '', ...style })}
+            className={clsx(
+                styles.button,
+                styles[kind],
+                styles[shape],
+                styles[size],
+                cornersIsPreset && styles[corners],
+                props?.className,
+            )}
+            aria-disabled={disabled ?? false}
+            type={type}
+            aria-details={typeof children === 'string' ? children : undefined}
+            onClick={!disabled && !href && !loading ? onClick : () => {}}
+            disabled={false}
+            {...href ? {
+                render: (properties) => (
+                    // eslint-disable-next-line jsx-a11y/anchor-has-content
+                    <a
+                        {...properties}
+                        href={href}
+                        target={props.hreftarget ?? '_self'}
+                        rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
+                    />
+                ),
+            } : {}}
+        >
+            {!!startEnhancer && (
+                <MemoizedEnhancer
+                    enhancer={startEnhancer}
+                    size={EnhancerSizes[size]}
                 />
-            ),
-        } : {}}
-    >
-        {!!startEnhancer && (
-            <MemoizedEnhancer
-                enhancer={startEnhancer}
-                size={EnhancerSizes[size]}
-            />
-        )}
-        {!['circle', 'square'].includes(shape) && (
-            <Text kind="labelXSmall">
-                {!loading ? (
-                    children || 'Button'
-                ) : (
-                    <Spinner size={EnhancerSizes[size]} />
-                )}
-            </Text>
-        )}
-        {!!endEnhancer && (
-            <MemoizedEnhancer
-                enhancer={endEnhancer}
-                size={EnhancerSizes[size]}
-            />
-        )}
-        {!!displayNotificationDot && (
-            <div className="absolute top-0 right-0">
-                <NotificationDot size={8} />
-            </div>
-        )}
-    </AriaButton>
-);
+            )}
+            {!['circle', 'square'].includes(shape) && (
+                <Text kind="labelXSmall">
+                    {!loading ? (
+                        children || 'Button'
+                    ) : (
+                        <Spinner size={EnhancerSizes[size]} />
+                    )}
+                </Text>
+            )}
+            {!!endEnhancer && (
+                <MemoizedEnhancer
+                    enhancer={endEnhancer}
+                    size={EnhancerSizes[size]}
+                />
+            )}
+            {!!displayNotificationDot && (
+                <div className="absolute top-0 right-0">
+                    <NotificationDot size={8} />
+                </div>
+            )}
+        </AriaButton>
+    );
+};
diff --git a/src/stories/callout/Callout.module.scss b/src/stories/callout/Callout.module.scss
index f59fde4..d59521c 100644
--- a/src/stories/callout/Callout.module.scss
+++ b/src/stories/callout/Callout.module.scss
@@ -1,9 +1,9 @@
 .content {
-    background-color: var(--pte-colors-backgroundSecondary);
+    background-color: var(--pte-new-colors-overlayMedium);
     border-radius: 6px;
     width: 100%;
     padding: 8px 10px;
-    color: var(--pte-colors-contentTertiary);
+    color: var(--pte-new-colors-contentSecondary);
 
     display: flex;
     flex-direction: row;
@@ -26,18 +26,18 @@
     }
 
     &.warning {
-        background-color: var(--pte-colors-backgroundWarning);
-        color: var(--pte-colors-contentWarning);
+        background-color: var(--pte-new-colors-backgroundWarning);
+        color: var(--pte-new-colors-contentWarning);
     }
 
     &.negative {
-        background-color: var(--pte-colors-backgroundNegative);
-        color: var(--pte-colors-contentNegative);
+        background-color: var(--pte-new-colors-overlayRed);
+        color: var(--pte-new-colors-contentNegative);
     }
 
     &.positive {
         .icon {
-            color: var(--pte-colors-contentPositive);
+            color: var(--pte-new-colors-contentPositive);
         }
     }
 }
diff --git a/src/stories/callout/Callout.stories.ts b/src/stories/callout/Callout.stories.ts
index 8f41b65..2e5b708 100644
--- a/src/stories/callout/Callout.stories.ts
+++ b/src/stories/callout/Callout.stories.ts
@@ -51,3 +51,11 @@ export const Positive: Story = {
         ),
     },
 };
+
+export const IconHidden: Story = {
+    args: {
+        variant: 'default',
+        children: 'Please upload a receipt',
+        icon: null,
+    },
+};
diff --git a/src/stories/callout/Callout.tsx b/src/stories/callout/Callout.tsx
index a381f3b..1f2e892 100644
--- a/src/stories/callout/Callout.tsx
+++ b/src/stories/callout/Callout.tsx
@@ -4,12 +4,13 @@ import type {
 import clsx from 'clsx';
 import styles from './Callout.module.scss';
 import { RemoveFromDOM, TextWhenString } from '../utility';
+import { Icon, ArrowRight } from '../icon';
 
 export type CalloutProps = {
     /** The variant of the Callout. */
     variant?: 'default' | 'warning' | 'positive' | 'negative';
-    /** An icon to display in the Callout. For best results, use an SVG icon with fill set to `currentColor`. */
-    icon?: ReactElement;
+    /** An icon to display in the Callout. To hide icon, set `icon={null}`. For best results, use an SVG icon with fill set to `currentColor`. */
+    icon?: ReactElement | null;
     /** The contents of the Callout. */
     children?: ReactNode;
 } & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
@@ -28,7 +29,7 @@ export type CalloutProps = {
  */
 export const Callout: FC<CalloutProps> = ({
     variant = 'default',
-    icon,
+    icon = <Icon icon={ArrowRight} size={16} className={styles.icon} />,
     children,
     className,
     ...props
diff --git a/src/stories/card/Card.module.scss b/src/stories/card/Card.module.scss
index 666a110..b621900 100644
--- a/src/stories/card/Card.module.scss
+++ b/src/stories/card/Card.module.scss
@@ -1,7 +1,7 @@
 .container {
-    border: var(--pte-borders-dropdown-border);
+    border: var(--pte-new-borders-dropdown-border);
     border-radius: var(--pte-borders-radius-rounded);
-    box-shadow: var(--pte-lighting-subtlePopup);
+    box-shadow: var(--pte-new-lighting-subtlePopup);
 
     user-select: var(--pte-utils-defaultUserSelect);
     width: auto;
@@ -9,6 +9,6 @@
 
     &.flat {
         box-shadow: none;
-        border-color: var(--pte-colors-borderOpaque);
+        border-color: var(--pte-new-colors-borderMedium);
     }
 }
diff --git a/src/stories/card/Card.stories.ts b/src/stories/card/Card.stories.ts
index 033b733..682340c 100644
--- a/src/stories/card/Card.stories.ts
+++ b/src/stories/card/Card.stories.ts
@@ -10,9 +10,6 @@ const meta: Meta<typeof Card> = {
 export default meta;
 type Story = StoryObj<typeof Card>;
 
-/**
- * By default, the card has a shadow and parallax tilt effect. You may want to adjust the max tilt angles through the `overrides.tilt.tiltMaxAngle(X|Y)` props to provide a good experience depending on the size of the content. See the [Tilt component](/docs/surfaces-tilt--docs) for all available props.
- */
 export const Default: Story = {
     args: {
         children: 'Revenue: $3000',
@@ -21,8 +18,6 @@ export const Default: Story = {
 
 /**
  * Setting the `kind` prop to `flat` will remove the shadow from the card.
- *
- * This example also disables the `tilt` effect by setting the `tilt` prop to `false`, but by default the `tilt` prop will remain set to `true`.
  */
 export const Flat: Story = {
     args: {
diff --git a/src/stories/checkbox/Checkbox.module.scss b/src/stories/checkbox/Checkbox.module.scss
index 7707ff4..cd32111 100644
--- a/src/stories/checkbox/Checkbox.module.scss
+++ b/src/stories/checkbox/Checkbox.module.scss
@@ -13,13 +13,14 @@
     }
 
     &.disabled {
-        opacity: 0.4;
+        //opacity: 0.4;
+        color: var(--pte-new-colors-contentDisabled);
         pointer-events: none;
     }
 }
 
 .root {
-    background-color: var(--pte-colors-backgroundPrimary);
+    background-color: transparent;
     width: 14px;
     height: 14px;
     display: flex;
@@ -27,15 +28,15 @@
     justify-content: center;
     flex-shrink: 0;
 
-    border: 2px solid var(--pte-colors-contentPrimary);
+    border: 2px solid var(--pte-new-colors-contentTertiary);
     border-radius: var(--pte-borders-radius-rectangle);
-    box-shadow: var(--pte-lighting-shallowBelow);
+    //box-shadow: var(--pte-new-lighting-shallowBelow);
 
     &:hover {
         //background-color: ;
     }
     &:focus-visible {
-        outline: 1px solid var(--pte-colors-contentTertiary);
+        outline: 1px solid var(--pte-new-colors-borderUltrastrong);
     }
 
     position: relative;
@@ -44,7 +45,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        background-color: var(--pte-colors-backgroundPrimary);
+        background-color: transparent;
         transition: var(--pte-animations-interaction);
         transition-delay: 50ms;
     }
@@ -55,6 +56,10 @@
         }
     }
 
+    &[data-disabled=true] {
+        border-color: var(--pte-new-colors-contentDisabled);
+    }
+
     & span {
         transition: var(--pte-animations-interaction);
     }
@@ -63,3 +68,11 @@
 .indicator {
     cursor: default;
 }
+
+.checkSvg {
+    fill: var(--pte-new-colors-contentPrimary);
+
+    &[data-disabled=true] {
+        fill: var(--pte-new-colors-contentDisabled);
+    }
+}
diff --git a/src/stories/checkbox/Checkbox.tsx b/src/stories/checkbox/Checkbox.tsx
index 8d32d2b..a557373 100644
--- a/src/stories/checkbox/Checkbox.tsx
+++ b/src/stories/checkbox/Checkbox.tsx
@@ -51,8 +51,9 @@ export const Checkbox: FC<CheckboxProps> = ({
                 <RadixCheckbox.Indicator className={styles.indicator}>
                     <svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path
+                            className={styles.checkSvg}
+                            data-disabled={disabled}
                             d="M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z"
-                            fill={pvar('colors.contentPrimary')}
                         />
                     </svg>
                 </RadixCheckbox.Indicator>
diff --git a/src/stories/combobox/Combobox.stories.ts b/src/stories/combobox/Combobox.stories.ts
index 3783408..f3a3c47 100644
--- a/src/stories/combobox/Combobox.stories.ts
+++ b/src/stories/combobox/Combobox.stories.ts
@@ -24,40 +24,40 @@ export const Default: Story = {
                 id: '1',
                 node: createElement(Text, {
                     kind: 'paragraphSmall',
-                    children: "Billie O'Connell",
+                    children: 'Mia Dolan',
                 }),
                 metadata: {
-                    name: "Billie O'Connell",
+                    name: 'Mia Dolan',
                 },
             },
             {
                 id: '2',
                 node: createElement(Text, {
                     kind: 'paragraphSmall',
-                    children: "Finneas O'Connell",
+                    children: 'Sebastian Wilder',
                 }),
                 metadata: {
-                    name: "Finneas O'Connell",
+                    name: 'Sebastian Wilder',
                 },
             },
             {
                 id: '3',
                 node: createElement(Text, {
                     kind: 'paragraphSmall',
-                    children: 'Taylor Alison Swift',
+                    children: 'Amy Brandt',
                 }),
                 metadata: {
-                    name: 'Taylor Alison Swift',
+                    name: 'Amy Brandt',
                 },
             },
             {
                 id: '4',
                 node: createElement(Text, {
                     kind: 'paragraphSmall',
-                    children: 'Taylor Alison Swift',
+                    children: 'Laura Wilder',
                 }),
                 metadata: {
-                    name: 'Taylor Alison Swift',
+                    name: 'Laura Wilder',
                 },
             },
         ],
diff --git a/src/stories/combobox/Combobox.tsx b/src/stories/combobox/Combobox.tsx
index cd3242d..aad0edc 100644
--- a/src/stories/combobox/Combobox.tsx
+++ b/src/stories/combobox/Combobox.tsx
@@ -155,11 +155,14 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
             >
                 <div
                     className={inputStyles.inputContainer}
-                    data-status={status}
-                    data-disabled={disabled}
+                    data-status={disabled ? 'disabled' : (status || 'default')}
                 >
                     {!!startEnhancer && (
-                        <div {...overrides?.startEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                        <div
+                            {...overrides?.startEnhancerContainer}
+                            className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
+                            data-status={disabled ? 'disabled' : (status || 'default')}
+                        >
                             {!!startEnhancer && (
                                 <MemoizedEnhancer
                                     enhancer={startEnhancer}
@@ -206,7 +209,11 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                         </Button>
                     )}
                     {!!endEnhancer && (
-                        <div {...overrides?.endEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                        <div
+                            {...overrides?.endEnhancerContainer}
+                            className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
+                            data-status={disabled ? 'disabled' : (status || 'default')}
+                        >
                             {!!endEnhancer && (
                                 <MemoizedEnhancer
                                     enhancer={endEnhancer}
diff --git a/src/stories/dialog/Dialog.module.scss b/src/stories/dialog/Dialog.module.scss
index bb699e6..e9940d2 100644
--- a/src/stories/dialog/Dialog.module.scss
+++ b/src/stories/dialog/Dialog.module.scss
@@ -14,39 +14,64 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     inset: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--pte-colors-backgroundOverlayDark);
-    backdrop-filter: blur(0);
-    will-change: opacity, backdrop-filter;
-    opacity: 0;
     transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOut);
+
+    &.overlayBlur {
+        backdrop-filter: blur(0);
+        background-color: var(--pte-new-colors-overlayPageBackground);
+        will-change: backdrop-filter, opacity;
+    }
+
+    &.overlayGrey {
+        background-color: var(--pte-new-colors-overlayPageBackground);
+        will-change: opacity;
+    }
 }
 
 .open {
     transition-delay: 0ms;
     opacity: 1;
-    backdrop-filter: blur(2px);
 }
 
-.overlayContainer {
+.overlayBlurContainer {
     .enterFrom {
         backdrop-filter: blur(0);
+        opacity: 0;
     }
-
     .enterTo {
         backdrop-filter: blur(2px);
+        opacity: 1;
     }
-
     .leave {
         transition-delay: $panelAnimationDelay;
     }
-
     .leaveFrom {
         backdrop-filter: blur(2px);
+        opacity: 1;
     }
-
     .leaveTo {
         backdrop-filter: blur(0);
+        opacity: 0;
+    }
+}
+
+.overlayGreyContainer {
+    .enterFrom {
+        opacity: 0;
+    }
+    .enterTo {
+        opacity: 1;
+    }
+    .leave {
+        transition-delay: $panelAnimationDelay;
+    }
+    .leaveFrom {
+        opacity: 1;
     }
+    .leaveTo {
+        opacity: 0;
+    }
+
 }
 
 .panelContainer {
@@ -110,20 +135,19 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
 .simple {
     border-radius: var(--pte-borders-radius-rounded);
-    background: var(--pte-colors-backgroundPrimary);
-    border: var(--pte-borders-dropdown-border);
-    backdrop-filter: var(--pte-surfaces-dialog-backdropFilter);
+    background: var(--pte-new-colors-surfacePrimary);
+    border: var(--pte-new-borders-dropdown-border);
     outline: none;
-    box-shadow: var(--pte-lighting-shallowBelow);
+    box-shadow: var(--pte-new-lighting-deepPopup);
 }
 
 .glass {
     border-radius: var(--pte-borders-radius-roundedXL);
-    background: var(--pte-surfaces-dialog-background);
-    border: var(--pte-surfaces-dialog-border);
-    backdrop-filter: var(--pte-surfaces-dialog-backdropFilter);
-    outline: var(--pte-surfaces-dialog-outline);
-    box-shadow: var(--pte-lighting-shallowBelow);
+    background: var(--pte-new-surfaces-dialog-background);
+    border: var(--pte-new-surfaces-dialog-border);
+    backdrop-filter: var(--pte-new-surfaces-dialog-backdropFilter);
+    outline: var(--pte-new-surfaces-dialog-outline);
+    box-shadow: var(--pte-new-lighting-shallowPopup);
 }
 
 .w-compact {
diff --git a/src/stories/dialog/Dialog.stories.tsx b/src/stories/dialog/Dialog.stories.tsx
index 0695bdf..6201345 100644
--- a/src/stories/dialog/Dialog.stories.tsx
+++ b/src/stories/dialog/Dialog.stories.tsx
@@ -68,3 +68,43 @@ export const Default: Story = {
         );
     },
 };
+
+export const Grey: Story = {
+    args: {
+        title: 'Confirmation',
+        appearance: 'simple',
+        width: 'default',
+        height: 'content',
+        overlayStyle: 'grey',
+        draggable: false,
+        isOpen: false,
+        children: (
+            <Text>
+                Are you sure? That's a lot of money.
+            </Text>
+        ),
+    },
+    render: (args) => {
+        const [isOpen, setIsOpen] = useState(false);
+        return (
+            <>
+                <div>
+                    <Button
+                        onClick={() => setIsOpen(true)}
+                    >
+                        Pay now
+                    </Button>
+                </div>
+                <Dialog
+                    {...args}
+                    isOpen={isOpen}
+                    onClose={() => {
+                        setIsOpen(false);
+                    }}
+                >
+                    {args.children}
+                </Dialog>
+            </>
+        );
+    },
+};
diff --git a/src/stories/dialog/Dialog.tsx b/src/stories/dialog/Dialog.tsx
index 84bec26..b51e509 100644
--- a/src/stories/dialog/Dialog.tsx
+++ b/src/stories/dialog/Dialog.tsx
@@ -68,6 +68,12 @@ export type DialogProps = {
      * @default 'simple'
      */
     appearance?: 'simple' | 'glass';
+    /**
+     * The overlay style for the dialog. `grey` is a simple grey overlay. `blur` is a blurred overlay.
+     *
+     * @default 'blur'
+     */
+    overlayStyle?: 'grey' | 'blur';
     /**
      * Optional overrides for props of each dialog component.
      *
@@ -118,6 +124,7 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
     height = 'content',
     draggable = false,
     appearance = 'simple',
+    overlayStyle = 'blur',
     children,
 }) => {
     const [dragging, setDragging] = useState(false);
@@ -173,7 +180,8 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                 <HDialog.Overlay
                     {...overrides.overlayContainer}
                     className={clsx(
-                        styles.overlayContainer,
+                        overlayStyle === 'blur' && styles.overlayBlurContainer,
+                        overlayStyle === 'grey' && styles.overlayGreyContainer,
                         overrides.overlayContainer?.className,
                     )}
                 >
@@ -190,6 +198,8 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                             {...overrides.overlay}
                             className={clsx(
                                 styles.overlay,
+                                overlayStyle === 'blur' && styles.overlayBlur,
+                                overlayStyle === 'grey' && styles.overlayGrey,
                                 overrides.overlay?.className,
                             )}
                         />
@@ -254,22 +264,23 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                                         </HDialog.Title>
                                     </VisuallyHidden>
                                     <RemoveFromDOM when={hideCloseButton}>
-                                        <Button
-                                            kind="tertiary"
-                                            shape="circle"
-                                            onClick={() => onClose(false)}
-                                            startEnhancer={(
-                                                <Icon size={20} icon={Close} />
-                                            )}
-                                            {...overrides.panelCloseButton}
-                                            data-title-hidden={hideTitle}
-                                            className={clsx(
-                                                styles.closeButton,
-                                                overrides.panelCloseButton?.className,
-                                            )}
-                                        >
-                                            Close dialog
-                                        </Button>
+                                        <div className={clsx(styles.closeButton)}>
+                                            <Button
+                                                kind="tertiary"
+                                                shape="circle"
+                                                onClick={() => onClose(false)}
+                                                startEnhancer={(
+                                                    <Icon size={20} icon={Close} />
+                                                )}
+                                                {...overrides.panelCloseButton}
+                                                data-title-hidden={hideTitle}
+                                                className={clsx(
+                                                    overrides.panelCloseButton?.className,
+                                                )}
+                                            >
+                                                Close dialog
+                                            </Button>
+                                        </div>
                                     </RemoveFromDOM>
                                 </div>
                             </VisuallyHidden>
diff --git a/src/stories/drawer/Drawer.module.scss b/src/stories/drawer/Drawer.module.scss
index 83a69e3..99d7ca4 100644
--- a/src/stories/drawer/Drawer.module.scss
+++ b/src/stories/drawer/Drawer.module.scss
@@ -3,7 +3,7 @@ $translateInY: 100%;
 $translateOutX: 20%;
 $translateOutY: 60%;
 
-$panelMinMargin: 16px;
+$panelMinMargin: 30px;
 $defaultSize: 360px + $panelMinMargin;
 $panelPaddingX: 20px;
 $panelPaddingY: 20px;
@@ -26,51 +26,56 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     position: absolute;
     inset: 0;
 
-    &.overlayBlured {
+    &.overlayBlur {
         backdrop-filter: blur(0);
-        background-color: var(--pte-colors-backgroundOverlayDark);
+        background-color: var(--pte-new-colors-overlayPageBackground);
         will-change: backdrop-filter, opacity;
     }
 
-    &.overlayGreyed {
-        background-color: rgba(175, 175, 175, 0); // Non-transparent backgroundOverlayGrey (for start animation)
-        will-change: background-color, opacity;
+    &.overlayGrey {
+        //background-color: rgba(175, 175, 175, 0); // Non-transparent backgroundOverlayGrey (for start animation)
+        background-color: var(--pte-new-colors-overlayPageBackground);
+        will-change: opacity;
     }
 }
 
-.overlayBluredContainer {
+.overlayBlurContainer {
     .enterFrom {
         backdrop-filter: blur(0);
+        opacity: 0;
     }
     .enterTo {
         backdrop-filter: blur(2px);
+        opacity: 1;
     }
     .leave {
         transition-delay: $panelAnimationDelay;
     }
     .leaveFrom {
         backdrop-filter: blur(2px);
+        opacity: 1;
     }
     .leaveTo {
         backdrop-filter: blur(0);
+        opacity: 0;
     }
 }
 
-.overlayGreyedContainer {
+.overlayGreyContainer {
     .enterFrom {
-        background-color: rgba(175, 175, 175, 0);
+        opacity: 0;
     }
     .enterTo {
-        background-color: var(--pte-colors-backgroundOverlayGrey);
+        opacity: 1;
     }
     .leave {
         transition-delay: $panelAnimationDelay;
     }
     .leaveFrom {
-        background-color: var(--pte-colors-backgroundOverlayGrey);
+        opacity: 1;
     }
     .leaveTo {
-        background-color: rgba(175, 175, 175, 0);
+        opacity: 0;
     }
 
 }
@@ -94,7 +99,20 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
     &.from-right {
         right: 0;
-        padding-left: $panelMinMargin;
+
+        &.size-content, &.size-fullWithMargin {
+            padding-left: $panelMinMargin;
+        }
+        @media (min-width: 371px) {
+            &.size-default {
+                padding-left: $panelMinMargin;
+            }
+        }
+        @media (min-width: 481px) {
+            &.size-fullOnMobile {
+                padding-left: $panelMinMargin;
+            }
+        }
 
         .enterFrom {
             transform: translateX($translateInX);
@@ -111,7 +129,20 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
     &.from-left {
         left: 0;
-        padding-right: $panelMinMargin;
+
+        &.size-content, &.size-fullWithMargin {
+            padding-right: $panelMinMargin;
+        }
+        @media (min-width: 371px) {
+            &.size-default {
+                padding-right: $panelMinMargin;
+            }
+        }
+        @media (min-width: 481px) {
+            &.size-fullOnMobile {
+                padding-right: $panelMinMargin;
+            }
+        }
 
         .enterFrom {
             transform: translateX(-$translateInX);
@@ -133,22 +164,45 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
         top: 0;
         bottom: 0;
 
-        &.size-default {
-            width: min(100vw, $defaultSize);
+        @media (min-width: 371px) {
+            &.size-default {
+                width: min(100vw, $defaultSize);
+            }
+        }
+        @media (max-width: 370px) {
+            &.size-default {
+                width: 100vw;
+            }
+        }
+        @media (min-width: 481px) {
+            &.size-fullOnMobile {
+                width: min(100vw, $defaultSize);
+            }
+        }
+        @media (max-width: 480px) {
+            &.size-fullOnMobile {
+                width: 100vw;
+            }
         }
-
         &.size-content {
             width: auto;
         }
-
-        &.size-full {
+        &.size-full, &.size-fullWithMargin {
             width: 100vw;
         }
     }
 
     &.from-top {
         top: 0;
-        padding-bottom: $panelMinMargin;
+
+        &.size-content, &.size-fullWithMargin, &.size-default {
+            padding-bottom: $panelMinMargin;
+        }
+        @media (min-width: 481px) {
+            &.size-fullOnMobile {
+                padding-bottom: $panelMinMargin;
+            }
+        }
 
         .enterFrom {
             transform: translateY(-$translateInY);
@@ -165,7 +219,15 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
     &.from-bottom {
         bottom: 0;
-        padding: $panelMinMargin 0 0;
+
+        &.size-content, &.size-fullWithMargin, &.size-default {
+            padding-top: $panelMinMargin;
+        }
+        @media (min-width: 481px) {
+            &.size-fullOnMobile {
+                padding-top: $panelMinMargin;
+            }
+        }
 
         .enterFrom {
             transform: translateY($translateInY);
@@ -188,12 +250,22 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
         &.size-default {
             height: min(100dvh, $defaultSize);
         }
+        @media (min-width: 481px) {
+            &.size-fullOnMobile {
+                height: min(100dvh, $defaultSize);
+            }
+        }
+        @media (max-width: 480px) {
+            &.size-fullOnMobile {
+                height: 100dvh;
+            }
+        }
 
         &.size-content {
             height: auto;
         }
 
-        &.size-full {
+        &.size-full, &.size-fullWithMargin {
             height: 100dvh;
         }
     }
@@ -204,7 +276,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     height: 100%;
     padding: 0;
     //padding: $panelPaddingY $panelPaddingX;
-    background-color: var(--pte-colors-backgroundPrimary);
+    background-color: var(--pte-new-colors-surfacePrimary);
     overflow: auto;
 
     display: flex;
@@ -219,23 +291,23 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
     &.enterTo, &.leaveFrom {
         &.from-right {
-            border-left-color: var(--pte-borders-dropdown-color);
-            box-shadow: var(--pte-lighting-shallowLeft);
+            border-left-color: var(--pte-new-borders-dropdown-color);
+            box-shadow: var(--pte-new-lighting-shallowLeft);
         }
 
         &.from-left {
-            border-right-color: var(--pte-borders-dropdown-color);
-            box-shadow: var(--pte-lighting-shallowRight);
+            border-right-color: var(--pte-new-borders-dropdown-color);
+            box-shadow: var(--pte-new-lighting-shallowRight);
         }
 
         &.from-top {
-            border-bottom-color: var(--pte-borders-dropdown-color);
-            box-shadow: var(--pte-lighting-shallowBottom);
+            border-bottom-color: var(--pte-new-borders-dropdown-color);
+            box-shadow: var(--pte-new-lighting-shallowBelow);
         }
 
         &.from-bottom {
-            border-top-color: var(--pte-borders-dropdown-color);
-            box-shadow: var(--pte-lighting-shallowTop);
+            border-top-color: var(--pte-new-borders-dropdown-color);
+            box-shadow: var(--pte-new-lighting-shallowAbove);
         }
     }
 
@@ -254,7 +326,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     justify-content: space-between;
     align-items: center;
 
-    border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    border-bottom: 1px solid var(--pte-new-colors-borderMedium);
     padding: 14px 16px;
 }
 
@@ -274,32 +346,27 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 }
 
 .content {
-    padding: 20px;
+    //padding: 20px;
     overflow-y: scroll;
     height: 100%;
 }
 
-.paginationNav {
-    width: 100%;
+.contentChildren {
+    padding: 20px;
+}
+
+.paginationButtons {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
-
-    font-size: 16px;
-
-    .closeButton {
-        position: relative;
-        right: 0;
-        top: 0;
-    }
+    gap: 8px;
 
     .navButton {
         padding: 2px;
     }
 }
 
-.paginationTitle {
+.titleArea {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -339,6 +406,34 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 }
 
 .bottomPanel {
+    border-top: 1px solid var(--pte-new-colors-borderStrong);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+
+.bottomPanelContent {
+    position: relative;
     padding: 20px;
-    border-top: 1px solid var(--pte-colors-borderOpaque);
+}
+
+.bottomPanelSpacer {
+    padding: 20px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.glassBlend {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--pte-new-materials-secondaryThin-backgroundBlend);
+    mix-blend-mode: var(--pte-new-materials-secondaryThin-mixBlendMode);
+}
+.glassOpacity {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--pte-new-materials-secondaryThin-background);
+    backdrop-filter: var(--pte-new-blurs-strong);
 }
diff --git a/src/stories/drawer/Drawer.stories.tsx b/src/stories/drawer/Drawer.stories.tsx
index be6e1ac..0abf3cf 100644
--- a/src/stories/drawer/Drawer.stories.tsx
+++ b/src/stories/drawer/Drawer.stories.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import { Drawer } from './Drawer';
 import { Button } from '../button';
+import { Callout } from '../callout';
 import {
     Menu,
 } from '../menu';
@@ -23,6 +24,7 @@ export const Default: Story = {
     args: {
         title: 'Transaction details',
         children: 'This was a transaction for $22.89 at Il Tramezzino in Beverly Hills, CA.',
+        size: 'default',
     },
     render: (args) => {
         const [isOpen, setIsOpen] = useState(false);
@@ -97,6 +99,30 @@ export const Paginated: Story = {
                     onClose={setIsOpen}
                     pagination={pagination}
                     title={currentPageTitle}
+                    additionalActions={(
+                        <Menu as="div">
+                            <Menu.Button>
+                                <Button
+                                    kind="tertiary"
+                                    shape="circle"
+                                    startEnhancer={(
+                                        <Ellipsis size={20} />
+                                    )}
+                                >
+                                    Action menu
+                                </Button>
+                            </Menu.Button>
+                            <Menu.Items position="right">
+                                <Menu.Item as="button">
+                                    Dispute
+                                </Menu.Item>
+                                <Menu.Item as="button">
+                                    Transfer
+                                    <ChevronRight size={20} />
+                                </Menu.Item>
+                            </Menu.Items>
+                        </Menu>
+                    )}
                 >
                     <div key="step1" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                         Step 1: Enter your name
@@ -127,3 +153,128 @@ export const Paginated: Story = {
         );
     },
 };
+
+export const BottomPanel: Story = {
+    args: {
+        title: 'Transfer Out',
+        children: (
+            <div style={{
+                width: '100%', display: 'flex', flexDirection: 'column', gap: '12px',
+            }}
+            >
+                <h1>
+                    Transfer Policies:
+                </h1>
+                <Button kind="secondary">
+                    Read more...
+                </Button>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim bibendum gravida. Donec
+                    pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus.
+                    Fusce blandit leo in lectus blandit, sed elementum enim accumsan. Vestibulum ante ipsum primis in
+                    faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque pretium erat at lacus ultricies
+                    tincidunt. Praesent non luctus magna, ac efficitur ligula. Sed a justo fermentum, feugiat mauris
+                    vel, ultrices turpis. Ut interdum malesuada lacus, ac posuere sapien feugiat et. Nulla dignissim
+                    bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi
+                    libero sit amet purus.
+                </p>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim bibendum gravida. Donec
+                    pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus.
+                    Fusce blandit leo in lectus blandit, sed elementum enim accumsan. Vestibulum ante ipsum primis in
+                    faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque pretium erat at lacus ultricies
+                    tincidunt. Praesent non luctus magna, ac efficitur ligula. Sed a justo fermentum, feugiat mauris
+                    vel, ultrices turpis. Ut interdum malesuada lacus, ac posuere sapien feugiat et. Nulla dignissim
+                    bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi
+                    libero sit amet purus.
+                </p>
+            </div>
+        ),
+        bottomPanel: (
+            <div style={{
+                width: '100%', display: 'flex', flexDirection: 'column', gap: '12px',
+            }}
+            >
+                <Callout>
+                    Transfer should arrive in your account within 2-3 business days.
+                </Callout>
+                <Button>
+                    Initiate
+                </Button>
+                <Button kind="secondary" theme="negative">
+                    Cancel
+                </Button>
+            </div>
+        ),
+    },
+    render: (args) => {
+        const [isOpen, setIsOpen] = useState(false);
+        return (
+            <>
+                <Button
+                    onClick={() => setIsOpen(true)}
+                >
+                    Transfer Out
+                </Button>
+                <Drawer
+                    {...args}
+                    isOpen={isOpen}
+                    onClose={setIsOpen}
+                    additionalActions={(
+                        <Menu as="div">
+                            <Menu.Button>
+                                <Button
+                                    kind="tertiary"
+                                    shape="circle"
+                                    startEnhancer={(
+                                        <Ellipsis size={20} />
+                                    )}
+                                >
+                                    Action menu
+                                </Button>
+                            </Menu.Button>
+                            <Menu.Items position="right">
+                                <Menu.Item as="button">
+                                    Dispute
+                                </Menu.Item>
+                                <Menu.Item as="button">
+                                    Transfer
+                                    <ChevronRight size={20} />
+                                </Menu.Item>
+                            </Menu.Items>
+                        </Menu>
+                    )}
+                >
+                    {args.children}
+                </Drawer>
+            </>
+        );
+    },
+};
+
+export const Full: Story = {
+    args: {
+        title: 'Transaction details',
+        children: 'This was a transaction for $22.89 at Il Tramezzino in Beverly Hills, CA.',
+        size: 'full',
+    },
+    render: (args) => {
+        const [isOpen, setIsOpen] = useState(false);
+        return (
+            <>
+                <Button
+                    onClick={() => setIsOpen(true)}
+                >
+                    View details
+                </Button>
+                <Drawer
+                    {...args}
+                    isOpen={isOpen}
+                    onClose={setIsOpen}
+                >
+                    {args.children}
+                </Drawer>
+            </>
+        );
+    },
+};
diff --git a/src/stories/drawer/Drawer.tsx b/src/stories/drawer/Drawer.tsx
index 732b4c6..e32b98f 100644
--- a/src/stories/drawer/Drawer.tsx
+++ b/src/stories/drawer/Drawer.tsx
@@ -1,7 +1,10 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { Fragment, useMemo, useState } from 'react';
+import {
+    useEffect,
+    useRef, Fragment, useMemo, useState,
+} from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import type { CSSLength } from '@ssh/csstypes';
@@ -15,8 +18,9 @@ import type { PaginationState } from '../pagination';
 import {
     ChevronLeft, ChevronRight, Close, Icon,
 } from '../icon';
+import { useResizeObserver } from '../../helpers/useResizeObserver';
 
-export const DrawerSizePresets = ['content', 'default', 'full'] as const;
+export const DrawerSizePresets = ['content', 'default', 'full', 'fullWithMargin', 'fullOnMobile'] as const;
 
 export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
     /**
@@ -69,7 +73,11 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
     /**
      * The size of the Drawer, either a preset or a valid {@link CSSLength} string.
      *
-     * 'content' is the size of the Drawer's content. 'default' is the default size (360px). 'full' is the size of the viewport, minus the panel container's padding.
+     * `default` is the default size (360px), with a margin until the screen hits 370px.
+     * `fullOnMobile` uses the default size (360px) until the mobile breakpoint (480px), where it then fills the viewport.
+     * `full` is the size of the viewport.
+     * `fullWithMargin` is the size of the viewport, minus the panel container's padding.
+     * `content` is the size of the Drawer's content.
      *
      * @see DrawerSizePresets
      * @default 'default'
@@ -87,7 +95,7 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
      *     <div key="step2">Step 2</div>
      *     <div key="step3">Step 3</div>
      * </Drawer>
-     * ```
+     *```
      *
      * @see {@link PaginationState} for more information on the pagination state and available methods
      * @see {@link usePagination} for more information on how to create the pagination state
@@ -95,11 +103,11 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
      */
     pagination?: PaginationState<T>;
     /**
-     * The overlay style of the Drawer, either 'greyed' or 'blur'.
+     * The overlay style of the Drawer, either 'grey' or 'blur'.
      *
-     * @default 'blur'
+     * @default 'grey'
      */
-    overlayStyle?: 'greyed' | 'blur';
+    overlayStyle?: 'grey' | 'blur';
     /** The contents of the Drawer. */
     children?: ReactNode | ReactNode[];
 };
@@ -126,7 +134,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     from = 'right',
     size = 'default',
     pagination,
-    overlayStyle = 'greyed',
+    overlayStyle = 'grey',
     additionalActions,
     children,
 }: DrawerProps<T>) => {
@@ -143,6 +151,16 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
 
     const [loadedPage, setLoadedPage] = useState<string | null>(pagination?.history[0] || null);
 
+    // const bottomPanelRef = useRef<HTMLDivElement>(null);
+    // const { width = 0, height = 0 } = useResizeObserver({
+    //     ref: bottomPanelRef,
+    //     box: 'border-box',
+    // });
+    //
+    // useEffect(() => {
+    //     console.log(bottomPanelRef.current);
+    // }, [bottomPanelRef.current]);
+
     // Decide what children to render.
     const currentChild: ReactNode = useMemo(() => {
         // If no children are provided, render nothing.
@@ -179,8 +197,8 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
             >
                 <div
                     className={clsx(
-                        overlayStyle === 'blur' && styles.overlayBluredContainer,
-                        overlayStyle === 'greyed' && styles.overlayGreyedContainer,
+                        overlayStyle === 'blur' && styles.overlayBlurContainer,
+                        overlayStyle === 'grey' && styles.overlayGreyContainer,
                     )}
                 >
                     <Transition.Child
@@ -195,8 +213,8 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         <Dialog.Overlay
                             className={clsx(
                                 styles.overlay,
-                                overlayStyle === 'blur' && styles.overlayBlured,
-                                overlayStyle === 'greyed' && styles.overlayGreyed,
+                                overlayStyle === 'blur' && styles.overlayBlur,
+                                overlayStyle === 'grey' && styles.overlayGrey,
                             )}
                         />
                     </Transition.Child>
@@ -229,71 +247,27 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         >
                             {/* Dialog title bar */}
                             <div className={styles.titleBar}>
-                                <VisuallyHidden
-                                // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
-                                    when={hideTitle || isPaginated}
+                                <div
+                                    className={clsx(
+                                        styles.titleArea,
+                                    )}
                                 >
-                                    <Dialog.Title as="h2" className={styles.titleTextContainer}>
-                                        <TextWhenString kind="paragraphSmall" weight="medium">
-                                            {title}
-                                        </TextWhenString>
-                                    </Dialog.Title>
-                                </VisuallyHidden>
-
-                                <div className={styles.titleBarButtons}>
-                                    {/* Action Menu */}
-                                    <RemoveFromDOM when={!hasAdditionalActions}>
-                                        {additionalActions}
-                                    </RemoveFromDOM>
-
-                                    {/* Close button */}
                                     <RemoveFromDOM
-                                        // Hide when requested, or when pagination is enabled (the page navigation bar will render its own close button).
-                                        when={hideCloseButton || isPaginated}
-                                    >
-                                        <Button
-                                            kind="tertiary"
-                                            shape="circle"
-                                            onClick={() => onClose(false)}
-                                            startEnhancer={(
-                                                <Icon icon={Close} size={20} />
-                                            )}
-                                            data-title-hidden={hideTitle}
-                                            className={clsx(
-                                                styles.closeButton,
-                                            )}
-                                        >
-                                            Close dialog
-                                        </Button>
-                                    </RemoveFromDOM>
-                                </div>
-
-                                {/* Pagination Navbar */}
-                                <RemoveFromDOM
-                                    // Hide when pagination is not enabled.
-                                    when={!isPaginated}
-                                >
-                                    <div
-                                        className={clsx(
-                                            styles.paginationNav,
-                                        )}
+                                        // Hide when pagination is not enabled.
+                                        when={!isPaginated}
                                     >
-                                        <div
-                                            className={clsx(
-                                                styles.paginationTitle,
-                                            )}
-                                        >
+                                        <div className={clsx(styles.paginationButtons)}>
                                             <Button
                                                 className={clsx(
                                                     styles.navButton,
                                                 )}
-                                                size="small"
+                                                size="medium"
                                                 kind="tertiary"
                                                 shape="circle"
                                                 onClick={() => pagination?.back()}
                                                 disabled={!pagination?.canGoBack()}
                                                 startEnhancer={(
-                                                    <Icon icon={ChevronLeft} size={20} />
+                                                    <Icon icon={ChevronLeft} size={16} />
                                                 )}
                                             >
                                                 Go to previous page in this modal
@@ -302,28 +276,41 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                                 className={clsx(
                                                     styles.navButton,
                                                 )}
-                                                size="small"
+                                                size="medium"
                                                 kind="tertiary"
                                                 shape="circle"
                                                 onClick={() => pagination?.forward()}
                                                 disabled={!pagination?.canGoForward()}
                                                 startEnhancer={(
-                                                    <Icon icon={ChevronRight} size={20} />
+                                                    <Icon icon={ChevronRight} size={16} />
                                                 )}
                                             >
                                                 Go to next page in this modal
                                             </Button>
-                                            <VisuallyHidden
-                                                // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
-                                                when={hideTitle}
-                                            >
-                                                <Dialog.Title as="h2" className={styles.titleTextContainer}>
-                                                    <TextWhenString kind="paragraphSmall" weight="medium">
-                                                        {title}
-                                                    </TextWhenString>
-                                                </Dialog.Title>
-                                            </VisuallyHidden>
                                         </div>
+                                    </RemoveFromDOM>
+                                    <VisuallyHidden
+                                        // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
+                                        when={hideTitle}
+                                    >
+                                        <Dialog.Title as="h2" className={styles.titleTextContainer}>
+                                            <TextWhenString kind="paragraphSmall" weight="medium">
+                                                {title}
+                                            </TextWhenString>
+                                        </Dialog.Title>
+                                    </VisuallyHidden>
+                                </div>
+                                <div className={styles.titleBarButtons}>
+                                    {/* Action Menu */}
+                                    <RemoveFromDOM when={!hasAdditionalActions}>
+                                        {additionalActions}
+                                    </RemoveFromDOM>
+
+                                    {/* Close button */}
+                                    <RemoveFromDOM
+                                        // Hide when requested, or when pagination is enabled (the page navigation bar will render its own close button).
+                                        when={hideCloseButton}
+                                    >
                                         <Button
                                             kind="tertiary"
                                             shape="circle"
@@ -338,36 +325,46 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                         >
                                             Close dialog
                                         </Button>
-                                    </div>
-                                </RemoveFromDOM>
+                                    </RemoveFromDOM>
+                                </div>
                             </div>
 
                             <div className={styles.content}>
-                                {(isPaginated && Array.isArray(children)) ? children.map((child) => (child && typeof child === 'object' && 'key' in child) && (
-                                    <Transition
-                                        show={child.key === pagination?.currentPage && loadedPage === child.key}
-                                        key={`transition_${child.key}`}
-                                        as="div"
-                                        enter={styles.paginationEnter}
-                                        enterFrom={styles.enterFromOpacity}
-                                        enterTo={styles.enterToOpacity}
-                                        leave={styles.paginationLeave}
-                                        leaveFrom={styles.leaveFromOpacity}
-                                        leaveTo={styles.leaveToOpacity}
-                                        afterLeave={() => {
-                                            setLoadedPage(pagination?.currentPage || null);
-                                        }}
-                                    >
-                                        {child}
-                                    </Transition>
-                                )) : children}
-                            </div>
-
-                            <RemoveFromDOM when={!bottomPanel}>
-                                <div className={styles.bottomPanel}>
-                                    {bottomPanel}
+                                <div className={styles.contentChildren}>
+                                    {(isPaginated && Array.isArray(children)) ? children.map((child) => (child && typeof child === 'object' && 'key' in child) && (
+                                        <Transition
+                                            show={child.key === pagination?.currentPage && loadedPage === child.key}
+                                            key={`transition_${child.key}`}
+                                            as="div"
+                                            enter={styles.paginationEnter}
+                                            enterFrom={styles.enterFromOpacity}
+                                            enterTo={styles.enterToOpacity}
+                                            leave={styles.paginationLeave}
+                                            leaveFrom={styles.leaveFromOpacity}
+                                            leaveTo={styles.leaveToOpacity}
+                                            afterLeave={() => {
+                                                setLoadedPage(pagination?.currentPage || null);
+                                            }}
+                                        >
+                                            {child}
+                                        </Transition>
+                                    )) : children}
                                 </div>
-                            </RemoveFromDOM>
+                                {bottomPanel && (
+                                    <>
+                                        <div tabIndex={-1} aria-hidden="true" className={styles.bottomPanelSpacer}>
+                                            {bottomPanel}
+                                        </div>
+                                        <div className={styles.bottomPanel}>
+                                            <div className={styles.glassOpacity} />
+                                            <div className={styles.glassBlend} />
+                                            <div className={styles.bottomPanelContent}>
+                                                {bottomPanel}
+                                            </div>
+                                        </div>
+                                    </>
+                                )}
+                            </div>
                         </Dialog.Panel>
                     </Transition.Child>
                 </div>
diff --git a/src/stories/field/Field.stories.ts b/src/stories/field/Field.stories.ts
index 9ed5bf5..550646c 100644
--- a/src/stories/field/Field.stories.ts
+++ b/src/stories/field/Field.stories.ts
@@ -17,7 +17,7 @@ export const Default: Story = {
         description: 'Description.',
         children: createElement('div', {
             style: {
-                backgroundColor: 'var(--pte-colors-backgroundSecondary)',
+                backgroundColor: 'var(--pte-new-colors-inputFill)',
                 height: '36px',
                 width: '100%',
                 display: 'flex',
diff --git a/src/stories/icon/ArrowRight.tsx b/src/stories/icon/ArrowRight.tsx
new file mode 100644
index 0000000..ca0f840
--- /dev/null
+++ b/src/stories/icon/ArrowRight.tsx
@@ -0,0 +1,11 @@
+import { memo } from 'react';
+import type { IconDefinition } from './Icon';
+
+export const ArrowRight: IconDefinition = memo(({ size }) => (
+    <svg width={size} height={size} viewBox="0 0 448 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M440.6 273.4c4.7-4.5 7.4-10.8 7.4-17.4s-2.7-12.8-7.4-17.4l-176-168c-9.6-9.2-24.8-8.8-33.9 .8s-8.8 24.8 .8 33.9L364.1 232 24 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l340.1 0L231.4 406.6c-9.6 9.2-9.9 24.3-.8 33.9s24.3 9.9 33.9 .8l176-168z"
+            fill="currentColor"
+        />
+    </svg>
+));
diff --git a/src/stories/icon/Check.tsx b/src/stories/icon/Check.tsx
new file mode 100644
index 0000000..1c87f60
--- /dev/null
+++ b/src/stories/icon/Check.tsx
@@ -0,0 +1,11 @@
+import { memo } from 'react';
+import type { IconDefinition } from './Icon';
+
+export const Check: IconDefinition = memo(({ size }) => (
+    <svg width={size} height={size} viewBox="0 0 448 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z"
+            fill="currentColor"
+        />
+    </svg>
+));
diff --git a/src/stories/icon/Icon.stories.ts b/src/stories/icon/Icon.stories.ts
index 6c00ab2..00127e9 100644
--- a/src/stories/icon/Icon.stories.ts
+++ b/src/stories/icon/Icon.stories.ts
@@ -18,7 +18,7 @@ const getArgs = (icon: IconDefinition): Story => ({
         icon,
         size: 20,
         style: {
-            color: pvar('colors.contentPrimary'),
+            color: pvar('new.colors.contentPrimary'),
         },
     },
 });
@@ -27,3 +27,7 @@ export const Close: Story = getArgs(Icons.Close);
 export const ChevronLeft: Story = getArgs(Icons.ChevronLeft);
 export const ChevronRight: Story = getArgs(Icons.ChevronRight);
 export const Ellipsis: Story = getArgs(Icons.Ellipsis);
+export const NotificationDot: Story = getArgs(Icons.NotificationDot);
+export const Spinner: Story = getArgs(Icons.Spinner);
+export const Check: Story = getArgs(Icons.Check);
+export const ArrowRight: Story = getArgs(Icons.ArrowRight);
diff --git a/src/stories/icon/index.ts b/src/stories/icon/index.ts
index 6e255ec..01676d1 100644
--- a/src/stories/icon/index.ts
+++ b/src/stories/icon/index.ts
@@ -4,3 +4,6 @@ export { ChevronLeft } from './ChevronLeft';
 export { ChevronRight } from './ChevronRight';
 export { Ellipsis } from './Ellipsis';
 export { Spinner } from './Spinner';
+export { NotificationDot } from './NotificationDot';
+export { Check } from './Check';
+export { ArrowRight } from './ArrowRight';
diff --git a/src/stories/input/Input.module.scss b/src/stories/input/Input.module.scss
index 54b922c..875febe 100644
--- a/src/stories/input/Input.module.scss
+++ b/src/stories/input/Input.module.scss
@@ -3,13 +3,13 @@
     flex-direction: row;
     align-items: center;
     gap: 12px;
-    min-height: 36px;
+    min-height: 34px;
 
-    background-color: var(--pte-colors-backgroundSecondary);
+    background-color: var(--pte-new-colors-inputFill);
 
     //height: 36px;
     width: 100%;
-    padding: calc(7.5px - var(--pte-typography-verticalMetricsAdjust)) 15px 7.5px;
+    padding: calc(7.5px - var(--pte-typography-verticalMetricsAdjust)) 14px 7.5px;
 
     font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
     font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
@@ -20,46 +20,46 @@
 
     border-width: 1px;
     border-style: solid;
-    border-color: var(--pte-colors-backgroundSecondary);
+    border-color: var(--pte-new-colors-inputFill);
     border-radius: var(--pte-borders-radius-rectangle);
 
     transition: var(--pte-animations-interaction);
 
     &:focus-within {
         outline: none;
-        border-color: var(--pte-colors-borderSelected);
-        background-color: var(--pte-colors-backgroundTertiary);
+        border-color: var(--pte-new-colors-inputBorderFocus);
+        background-color: var(--pte-new-colors-inputFillFocus);
     }
 
     &[data-status="disabled"] {
-        border-color: var(--pte-colors-backgroundTertiary);
-        background-color: var(--pte-colors-backgroundTertiary);
-        color: var(--pte-colors-contentDisabled);
+        border-color: var(--pte-new-colors-inputFillDisabled);
+        background-color: var(--pte-new-colors-inputFillDisabled);
+        color: var(--pte-new-colors-contentDisabled);
         pointer-events: none;
         cursor: default;
 
         &:focus-within {
-            border-color: var(--pte-colors-backgroundTertiary) !important;
+            border-color: var(--pte-new-colors-inputFillDisabled) !important;
         }
     }
 
     &[data-status="error"] {
-        border-color: var(--pte-colors-borderNegative);
-        background-color: var(--pte-colors-backgroundNegative);
-        color: var(--pte-colors-contentNegative);
+        border-color: var(--pte-new-colors-inputBorderNegative);
+        background-color: var(--pte-new-colors-inputFillNegative);
+        color: var(--pte-new-colors-contentNegative);
 
         &:focus-within {
-            color: var(--pte-colors-contentPrimary);
+            color: var(--pte-new-colors-contentPrimary);
         }
     }
 
     &[data-status="success"] {
-        border-color: var(--pte-colors-borderPositive);
-        background-color: var(--pte-colors-backgroundPositive);
-        color: var(--pte-colors-contentPositive);
+        border-color: var(--pte-new-colors-contentPositive);
+        background-color: var(--pte-new-colors-backgroundPositive);
+        color: var(--pte-new-colors-contentPositive);
 
         &:focus-within {
-            color: var(--pte-colors-contentPrimary);
+            color: var(--pte-new-colors-contentPrimary);
         }
     }
 
@@ -73,20 +73,20 @@
         outline: none;
 
         &::placeholder {
-            color: var(--pte-colors-contentTertiary);
+            color: var(--pte-new-colors-contentTertiary);
         }
 
         &[aria-disabled=true] {
-            color: var(--pte-colors-contentDisabled);
+            color: var(--pte-new-colors-contentDisabled);
             cursor: default;
 
             &::placeholder {
-                color: var(--pte-colors-contentDisabled);
+                color: var(--pte-new-colors-contentDisabled);
             }
         }
 
         &[type="color"]::-webkit-color-swatch {
-            border: 1px solid var(--pte-colors-borderSelected);
+            border: 1px solid var(--pte-new-colors-inputBorderFocus);
             border-radius: var(--pte-borders-radius-circle);
         }
 
@@ -100,26 +100,26 @@
         }
 
         &[data-status="disabled"] {
-            color: var(--pte-colors-contentDisabled);
+            color: var(--pte-new-colors-contentDisabled);
 
             &::placeholder {
-                color: var(--pte-colors-contentDisabled);
+                color: var(--pte-new-colors-contentDisabled);
             }
         }
     
         &[data-status="error"] {
-            color: var(--pte-colors-contentNegative);
+            color: var(--pte-new-colors-contentNegative);
 
             &::placeholder {
-                color: var(--pte-colors-contentNegative);
+                color: var(--pte-new-colors-contentNegative);
             }
         }
     
         &[data-status="success"] {
-            color: var(--pte-colors-contentPositive);
+            color: var(--pte-new-colors-contentPositive);
 
             &::placeholder {
-                color: var(--pte-colors-contentPositive);
+                color: var(--pte-new-colors-contentPositive);
             }
         }
     }
@@ -127,7 +127,7 @@
 
 .enhancer {
     display: flex;
-    color: var(--pte-colors-contentSecondary);
+    color: var(--pte-new-colors-contentSecondary);
     margin-block-start: -0.5px;
     font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
     font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
@@ -135,6 +135,18 @@
     letter-spacing: var(--pte-typography-styles-paragraphSmall-letterSpacing);
     line-height: var(--pte-typography-styles-paragraphSmall-lineHeight);
     text-transform: var(--pte-typography-styles-paragraphSmall-textTransform);
+
+    &[data-status="disabled"] {
+        color: var(--pte-new-colors-contentDisabled);
+    }
+
+    &[data-status="error"] {
+        color: var(--pte-new-colors-contentNegative);
+    }
+
+    &[data-status="success"] {
+        color: var(--pte-new-colors-contentPositive);
+    }
 }
 
 .container {
@@ -148,13 +160,13 @@
 
 // Use double selector to ensure specificity is higher than the default styles
 .label.label {
-    color: var(--pte-colors-contentPrimary);
+    color: var(--pte-new-colors-contentPrimary);
     font-weight: var(--pte-typography-fontWeights-medium);
 }
 
 // Use double selector to ensure specificity is higher than the default styles
 .description.description {
-    color: var(--pte-colors-contentTertiary);
+    color: var(--pte-new-colors-contentTertiary);
 }
 
 .hidden {
diff --git a/src/stories/input/Input.stories.ts b/src/stories/input/Input.stories.ts
index e47d517..d0e16a4 100644
--- a/src/stories/input/Input.stories.ts
+++ b/src/stories/input/Input.stories.ts
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof Input>;
 
 export const Default: Story = {
     args: {
-        placeholder: 'Billie Eilish',
+        placeholder: 'Mia Dolan',
         label: 'Name',
         description: 'Type your full name here.',
     },
@@ -32,7 +32,7 @@ export const Password: Story = {
 
 export const Success: Story = {
     args: {
-        placeholder: 'billie@eilish.com',
+        placeholder: 'mia@slingshot.fm',
         value: 'valid@email.com',
         onChange: () => {},
         type: 'email',
@@ -44,7 +44,7 @@ export const Success: Story = {
 
 export const Error: Story = {
     args: {
-        placeholder: 'billie@eilish.com',
+        placeholder: 'mia@slingshot.fm',
         value: 'notavalid@email',
         onChange: () => {},
         type: 'email',
@@ -56,7 +56,7 @@ export const Error: Story = {
 
 export const Disabled: Story = {
     args: {
-        placeholder: 'billie@eilish.com',
+        placeholder: 'mia@slingshot.fm',
         type: 'email',
         label: 'Email',
         description: 'Enter your email address.',
@@ -66,7 +66,7 @@ export const Disabled: Story = {
 
 export const WithEnhancer: Story = {
     args: {
-        placeholder: 'Billie Eilish',
+        placeholder: 'Mia Dolan',
         label: 'Name',
         description: 'Type your full name here.',
         startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
@@ -78,7 +78,7 @@ export const WithEnhancer: Story = {
 
 export const WithEndEnhancer: Story = {
     args: {
-        placeholder: 'Billie Eilish',
+        placeholder: 'Mia Dolan',
         label: 'Name',
         description: 'Type your full name here.',
         endEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
@@ -90,7 +90,7 @@ export const WithEndEnhancer: Story = {
 
 export const WithCustomLabel: Story = {
     args: {
-        placeholder: 'Billie Eilish',
+        placeholder: 'Mia Dolan',
         label: createElement(
             'span',
             null,
diff --git a/src/stories/input/Input.tsx b/src/stories/input/Input.tsx
index 426bbff..c2e2767 100644
--- a/src/stories/input/Input.tsx
+++ b/src/stories/input/Input.tsx
@@ -100,11 +100,16 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
         >
             <div
                 className={styles.inputContainer}
-                data-status={status}
-                data-disabled={disabled}
+                // data-status={status}
+                // data-disabled={disabled}
+                data-status={disabled ? 'disabled' : (status || 'default')}
             >
                 {!!startEnhancer && (
-                    <div {...overrides?.startEnhancerContainer} className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                    <div
+                        {...overrides?.startEnhancerContainer}
+                        className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                    >
                         {!!startEnhancer && (
                             <MemoizedEnhancer
                                 enhancer={startEnhancer}
@@ -121,7 +126,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
                     aria-label={typeof label === 'string' ? label : props['aria-label']}
                     aria-describedby={`${inputID}-description`}
                     aria-disabled={disabled}
-                    data-status={status}
+                    data-status={disabled ? 'disabled' : (status || 'default')}
                     readOnly={disabled}
                     className={clsx(
                         props.className,
@@ -129,7 +134,11 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forward
                     )}
                 />
                 {!!endEnhancer && (
-                    <div {...overrides?.endEnhancerContainer} className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                    <div
+                        {...overrides?.endEnhancerContainer}
+                        className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                    >
                         {!!endEnhancer && (
                             <MemoizedEnhancer
                                 enhancer={endEnhancer}
diff --git a/src/stories/menu/Menu.module.scss b/src/stories/menu/Menu.module.scss
index 74f044a..30ad451 100644
--- a/src/stories/menu/Menu.module.scss
+++ b/src/stories/menu/Menu.module.scss
@@ -9,9 +9,9 @@
     margin-top: 6px;
 
     border-radius: 8px;
-    background: var(--pte-colors-backgroundPrimary);
-    box-shadow: var(--pte-borders-dropdown-shadow);
-    border: var(--pte-borders-dropdown-border);
+    background: var(--pte-new-colors-surfacePrimary);
+    box-shadow: var(--pte-new-lighting-deepBelow);
+    border: var(--pte-new-borders-dropdown-border);
 
     display: flex;
     width: 200px;
@@ -40,16 +40,16 @@
     align-items: center;
     justify-content: space-between;
 
-    color: var(--pte-colors-contentSecondary);
+    color: var(--pte-new-colors-contentPrimary);
 
-    border-bottom: 0.5px solid var(--pte-colors-borderOpaque);
+    border-bottom: 0.5px solid var(--pte-new-colors-borderMedium);
 
     &:last-child {
         border-bottom: none;
     }
 
     &:hover {
-        background-color: var(--pte-colors-backgroundSecondary);
+        background-color: var(--pte-new-colors-overlayMedium);
     }
 
     @keyframes gradientFlow {
diff --git a/src/stories/menu/Menu.stories.tsx b/src/stories/menu/Menu.stories.tsx
index e44eecc..7c2a0ef 100644
--- a/src/stories/menu/Menu.stories.tsx
+++ b/src/stories/menu/Menu.stories.tsx
@@ -19,33 +19,29 @@ export const Default: Story = {
         children: 'Hello world! This is a new Menu component.',
     },
     render: (args) => (
-        <Menu as="div">
-            <Menu.Button>
-                <Button
-                    kind="tertiary"
-                    shape="circle"
-                    startEnhancer={(
-                        <Ellipsis size={20} />
-                    )}
-                >
-                    Action menu
-                </Button>
-            </Menu.Button>
-            <Menu.Items>
-                <Menu.Item as="button">
-                    Dispute
-                </Menu.Item>
-                <Menu.Item as="button">
-                    Transfer
-                    <ChevronRight size={20} />
-                </Menu.Item>
-            </Menu.Items>
-        </Menu>
+        <div style={{ height: '150px' }}>
+            <Menu as="div">
+                <Menu.Button>
+                    <Button
+                        kind="tertiary"
+                        shape="circle"
+                        startEnhancer={(
+                            <Ellipsis size={20} />
+                        )}
+                    >
+                        Action menu
+                    </Button>
+                </Menu.Button>
+                <Menu.Items>
+                    <Menu.Item as="button">
+                        Dispute
+                    </Menu.Item>
+                    <Menu.Item as="button">
+                        Transfer
+                        <ChevronRight size={20} />
+                    </Menu.Item>
+                </Menu.Items>
+            </Menu>
+        </div>
     ),
 };
-
-export const Secondary: Story = {
-    args: {
-        children: 'Hello world! This is a secondary component.',
-    },
-};
diff --git a/src/stories/popover/Popover.module.scss b/src/stories/popover/Popover.module.scss
index 9f12880..02899a3 100644
--- a/src/stories/popover/Popover.module.scss
+++ b/src/stories/popover/Popover.module.scss
@@ -13,10 +13,10 @@
 }
 
 .content {
-    background-color: var(--pte-colors-backgroundPrimary);
+    background-color: var(--pte-new-colors-surfacePrimary);
     animation: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOutExpo) 0s 1 intro;
     width: fit-content;
     border-radius: var(--pte-borders-radius-rounded);
-    box-shadow: var(--pte-lighting-shallowPopup);
-    border: var(--pte-borders-dropdown-border);
+    box-shadow: var(--pte-new-lighting-shallowPopup);
+    border: var(--pte-new-borders-dropdown-border);
 }
diff --git a/src/stories/select/Select.module.scss b/src/stories/select/Select.module.scss
index 19b7a82..c43d0cb 100644
--- a/src/stories/select/Select.module.scss
+++ b/src/stories/select/Select.module.scss
@@ -7,6 +7,16 @@
     }
 }
 
+.listboxButton {
+    &[aria-expanded = true] {
+        .chevron {
+            color: var(--pte-new-colors-contentPrimary);
+        }
+        border-color: var(--pte-new-colors-inputBorderFocus);
+        background-color: var(--pte-new-colors-inputFillFocus);
+    }
+}
+
 .field {
     display: flex;
     flex-direction: row;
@@ -33,11 +43,11 @@
     display: flex;
     flex-direction: column;
 
-    background-color: var(--pte-colors-backgroundPrimary);
+    background-color: var(--pte-new-colors-surfacePrimary);
 
-    border: var(--pte-borders-dropdown-border);
+    border: var(--pte-new-borders-dropdown-border);
     border-radius: var(--pte-borders-radius-rectangle);
-    box-shadow: var(--pte-borders-dropdown-shadow);
+    box-shadow: var(--pte-new-lighting-deepBelow);
 
     transition: var(--pte-animations-interaction);
 
@@ -49,12 +59,12 @@
 .option {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     gap: 8px;
 
-    padding: 8px 16px;
-    margin: -1px;
+    padding: 6.5px 14px;
+    //margin: -1px;
 
     // border: 1px solid var(--pte-borders-dropdown-color);
     //border-right: 1px solid var(--pte-borders-dropdown-color);
@@ -62,19 +72,19 @@
     transition: var(--pte-animations-interaction);
 
     &:hover, &[data-headlessui-state="active"] {
-        background-color: var(--pte-colors-backgroundSecondary);
+        background-color: var(--pte-new-colors-overlayMedium);
     }
 
     &[data-selected=true] {
-        background-color: var(--pte-colors-backgroundTertiary);
+        background-color: var(--pte-new-colors-overlaySubtle);
     }
 
-    &[data-disabled=true], &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
         pointer-events: none;
         cursor: default;
 
         &, & * {
-            color: var(--pte-colors-contentDisabled);
+            color: var(--pte-new-colors-contentDisabled);
         }
     }
 }
@@ -100,26 +110,38 @@
 
     &[data-headlessui-state~="active"] {
         .radioCircle {
-            border-color: var(--pte-colors-contentPrimary);
+            border-color: var(--pte-new-colors-contentPrimary);
         }
     }
 
     &[data-headlessui-state~="checked"] {
         .radioCircle {
-            border: 5px solid var(--pte-colors-contentPrimary);
+            border: 5px solid var(--pte-new-colors-contentPrimary);
         }
     }
 
-    &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
         pointer-events: none;
         cursor: default;
 
         &, & * {
-            color: var(--pte-colors-contentDisabled);
+            color: var(--pte-new-colors-contentDisabled);
+        }
+
+        .radioCircle {
+            border-color: var(--pte-new-colors-contentDisabled);
         }
+    }
+
+    &[data-status="error"] {
+        .radioCircle {
+            border-color: var(--pte-new-colors-contentNegative);
+        }
+    }
 
+    &[data-status="success"] {
         .radioCircle {
-            border-color: var(--pte-colors-contentDisabled);
+            border-color: var(--pte-new-colors-contentPositive);
         }
     }
 }
@@ -130,6 +152,6 @@
     width: 14px;
     height: 14px;
     border-radius: 100%;
-    border: 1.5px solid var(--pte-colors-contentTertiary);
+    border: 1.5px solid var(--pte-new-colors-contentTertiary);
     transition: all var(--pte-animations-interaction);
 }
diff --git a/src/stories/select/Select.stories.ts b/src/stories/select/Select.stories.ts
index 3bc9794..d93e0a7 100644
--- a/src/stories/select/Select.stories.ts
+++ b/src/stories/select/Select.stories.ts
@@ -32,18 +32,15 @@ export const Default: Story = {
             { id: '1', node: 'Single' },
             { id: '2', node: 'EP' },
             { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
-            { id: '3', node: 'Album (LP)' },
+            { id: '4', node: 'Compilation' },
+            { id: '5', node: 'Mixtape' },
+            { id: '6', node: 'Live album' },
+            { id: '7', node: 'Remix album' },
+            { id: '8', node: 'Soundtrack' },
+            { id: '9', node: 'Demo' },
+            { id: '10', node: 'Reissue' },
+            { id: '11', node: 'Promo' },
+            { id: '12', node: 'Other' },
         ],
     },
     render,
@@ -83,3 +80,18 @@ export const WithCustomNodes: Story = {
     },
     render,
 };
+
+export const Radio: Story = {
+    args: {
+        label: 'Release type',
+        description: 'Select the type of release you want to create.',
+        kind: 'radio',
+        options: [
+            { id: '1', node: 'Single' },
+            { id: '2', node: 'EP' },
+            { id: '3', node: 'Album (LP)' },
+            { id: '4', node: 'Compilation' },
+        ],
+    },
+    render,
+};
diff --git a/src/stories/select/Select.tsx b/src/stories/select/Select.tsx
index 804a8c0..9f37fd0 100644
--- a/src/stories/select/Select.tsx
+++ b/src/stories/select/Select.tsx
@@ -20,6 +20,7 @@ import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pget, theme } from '../theme';
 import { Field } from '../field';
 import { TextWhenString } from '../utility';
+import { Check, Icon } from '../icon';
 
 export type Option<T = Record<string, any>> = {
     id: string,
@@ -131,11 +132,16 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                         className={clsx(
                             overrides?.selectInput?.className,
                             inputStyles.inputContainer,
+                            styles.listboxButton,
                             styles.field,
                         )}
                     >
                         {!!startEnhancer && (
-                            <div {...overrides?.startEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                            <div
+                                {...overrides?.startEnhancerContainer}
+                                className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
+                                data-status={disabled ? 'disabled' : (status || 'default')}
+                            >
                                 {!!startEnhancer && (
                                     <MemoizedEnhancer
                                         enhancer={startEnhancer}
@@ -146,7 +152,11 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                         )}
                         {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
                         {endEnhancer ? (
-                            <div {...overrides?.endEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                            <div
+                                {...overrides?.endEnhancerContainer}
+                                className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
+                                data-status={disabled ? 'disabled' : (status || 'default')}
+                            >
                                 {!!endEnhancer && (
                                     <MemoizedEnhancer
                                         enhancer={endEnhancer}
@@ -155,7 +165,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                 )}
                             </div>
                         ) : (
-                            <FontAwesomeIcon className={inputStyles.enhancer} width="10px" icon={faChevronDown} />
+                            <FontAwesomeIcon className={clsx(inputStyles.enhancer, styles.chevron)} data-status={disabled ? 'disabled' : (status || 'default')} width="10px" icon={faChevronDown} />
                         )}
                     </Listbox.Button>
                     <Transition
@@ -193,6 +203,9 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                             {option.node}
                                         </Text>
                                     ) : option.node}
+                                    {option.id === value && (
+                                        <Icon icon={Check} size={12} />
+                                    )}
                                 </Listbox.Option>
                             ))}
                         </Listbox.Options>
@@ -210,6 +223,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                             key={option.id}
                             value={option.id}
                             disabled={option.disabled || false}
+                            data-status={disabled ? 'disabled' : (status || 'default')}
                         >
                             <div className={styles.radioCircle} />
                             <TextWhenString kind="paragraphXSmall">
diff --git a/src/stories/styledlink/StyledLink.module.scss b/src/stories/styledlink/StyledLink.module.scss
index bfe614d..87cf21d 100644
--- a/src/stories/styledlink/StyledLink.module.scss
+++ b/src/stories/styledlink/StyledLink.module.scss
@@ -1,11 +1,11 @@
 .link {
     text-decoration: none;
-    border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    border-bottom: 1px solid var(--pte-new-colors-borderMedium);
     cursor: pointer;
     font-weight: var(--pte-typography-fontWeights-medium);
     transition: border-bottom-color var(--pte-animations-interaction);
 
     &:hover {
-        border-bottom: 1px solid var(--pte-colors-contentPrimary);
+        border-bottom: 1px solid var(--pte-new-colors-contentPrimary);
     }
 }
diff --git a/src/stories/table/Table.module.scss b/src/stories/table/Table.module.scss
index 0dcbf87..636fdab 100644
--- a/src/stories/table/Table.module.scss
+++ b/src/stories/table/Table.module.scss
@@ -11,7 +11,7 @@
     }
 
     th {
-        color: var(--pte-colors-contentSecondary);
+        color: var(--pte-new-colors-contentSecondary);
         padding: 10px 12px;
     }
 
@@ -20,11 +20,12 @@
     }
 
     tr {
-        border-top: 1px solid var(--pte-colors-borderOpaque);
+        border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
     }
 
-    tr:last-child {
-        border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    .tableHeader {
+        border-top: 1px solid var(--pte-new-colors-borderMedium);
+        border-bottom: 1px solid var(--pte-new-colors-borderMedium);
     }
 
     tr.empty {
@@ -39,7 +40,7 @@
         transition: background-color var(--pte-animations-interaction);
 
         &:hover {
-            background-color: var(--pte-colors-backgroundSecondary);
+            background-color: var(--pte-new-colors-overlayMedium);
         }
 
         &, & * {
diff --git a/src/stories/table/Table.stories.ts b/src/stories/table/Table.stories.ts
index ea77ca0..e06ba90 100644
--- a/src/stories/table/Table.stories.ts
+++ b/src/stories/table/Table.stories.ts
@@ -19,7 +19,7 @@ export const Default: Story = {
                 title: 'Name',
             },
             {
-                title: 'Type',
+                title: 'Role',
                 hideBelow: 'sm',
             },
             {
@@ -29,21 +29,21 @@ export const Default: Story = {
         rows: [
             {
                 id: 1,
-                name: 'Billie Eilish',
-                type: 'Artist',
-                email: 'billie@slingshot.fm',
+                name: 'Mia Dolan',
+                type: 'Actress',
+                email: 'mia@slingshot.fm',
             },
             {
                 id: 2,
-                name: 'Taylor Swift',
+                name: 'Sebastian Wilder',
                 type: 'Artist',
-                email: 'taylor@slingshot.fm',
+                email: 'seb@slingshot.fm',
             },
             {
                 id: 3,
-                name: 'Valkyrae',
-                type: 'Creator',
-                email: 'valkyrae@slingshot.fm',
+                name: 'Amy Brandt',
+                type: 'Casting',
+                email: 'amy@slingshot.fm',
             },
         ],
         rowRenderFn: (row) => ({
diff --git a/src/stories/table/Table.tsx b/src/stories/table/Table.tsx
index 74e7a09..67186db 100644
--- a/src/stories/table/Table.tsx
+++ b/src/stories/table/Table.tsx
@@ -151,7 +151,13 @@ export function Table<RowData extends Record<string, any>[]>({
             }}
         >
             <thead {...overrides?.thead}>
-                <tr {...overrides?.trHead}>
+                <tr
+                    {...overrides?.trHead}
+                    className={clsx(
+                        styles.tableHeader,
+                        overrides?.trHead?.className,
+                    )}
+                >
                     {columns.map((column) => (
                         <th
                             {...{
diff --git a/src/stories/tabs/Tabs.module.scss b/src/stories/tabs/Tabs.module.scss
index 393febe..2de5892 100644
--- a/src/stories/tabs/Tabs.module.scss
+++ b/src/stories/tabs/Tabs.module.scss
@@ -1,6 +1,5 @@
 .tabList {
-    //border-bottom: 4px solid var(--pte-colors-borderOpaque);
-    padding-bottom: 4px;
+    //padding-bottom: 4px;
     overflow-x: scroll;
     //overflow-y: visible;
     position: relative;
@@ -12,20 +11,87 @@
     &::-webkit-scrollbar {
         display: none;
     }
+
+    &.thick {
+        padding-bottom: 4px;
+        //border-bottom: 4px solid var(--pte-new-colors-borderMedium);
+    }
+    &.thin {
+        padding-bottom: 1px;
+        //border-bottom: 1px solid var(--pte-new-colors-borderMedium);
+    }
+
+    &.full {
+        justify-content: stretch;
+    }
+    //&.glass {
+    //    position: absolute;
+    //    width: 100%;
+    //}
+}
+
+.tabBackground {
+    &.glass {
+        position: absolute;
+        width: 100%;
+    }
+}
+
+.tabGroup {
+    width: 100%;
+    overflow: auto;
+    height: 100%;
+
+    &.glass {
+        position: relative;
+        overflow: hidden;
+        display: flex;
+    }
+}
+
+.glassContainer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.glassBlend {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--pte-new-materials-secondaryRegular-backgroundBlend);
+    mix-blend-mode: var(--pte-new-materials-secondaryRegular-mixBlendMode);
+}
+
+.glassOpacity {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--pte-new-materials-secondaryRegular-background);
+    backdrop-filter: var(--pte-new-blurs-strong);
 }
 
 .tabListBorder {
-    border-bottom: 4px solid var(--pte-colors-borderOpaque);
     width: 100%;
-    margin-top: -4px;
+    position: relative;
+
+    &.thick {
+        border-bottom: 4px solid var(--pte-new-colors-borderMedium);
+        margin-top: -4px;
+    }
+    &.thin {
+        border-bottom: 1px solid var(--pte-new-colors-borderMedium);
+        margin-top: -1px;
+    }
 }
 
+// I think activeTabBorder is no longer used?
 .activeTabBorder {
     position: absolute;
     bottom: 0;
     width: var(--tab-width);
     height: 4px;
-    background-color: var(--pte-colors-contentPrimary);
+    background-color: var(--pte-new-colors-contentPrimary);
 
     transition: transform var(--pte-animations-duration-slow) var(--pte-animations-timing-easeInOutExpo);
 
@@ -35,21 +101,26 @@
 
 .activeTabUnderline {
     position: absolute;
-    bottom: -4px;
     left: 0;
     right: 0;
-    height: 4px;
-    background-color: var(--pte-colors-contentPrimary);
+    background-color: var(--pte-new-colors-contentPrimary);
+    z-index: 1;
+    overflow: visible;
+
+    &.thick {
+        bottom: -4px;
+        height: 4px;
+    }
+    &.thin {
+        bottom: -1px;
+        height: 1px;
+    }
 }
 
 @mixin tabCompactStyles {
     width: auto;
     padding: 4px 0 6px 0;
     margin: 0 20px 0 0;
-
-    &:not([aria-selected="true"]) {
-        color: var(--pte-colors-contentTertiary) !important;
-    }
 };
 
 .tab {
@@ -63,42 +134,112 @@
 
     transition: all var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOut);
 
+    &:not([aria-selected="true"]) {
+        color: var(--pte-new-colors-contentTertiary) !important;
+    }
+
     &.compact {
         @include tabCompactStyles;
     }
 
-    @container (min-width: 640px) {
-        &[aria-selected="true"]:not(.compact) {
-            background-color: var(--pte-colors-backgroundSecondary);
+    &.full {
+        width: 100px;
+        padding: 13px 13px;
+        flex-grow: 1;
+    }
+
+    &.fixed, &.full {
+        &[aria-selected="true"]{
+            background-color: var(--pte-new-colors-overlayStrong);
         }
 
-        &:hover:not(.compact) {
-            background-color: var(--pte-colors-backgroundSecondary);
+        &:hover {
+            background-color: var(--pte-new-colors-overlayMedium);
         }
 
-        &:active:not(.compact) {
-            background-color: var(--pte-colors-backgroundTertiary);
+        &:active {
+            background-color: var(--pte-new-colors-overlayStrong);
         }
     }
 
-    @container (max-width: 640px) {
+    @container (min-width: 641px) {
         &.auto {
-            @include tabCompactStyles;
-            &[aria-selected="true"]:not(.auto):not(.compact) {
-                background-color: var(--pte-colors-backgroundSecondary);
+            &[aria-selected="true"] {
+                background-color: var(--pte-new-colors-overlayStrong);
             }
 
-            &:hover:not(.auto):not(.compact) {
-                background-color: var(--pte-colors-backgroundSecondary);
+            &:hover {
+                background-color: var(--pte-new-colors-overlayMedium);
             }
 
-            &:active:not(.auto):not(.compact) {
-                background-color: var(--pte-colors-backgroundTertiary);
+            &:active {
+                background-color: var(--pte-new-colors-overlayStrong);
             }
         }
     }
+    @container (max-width: 640px) {
+        &.auto {
+            @include tabCompactStyles;
+        }
+    }
+}
+
+.tabPanels {
+    &.glass {
+        width: 100%;
+    }
 }
 
 .panel {
     padding-top: 16px;
+    overflow-y: scroll;
+    height: 100%;
+    width: 100%;
+
+    &.glass {
+        &.full {
+            &.thick {
+                padding-top: 64px;
+            }
+            &.thin {
+                padding-top: 61px;
+            }
+        }
+        &.fixed {
+            &.thick {
+                padding-top: 56px;
+            }
+            &.thin {
+                padding-top: 53px;
+            }
+        }
+        &.compact {
+            &.thick {
+                padding-top: 48px;
+            }
+            &.thin {
+                padding-top: 45px;
+            }
+        }
+        @container (min-width: 641px) {
+            &.auto {
+                &.thick {
+                    padding-top: 56px;
+                }
+                &.thin {
+                    padding-top: 53px;
+                }
+            }
+        }
+        @container (max-width: 640px) {
+            &.auto {
+                &.thick {
+                    padding-top: 48px;
+                }
+                &.thin {
+                    padding-top: 45px;
+                }
+            }
+        }
+    }
 }
diff --git a/src/stories/tabs/Tabs.stories.ts b/src/stories/tabs/Tabs.stories.ts
deleted file mode 100644
index 16c468d..0000000
--- a/src/stories/tabs/Tabs.stories.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from './Tabs';
-
-const meta: Meta<typeof Tabs> = {
-    title: 'Surfaces/Tabs',
-    component: Tabs,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-    args: {
-        tabs: [
-            { title: 'Transactions', content: 'Tab 1 content' },
-            { title: 'Cards', content: 'Tab 2 content' },
-            { title: 'Documents', content: 'Tab 3 content' },
-            // { title: 'Tab 4', content: 'Tab 4 content' },
-            // { title: 'Tab 5', content: 'Tab 5 content' },
-            // { title: 'Tab 6', content: 'Tab 6 content' },
-            // { title: 'Tab 7', content: 'Tab 7 content' },
-            // { title: 'Tab 8', content: 'Tab 8 content' },
-            // { title: 'Tab 9', content: 'Tab 9 content' },
-            // { title: 'Tab 10', content: 'Tab 10 content' },
-        ],
-    },
-};
-
-export const Compact: Story = {
-    args: {
-        kind: 'compact',
-        tabs: [
-            { title: 'Albums', content: 'Tab 1 content' },
-            { title: 'EPs', content: 'Tab 2 content' },
-            { title: 'Singles', content: 'Tab 3 content' },
-        ],
-    },
-};
diff --git a/src/stories/tabs/Tabs.stories.tsx b/src/stories/tabs/Tabs.stories.tsx
new file mode 100644
index 0000000..26a10ab
--- /dev/null
+++ b/src/stories/tabs/Tabs.stories.tsx
@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+    title: 'Surfaces/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+    args: {
+        tabs: [
+            { title: 'Transactions', content: 'Tab 1 content' },
+            { title: 'Cards', content: 'Tab 2 content' },
+            { title: 'Documents', content: 'Tab 3 content' },
+            // { title: 'Tab 4', content: 'Tab 4 content' },
+            // { title: 'Tab 5', content: 'Tab 5 content' },
+            // { title: 'Tab 6', content: 'Tab 6 content' },
+            // { title: 'Tab 7', content: 'Tab 7 content' },
+            // { title: 'Tab 8', content: 'Tab 8 content' },
+            // { title: 'Tab 9', content: 'Tab 9 content' },
+            // { title: 'Tab 10', content: 'Tab 10 content' },
+        ],
+    },
+    render: (args) => (
+        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
+            <Tabs {...args} />
+        </div>
+    ),
+};
+
+export const Compact: Story = {
+    args: {
+        kind: 'compact',
+        tabs: [
+            { title: 'Albums', content: 'Tab 1 content' },
+            { title: 'EPs', content: 'Tab 2 content' },
+            { title: 'Singles', content: 'Tab 3 content' },
+        ],
+    },
+    render: (args) => (
+        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
+            <Tabs {...args} />
+        </div>
+    ),
+};
+
+export const Full: Story = {
+    args: {
+        kind: 'full',
+        barStyle: 'thin',
+        tabs: [
+            { title: 'Albums', content: 'Tab 1 content' },
+            { title: 'EPs', content: 'Tab 2 content' },
+            { title: 'Singles', content: 'Tab 3 content' },
+        ],
+    },
+    render: (args) => (
+        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
+            <Tabs {...args} />
+        </div>
+    ),
+};
+
+export const Glass: Story = {
+    args: {
+        kind: 'full',
+        barStyle: 'thin',
+        backgroundStyle: 'glass',
+        tabs: [
+            { title: 'Albums', content: 'Tab 1 content' },
+            { title: 'EPs', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus. Fusce blandit leo in lectus blandit, sed elementum enim accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque pretium erat at lacus ultricies tincidunt. Praesent non luctus magna, ac efficitur ligula. Sed a justo fermentum, feugiat mauris vel, ultrices turpis. Ut interdum malesuada lacus, ac posuere sapien feugiat et. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus.' },
+            {
+                title: 'Singles',
+                content: (
+                    <div style={{
+                        width: '100%', height: '300px', background: 'red',
+                    }}
+                    >
+                        <p>
+                            Hello world!
+                        </p>
+                    </div>
+                ),
+            },
+            { title: 'Invoices', content: 'Tab 4 content' },
+            { title: 'Payments', content: 'Tab 5 content' },
+            { title: 'Payroll', content: 'Tab 6 content' },
+            { title: 'Insights', content: 'Tab 7 content' },
+            { title: 'Settings', content: 'Tab 8 content' },
+            { title: 'Account', content: 'Tab 9 content' },
+        ],
+    },
+    render: (args) => (
+        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
+            <div style={{ height: '120px' }}>
+                <Tabs {...args} />
+            </div>
+        </div>
+    ),
+};
+
+export const Scroll: Story = {
+    args: {
+        tabs: [
+            { title: 'Transactions', content: 'Tab 1 content' },
+            { title: 'Cards', content: 'Tab 2 content' },
+            { title: 'Documents', content: 'Tab 3 content' },
+            { title: 'Invoices', content: 'Tab 4 content' },
+            { title: 'Payments', content: 'Tab 5 content' },
+            { title: 'Payroll', content: 'Tab 6 content' },
+            { title: 'Insights', content: 'Tab 7 content' },
+            { title: 'Settings', content: 'Tab 8 content' },
+            { title: 'Account', content: 'Tab 9 content' },
+        ],
+    },
+    render: (args) => (
+        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
+            <Tabs {...args} />
+        </div>
+    ),
+};
diff --git a/src/stories/tabs/Tabs.tsx b/src/stories/tabs/Tabs.tsx
index bcddb8e..3accf43 100644
--- a/src/stories/tabs/Tabs.tsx
+++ b/src/stories/tabs/Tabs.tsx
@@ -25,10 +25,22 @@ export type TabsProps = {
      */
     tabWidth?: CSSLength;
     /**
-     * Stylistic alternates for the tabs. `fixed` will rely on the `tabWidth` prop and default to 150px; `compact` will use an alternate intrinsically-sized style that ignores the `tabWidth` prop; `auto` will use fixed style on larger screens and switch to compact style on smaller screens (below 640px, the default Paris theme's medium breakpoint).
+     * Stylistic alternates for the tabs.
+     * `fixed` will rely on the `tabWidth` prop and default to 150px;
+     * `compact` will use an alternate intrinsically-sized style that ignores the `tabWidth` prop;
+     * `auto` will use fixed style on larger screens and switch to compact style on smaller screens (below 640px, the default Paris theme's medium breakpoint).
+     * `full` will use a full-width style that ignores the `tabWidth` prop, with a taller height as well
      * @default auto
      */
-    kind?: 'fixed' | 'compact' | 'auto';
+    kind?: 'fixed' | 'compact' | 'auto' | 'full';
+    /**
+     * The thickness of the bottom bar. Defaults to `thick`.
+     */
+    barStyle?: 'thick' | 'thin';
+    /**
+     * The background style, with `default` being transparent and `glass` being a glassmorphism effect. Defaults to `default`.
+     */
+    backgroundStyle?: 'default' | 'glass';
     /**
      * The default index of the tab to render. Defaults to `0`.
      */
@@ -60,6 +72,8 @@ export const Tabs: FC<TabsProps> = ({
     tabs,
     tabWidth = '150px',
     kind = 'auto',
+    barStyle = 'thick',
+    backgroundStyle = 'default',
     defaultIndex = 0,
     index,
     onTabChange,
@@ -77,48 +91,66 @@ export const Tabs: FC<TabsProps> = ({
                     onTabChange?.(i);
                 }
             }}
+            className={clsx(styles.tabGroup, styles[backgroundStyle])}
         >
-            <Tab.List
-                style={{
-                    '--tab-width': tabWidth,
-                    '--tab-index': `${index ?? selectedIndex}`,
-                } as CSSProperties}
-                className={clsx(
-                    styles.tabList,
+            <div className={clsx(styles.tabBackground, styles[backgroundStyle])}>
+                {backgroundStyle === 'glass' && (
+                    <div className={styles.glassContainer}>
+                        <div className={styles.glassOpacity} />
+                        <div className={styles.glassBlend} />
+                    </div>
                 )}
-            >
-                {tabs.map(({ title }, i) => (
-                    <Tab
-                        key={`${id}-tab-${title}`}
-                        className={clsx(
-                            typography.paragraphXSmall,
-                            styles.tab,
-                            styles[kind],
-                        )}
-                    >
-                        {title}
-                        {i === (index ?? selectedIndex) && (
-                            <motion.div
-                                key={`${id}-tab-active-border`}
-                                className={styles.activeTabUnderline}
-                                layoutId={`${id}-tab-active-border`}
-                                transition={{
-                                    ease: easeInOutExpo,
-                                }}
-                            />
-                        )}
-                    </Tab>
-                ))}
+                <Tab.List
+                    style={{
+                        '--tab-width': tabWidth,
+                        '--tab-index': `${index ?? selectedIndex}`,
+                    } as CSSProperties}
+                    className={clsx(
+                        styles.tabList,
+                        styles[barStyle],
+                        styles[backgroundStyle],
+                    )}
+                >
+                    {tabs.map(({ title }, i) => (
+                        <Tab
+                            key={`${id}-tab-${title}`}
+                            className={clsx(
+                                typography.paragraphXSmall,
+                                styles.tab,
+                                styles[kind],
+                            )}
+                        >
+                            {title}
+                            {i === (index ?? selectedIndex) && (
+                                <motion.div
+                                    key={`${id}-tab-active-border`}
+                                    className={clsx(styles.activeTabUnderline, styles[barStyle])}
+                                    layoutId={`${id}-tab-active-border`}
+                                    transition={{
+                                        ease: easeInOutExpo,
+                                    }}
+                                />
+                            )}
+                        </Tab>
+                    ))}
 
-                {/* <div key={`${id}-tab-active-border`} className={styles.activeTabBorder} /> */}
-            </Tab.List>
-            <div className={styles.tabListBorder} />
+                    {/* <div key={`${id}-tab-active-border`} className={styles.activeTabBorder} /> */}
+                </Tab.List>
+                <div className={clsx(styles.tabListBorder, styles[barStyle])} />
+            </div>
 
-            <Tab.Panels>
+            <Tab.Panels
+                className={clsx(styles.tabPanels, styles[backgroundStyle])}
+            >
                 {tabs.map(({ title, content }) => (
                     <Tab.Panel
                         key={`${id}-tab-${title}-content`}
-                        className={styles.panel}
+                        className={clsx(
+                            styles.panel,
+                            styles[backgroundStyle],
+                            styles[barStyle],
+                            styles[kind],
+                        )}
                     >
                         {content}
                     </Tab.Panel>
diff --git a/src/stories/tag/Tag.module.scss b/src/stories/tag/Tag.module.scss
index e12e68d..e153dfb 100644
--- a/src/stories/tag/Tag.module.scss
+++ b/src/stories/tag/Tag.module.scss
@@ -3,48 +3,187 @@
 }
 
 .normal {
-    padding: 6px 12px;
-    border: 1px solid;
+    height: 26px;
+
+    &.rectangle {
+        padding: 7px 13px;
+
+        &.sharp {
+            padding: 6px 12px;
+        }
+
+        &.secondary, &.draft, &.new {
+            padding: 6px 12px;
+        }
+    }
+
+    &.square {
+        width: 26px;
+        padding: 4px;
+
+        &.sharp {
+            padding: 3px;
+        }
+
+        &.secondary, &.draft, &.new {
+            padding: 3px;
+        }
+    }
 }
 
 .compact {
-    padding: 6px 10px;
-    border-radius: var(--pte-borders-radius-roundedSmall);
+    height: 20px;
+
+    &.rectangle {
+        padding: 5px 10px;
 
-    &.secondary {
-        border: 1px solid var(--pte-colors-borderOpaque);
+        &.sharp {
+            padding: 4px 9px;
+        }
+
+        &.secondary, &.draft, &.new {
+            padding: 4px 9px;
+        }
+    }
+
+    &.square {
+        width: 20px;
+        padding: 4px;
+
+        &.sharp {
+            padding: 3px;
+        }
+
+        &.secondary, &.draft, &.new {
+            padding: 3px;
+        }
     }
 }
 
-.new {
-    padding: 4px 10px;
+.sharp {
+    border-radius: var(--pte-borders-radius-rectangle);
+    border: 1px solid;
+}
+
+.rounded {
+    border-radius: var(--pte-borders-radius-roundedSmall);
+}
+
+.roundedXL {
+    border-radius: var(--pte-borders-radius-pill);
+}
+
+.square {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon {
+    width: 12px;
+    height: 12px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+        width: 10px !important;
+        height: 10px !important;
+    }
 }
 
 .default {
-    background-color: var(--pte-colors-backgroundTertiary);
-    color: var(--pte-colors-contentTertiary);
-    border-color: var(--pte-colors-contentTertiary);
+    background-color: var(--pte-new-colors-overlayStrong);
+    color: var(--pte-new-colors-contentSecondary);
+    border-color: var(--pte-new-colors-contentSecondary);
 }
 
 .secondary {
     background-color: transparent;
-    color: var(--pte-colors-contentTertiary);
+    color: var(--pte-new-colors-contentSecondary);
+
+    border: 1px solid var(--pte-new-colors-borderMedium);
 }
 
 .positive {
-    background-color: var(--pte-colors-backgroundPositive);
-    color: var(--pte-colors-contentPositive);
-    border-color: var(--pte-colors-contentPositive);
+    color: var(--pte-new-colors-contentPositive);
+    background-color: var(--pte-new-colors-backgroundPositive);
+    border-color: var(--pte-new-colors-contentPositive);
+
+    &[data-status="medium"] {
+        background-color: var(--pte-new-colors-backgroundPositiveMedium);
+        border-color: var(--pte-new-colors-contentPositiveMedium);
+    }
+    &[data-status="strong"] {
+        background-color: var(--pte-new-colors-backgroundPositiveStrong);
+        border-color: var(--pte-new-colors-contentPositiveStrong);
+    }
 }
 
 .warning {
-    background-color: var(--pte-colors-backgroundWarning);
-    color: var(--pte-colors-contentWarning);
-    border-color: var(--pte-colors-contentWarning);
+    color: var(--pte-new-colors-contentWarning);
+    background-color: var(--pte-new-colors-backgroundWarning);
+    border-color: var(--pte-new-colors-contentWarning);
+
+    &[data-status="medium"] {
+        background-color: var(--pte-new-colors-backgroundWarningMedium);
+        border-color: var(--pte-new-colors-contentWarningMedium);
+    }
+    &[data-status="strong"] {
+        background-color: var(--pte-new-colors-backgroundWarningStrong);
+        border-color: var(--pte-new-colors-contentWarningStrong);
+    }
 }
 
 .negative {
-    background-color: var(--pte-colors-backgroundNegative);
-    color: var(--pte-colors-contentNegative);
-    border-color: var(--pte-colors-contentNegative);
+    color: var(--pte-new-colors-contentNegative);
+    background-color: var(--pte-new-colors-backgroundNegative);
+    border-color: var(--pte-new-colors-contentNegative);
+
+    &[data-status="medium"] {
+        background-color: var(--pte-new-colors-backgroundNegativeMedium);
+        border-color: var(--pte-new-colors-contentNegativeMedium);
+    }
+    &[data-status="strong"] {
+        background-color: var(--pte-new-colors-backgroundNegativeStrong);
+        border-color: var(--pte-new-colors-contentNegativeStrong);
+    }
+}
+
+.void {
+    background-color: var(--pte-new-colors-backgroundSecondary);
+    color: var(--pte-new-colors-contentDisabled);
+    border-color: var(--pte-new-colors-contentDisabled);
+}
+
+.draft {
+    background-color: transparent;
+    color: var(--pte-new-colors-contentTertiary);
+
+    border: 1px dashed var(--pte-new-colors-borderMedium);
+}
+
+.new {
+    color: var(--pte-new-colors-contentPrimary);
+    background-color: var(--pte-new-colors-backgroundAccentMedium);
+    animation: glow 2s infinite var(--pte-new-animations-timing-easeInOut);
+
+    border: 1px solid var(--pte-new-colors-contentAccent);
+}
+
+@keyframes glow {
+    0%, 100% {
+        box-shadow:
+                var(--pte-new-lighting-glowSubtle1),
+                var(--pte-new-lighting-glowSubtle2),
+                var(--pte-new-lighting-glowSubtle3);
+    }
+    50% {
+        box-shadow:
+                var(--pte-new-lighting-glowDeep1),
+                var(--pte-new-lighting-glowDeep2),
+                var(--pte-new-lighting-glowDeep3);
+    }
 }
\ No newline at end of file
diff --git a/src/stories/tag/Tag.stories.ts b/src/stories/tag/Tag.stories.ts
index 921dcb8..cf81ab9 100644
--- a/src/stories/tag/Tag.stories.ts
+++ b/src/stories/tag/Tag.stories.ts
@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { Tag } from './Tag';
 
 const meta: Meta<typeof Tag> = {
@@ -12,7 +15,7 @@ type Story = StoryObj<typeof Tag>;
 
 export const Default: Story = {
     args: {
-        children: 'Explicit',
+        children: 'Label',
     },
 };
 
@@ -38,3 +41,21 @@ export const New: Story = {
         kind: 'new',
     },
 };
+
+export const Square: Story = {
+    args: {
+        children: 'New',
+        size: 'compact',
+        shape: 'square',
+        kind: 'positive',
+    },
+};
+
+export const RoundedXL: Story = {
+    args: {
+        children: 'Label',
+        size: 'normal',
+        corners: 'roundedXL',
+        kind: 'default',
+    },
+};
diff --git a/src/stories/tag/Tag.tsx b/src/stories/tag/Tag.tsx
index e45b9e1..5a52423 100644
--- a/src/stories/tag/Tag.tsx
+++ b/src/stories/tag/Tag.tsx
@@ -1,13 +1,35 @@
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+'use client';
+
+import type {
+    ComponentPropsWithoutRef, FC, ReactElement, ReactNode,
+} from 'react';
+import { useMemo } from 'react';
 import clsx from 'clsx';
+import type { CSSLength } from '@ssh/csstypes';
 import styles from './Tag.module.scss';
 import typography from '../text/Typography.module.css';
+import { Icon, Check } from '../icon';
+import { VisuallyHidden } from '../utility';
+
+export const CornerPresets = ['sharp', 'rounded', 'roundedXL'] as const;
 
 export type TagProps = {
     /** The size of the Tag. */
     size?: 'normal' | 'compact';
+    /** The shape of the Tag. `square` will display only the `icon`. */
+    shape?: 'rectangle' | 'square';
+    /**
+     * The radius of the corners of the Tag. Either a preset or a valid {@link CSSLength} string.
+     * `sharp` will have no rounding, `rounded` will have a slight rounding, and `roundedXL` will have a large rounding.
+     * @see CornerPresets
+     */
+    corners?: typeof CornerPresets[number] | CSSLength;
     /** The kind of Tag. */
-    kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new';
+    kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new' | 'void' | 'draft';
+    /** The color level of Tag background, applies to the colored states of `positive`, `warning`, and `negative`. */
+    colorLevel?: 'light' | 'medium' | 'strong';
+    /** An icon to display in the shape: `square` variant of the Tag. For best results, use an SVG icon with fill set to `currentColor`. */
+    icon?: ReactElement;
     /** The contents of the Tag. */
     children: ReactNode;
 } & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
@@ -26,20 +48,45 @@ export type TagProps = {
  */
 export const Tag: FC<TagProps> = ({
     size = 'normal',
+    shape = 'rectangle',
+    corners,
     kind = 'default',
+    colorLevel,
+    icon = <Icon icon={Check} size={12} />,
     children,
     className,
-}) => (
-    <div
-        className={clsx(
-            styles.tag,
-            styles[size],
-            styles[kind],
-            size === 'normal' && typography.labelXSmall,
-            size === 'compact' && typography.labelXXSmall,
-            className,
-        )}
-    >
-        {children}
-    </div>
-);
+}) => {
+    const cornersIsPreset = useMemo(() => (CornerPresets as readonly string[]).includes(corners as string), [corners]);
+    return (
+        <div
+            className={clsx(
+                styles.tag,
+                styles[size],
+                styles[kind],
+                size === 'normal' && typography.labelXSmall,
+                size === 'compact' && typography.labelXXSmall,
+                styles[shape],
+                !corners && size === 'normal' && styles.sharp,
+                !corners && size === 'compact' && styles.rounded,
+                corners && cornersIsPreset && styles[corners],
+                className,
+            )}
+            data-status={colorLevel}
+            style={(corners && !cornersIsPreset) ? { borderRadius: corners } : {}}
+        >
+            {shape !== 'square' && (
+                <div>
+                    {children}
+                </div>
+            )}
+            {shape === 'square' && (
+                <div className={styles.icon}>
+                    {icon}
+                    <VisuallyHidden>
+                        {children}
+                    </VisuallyHidden>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/src/stories/textarea/TextArea.stories.ts b/src/stories/textarea/TextArea.stories.ts
index a7a4f94..063c16f 100644
--- a/src/stories/textarea/TextArea.stories.ts
+++ b/src/stories/textarea/TextArea.stories.ts
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof TextArea>;
 
 export const Default: Story = {
     args: {
-        placeholder: 'Billie Eilish',
+        placeholder: 'Mia Dolan',
         label: 'Name',
         description: 'Type your full name here.',
     },
@@ -21,7 +21,7 @@ export const Default: Story = {
 
 export const WithCustomLabel: Story = {
     args: {
-        placeholder: 'Billie Eilish',
+        placeholder: 'Mia Dolan',
         label: createElement(
             'span',
             {},
diff --git a/src/stories/textarea/TextArea.tsx b/src/stories/textarea/TextArea.tsx
index c345b8b..f0a1f71 100644
--- a/src/stories/textarea/TextArea.tsx
+++ b/src/stories/textarea/TextArea.tsx
@@ -50,11 +50,14 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
         >
             <div
                 className={styles.inputContainer}
-                data-status={status}
-                data-disabled={disabled}
+                data-status={disabled ? 'disabled' : (status || 'default')}
             >
                 {!!startEnhancer && (
-                    <div {...overrides?.startEnhancerContainer} className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                    <div
+                        {...overrides?.startEnhancerContainer}
+                        className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                    >
                         {!!startEnhancer && (
                             <MemoizedEnhancer
                                 enhancer={startEnhancer}
@@ -71,14 +74,18 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
                     aria-disabled={disabled}
                     readOnly={disabled}
                     rows={rows}
-                    data-status={status}
+                    data-status={disabled ? 'disabled' : (status || 'default')}
                     className={clsx(
                         props.className,
                         styles.input,
                     )}
                 />
                 {!!endEnhancer && (
-                    <div {...overrides?.endEnhancerContainer} className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                    <div
+                        {...overrides?.endEnhancerContainer}
+                        className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
+                    >
                         {!!endEnhancer && (
                             <MemoizedEnhancer
                                 enhancer={endEnhancer}
diff --git a/src/stories/theme/themes.ts b/src/stories/theme/themes.ts
index fb51506..0f161a7 100644
--- a/src/stories/theme/themes.ts
+++ b/src/stories/theme/themes.ts
@@ -51,6 +51,33 @@ const ShadowsDark: ShadowsType = {
     deepPopup: '0px 0px 40px 15px rgba(0, 0, 0, 0.35)',
 };
 
+export type GlowsType = {
+    glowSubtle1: ShadowDefinition,
+    glowSubtle2: ShadowDefinition,
+    glowSubtle3: ShadowDefinition,
+    glowDeep1: ShadowDefinition,
+    glowDeep2: ShadowDefinition,
+    glowDeep3: ShadowDefinition,
+};
+
+const Glows: GlowsType = {
+    glowSubtle1: '0px 0px 3px 0px rgba(29, 238, 205, 0.3)',
+    glowSubtle2: '0px 0px 6px 0px rgba(29, 238, 205, 0.2)',
+    glowSubtle3: '0px 0px 9px 0px rgba(29, 238, 205, 0.1)',
+    glowDeep1: '0px 0px 3px 1px rgba(29, 238, 205, 0.3)',
+    glowDeep2: '0px 0px 9px 3px rgba(29, 238, 205, 0.3)',
+    glowDeep3: '0px 0px 15px 0px rgba(29, 238, 205, 0.2)',
+};
+
+const GlowsDark: GlowsType = {
+    glowSubtle1: '0px 0px 3px 0px rgba(29, 238, 205, 0.15)',
+    glowSubtle2: '0px 0px 6px 0px rgba(29, 238, 205, 0.1)',
+    glowSubtle3: '0px 0px 9px 0px rgba(29, 238, 205, 0.05)',
+    glowDeep1: '0px 0px 3px 1px rgba(29, 238, 205, 0.15)',
+    glowDeep2: '0px 0px 9px 3px rgba(29, 238, 205, 0.15)',
+    glowDeep3: '0px 0px 12px 0px rgba(29, 238, 205, 0.1)',
+};
+
 export type TimingFunction = `cubic-bezier(${number}, ${number}, ${number}, ${number})` | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
 export type Duration = `${number}ms` | `${number}s`;
 
@@ -221,7 +248,13 @@ export type Theme = {
             deepPopup: ShadowDefinition,
             subtlePopup: ShadowDefinition,
             shallowLeft: ShadowDefinition,
-            shallowRight: ShadowDefinition, // archive
+            shallowRight: ShadowDefinition,
+            glowSubtle1: ShadowDefinition,
+            glowSubtle2: ShadowDefinition,
+            glowSubtle3: ShadowDefinition,
+            glowDeep1: ShadowDefinition,
+            glowDeep2: ShadowDefinition,
+            glowDeep3: ShadowDefinition,
         },
         materials: {
             // Simple Materials
@@ -247,51 +280,63 @@ export type Theme = {
             // Multi-part Materials
             lightGreyUltrathin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             lightGreyThin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             lightGreyRegular: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             lightGreyThick: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             darkGreyUltrathin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             darkGreyThin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             darkGreyRegular: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             darkGreyThick: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             greyUltrathin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             greyThin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             greyRegular: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             greyThick: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
 
             // Material Variables
@@ -306,19 +351,23 @@ export type Theme = {
             },
             secondaryUltrathin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             secondaryThin: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             secondaryRegular: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
             secondaryThick: {
                 background: CSSColor,
-                backgroundBlendMode: string,
+                backgroundBlend: CSSColor
+                mixBlendMode: Property.MixBlendMode,
             },
         },
         borders: {
@@ -836,6 +885,7 @@ export const LightTheme: Theme = {
         },
         lighting: {
             ...Shadows,
+            ...Glows,
         },
         materials: {
             whiteThin: {
@@ -858,52 +908,64 @@ export const LightTheme: Theme = {
             },
 
             lightGreyUltrathin: {
-                background: 'linear-gradient(0deg, #303030 0%, #303030 100%), rgba(191, 191, 191, 0.44)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(191, 191, 191, 0.44)',
+                backgroundBlend: '#303030',
+                mixBlendMode: 'color-dodge',
             },
             lightGreyThin: {
-                background: 'linear-gradient(0deg, #3D3D3D 0%, #3D3D3D 100%), rgba(166, 166, 166, 0.70)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(166, 166, 166, 0.70)',
+                backgroundBlend: '#3D3D3D',
+                mixBlendMode: 'color-dodge',
             },
             lightGreyRegular: {
-                background: 'linear-gradient(0deg, #434343 0%, #434343 100%), rgba(179, 179, 179, 0.82)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(179, 179, 179, 0.82)',
+                backgroundBlend: '#434343',
+                mixBlendMode: 'color-dodge',
             },
             lightGreyThick: {
-                background: 'linear-gradient(0deg, #5F5F5F 0%, #5F5F5F 100%), rgba(153, 153, 153, 0.97)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(153, 153, 153, 0.97)',
+                backgroundBlend: '#5F5F5F',
+                mixBlendMode: 'color-dodge',
             },
             darkGreyUltrathin: {
-                background: 'linear-gradient(0deg, #9C9C9C 0%, #9C9C9C 100%), rgba(37, 37, 37, 0.55)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.55)',
+                backgroundBlend: '#9C9C9C',
+                mixBlendMode: 'overlay',
             },
             darkGreyThin: {
-                background: 'linear-gradient(0deg, #9C9C9C 0%, #9C9C9C 100%), rgba(37, 37, 37, 0.70)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.70)',
+                backgroundBlend: '#9C9C9C',
+                mixBlendMode: 'overlay',
             },
             darkGreyRegular: {
-                background: 'linear-gradient(0deg, #8C8C8C 0%, #8C8C8C 100%), rgba(37, 37, 37, 0.82)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.82)',
+                backgroundBlend: '#8C8C8C',
+                mixBlendMode: 'overlay',
             },
             darkGreyThick: {
-                background: 'linear-gradient(0deg, #7C7C7C 0%, #7C7C7C 100%), rgba(37, 37, 37, 0.90)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.90)',
+                backgroundBlend: '#7C7C7C',
+                mixBlendMode: 'overlay',
             },
             greyUltrathin: {
-                background: 'linear-gradient(0deg, #D2D2D2 0%, #D2D2D2 100%), rgba(37, 37, 37, 0.55)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.55)',
+                backgroundBlend: '#D2D2D2',
+                mixBlendMode: 'overlay',
             },
             greyThin: {
-                background: 'linear-gradient(0deg, #CFCFCF 0%, #CFCFCF 100%), rgba(37, 37, 37, 0.70)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.70)',
+                backgroundBlend: '#CFCFCF',
+                mixBlendMode: 'overlay',
             },
             greyRegular: {
-                background: 'linear-gradient(0deg, #BCBCBC 0%, #BCBCBC 100%), rgba(37, 37, 37, 0.82)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.82)',
+                backgroundBlend: '#BCBCBC',
+                mixBlendMode: 'overlay',
             },
             greyThick: {
-                background: 'linear-gradient(0deg, #B6B6B6 0%, #B6B6B6 100%), rgba(37, 37, 37, 0.90)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.90)',
+                backgroundBlend: '#B6B6B6',
+                mixBlendMode: 'overlay',
             },
 
             primaryThin: {
@@ -916,20 +978,24 @@ export const LightTheme: Theme = {
                 background: 'rgba(255, 255, 255, 0.93)',
             },
             secondaryUltrathin: {
-                background: 'linear-gradient(0deg, #303030 0%, #303030 100%), rgba(191, 191, 191, 0.44)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(191, 191, 191, 0.44)',
+                backgroundBlend: '#303030',
+                mixBlendMode: 'color-dodge',
             },
             secondaryThin: {
-                background: 'linear-gradient(0deg, #3D3D3D 0%, #3D3D3D 100%), rgba(166, 166, 166, 0.70)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(166, 166, 166, 0.70)',
+                backgroundBlend: '#3D3D3D',
+                mixBlendMode: 'color-dodge',
             },
             secondaryRegular: {
-                background: 'linear-gradient(0deg, #434343 0%, #434343 100%), rgba(179, 179, 179, 0.82)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(179, 179, 179, 0.82)',
+                backgroundBlend: '#434343',
+                mixBlendMode: 'color-dodge',
             },
             secondaryThick: {
-                background: 'linear-gradient(0deg, #5F5F5F 0%, #5F5F5F 100%), rgba(153, 153, 153, 0.97)',
-                backgroundBlendMode: 'color-dodge, normal',
+                background: 'rgba(153, 153, 153, 0.97)',
+                backgroundBlend: '#5F5F5F',
+                mixBlendMode: 'color-dodge',
             },
         },
         borders: {
@@ -1317,6 +1383,7 @@ export const DarkTheme: Theme = merge(LightTheme, {
         },
         lighting: {
             ...ShadowsDark,
+            ...GlowsDark,
         },
         materials: {
             primaryThin: {
@@ -1329,27 +1396,31 @@ export const DarkTheme: Theme = merge(LightTheme, {
                 background: 'rgba(0, 0, 0, 0.85)',
             },
             secondaryUltrathin: {
-                background: 'linear-gradient(0deg, #9C9C9C 0%, #9C9C9C 100%), rgba(37, 37, 37, 0.55)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.55)',
+                backgroundBlend: '#9C9C9C',
+                mixBlendMode: 'overlay',
             },
             secondaryThin: {
-                background: 'linear-gradient(0deg, #9C9C9C 0%, #9C9C9C 100%), rgba(37, 37, 37, 0.70)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.70)',
+                backgroundBlend: '#9C9C9C',
+                mixBlendMode: 'overlay',
             },
             secondaryRegular: {
-                background: 'linear-gradient(0deg, #8C8C8C 0%, #8C8C8C 100%), rgba(37, 37, 37, 0.82)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.82)',
+                backgroundBlend: '#8C8C8C',
+                mixBlendMode: 'overlay',
             },
             secondaryThick: {
-                background: 'linear-gradient(0deg, #7C7C7C 0%, #7C7C7C 100%), rgba(37, 37, 37, 0.90)',
-                backgroundBlendMode: 'overlay, normal',
+                background: 'rgba(37, 37, 37, 0.90)',
+                backgroundBlend: '#7C7C7C',
+                mixBlendMode: 'overlay',
             },
         },
         borders: {
             dropdown: {
                 shadow: 'none',
-                color: T.new.colors.grey1600,
-                border: `1px solid ${T.new.colors.grey1600}`,
+                color: 'none',
+                border: 'none',
             },
         },
         surfaces: {
diff --git a/src/stories/theme/tw-preflight.css b/src/stories/theme/tw-preflight.css
index b459ef8..084cb43 100644
--- a/src/stories/theme/tw-preflight.css
+++ b/src/stories/theme/tw-preflight.css
@@ -14,7 +14,7 @@
     box-sizing: border-box; /* 1 */
     border-width: 0; /* 2 */
     border-style: solid; /* 2 */
-    border-color: var(--pte-colors-borderSelected); /* 2 */
+    border-color: var(--pte-new-colors-borderMedium); /* 2 */
     
     -webkit-tap-highlight-color: transparent;
 }
@@ -201,7 +201,7 @@ Use the modern Firefox focus style for all focusable elements.
 */
 
 :-moz-focusring {
-    outline: var(--pte-colors-accent) solid 2px;
+    outline: var(--pte-new-colors-contentAccent) solid 2px;
 }
 
 /*
@@ -318,7 +318,7 @@ textarea {
 input::placeholder,
 textarea::placeholder {
     opacity: 1; /* 1 */
-    color: var(--pte-colors-contentSecondary);
+    color: var(--pte-new-colors-contentTertiary);
 }
 
 /*
diff --git a/src/stories/tilt/Tilt.stories.tsx b/src/stories/tilt/Tilt.stories.tsx
index 64c70e6..7506e9c 100644
--- a/src/stories/tilt/Tilt.stories.tsx
+++ b/src/stories/tilt/Tilt.stories.tsx
@@ -17,7 +17,7 @@ export const Default: Story = {
     args: {
         style: {},
         children: (
-            <Text kind="headingMedium">Billie Eilish</Text>
+            <Text kind="headingMedium">Tilt Component</Text>
         ),
         onEnter: undefined,
         onLeave: undefined,
@@ -29,10 +29,10 @@ export const Default: Story = {
             style={{
                 width: 'max-content',
                 userSelect: pvar('utils.defaultUserSelect') as Property.UserSelect,
-                // backgroundColor: pvar('colors.backgroundOverlayDark'),
-                boxShadow: pvar('lighting.shallowBelow'),
+                backgroundColor: pvar('new.colors.surfacePrimary'),
+                boxShadow: pvar('new.lighting.shallowBelow'),
                 padding: '8px 16px',
-                border: `1px solid ${pvar('borders.dropdown.color')}`,
+                // border: `1px solid ${pvar('new.borders.dropdown.color')}`,
                 borderRadius: pvar('borders.radius.rounded'),
                 ...style,
             }}
diff --git a/src/stories/toast/Toast.module.scss b/src/stories/toast/Toast.module.scss
index 7737eb4..fa46be0 100644
--- a/src/stories/toast/Toast.module.scss
+++ b/src/stories/toast/Toast.module.scss
@@ -1,10 +1,10 @@
 .toast {
-    color: var(--pte-colors-contentInversePrimary) !important;
-    background-color: var(--pte-colors-backgroundInversePrimary) !important;
-    border: 1px solid var(--pte-colors-borderInverseOpaque) !important;
+    color: var(--pte-new-colors-contentInversePrimary) !important;
+    background-color: var(--pte-new-colors-buttonFill) !important;
+    //border: 1px solid var(--pte-colors-border) !important;
     border-radius: var(--pte-borders-radius-rounded) !important;
     backdrop-filter: blur(4px) !important;
-    box-shadow: var(--pte-lighting-subtlePopup) !important;
+    box-shadow: var(--pte-new-lighting-subtlePopup) !important;
     font-weight: 500 !important;
     padding: 4px 8px !important;