[CL-219][CL-218][CL-217] Add new extension layout components (#8728)

libs/components/src/tw-theme.css

@@ -17,7 +17,11 @@
   --color-background-alt3: 18 82 163;
   --color-background-alt4: 13 60 119;
 
+  /* Can only be used behind the extension refresh flag */
+  --color-primary-100: 200 217 249;
   --color-primary-300: 103 149 232;
+  /* Can only be used behind the extension refresh flag */
+  --color-primary-500: 23 93 220;
   --color-primary-600: 23 93 220;
   --color-primary-700: 18 82 163;
 
@@ -43,6 +47,7 @@
   --color-text-contrast: 255 255 255;
   --color-text-alt2: 255 255 255;
   --color-text-code: 192 17 118;
+  --color-text-headers: 2 15 102;
 
   --tw-ring-offset-color: #ffffff;
 }
@@ -60,7 +65,9 @@
   --color-background-alt3: 47 52 61;
   --color-background-alt4: 16 18 21;
 
+  --color-primary-100: 8 31 73;
   --color-primary-300: 23 93 220;
+  --color-primary-500: 54 117 232;
   --color-primary-600: 106 153 240;
   --color-primary-700: 180 204 249;
 
@@ -86,6 +93,7 @@
   --color-text-contrast: 25 30 38;
   --color-text-alt2: 255 255 255;
   --color-text-code: 240 141 199;
+  --color-text-headers: 226 227 228;
 
   --tw-ring-offset-color: #1f242e;
 }

libs/components/tailwind.config.base.js

@@ -24,7 +24,11 @@ module.exports = {
       current: colors.current,
       black: colors.black,
       primary: {
+        // Can only be used behind the extension refresh flag
+        100: rgba("--color-primary-100"),
         300: rgba("--color-primary-300"),
+        // Can only be used behind the extension refresh flag
+        500: rgba("--color-primary-500"),
         600: rgba("--color-primary-600"),
         700: rgba("--color-primary-700"),
       },
@@ -69,6 +73,7 @@ module.exports = {
       main: rgba("--color-text-main"),
       muted: rgba("--color-text-muted"),
       contrast: rgba("--color-text-contrast"),
+      headers: rgba("--color-text-headers"),
       alt2: rgba("--color-text-alt2"),
       code: rgba("--color-text-code"),
       success: rgba("--color-success-600"),

libs/components/tailwind.config.js

@@ -5,6 +5,7 @@ config.content = [
   "libs/components/src/**/*.{html,ts,mdx}",
   "libs/auth/src/**/*.{html,ts,mdx}",
   "apps/web/src/**/*.{html,ts,mdx}",
+  "apps/browser/src/**/*.{html,ts,mdx}",
   "bitwarden_license/bit-web/src/**/*.{html,ts,mdx}",
   ".storybook/preview.tsx",
 ];