Components: Expand theming support in COLORS

packages/components/src/utils/colors-values.js

@@ -36,34 +36,57 @@ const ADMIN = {
 		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',
 };
 
-const UI = {
-	background: white,
-	backgroundDisabled: GRAY[ 100 ],
-	border: GRAY[ 600 ],
-	borderHover: GRAY[ 700 ],
-	borderFocus: ADMIN.theme,
-	borderDisabled: GRAY[ 400 ],
-	textDisabled: GRAY[ 600 ],
-	textDark: white,
-
-	// Matches @wordpress/base-styles
-	darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),
-	lightGrayPlaceholder: rgba( white, 0.65 ),
-};
-
+// Should match packages/components/src/utils/theme-variables.scss
 const THEME = {
 	accent: ADMIN.theme,
 	accentDarker10: ADMIN.themeDark10,
+	background: `var(--wp-components-color-background, ${ white })`,
+	foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+	gray: {
+		900: `var(--wp-components-color-gray-900, ${ GRAY[ 900 ] })`,
+		800: `var(--wp-components-color-gray-800, ${ GRAY[ 800 ] })`,
+		700: `var(--wp-components-color-gray-700, ${ GRAY[ 700 ] })`,
+		600: `var(--wp-components-color-gray-600, ${ GRAY[ 600 ] })`,
+		400: `var(--wp-components-color-gray-400, ${ GRAY[ 400 ] })`,
+		300: `var(--wp-components-color-gray-300, ${ GRAY[ 300 ] })`,
+		200: `var(--wp-components-color-gray-200, ${ GRAY[ 200 ] })`,
+		100: `var(--wp-components-color-gray-100, ${ GRAY[ 100 ] })`,
+	},
+};
+
+const UI = {
+	background: THEME.background,
+	backgroundDisabled: THEME.gray[ 100 ],
+	border: THEME.gray[ 600 ],
+	borderHover: THEME.gray[ 700 ],
+	borderFocus: THEME.accent,
+	borderDisabled: THEME.gray[ 400 ],
+	textDisabled: THEME.gray[ 600 ],
+	textDark: white, // TODO: Make this Theme-ready
+
+	// Matches @wordpress/base-styles
+	darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ), // TODO: Make this work with CSS vars
+	lightGrayPlaceholder: rgba( white, 0.65 ), // TODO: Make this work with CSS vars
 };
 
 export const COLORS = Object.freeze( {
 	/**
 	 * The main gray color object.
+	 *
+	 * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
 	 */
-	gray: GRAY,
+	gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
 	white,
 	alert: ALERT,
+	/**
+	 * Theme-ready variables with fallbacks.
+	 *
+	 * Prefer semantic aliases in `COLORS.ui` when applicable.
+	 */
 	theme: THEME,
+	/**
+	 * Semantic aliases (prefer these over raw variables when applicable).
+	 */
 	ui: UI,
 } );