feat: component theming

core/lib/makeswift/components/site-theme/layouts/index.ts

@@ -0,0 +1,5 @@
+import { section } from './section';
+
+export default {
+  section,
+};

core/lib/makeswift/components/site-theme/layouts/section.ts

@@ -0,0 +1,21 @@
+import { Number, Shape } from '@makeswift/runtime/controls';
+
+const widthGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Inline,
+    type: {
+      medium: Number({ label: 'Medium', suffix: 'px', defaultValue: 768 }),
+      lg: Number({ label: 'Large', suffix: 'px', defaultValue: 1024 }),
+      xl: Number({ label: 'XL', suffix: 'px', defaultValue: 1200 }),
+      '2xl': Number({ label: '2XL', suffix: 'px', defaultValue: 1536 }),
+    },
+  });
+
+export const section = Shape({
+  label: 'Section',
+  layout: Shape.Layout.Popover,
+  type: {
+    maxWidth: widthGroup('Max width'),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/accordion.ts

@@ -0,0 +1,25 @@
+import { Color, Font, Shape } from '@makeswift/runtime/controls';
+
+const colorGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Inline,
+    type: {
+      titleText: Color({ label: 'Title text' }),
+      titleTextHover: Color({ label: 'Title text hover' }),
+      titleIcon: Color({ label: 'Title icon' }),
+      titleIconHover: Color({ label: 'Title icon hover' }),
+      contentText: Color({ label: 'Content text' }),
+    },
+  });
+
+export const accordion = Shape({
+  label: 'Accordion',
+  layout: Shape.Layout.Popover,
+  type: {
+    titleFont: Font({ label: 'Title font', variant: false }),
+    contentFont: Font({ label: 'Content font', variant: false }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/banner.ts

@@ -0,0 +1,22 @@
+import { Color, Shape } from '@makeswift/runtime/controls';
+
+const closeButton = Shape({
+  label: 'Close button',
+  type: {
+    icon: Color({ label: 'Icon' }),
+    iconHover: Color({ label: 'Icon hover' }),
+    background: Color({ label: 'Background' }),
+    backgroundHover: Color({ label: 'Background hover' }),
+  },
+});
+
+export const banner = Shape({
+  label: 'Banner',
+  layout: Shape.Layout.Popover,
+  type: {
+    background: Color({ label: 'Background' }),
+    text: Color({ label: 'Text' }),
+    focus: Color({ label: 'Focus' }),
+    close: closeButton,
+  },
+});

core/lib/makeswift/components/site-theme/primitives/button.ts

@@ -0,0 +1,26 @@
+import { Color, Font, Shape } from '@makeswift/runtime/controls';
+
+const colorGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Inline,
+    type: {
+      background: Color({ label: 'Background' }),
+      backgroundHover: Color({ label: 'Background hover' }),
+      foreground: Color({ label: 'Foreground' }),
+      border: Color({ label: 'Border' }),
+    },
+  });
+
+export const button = Shape({
+  label: 'Button',
+  layout: Shape.Layout.Popover,
+  type: {
+    font: Font({ label: 'Font', variant: false }),
+    primary: colorGroup('Primary'),
+    secondary: colorGroup('Secondary'),
+    tertiary: colorGroup('Tertiary'),
+    ghost: colorGroup('Ghost'),
+    focus: Color({ label: 'Focus' }),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/card.ts

@@ -0,0 +1,23 @@
+import { Color, Number, Shape } from '@makeswift/runtime/controls';
+
+const colorGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Inline,
+    type: {
+      background: Color({ label: 'Background' }),
+      text: Color({ label: 'Text' }),
+      icon: Color({ label: 'Icon' }),
+    },
+  });
+
+export const card = Shape({
+  label: 'Card',
+  layout: Shape.Layout.Popover,
+  type: {
+    borderRadius: Number({ label: 'Border radius', suffix: 'px', defaultValue: 16 }),
+    focus: Color({ label: 'Focus' }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/carousel.ts

@@ -0,0 +1,21 @@
+import { Color, Shape } from '@makeswift/runtime/controls';
+
+const colorGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Inline,
+    type: {
+      button: Color({ label: 'Button' }),
+      scrollbar: Color({ label: 'Scrollbar' }),
+    },
+  });
+
+export const carousel = Shape({
+  label: 'Carousel',
+  layout: Shape.Layout.Popover,
+  type: {
+    focus: Color({ label: 'Focus' }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/index.ts

@@ -0,0 +1,21 @@
+import { accordion } from './accordion';
+import { banner } from './banner';
+import { button } from './button';
+import { card } from './card';
+import { carousel } from './carousel';
+import { logo } from './logo';
+import { nav } from './nav';
+import { priceLabel } from './price-label';
+import { productCard } from './product-card';
+
+export default {
+  accordion,
+  banner,
+  button,
+  card,
+  carousel,
+  logo,
+  nav,
+  priceLabel,
+  productCard,
+};

core/lib/makeswift/components/site-theme/primitives/logo.ts

@@ -0,0 +1,11 @@
+import { Color, Font, Shape } from '@makeswift/runtime/controls';
+
+export const logo = Shape({
+  label: 'Logo',
+  layout: Shape.Layout.Popover,
+  type: {
+    font: Font({ label: 'Font', variant: false }),
+    text: Color({ label: 'Text' }),
+    focus: Color({ label: 'Focus' }),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/nav.ts

@@ -0,0 +1,117 @@
+import { Color, Font, Shape } from '@makeswift/runtime/controls';
+
+const elementGroup = (label: string, { selectable = false }: { selectable?: boolean } = {}) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Popover,
+    type: {
+      font: Font({ label: 'Font', variant: false }),
+      text: Color({ label: 'Text' }),
+      textHover: Color({ label: 'Text hover' }),
+      ...(selectable && {
+        textSelected: Color({ label: 'Text selected' }),
+      }),
+      background: Color({ label: 'Background' }),
+      backgroundHover: Color({ label: 'Background hover' }),
+    },
+  });
+
+const buttonGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Popover,
+    type: {
+      icon: Color({ label: 'Icon' }),
+      iconHover: Color({ label: 'Icon hover' }),
+      background: Color({ label: 'Background' }),
+      backgroundHover: Color({ label: 'Background hover' }),
+    },
+  });
+
+const menuGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Popover,
+    type: {
+      background: Color({ label: 'Background' }),
+      border: Color({ label: 'Border' }),
+      divider: Color({ label: 'Divider' }),
+    },
+  });
+
+const mobile = Shape({
+  label: 'Mobile',
+  layout: Shape.Layout.Popover,
+  type: {
+    background: Color({ label: 'Background' }),
+    divider: Color({ label: 'Divider' }),
+    buttonIcon: Color({ label: 'Button icon' }),
+    link: elementGroup('Link'),
+    subLink: elementGroup('Sub-link'),
+  },
+});
+
+const searchGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Popover,
+    type: {
+      background: Color({ label: 'Background' }),
+      border: Color({ label: 'Border' }),
+      divider: Color({ label: 'Divider' }),
+      icon: Color({ label: 'Icon' }),
+      emptyTitle: Color({ label: 'Empty title' }),
+      emptySubtitle: Color({ label: 'Empty subtitle' }),
+    },
+  });
+
+const searchResultGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Popover,
+    type: {
+      title: Color({ label: 'Title' }),
+      titleFont: Font({ label: 'Title font', variant: false }),
+      link: elementGroup('Link'),
+    },
+  });
+
+const cartCountGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Popover,
+    type: {
+      text: Color({ label: 'Text' }),
+      background: Color({ label: 'Background' }),
+    },
+  });
+
+const localeGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Popover,
+    type: {
+      background: Color({ label: 'Background' }),
+      link: elementGroup('Link', { selectable: true }),
+    },
+  });
+
+export const nav = Shape({
+  label: 'Navigation',
+  layout: Shape.Layout.Popover,
+  type: {
+    background: Color({ label: 'Background' }),
+    floatingBorder: Color({ label: 'Floating border' }),
+    focus: Color({ label: 'Focus' }),
+    link: elementGroup('Link'),
+    group: elementGroup('Group'),
+    subLink: elementGroup('Sub-link'),
+    button: buttonGroup('Button'),
+    menu: menuGroup('Menu'),
+    mobile,
+    search: searchGroup('Search'),
+    searchResult: searchResultGroup('Search result'),
+    cartCount: cartCountGroup('Cart count'),
+    locale: localeGroup('Locale'),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/price-label.ts

@@ -0,0 +1,20 @@
+import { Color, Shape } from '@makeswift/runtime/controls';
+
+const colorGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Inline,
+    type: {
+      text: Color({ label: 'Text' }),
+      saleText: Color({ label: 'Sale text' }),
+    },
+  });
+
+export const priceLabel = Shape({
+  label: 'Price label',
+  layout: Shape.Layout.Popover,
+  type: {
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),
+  },
+});

