Added custom media definitions

Property	Value
description	Added custom media definitions and MAC font tokens.
stack	Bricks
variant	base
version	1.1.0
type	Create

@custom-media is an at-rule, so it's defined at the top level, not in :root.

Bricks doesn't support @custom-media rules yet.

Etch

Add under Style Manager > Custom Media Definitions.

/* Down breakpoint media queries */
@custom-media --mac-xs  (width < to-rem(360px));
@custom-media --mac-s   (width < to-rem(480px));
@custom-media --mac-m   (width < to-rem(768px));
@custom-media --mac-l   (width < to-rem(992px));
@custom-media --mac-xl  (width < to-rem(1366px));
@custom-media --mac-2xl (width < to-rem(1600px));
@custom-media --mac-3xl (width < to-rem(1920px));
@custom-media --mac-4xl (width < to-rem(2560px));
@custom-media --mac-5xl (width < to-rem(3840px));

/* Up breakpoint media queries */
@custom-media --mac-up-xs  (width >= to-rem(360px));
@custom-media --mac-up-s   (width >= to-rem(480px));
@custom-media --mac-up-m   (width >= to-rem(768px));
@custom-media --mac-up-l   (width >= to-rem(992px));
@custom-media --mac-up-xl  (width >= to-rem(1366px));
@custom-media --mac-up-2xl (width >= to-rem(1600px));
@custom-media --mac-up-3xl (width >= to-rem(1920px));
@custom-media --mac-up-4xl (width >= to-rem(2560px));
@custom-media --mac-up-5xl (width >= to-rem(3840px));

Add under Style Manager > Stylesheets > Main.

:root {
  /* Font fallback tokens */
  --mac-font-fallback-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --mac-font-fallback-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mac-font-fallback-deco: 'Brush Script MT', 'Segoe Script', cursive;
  --mac-font-fallback-mono: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, Monaco, 'Courier New', monospace;

  /* Font family tokens */
  --mac-font-body: 'MAC Body', var(--mac-font-fallback-sans);
  --mac-font-head: 'MAC Head', var(--mac-font-fallback-sans);
  --mac-font-deco: 'MAC Deco', var(--mac-font-fallback-sans);
  --mac-font-mono: 'MAC Mono', var(--mac-font-fallback-mono);
}

Bricks

Add under Theme Styles > Stylesheet.

/* Down breakpoint media queries */
/*
@custom-media --mac-xs  (width < 360px);
@custom-media --mac-s   (width < 480px);
@custom-media --mac-m   (width < 768px);
@custom-media --mac-l   (width < 992px);
@custom-media --mac-xl  (width < 1366px);
@custom-media --mac-2xl (width < 1600px);
@custom-media --mac-3xl (width < 1920px);
@custom-media --mac-4xl (width < 2560px);
@custom-media --mac-5xl (width < 3840px);
*/

/* Up breakpoint media queries */
/*
@custom-media --mac-up-xs  (width >= 360px);
@custom-media --mac-up-s   (width >= 480px);
@custom-media --mac-up-m   (width >= 768px);
@custom-media --mac-up-l   (width >= 992px);
@custom-media --mac-up-xl  (width >= 1366px);
@custom-media --mac-up-2xl (width >= 1600px);
@custom-media --mac-up-3xl (width >= 1920px);
@custom-media --mac-up-4xl (width >= 2560px);
@custom-media --mac-up-5xl (width >= 3840px);
*/

:root {
  /* Font fallback tokens */
  --mac-font-fallback-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --mac-font-fallback-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mac-font-fallback-deco: 'Brush Script MT', 'Segoe Script', cursive;
  --mac-font-fallback-mono: 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, Monaco, 'Courier New', monospace;

  /* Font family tokens */
  --mac-font-body: 'MAC Body', var(--mac-font-fallback-sans);
  --mac-font-head: 'MAC Head', var(--mac-font-fallback-sans);
  --mac-font-deco: 'MAC Deco', var(--mac-font-fallback-sans);
  --mac-font-mono: 'MAC Mono', var(--mac-font-fallback-mono);
}

Etch​

Bricks​

Etch

Bricks