refactor(storybook): centralize theme variables and remove duplication

Moves shared design system variables from `generated-theme-styles/common.css` to a new `theme-shared.css` file. This centralizes theme-agnostic variables and removes duplication across generated theme files.

The `theme-variables.css` file is updated to only contain semantic color mappings and Tailwind delegations, removing layout and sizing variables that are now in `theme-shared.css`. The theme generation script is also updated to only output base theme colors, simplifying the generated CSS.

Author: Chris Hasson

apps/storybook/.storybook/design-system.css

@@ -1,8 +1,69 @@
-/* We have to redefine these color variables in order to allow dynamic 
-theme switching in Storybook due to the way tailwind builds its utility 
+/* Theme Variables - Color delegations and semantic mappings */
+
+/* We have to redefine these color variables in order to allow dynamic
+theme switching in Storybook due to the way tailwind builds its utility
 classes at build time based on the @theme */
 
-/* @layer base :root */
+/* Non-prefixed variable delegations - point to VS Code variables */
+--background: var(--vscode-background);
+--foreground: var(--vscode-foreground);
+--editor-foreground: var(--vscode-editor-foreground);
+--editor-background: var(--vscode-editor-background);
+--editorGroup-border: var(--vscode-editorGroup-border);
+--editorWarning-foreground: var(--vscode-editorWarning-foreground);
+--editorWarning-background: var(--vscode-editorWarning-background);
+--button-foreground: var(--vscode-button-foreground);
+--button-background: var(--vscode-button-background);
+--button-secondaryForeground: var(--vscode-button-secondaryForeground);
+--button-secondaryBackground: var(--vscode-button-secondaryBackground);
+--button-hoverBackground: var(--vscode-button-hoverBackground);
+--button-secondaryHoverBackground: var(--vscode-button-secondaryHoverBackground);
+--dropdown-foreground: var(--vscode-dropdown-foreground);
+--dropdown-background: var(--vscode-dropdown-background);
+--dropdown-border: var(--vscode-dropdown-border);
+--input-foreground: var(--vscode-input-foreground);
+--input-background: var(--vscode-input-background);
+--input-border: var(--vscode-input-border);
+--focusBorder: var(--vscode-focusBorder);
+--badge-foreground: var(--vscode-badge-foreground);
+--badge-background: var(--vscode-badge-background);
+--notifications-foreground: var(--vscode-notifications-foreground);
+--notifications-background: var(--vscode-notifications-background);
+--notifications-border: var(--vscode-notifications-border);
+--descriptionForeground: var(--vscode-descriptionForeground);
+--errorForeground: var(--vscode-errorForeground);
+--list-hoverForeground: var(--vscode-list-hoverForeground);
+--list-hoverBackground: var(--vscode-list-hoverBackground);
+--list-focusBackground: var(--vscode-list-focusBackground);
+--list-activeSelectionBackground: var(--vscode-list-activeSelectionBackground);
+--list-activeSelectionForeground: var(--vscode-list-activeSelectionForeground);
+--toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground);
+--panel-border: var(--vscode-panel-border);
+--sideBar-foreground: var(--vscode-sideBar-foreground);
+--sideBar-background: var(--vscode-sideBar-background);
+--sideBar-border: var(--vscode-sideBar-border);
+--sideBarSectionHeader-foreground: var(--vscode-sideBarSectionHeader-foreground);
+--sideBarSectionHeader-background: var(--vscode-sideBarSectionHeader-background);
+--sideBarSectionHeader-border: var(--vscode-sideBarSectionHeader-border);
+--charts-green: var(--vscode-charts-green);
+--charts-yellow: var(--vscode-charts-yellow);
+--charts-red: var(--vscode-charts-red);
+--charts-blue: var(--vscode-charts-blue);
+--charts-orange: var(--vscode-charts-orange);
+--inputValidation-infoForeground: var(--vscode-inputValidation-infoForeground);
+--inputValidation-infoBackground: var(--vscode-inputValidation-infoBackground);
+--inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
+--widget-border: var(--vscode-widget-border);
+--textLink-foreground: var(--vscode-textLink-foreground);
+--textCodeBlock-background: var(--vscode-textCodeBlock-background);
+--menu-background: var(--vscode-menu-background);
+--menu-foreground: var(--vscode-menu-foreground);
+--disabledForeground: var(--vscode-disabledForeground);
+--checkbox-background: var(--vscode-checkbox-background);
+--checkbox-foreground: var(--vscode-checkbox-foreground);
+--checkbox-border: var(--vscode-checkbox-border);
+
+/* Semantic color mappings to VSCode variables */
 --background: var(--vscode-editor-background);
 --foreground: var(--vscode-editor-foreground);
 --card: var(--vscode-editor-background);
