feat(Layout): add container sizing tokens

packages/layout/src/index.js

@@ -163,6 +163,20 @@ export const container = [
   container04,
   container05,
 ];
+export const sizeXSmall = rem(24);
+export const sizeSmall = rem(32);
+export const sizeMedium = rem(40);
+export const sizeLarge = rem(48);
+export const sizeXLarge = rem(64);
+export const size2XLarge = rem(80);
+export const sizes = {
+  XSmall: sizeXSmall,
+  Small: sizeSmall,
+  Medium: sizeMedium,
+  Large: sizeLarge,
+  XLarge: sizeXLarge,
+  '2XLarge': size2XLarge,
+};
 
 // Icon
 export const iconSize01 = '1rem';

packages/layout/src/tokens.js

@@ -43,6 +43,12 @@ export const unstable_tokens = [
   'container03',
   'container04',
   'container05',
+  'sizeXSmall',
+  'sizeSmall',
+  'sizeMedium',
+  'sizeLarge',
+  'sizeXLarge',
+  'size2XLarge',
 
   // Icon sizes
   'iconSize01',

packages/layout/tasks/build.js

@@ -21,6 +21,7 @@ const {
   spacing,
   layout,
   fluidSpacing,
+  sizes,
 } = require('../lib');
 
 async function build() {
@@ -54,6 +55,42 @@ async function build() {
         return buildTokenFile(container, 'container');
       },
     },
+    {
+      filepath: path.join(SCSS_DIR, '_size.scss'),
+      builder() {
+        const FILE_BANNER = t.Comment(` Code generated by @carbon/layout. DO NOT EDIT.
+
+ Copyright IBM Corp. 2018, 2019
+
+ This source code is licensed under the Apache-2.0 license found in the
+ LICENSE file in the root directory of this source tree.
+`);
+        const convert = {
+          xSmall: 'xs',
+          small: 'sm',
+          medium: 'md',
+          large: 'lg',
+          xLarge: 'xl',
+          '2XLarge': '2xl',
+        };
+
+        const comment = t.Comment(`/ @type Number
+/ @access public
+/ @group @carbon/layout`);
+
+        return t.StyleSheet([
+          FILE_BANNER,
+          t.Newline(),
+          comment,
+          ...Object.entries(sizes).map(([name, value]) => {
+            return t.Assignment({
+              id: t.Identifier(`size-${convert[name]}`),
+              init: t.SassValue(value),
+            });
+          }),
+        ]);
+      },
+    },
     {
       filepath: path.join(SCSS_DIR, '_icon-size.scss'),
       builder() {

packages/themes/src/white.js

@@ -304,6 +304,12 @@ export {
   container03,
   container04,
   container05,
+  sizeXSmall,
+  sizeSmall,
+  sizeMedium,
+  sizeLarge,
+  sizeXLarge,
+  size2XLarge,
   // Icon sizes
   iconSize01,
   iconSize02,