feat(core): Add breakpoints to theme

modules/core/react/index.ts

@@ -13,6 +13,7 @@ import spacing, {
 } from './lib/spacing';
 import type, {CanvasType, fontFamily, monoFontFamily, CanvasTypeVariant} from './lib/type';
 import {CSSProperties} from './lib/types';
+import {breakpoints, CanvasBreakpoints, BreakpointKey} from './lib/theming/breakpoints';
 
 const {default: colors, ...semanticColors} = canvasColorsWeb;
 const canvas = {
@@ -31,6 +32,7 @@ export * from './lib/TypeWrappers';
 export * from '@workday/canvas-colors-web';
 export {
   borderRadius,
+  breakpoints,
   colors,
   depth,
   spacing,
@@ -39,6 +41,8 @@ export {
   fontFamily,
   monoFontFamily,
   BrandingColor,
+  BreakpointKey,
+  CanvasBreakpoints,
   CanvasDepth,
   CanvasDepthValue,
   CanvasSpacing,

modules/core/react/lib/theming/breakpoints.ts

@@ -0,0 +1,73 @@
+export enum BreakpointKey {
+  zero = 'zero',
+  s = 's',
+  m = 'm',
+  l = 'l',
+  xl = 'xl',
+}
+
+export type CanvasBreakpoints = {
+  zero: number;
+  s: number;
+  m: number;
+  l: number;
+  xl: number;
+  [key: string]: number;
+};
+
+export const breakpointKeys = ['zero', 's', 'm', 'l', 'xl'];
+
+export const breakpoints: CanvasBreakpoints = {
+  zero: 0,
+  s: 600,
+  m: 960,
+  l: 1280,
+  xl: 1920,
+};
+
+const step = 0.5;
+
+export function up(key: BreakpointKey | Number) {
+  const value =
+    typeof breakpoints[key as BreakpointKey] === 'number' ? breakpoints[key as BreakpointKey] : key;
+  return `@media (min-width:${value}px)`;
+}
+
+export function down(key: BreakpointKey | Number) {
+  if (typeof key === 'number') {
+    return `@media (max-width:${key - step}px)`;
+  }
+
+  const endIndex = breakpointKeys.indexOf(key as BreakpointKey) + 1;
+  const upperbound = breakpoints[breakpointKeys[endIndex]];
+
+  if (endIndex === breakpointKeys.length) {
+    // xl down applies to all sizes
+    return up(BreakpointKey.zero);
+  }
+
+  const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : 0;
+  return `@media (max-width:${value - step}px)`;
+}
+
+export function between(start: BreakpointKey | Number, end: BreakpointKey | Number) {
+  const startValue = typeof start === 'number' ? start : breakpoints[start as BreakpointKey];
+  let endValue;
+
+  if (typeof end === 'number') {
+    endValue = end;
+  } else {
+    const endIndex = breakpointKeys.indexOf(end as BreakpointKey) + 1;
+
+    if (endIndex === breakpointKeys.length) {
+      return up(start);
+    }
+    endValue = breakpoints[breakpointKeys[endIndex]];
+  }
+
+  return `@media (min-width:${startValue}px) and ` + `(max-width:${endValue - step}px)`;
+}
+
+export function only(key: BreakpointKey | Number) {
+  return between(key, key);
+}

modules/core/react/lib/theming/theme.ts

@@ -1,6 +1,7 @@
 import colors from '@workday/canvas-colors-web';
 import deepmerge from 'deepmerge';
 import {CanvasTheme} from './types';
+import {breakpoints, up, down, between, only} from './breakpoints';
 
 /**
  * Considerations:
@@ -41,8 +42,14 @@ export const defaultCanvasTheme: CanvasTheme = {
       focusOutline: colors.blueberry400,
     },
   },
+  breakpoints: {
+    values: breakpoints,
+    up,
+    down,
+    between,
+    only,
+  },
   // Typography
-  // Breakpoints
   // Depth?
 };
 

modules/core/react/lib/theming/types.ts

@@ -1,3 +1,5 @@
+import {CanvasBreakpoints, BreakpointKey} from './breakpoints';
+
 /**
  * A single palette within a Canvas theme
  */
@@ -26,6 +28,13 @@ export interface CanvasTheme {
     alert: CanvasThemePalette;
     [index: string]: CanvasThemePalette | CanvasThemeCommonPalette;
   };
+  breakpoints: {
+    values: CanvasBreakpoints;
+    up: (key: BreakpointKey | Number) => string;
+    down: (key: BreakpointKey | Number) => string;
+    only: (key: BreakpointKey | Number) => string;
+    between: (start: BreakpointKey | Number, end: BreakpointKey | Number) => string;
+  };
 }
 
 /**