@@ -19,24 +80,61 @@ classes at build time based on the @theme */
 --accent-foreground: var(--vscode-list-hoverForeground);
 --destructive: var(--vscode-errorForeground);
 --destructive-foreground: var(--vscode-button-foreground);
---border: var(--vscode-input-border, transparent); /* --border gets theme value or transparent fallback */
+--border: var(--vscode-input-border, transparent);
 --input: var(--vscode-input-background);
 --ring: var(--vscode-input-border);
 --chart-1: var(--vscode-charts-red);
 --chart-2: var(--vscode-charts-blue);
 --chart-3: var(--vscode-charts-yellow);
 --chart-4: var(--vscode-charts-orange);
 --chart-5: var(--vscode-charts-green);
---radius: 0.5rem;
 
-/* @layer base :root */
---font-display: var(--vscode-font-family);
+/* Layout and Sizing Variables (theme-agnostic) */
+--border-width: 1;
+--corner-radius: 0;
+--corner-radius-round: 2;
+--design-unit: 4;
+--disabled-opacity: 0.4;
+--font-family:
+	-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
+	Segoe UI Emoji, Segoe UI Symbol;
+--font-weight: 400;
+--input-height: 26;
+--input-min-width: 100px;
+--type-ramp-base-font-size: 13px;
+--type-ramp-base-line-height: normal;
+--type-ramp-minus1-font-size: 11px;
+--type-ramp-minus1-line-height: 16px;
+--type-ramp-minus2-font-size: 9px;
+--type-ramp-minus2-line-height: 16px;
+--type-ramp-plus1-font-size: 16px;
+--type-ramp-plus1-line-height: 24px;
+--scrollbarWidth: 10px;
+--scrollbarHeight: 10px;
+
+/* Component Layout Variables (theme-agnostic) */
+--button-icon-corner-radius: 5px;
+--button-icon-outline-offset: 0;
+--button-icon-padding: 3px;
+--button-padding-horizontal: 11px;
+--button-padding-vertical: 4px;
+--checkbox-corner-radius: 3;
+--dropdown-list-max-height: 200px;
+--tag-corner-radius: 2px;
 
 --text-xs: calc(var(--vscode-font-size) * 0.85);
 --text-sm: calc(var(--vscode-font-size) * 0.9);
 --text-base: var(--vscode-font-size);
 --text-lg: calc(var(--vscode-font-size) * 1.1);
 
+/* Border radius variables */
+--radius: 0.5rem;
+--radius-lg: var(--radius);
+--radius-md: calc(var(--radius) - 2px);
+--radius-sm: calc(var(--radius) - 4px);
+
+
+/* Tailwind color delegations for semantic colors */
 --color-background: var(--background);
 --color-foreground: var(--foreground);
 --color-card: var(--card);
@@ -61,80 +159,119 @@ classes at build time based on the @theme */
 --color-chart-3: var(--chart-3);
 --color-chart-4: var(--chart-4);
 --color-chart-5: var(--chart-5);
---radius-lg: var(--radius);
---radius-md: calc(var(--radius) - 2px);
---radius-sm: calc(var(--radius) - 4px);
-
-/**
-	 * Allow VSCode colors to be used with Tailwind.
-	 */
 
+/* Tailwind color delegations for VS Code variables */
+--color-vscode-background: var(--vscode-background);
 --color-vscode-foreground: var(--vscode-foreground);
-
 --color-vscode-editor-foreground: var(--vscode-editor-foreground);
 --color-vscode-editor-background: var(--vscode-editor-background);
-
 --color-vscode-editorGroup-border: var(--vscode-editorGroup-border);
-
 --color-vscode-editorWarning-foreground: var(--vscode-editorWarning-foreground);
 --color-vscode-editorWarning-background: var(--vscode-editorWarning-background);
