@incognia/cosmik 0.0.1

package/src/css/font.css

@@ -0,0 +1,68 @@
+/* Adapted from https://use.typekit.net/jsf0fxl.css */
+
+/* Neue Haas Grotesk Text */
+@font-face {
+  font-family: 'neue-haas-grotesk-text';
+  src: url('https://use.typekit.net/af/0230dd/00000000000000007735bb33/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/0230dd/00000000000000007735bb33/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/0230dd/00000000000000007735bb33/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'neue-haas-grotesk-text';
+  src: url('https://use.typekit.net/af/160664/00000000000000007735bb32/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/160664/00000000000000007735bb32/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/160664/00000000000000007735bb32/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 500;
+}
+
+/* Neue Haas Grotesk Display */
+@font-face {
+  font-family: 'neue-haas-grotesk-display';
+  src: url('https://use.typekit.net/af/99b799/00000000000000007735bb38/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/99b799/00000000000000007735bb38/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/99b799/00000000000000007735bb38/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'neue-haas-grotesk-display';
+  src: url('https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'neue-haas-grotesk-display';
+  src: url('https://use.typekit.net/af/153042/00000000000000007735bb62/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/153042/00000000000000007735bb62/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/153042/00000000000000007735bb62/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 500;
+}

package/src/css/index.css

@@ -0,0 +1,37 @@
+@import './font.css';
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  @apply font-default text-gray-900 leading-20 text-base;
+}
+
+h1,
+h2 {
+  @apply font-display font-medium text-lg text-gray-800 leading-24;
+}
+
+a {
+  @apply text-robinblue-500 font-medium;
+}
+
+a:hover {
+  @apply text-robinblue-600;
+}
+
+a:active {
+  @apply text-robinblue-700;
+}
+
+::placeholder,
+input::placeholder,
+textarea::placeholder {
+  @apply text-gray-700 opacity-100;
+}
+
+label {
+  @apply text-gray-800 text-sm leading-14;
+}

package/src/index.css

@@ -0,0 +1,5 @@
+@import './css/index.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * CONFIGURATION
+ */
+export { default as Colors } from './Colors'
+export { default as tailwindTheme } from './tailwind-theme-config'
+
+/**
+ * COMPONENTS
+ */
+export { Button, buttonVariants } from './Button'

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/tailwind-theme-config.ts

@@ -0,0 +1,240 @@
+import Color from 'color'
+import Colors from './Colors'
+
+export default {
+  screens: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px'
+  },
+  colors: {
+    transparent: 'transparent',
+    white: '#fff',
+    gray: {
+      50: Colors.GRAY_50,
+      100: Colors.GRAY_100,
+      200: Colors.GRAY_200,
+      300: Colors.GRAY_300,
+      400: Colors.GRAY_400,
+      500: Colors.GRAY_500,
+      600: Colors.GRAY_600,
+      700: Colors.GRAY_700,
+      800: Colors.GRAY_800,
+      900: Colors.GRAY_900
+    },
+    green: {
+      50: Colors.GREEN_50,
+      500: Colors.GREEN_500,
+      600: Colors.GREEN_600,
+      700: Colors.GREEN_700,
+      800: Colors.GREEN_800
+    },
+    magenta: {
+      50: Colors.MAGENTA_50,
+      500: Colors.MAGENTA_500,
+      600: Colors.MAGENTA_600,
+      700: Colors.MAGENTA_700
+    },
+    purple: {
+      50: Colors.PURPLE_50,
+      100: Colors.PURPLE_100,
+      200: Colors.PURPLE_200,
+      300: Colors.PURPLE_300,
+      400: Colors.PURPLE_400,
+      500: Colors.PURPLE_500,
+      600: Colors.PURPLE_600,
+      700: Colors.PURPLE_700,
+      800: Colors.PURPLE_800,
+      900: Colors.PURPLE_900
+    },
+    robinblue: {
+      50: Colors.ROBINBLUE_50,
+      100: Colors.ROBINBLUE_100,
+      200: Colors.ROBINBLUE_200,
+      300: Colors.ROBINBLUE_300,
+      400: Colors.ROBINBLUE_400,
+      500: Colors.ROBINBLUE_500,
+      600: Colors.ROBINBLUE_600,
+      700: Colors.ROBINBLUE_700,
+      800: Colors.ROBINBLUE_800,
+      900: Colors.ROBINBLUE_900
+    },
+    yellow: {
+      50: Colors.YELLOW_50,
+      500: Colors.YELLOW_500,
+      600: Colors.YELLOW_600,
+      700: Colors.YELLOW_700
+    },
+    chart: {
+      purple: Colors.CHART_PURPLE,
+      magenta: Colors.CHART_MAGENTA,
+      yellow: Colors.CHART_YELLOW,
+      green: Colors.CHART_GREEN,
+      robinblue: Colors.CHART_ROBINBLUE
+    }
+  },
+  spacing: {
+    0: '0',
+    2: '2px',
+    4: '4px',
+    8: '8px',
+    12: '12px',
+    16: '16px',
+    24: '24px',
+    32: '32px',
+    40: '40px',
+    48: '48px',
+    64: '64px',
+    96: '96px'
+  },
+
+  backgroundColor: (theme: any) => ({
+    transparent: 'transparent',
+    white: theme('colors.white'),
+    gray: {
+      ...theme('colors.gray'),
+      '50-80': Color(theme('colors').gray['50']).alpha(0.8).string(),
+      '900-4': Color(theme('colors').gray['900']).alpha(0.04).string(),
+      '900-8': Color(theme('colors').gray['900']).alpha(0.08).string(),
+      '900-12': Color(theme('colors').gray['900']).alpha(0.12).string(),
+      '900-16': Color(theme('colors').gray['900']).alpha(0.16).string(),
+      '900-24': Color(theme('colors').gray['900']).alpha(0.24).string(),
+      '900-32': Color(theme('colors').gray['900']).alpha(0.32).string()
+    },
+    robinblue: {
+      ...theme('colors.robinblue'),
+      '500-8': Color(theme('colors').robinblue['500']).alpha(0.08).string(),
+      '500-16': Color(theme('colors').robinblue['500']).alpha(0.16).string(),
+      '500-40': Color(theme('colors').robinblue['500']).alpha(0.4).string()
+    },
+    purple: {
+      ...theme('colors.purple'),
+      '700-48': Color(theme('colors').purple['700']).alpha(0.48).string()
+    },
+    green: theme('colors.green'),
+    yellow: theme('colors.yellow'),
+    magenta: theme('colors.magenta'),
+    chart: {
+      ...theme('colors.chart'),
+      'purple-80': Color(theme('colors').chart['purple']).alpha(0.8).string()
+    }
+  }),
+  borderColor: (theme: any) => ({
+    DEFAULT: theme('colors.gray.400'),
+    gray: {
+      400: Color(theme('colors').gray['400']).string(),
+      700: Color(theme('colors').gray['700']).string(),
+      '900-8': Color(theme('colors').gray['900']).alpha(0.08).string(),
+      '900-16': Color(theme('colors').gray['900']).alpha(0.16).string(),
+      '900-24': Color(theme('colors').gray['900']).alpha(0.24).string()
+    },
+    purple: {
+      ...theme('colors.purple'),
+      '900-8': Color(theme('colors').purple['900']).alpha(0.08).string()
+    },
+    robinblue: theme('colors.robinblue'),
+    green: theme('colors.green'),
+    yellow: theme('colors.yellow'),
+    magenta: theme('colors.magenta'),
+    white: theme('colors.white'),
+    transparent: theme('colors.transparent')
+  }),
+  borderRadius: {
+    none: '0',
+    small: '4px',
+    DEFAULT: '8px',
+    full: '9999px'
+  },
+  borderWidth: {
+    DEFAULT: '1px',
+    2: '2px',
+    1: '1px',
+    0: '0'
+  },
+  boxShadow: {
+    100: '0 0 0 1px rgba(61, 63, 62, .16)',
+    200: '0 4px 6px -1px rgba(61, 63, 62, .16)',
+    300: '0 8px 10px -4px rgba(61, 63, 62, .16)',
+    400: '0 16px 24px -6px rgba(61, 63, 62, .16)',
+    500: '0 24px 32px 0px rgba(61, 63, 62, .16)',
+    DEFAULT: '0 4px 16px -1px rgba(61, 63, 62, .16)',
+    'field-hover': 'inset 0 0px 0px 1px rgba(61, 63, 62, .16)',
+    'field-active': '0 0px 0px 1px rgba(61, 63, 62, .48)',
+    'error-field-hover': '0 0px 0px 1px rgba(201, 44, 70, .32)',
+    'error-field-active': '0 0px 0px 1px rgba(201, 44, 70, .48)',
+    'warning-field-hover': '0 0px 0px 1px rgba(176, 88, 0, .32)',
+    'warning-field-active': '0 0px 0px 1px rgba(176, 88, 0, .48)',
+    none: 'none'
+  },
+  fontFamily: {
+    default: ['neue-haas-grotesk-text', 'sans-serif'],
+    display: ['neue-haas-grotesk-display', 'sans-serif'],
+    icons: ['"Material Icons"'],
+    iconsOutlined: ['"Material Icons Outlined"']
+  },
+  fontSize: {
+    sm: '12px',
+    base: '14px',
+    lg: '18px',
+    xl: '20px',
+    'icon-sm': '16px',
+    'icon-md': '20px'
+  },
+  fontWeight: {
+    thin: '200',
+    normal: '400',
+    medium: '500'
+  },
+  letterSpacing: {
+    normal: '0'
+  },
+  lineHeight: {
+    // 12/14, 14/20, 20/24, 24/28
+    14: '14px',
+    20: '20px',
+    24: '24px',
+    // TODO: refactor line heights to use 14/20, 12/18, 18/24
+    18: '18px',
+    26: '26px'
+  },
+  minHeight: (theme: any) => ({
+    0: '0',
+    ...theme('spacing'),
+    full: '100%',
+    screen: '100vh',
+    min: 'min-content',
+    max: 'max-content',
+    fit: 'fit-content'
+  }),
+  minWidth: (theme: any) => ({
+    0: '0',
+    ...theme('spacing'),
+    full: '100%',
+    min: 'min-content',
+    max: 'max-content',
+    fit: 'fit-content'
+  }),
+  opacity: {
+    0: '0',
+    8: '0.08',
+    16: '0.16',
+    24: '0.24',
+    32: '0.32',
+    40: '0.40',
+    48: '0.48',
+    64: '0.64',
+    80: '0.80',
+    100: '1'
+  },
+  textColor: (theme: any) => ({
+    white: theme('colors.white'),
+    gray: theme('colors.gray'),
+    robinblue: theme('colors.robinblue'),
+    green: theme('colors.green'),
+    magenta: theme('colors.magenta'),
+    yellow: theme('colors.yellow'),
+    purple: theme('colors.purple')
+  })
+}

package/tailwind.config.js

@@ -0,0 +1,7 @@
+import tailwindTheme from './src/tailwind-theme-config'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: tailwindTheme
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": false,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "moduleResolution": "Node",
+    "outDir": "dist",
+    "resolveJsonModule": true,
+    "skipLibCheck": false,
+    "strict": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+  },
+  "include": ["src", "src/tailwind-theme-config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import { dependencies, peerDependencies } from './package.json'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      include: 'src/**/*.{ts,tsx}'
+    })
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      formats: ['es', 'cjs'],
+      fileName: format => `index.${format}.js`
+    },
+    rollupOptions: {
+      external: [
+        ...Object.keys(peerDependencies),
+        ...Object.keys(dependencies)
+      ],
+      output: {
+        preserveModules: true,
+        exports: 'named'
+      }
+    },
+    target: 'esnext',
+    sourcemap: true
+  }
+})