ctms-common-components 1.0.1

package/src/theme/foundations/sizes.js

@@ -0,0 +1,60 @@
+const sizes = {
+  1: '0.25rem',
+  2: '0.5rem',
+  3: '0.875rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  7: '1.75rem',
+  8: '2rem',
+  9: '2.25rem',
+  10: '2.5rem',
+  12: '3rem',
+  14: '3.5rem',
+  16: '4rem',
+  20: '5rem',
+  24: '6rem',
+  28: '7rem',
+  32: '8rem',
+  36: '9rem',
+  40: '10rem',
+  44: '11rem',
+  48: '12rem',
+  52: '13rem',
+  56: '14rem',
+  60: '15rem',
+  64: '16rem',
+  72: '18rem',
+  80: '20rem',
+  96: '24rem',
+  px: '1px',
+  0.5: '0.125rem',
+  1.5: '0.375rem',
+  2.5: '0.625rem',
+  3.5: '0.875rem',
+  max: 'max-content',
+  min: 'min-content',
+  full: '100%',
+  '3xs': '14rem',
+  '2xs': '16rem',
+  xs: '20rem',
+  sm: '24rem',
+  md: '28rem',
+  lg: '32rem',
+  xl: '36rem',
+  '2xl': '42rem',
+  '3xl': '48rem',
+  '4xl': '56rem',
+  '5xl': '64rem',
+  '6xl': '72rem',
+  '7xl': '80rem',
+  '8xl': '90rem',
+  container: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px'
+  }
+};
+
+export default sizes;

package/src/theme/foundations/spacing.js

@@ -0,0 +1,37 @@
+const spacing = {
+  1: '0.25rem',
+  2: '0.5rem',
+  3: '0.75rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  7: '1.75rem',
+  8: '2rem',
+  9: '2.25rem',
+  10: '2.5rem',
+  12: '3rem',
+  14: '3.5rem',
+  16: '4rem',
+  20: '5rem',
+  24: '6rem',
+  28: '7rem',
+  32: '8rem',
+  36: '9rem',
+  40: '10rem',
+  44: '11rem',
+  48: '12rem',
+  52: '13rem',
+  56: '14rem',
+  60: '15rem',
+  64: '16rem',
+  72: '18rem',
+  80: '20rem',
+  96: '24rem',
+  px: '1px',
+  0.5: '0.125rem',
+  1.5: '0.375rem',
+  2.5: '0.625rem',
+  3.5: '0.875rem'
+};
+
+export default spacing;

package/src/theme/foundations/transition.js

@@ -0,0 +1,25 @@
+const transition = {
+  property: {
+    common: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+    colors: 'background-color, border-color, color, fill, stroke',
+    dimensions: 'width, height',
+    position: 'left, right, top, bottom',
+    background: 'background-color, background-image, background-position'
+  },
+  easing: {
+    'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
+  },
+  duration: {
+    'ultra-fast': '50ms',
+    faster: '100ms',
+    fast: '150ms',
+    normal: '200ms',
+    slow: '300ms',
+    slower: '400ms',
+    'ultra-slow': '500ms'
+  }
+};
+
+export default transition;

package/src/theme/foundations/typography.js

@@ -0,0 +1,55 @@
+const typography = {
+  letterSpacing: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em'
+  },
+  lineHeights: {
+    3: '.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    9: '2.25rem',
+    10: '2.5rem',
+    normal: 'normal',
+    none: '1',
+    shorter: '1.25',
+    short: '1.375',
+    base: '1.5',
+    tall: '1.625',
+    taller: '2'
+  },
+  fontWeights: {
+    hairline: '100',
+    thin: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+    extrabold: '800',
+    black: '900'
+  },
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '3.75rem',
+    '7xl': '4.5rem',
+    '8xl': '6rem',
+    '9xl': '8rem'
+  }
+};
+
+export default typography;

package/src/theme/foundations/z-index.js

@@ -0,0 +1,17 @@
+const zIndices = {
+  hide: -1,
+  auto: 'auto',
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800
+};
+
+export default zIndices;

package/src/theme/index.js

@@ -0,0 +1,20 @@
+import { extendTheme }from '@emotion/react';
+import foundations from './foundations';
+import componentStyles from './components';
+
+const direction = 'ltr';
+
+const config = {
+  useSystemColorMode: false,
+  initialColorMode: 'light',
+  cssVarPrefix: 'ksm'
+};
+
+export const themeStyles = {
+  direction,
+  ...foundations,
+  config,
+  ...componentStyles
+};
+
+export default extendTheme(themeStyles);

package/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/lib.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+    libraryTarget: 'commonjs2'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+  externals: {
+    react: 'commonjs react'
+  }
+};