-
 --color-vscode-button-foreground: var(--vscode-button-foreground);
 --color-vscode-button-background: var(--vscode-button-background);
 --color-vscode-button-secondaryForeground: var(--vscode-button-secondaryForeground);
 --color-vscode-button-secondaryBackground: var(--vscode-button-secondaryBackground);
 --color-vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
 --color-vscode-button-secondaryHoverBackground: var(--vscode-button-secondaryHoverBackground);
-
 --color-vscode-dropdown-foreground: var(--vscode-dropdown-foreground);
 --color-vscode-dropdown-background: var(--vscode-dropdown-background);
 --color-vscode-dropdown-border: var(--vscode-dropdown-border);
-
 --color-vscode-input-foreground: var(--vscode-input-foreground);
 --color-vscode-input-background: var(--vscode-input-background);
---color-vscode-input-border: var(
-	--vscode-input-border,
-	transparent
-); /* Some themes don't have a border color, so we can fallback to transparent */
-
+--color-vscode-input-border: var(--vscode-input-border, transparent);
 --color-vscode-focusBorder: var(--vscode-focusBorder);
-
 --color-vscode-badge-foreground: var(--vscode-badge-foreground);
 --color-vscode-badge-background: var(--vscode-badge-background);
-
 --color-vscode-notifications-foreground: var(--vscode-notifications-foreground);
 --color-vscode-notifications-background: var(--vscode-notifications-background);
 --color-vscode-notifications-border: var(--vscode-notifications-border);
-
 --color-vscode-descriptionForeground: var(--vscode-descriptionForeground);
 --color-vscode-errorForeground: var(--vscode-errorForeground);
-
 --color-vscode-list-hoverForeground: var(--vscode-list-hoverForeground);
 --color-vscode-list-hoverBackground: var(--vscode-list-hoverBackground);
 --color-vscode-list-focusBackground: var(--vscode-list-focusBackground);
 --color-vscode-list-activeSelectionBackground: var(--vscode-list-activeSelectionBackground);
 --color-vscode-list-activeSelectionForeground: var(--vscode-list-activeSelectionForeground);
-
 --color-vscode-toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground);
-
 --color-vscode-panel-border: var(--vscode-panel-border);
-
 --color-vscode-sideBar-foreground: var(--vscode-sideBar-foreground);
 --color-vscode-sideBar-background: var(--vscode-sideBar-background);
 --color-vscode-sideBar-border: var(--vscode-sideBar-border);
-
 --color-vscode-sideBarSectionHeader-foreground: var(--vscode-sideBarSectionHeader-foreground);
 --color-vscode-sideBarSectionHeader-background: var(--vscode-sideBarSectionHeader-background);
 --color-vscode-sideBarSectionHeader-border: var(--vscode-sideBarSectionHeader-border);
-
 --color-vscode-charts-green: var(--vscode-charts-green);
 --color-vscode-charts-yellow: var(--vscode-charts-yellow);
-
+--color-vscode-charts-red: var(--vscode-charts-red);
+--color-vscode-charts-blue: var(--vscode-charts-blue);
+--color-vscode-charts-orange: var(--vscode-charts-orange);
 --color-vscode-inputValidation-infoForeground: var(--vscode-inputValidation-infoForeground);
 --color-vscode-inputValidation-infoBackground: var(--vscode-inputValidation-infoBackground);
 --color-vscode-inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
-
 --color-vscode-widget-border: var(--vscode-widget-border);
 --color-vscode-textLink-foreground: var(--vscode-textLink-foreground);
 --color-vscode-textCodeBlock-background: var(--vscode-textCodeBlock-background);