core/lib/makeswift/components/site-theme/primitives/product-card.ts

@@ -0,0 +1,23 @@
+import { Color, Number, Shape } from '@makeswift/runtime/controls';
+
+const colorGroup = (label: string) =>
+  Shape({
+    label,
+    layout: Shape.Layout.Inline,
+    type: {
+      background: Color({ label: 'Background' }),
+      text: Color({ label: 'Title' }),
+      icon: Color({ label: 'Subtitle' }),
+    },
+  });
+
+export const productCard = Shape({
+  label: 'Product card',
+  layout: Shape.Layout.Popover,
+  type: {
+    borderRadius: Number({ label: 'Border radius', suffix: 'px', defaultValue: 16 }),
+    focus: Color({ label: 'Focus' }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),
+  },
+});

core/lib/makeswift/components/site-theme/sections/footer.ts

@@ -0,0 +1,20 @@
+import { Color, Shape } from '@makeswift/runtime/controls';
+
+export const footer = Shape({
+  label: 'Footer',
+  layout: Shape.Layout.Popover,
+  type: {
+    background: Color({ label: 'Background' }),
+    borderTop: Color({ label: 'Border top' }),
+    borderBottom: Color({ label: 'Border bottom' }),
+    contactTitle: Color({ label: 'Contact title' }),
+    contactText: Color({ label: 'Contact text' }),
+    socialIcon: Color({ label: 'Social icon' }),
+    socialIconHover: Color({ label: 'Social icon hover' }),
+    sectionTitle: Color({ label: 'Section title' }),
+    footerLink: Color({ label: 'Footer link' }),
+    footerLinkHover: Color({ label: 'Footer link hover' }),
+    footerCopyright: Color({ label: 'Footer copyright' }),
+    focus: Color({ label: 'Focus' }),
+  },
+});

core/lib/makeswift/components/site-theme/sections/index.ts

@@ -0,0 +1,7 @@
+import { footer } from './footer';
+import { slideshow } from './slide-show';
+
+export default {
+  footer,
+  slideshow,
+};

core/lib/makeswift/components/site-theme/sections/slide-show.ts

@@ -0,0 +1,21 @@
+import { Color, Font, Shape } from '@makeswift/runtime/controls';
+
+export const slideshow = Shape({
+  label: 'Slideshow',
+  layout: Shape.Layout.Popover,
+  type: {
+    titleFont: Font({ label: 'Title font', variant: false }),
+    descriptionFont: Font({ label: 'Description font', variant: false }),
+    numberFont: Font({ label: 'Number font', variant: false }),
+    title: Color({ label: 'Title' }),
+    description: Color({ label: 'Description' }),
+    number: Color({ label: 'Number' }),
+    background: Color({ label: 'Background' }),
+    mask: Color({ label: 'Mask' }),
+    pagination: Color({ label: 'Pagination' }),
+    playBorder: Color({ label: 'Play border' }),
+    playBorderHover: Color({ label: 'Play border hover' }),
+    playText: Color({ label: 'Play text' }),
+    focus: Color({ label: 'Focus' }),
+  },
+});