Scaffold theme editor

app/soapbox/features/theme-editor/components/palette.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import compareId from 'soapbox/compare_id';
+import { HStack } from 'soapbox/components/ui';
+import ColorWithPicker from 'soapbox/features/soapbox_config/components/color-with-picker';
+
+interface ColorGroup {
+  [tint: string]: string,
+}
+
+interface IPalette {
+  palette: ColorGroup,
+}
+
+/** Editable color palette. */
+const Palette: React.FC<IPalette> = ({ palette }) => {
+  const tints = Object.keys(palette).sort(compareId);
+
+  const result = tints.map(tint => {
+    const hex = palette[tint];
+
+    return (
+      <ColorWithPicker
+        className='w-full h-full'
+        value={hex}
+        onChange={() => {}}
+      />
+    );
+  });
+
+  return (
+    <HStack className='w-full h-8 rounded-md overflow-hidden'>
+      {result}
+    </HStack>
+  );
+};
+
+export {
+  Palette as default,
+  ColorGroup,
+};

app/soapbox/features/theme-editor/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import List, { ListItem } from 'soapbox/components/list';
+import { Column } from 'soapbox/components/ui';
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import Palette, { ColorGroup } from './components/palette';
+
+const messages = defineMessages({
+  title: { id: 'admin.theme.title', defaultMessage: 'Theme' },
+});
+
+interface IThemeEditor {
+}
+
+/** UI for editing Tailwind theme colors. */
+const ThemeEditor: React.FC<IThemeEditor> = () => {
+  const intl = useIntl();
+  const soapbox = useSoapboxConfig();
+  const colors = soapbox.colors.toJS();
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <List>
+        <PaletteListItem
+          label='Primary'
+          palette={colors.primary as any}
+        />
+
+        <PaletteListItem
+          label='Secondary'
+          palette={colors.secondary as any}
+        />
+
+        <PaletteListItem
+          label='Accent'
+          palette={colors.accent as any}
+        />
+
+        <PaletteListItem
+          label='Gray'
+          palette={colors.gray as any}
+        />
+
+        <PaletteListItem
+          label='Success'
+          palette={colors.success as any}
+        />
+
+        <PaletteListItem
+          label='Danger'
+          palette={colors.danger as any}
+        />
+      </List>
+    </Column>
+  );
+};
+
+interface IPaletteListItem {
+  label: React.ReactNode,
+  palette: ColorGroup,
+}
+
+/** Palette editor inside a ListItem. */
+const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette }) => {
+  return (
+    <ListItem label={<div className='w-20'>{label}</div>}>
+      <Palette palette={palette} />
+    </ListItem>
+  );
+};
+
+export default ThemeEditor;