---color-vscode-button-hoverBackground: var(--vscode-button-hoverBackground);
+--color-vscode-menu-background: var(--vscode-menu-background);
+--color-vscode-menu-foreground: var(--vscode-menu-foreground);
+--color-vscode-disabledForeground: var(--vscode-disabledForeground);
+--color-vscode-checkbox-background: var(--vscode-checkbox-background);
+
+/* Additional Tailwind color delegations for UI components */
+--color-vscode-border-width: var(--vscode-border-width);
+--color-vscode-contrast-active-border: var(--vscode-contrast-active-border);
+--color-vscode-contrast-border: var(--vscode-contrast-border);
+--color-vscode-corner-radius: var(--vscode-corner-radius);
+--color-vscode-corner-radius-round: var(--vscode-corner-radius-round);
+--color-vscode-design-unit: var(--vscode-design-unit);
+--color-vscode-disabled-opacity: var(--vscode-disabled-opacity);
+--color-vscode-focus-border: var(--vscode-focus-border);
+--color-vscode-font-family: var(--vscode-font-family);
+--color-vscode-font-weight: var(--vscode-font-weight);
+--color-vscode-input-height: var(--vscode-input-height);
+--color-vscode-input-min-width: var(--vscode-input-min-width);
+--color-vscode-type-ramp-base-font-size: var(--vscode-type-ramp-base-font-size);
+--color-vscode-type-ramp-base-line-height: var(--vscode-type-ramp-base-line-height);
+--color-vscode-type-ramp-minus1-font-size: var(--vscode-type-ramp-minus1-font-size);
+--color-vscode-type-ramp-minus1-line-height: var(--vscode-type-ramp-minus1-line-height);
+--color-vscode-type-ramp-minus2-font-size: var(--vscode-type-ramp-minus2-font-size);
+--color-vscode-type-ramp-minus2-line-height: var(--vscode-type-ramp-minus2-line-height);
+--color-vscode-type-ramp-plus1-font-size: var(--vscode-type-ramp-plus1-font-size);
+--color-vscode-type-ramp-plus1-line-height: var(--vscode-type-ramp-plus1-line-height);
+--color-vscode-scrollbarWidth: var(--vscode-scrollbarWidth);
+--color-vscode-scrollbarHeight: var(--vscode-scrollbarHeight);
+--color-vscode-scrollbar-slider-background: var(--vscode-scrollbar-slider-background);
+--color-vscode-scrollbar-slider-hover-background: var(--vscode-scrollbar-slider-hover-background);
+--color-vscode-scrollbar-slider-active-background: var(--vscode-scrollbar-slider-active-background);
+--color-vscode-button-border: var(--vscode-button-border);
+--color-vscode-button-icon-background: var(--vscode-button-icon-background);
+--color-vscode-button-icon-corner-radius: var(--vscode-button-icon-corner-radius);
+--color-vscode-button-icon-outline-offset: var(--vscode-button-icon-outline-offset);
+--color-vscode-button-icon-hover-background: var(--vscode-button-icon-hover-background);
+--color-vscode-button-icon-padding: var(--vscode-button-icon-padding);
+--color-vscode-button-primary-background: var(--vscode-button-primary-background);
+--color-vscode-button-primary-foreground: var(--vscode-button-primary-foreground);
+--color-vscode-button-primary-hover-background: var(--vscode-button-primary-hover-background);
+--color-vscode-button-secondary-background: var(--vscode-button-secondary-background);
+--color-vscode-button-secondary-foreground: var(--vscode-button-secondary-foreground);
+--color-vscode-button-secondary-hover-background: var(--vscode-button-secondary-hover-background);
+--color-vscode-button-padding-horizontal: var(--vscode-button-padding-horizontal);
+--color-vscode-button-padding-vertical: var(--vscode-button-padding-vertical);
+--color-vscode-checkbox-border: var(--vscode-checkbox-border);
+--color-vscode-checkbox-corner-radius: var(--vscode-checkbox-corner-radius);
+--color-vscode-checkbox-foreground: var(--vscode-checkbox-foreground);
+--color-vscode-list-active-selection-background: var(--vscode-list-active-selection-background);
+--color-vscode-list-active-selection-foreground: var(--vscode-list-active-selection-foreground);
+--color-vscode-list-hover-background: var(--vscode-list-hover-background);
+--color-vscode-divider-background: var(--vscode-divider-background);
+--color-vscode-dropdown-list-max-height: var(--vscode-dropdown-list-max-height);
+--color-vscode-input-placeholder-foreground: var(--vscode-input-placeholder-foreground);
+--color-vscode-link-active-foreground: var(--vscode-link-active-foreground);
+--color-vscode-link-foreground: var(--vscode-link-foreground);
+--color-vscode-progress-background: var(--vscode-progress-background);
+--color-vscode-panel-tab-active-border: var(--vscode-panel-tab-active-border);
+--color-vscode-panel-tab-active-foreground: var(--vscode-panel-tab-active-foreground);
+--color-vscode-panel-tab-foreground: var(--vscode-panel-tab-foreground);
+--color-vscode-panel-view-background: var(--vscode-panel-view-background);
+--color-vscode-panel-view-border: var(--vscode-panel-view-border);
+--color-vscode-tag-corner-radius: var(--vscode-tag-corner-radius);