fix: Centralise atom code, fix media query specificity (#106)

lib/atoms/border/makeBorderColor.ts

@@ -0,0 +1,11 @@
+export interface BorderColorParams {
+  standard: string;
+  formAccent: string;
+  critical: string;
+}
+
+export default ({ standard, formAccent, critical }: BorderColorParams) => ({
+  '.borderColor_standard': { borderColor: standard },
+  '.borderColor_formAccent': { borderColor: formAccent },
+  '.borderColor_critical': { borderColor: critical }
+});

lib/atoms/border/makeBorderRadius.ts

@@ -0,0 +1,7 @@
+export interface BorderRadiusParams {
+  standard: string;
+}
+
+export default ({ standard }: BorderRadiusParams) => ({
+  '.borderRadius_standard': { borderRadius: standard }
+});

lib/atoms/border/makeBorderWidths.ts

@@ -0,0 +1,13 @@
+import { Tokens } from '../../themes/theme';
+
+import mapObject from '../utils/mapObject';
+import { px } from '../utils/toUnit';
+
+export default (tokens: Tokens) =>
+  mapObject(tokens.borderWidth, (key, value) => [
+    `.borderWidth_${key}`,
+    {
+      borderStyle: 'solid',
+      borderWidth: px(value)
+    }
+  ]);

lib/atoms/color/makeBackgroundColors.ts

@@ -0,0 +1,30 @@
+export interface BackgroundColorParms {
+  input: string;
+  inputDisabled: string;
+  formAccent: string;
+  formAccentDisabled: string;
+  selection: string;
+  info: string;
+  card: string;
+  critical: string;
+}
+
+export default ({
+  input,
+  inputDisabled,
+  formAccent,
+  formAccentDisabled,
+  selection,
+  info,
+  card,
+  critical
+}: BackgroundColorParms) => ({
+  '.backgroundColor_input': { background: input },
+  '.backgroundColor_inputDisabled': { background: inputDisabled },
+  '.backgroundColor_formAccent': { background: formAccent },
+  '.backgroundColor_formAccentDisabled': { background: formAccentDisabled },
+  '.backgroundColor_selection': { background: selection },
+  '.backgroundColor_info': { background: info },
+  '.backgroundColor_card': { background: card },
+  '.backgroundColor_critical': { background: critical }
+});

lib/atoms/color/makeColors.ts

@@ -0,0 +1,40 @@
+import { Css } from '../types';
+
+export interface ColorParams {
+  link: string;
+  linkHover?: string;
+  black: string;
+  white: string;
+  critical: string;
+  positive: string;
+  secondary: string;
+  formAccent: string;
+  neutral: string;
+}
+export default ({
+  link,
+  linkHover,
+  black,
+  white,
+  critical,
+  positive,
+  secondary,
+  formAccent,
+  neutral
+}: ColorParams): Css => ({
+  '.color_link': {
+    color: link,
+    '&:hover,&:focus': linkHover
+      ? {
+          color: linkHover
+        }
+      : {}
+  },
+  '.color_black': { color: black },
+  '.color_white': { color: white },
+  '.color_critical': { color: critical },
+  '.color_positive': { color: positive },
+  '.color_secondary': { color: secondary },
+  '.color_formAccent': { color: formAccent },
+  '.color_neutral': { color: neutral }
+});

lib/atoms/color/makeFills.ts

@@ -0,0 +1,26 @@
+import { Css } from '../types';
+
+export interface FillParams {
+  formAccent: string;
+  formAccentDisabled: string;
+  critical: string;
+  positive: string;
+  secondary: string;
+  white: string;
+}
+export default ({
+  formAccent,
+  formAccentDisabled,
+  critical,
+  positive,
+  secondary,
+  white
+}: FillParams): Css => ({
+  '.fill_currentColor': { fill: 'currentColor' },
+  '.fill_formAccent': { fill: formAccent },
+  '.fill_formAccentDisabled': { fill: formAccentDisabled },
+  '.fill_critical': { fill: critical },
+  '.fill_positive': { fill: positive },
+  '.fill_secondary': { fill: secondary },
+  '.fill_white': { fill: white }
+});

lib/atoms/font/makeFontFamily.ts

@@ -0,0 +1,8 @@
+export interface FontFamilyParams {
+  fontFamily: string;
+}
+export default ({ fontFamily }: FontFamilyParams) => ({
+  '.fontFamily_text': {
+    fontFamily
+  }
+});

lib/themes/utils/fontSizeRulesForTokens.js → lib/atoms/font/makeFontSizes.ts

@@ -1,11 +1,13 @@
 import merge from 'lodash/merge';
-import alignTextToGrid from './alignTextToGrid';
-import createResponsiveRules from './createResponsiveRules';
-import { px } from './toUnit';
+import alignTextToGrid from '../utils/alignTextToGrid';
+import createResponsiveRules from '../utils/createResponsiveRules';
+import { px } from '../utils/toUnit';
 import each from 'lodash/each';
+import { Tokens } from 'lib/themes/theme';
+
+export default (tokens: Tokens) => {
+  const rules: Array<{ [index: string]: object }> = [];
 
-export default ({ tokens }) => {
-  const rules = [];
   each(
     {
       ...tokens.text,
@@ -33,7 +35,7 @@ export default ({ tokens }) => {
       rules.push(
         createResponsiveRules({
           tokens,
-          selector: `.${typeName}`,
+          selector: `.fontSize_${typeName}`,
           mobileRules,
           desktopRules
         })
@@ -51,7 +53,7 @@ export default ({ tokens }) => {
         rules.push(
           createResponsiveRules({
             tokens,
-            selector: '.interaction',
+            selector: '.fontSize_interaction',
             mobileRules: {
               ...mobileRules,
               paddingTop: mobileInteractionPadding,

lib/atoms/font/makeFontWeights.ts

@@ -0,0 +1,11 @@
+export interface FontWeightParams {
+  regular: string;
+  medium: string;
+  strong: string;
+}
+
+export default ({ regular, medium, strong }: FontWeightParams) => ({
+  '.fontWeight_regular': { fontWeight: regular },
+  '.fontWeight_medium': { fontWeight: medium },
+  '.fontWeight_strong': { fontWeight: strong }
+});

lib/atoms/makeAtoms.ts

@@ -0,0 +1,70 @@
+import merge from 'lodash/merge';
+import partition from 'lodash/partition';
+import pick from 'lodash/pick';
+
+import { Tokens } from '../themes/theme';
+import { Css } from './types';
+
+import makeColors, { ColorParams } from './color/makeColors';
+import makeDisplayRules from './makeDisplayRules';
+import makeTransitions from './makeTransitions';
+import makeFontWeight, { FontWeightParams } from './font/makeFontWeights';
+import makeFontFamily, { FontFamilyParams } from './font/makeFontFamily';
+import makeBorderColor, { BorderColorParams } from './border/makeBorderColor';
+import makeBorderRadius, {
+  BorderRadiusParams
+} from './border/makeBorderRadius';
+import makeBackgroundColors, {
+  BackgroundColorParms
+} from './color/makeBackgroundColors';
+import makeBoxShadows, { BoxShadowParams } from './makeBoxShadows';
+import makePadding from './makePadding';
+import makeMargins from './makeMargins';
+import makeTransforms from './makeTransforms';
+import makeSizes from './makeSizes';
+import makeFontSizes from './font/makeFontSizes';
+import makeFills, { FillParams } from './color/makeFills';
+import makeBorderWidths from './border/makeBorderWidths';
+
+const makeAtoms = (
+  tokens: Tokens,
+  colors: ColorParams,
+  fills: FillParams,
+  fontFamily: FontFamilyParams,
+  borderColor: BorderColorParams,
+  borderRadius: BorderRadiusParams,
+  boxShadows: BoxShadowParams,
+  fontWeights: FontWeightParams,
+  backgroundColor: BackgroundColorParms
+): Css => {
+  const rules = merge(
+    makeFontSizes(tokens),
+    makeBackgroundColors(backgroundColor),
+    makeBorderColor(borderColor),
+    makeBorderRadius(borderRadius),
+    makeBorderWidths(tokens),
+    makeBoxShadows(boxShadows),
+    makeColors(colors),
+    makeFills(fills),
+    makeFontFamily(fontFamily),
+    makeFontWeight(fontWeights),
+    makeSizes(tokens),
+    makeMargins(tokens),
+    makePadding(tokens),
+    makeDisplayRules(tokens),
+    makeTransforms(tokens),
+    makeTransitions()
+  );
+
+  const [queryRules, regularRules] = partition(Object.keys(rules), ruleName =>
+    ruleName.startsWith('@')
+  );
+
+  // Include media queries last to ensure higher specificity
+  return {
+    ...pick(rules, regularRules),
+    ...pick(rules, queryRules)
+  };
+};
+
+export default makeAtoms;

lib/atoms/makeBoxShadows.ts

@@ -0,0 +1,7 @@
+export interface BoxShadowParams {
+  focusColor: string;
+}
+
+export default ({ focusColor }: BoxShadowParams) => ({
+  '.boxShadow_focus': { boxShadow: `0 0 0 1px ${focusColor}` }
+});

lib/atoms/makeDisplayRules.ts

@@ -0,0 +1,29 @@
+import mapKeys from 'lodash/mapKeys';
+
+import { Tokens } from '../themes/theme';
+import createDesktopRules from './utils/makeDesktopRules';
+
+const defaultDisplayPrefix = '.display_';
+const desktopDisplayPrefix = '.displayDesktop_';
+
+const displayRules = {
+  block: { display: 'block' },
+  inline: { display: 'inline' },
+  none: { display: 'none' },
+  inlineBlock: { display: 'inline-block' },
+  flex: { display: 'flex' }
+};
+
+const defaultDisplayRules = mapKeys(
+  displayRules,
+  (value, key) => `${defaultDisplayPrefix}${key}`
+);
+const desktopDisplayRules = mapKeys(
+  displayRules,
+  (value, key) => `${desktopDisplayPrefix}${key}`
+);
+
+export default (tokens: Tokens) => ({
+  ...defaultDisplayRules,
+  ...createDesktopRules({ tokens, css: desktopDisplayRules })
+});

lib/atoms/makeMargins.ts

@@ -0,0 +1,19 @@
+import { Tokens } from '../themes/theme';
+import rowSpacingForCssRule from './utils/rowSpacingForCssRule';
+import columnSpacingForCssRule from './utils/columnSpacingForCssRule';
+import makeDesktopRules from './utils/makeDesktopRules';
+
+const makeMarginRules = (tokens: Tokens, suffix = '') => ({
+  ...rowSpacingForCssRule(`marginTop${suffix}`, 'marginTop', tokens),
+  ...columnSpacingForCssRule(`marginRight${suffix}`, 'marginRight', tokens),
+  ...rowSpacingForCssRule(`marginBottom${suffix}`, 'marginBottom', tokens),
+  ...columnSpacingForCssRule(`marginLeft${suffix}`, 'marginLeft', tokens)
+});
+
+export default (tokens: Tokens) => ({
+  ...makeMarginRules(tokens),
+  ...makeDesktopRules({
+    tokens,
+    css: makeMarginRules(tokens, 'Desktop')
+  })
+});

lib/atoms/makePadding.ts

@@ -0,0 +1,19 @@
+import { Tokens } from '../themes/theme';
+import rowSpacingForCssRule from './utils/rowSpacingForCssRule';
+import columnSpacingForCssRule from './utils/columnSpacingForCssRule';
+import makeDesktopRules from './utils/makeDesktopRules';
+
+const makePaddingRules = (tokens: Tokens, suffix = '') => ({
+  ...rowSpacingForCssRule(`paddingTop${suffix}`, 'paddingTop', tokens),
+  ...columnSpacingForCssRule(`paddingRight${suffix}`, 'paddingRight', tokens),
+  ...rowSpacingForCssRule(`paddingBottom${suffix}`, 'paddingBottom', tokens),
+  ...columnSpacingForCssRule(`paddingLeft${suffix}`, 'paddingLeft', tokens)
+});
+
+export default (tokens: Tokens) => ({
+  ...makePaddingRules(tokens),
+  ...makeDesktopRules({
+    tokens,
+    css: makePaddingRules(tokens, 'Desktop')
+  })
+});

lib/themes/utils/sizeRulesForTokens.js → lib/atoms/makeSizes.ts

@@ -1,17 +1,18 @@
 import merge from 'lodash/merge';
-import createResponsiveRules from './createResponsiveRules';
-import { px } from './toUnit';
+import each from 'lodash/each';
 
-export default ({ tokens, property }) => {
-  const rules = [];
+import createResponsiveRules from './utils/createResponsiveRules';
+import { px } from './utils/toUnit';
+import { Tokens } from 'lib/themes/theme';
 
-  Object.keys(tokens.text).forEach(typeName => {
-    const type = tokens.text[typeName];
+const makeSizeRules = (tokens: Tokens, property: string) => {
+  const rules: Array<{ [index: string]: object }> = [];
 
+  each(tokens.text, (type, typeName) => {
     rules.push(
       createResponsiveRules({
         tokens,
-        selector: `.${typeName}Text`,
+        selector: `.${property}_${typeName}Text`,
         mobileRules: {
           [property]: px(type.mobile.rows * tokens.rowHeight)
         },
@@ -24,7 +25,7 @@ export default ({ tokens, property }) => {
     rules.push(
       createResponsiveRules({
         tokens,
-        selector: `.${typeName}TextInline`,
+        selector: `.${property}_${typeName}TextInline`,
         mobileRules: {
           [property]: px(type.mobile.size)
         },
@@ -37,3 +38,6 @@ export default ({ tokens, property }) => {
 
   return merge({}, ...rules);
 };
+
+export default (tokens: Tokens) =>
+  merge({}, makeSizeRules(tokens, 'height'), makeSizeRules(tokens, 'width'));